All files / select si-select-group-template.directive.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { Directive } from '@angular/core';
 
import { SelectGroup } from './si-select.types';
 
/**
 * The directive allows to template/customize the group option rendering.
 * This requires using the {@link SiSelectSimpleOptionsDirective} to specify options as input.
 *
 * @example
 * ```html
 * <si-select [options]="[
 *   { type: 'group', key: 'g1', label: 'Group 1', options: [
 *     { type: 'option', value: 'g1.i1', label: 'Item 1' },
 *     { type: 'option', value: 'g1.i2', label: 'Item 2' }
 *   ]},
 *   { type: 'group', key: 'g2', label: 'Group 2', options: [
 *     { type: 'option', value: 'g2.i1', label: 'Item 1' }
 *   ]}
 * ]">
 *   <ng-template siSelectGroupTemplate let-group>{{ group.key | uppercase }}</ng-template>
 * </si-select>
 * ```
 */
@Directive({
  selector: '[siSelectGroupTemplate]'
})
export class SiSelectGroupTemplateDirective {
  static ngTemplateContextGuard<T = any>(
    directive: SiSelectGroupTemplateDirective,
    context: unknown
  ): context is { $implicit: SelectGroup<T> } {
    return true;
  }
}