@messaia/cdk 22.0.1-rc.11 → 22.0.1-rc.13

package/fesm2022/messaia-cdk.mjs

@@ -14,7 +14,7 @@ import * as i1$3 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
 import * as i1$6 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { fromEvent, Subject, switchMap, timer, takeUntil as takeUntil$1, filter, map, tap, merge as merge$1, of, BehaviorSubject, firstValueFrom, throwError, distinctUntilChanged, debounceTime, Observable } from 'rxjs';
+import { fromEvent, Subject, switchMap, timer, takeUntil as takeUntil$1, filter, map, tap, merge as merge$1, of, BehaviorSubject, firstValueFrom, throwError, debounceTime, distinctUntilChanged, Observable } from 'rxjs';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
@@ -16097,6 +16097,12 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @type {BehaviorSubject<any[]>}
      */
     _enumChange = new BehaviorSubject([]);
+    /**
+     * @property destroy$
+     * @description Subject used to dispose subscriptions when the component is destroyed.
+     * @type {Subject<void>}
+     */
+    destroy$ = new Subject();
     /**
      * @property _http
      * @description The HTTP client service used to fetch data from an API.
@@ -16309,13 +16315,13 @@ class AbstractSelectFormField extends AbstractMatFormField {
     get params() { return this._params; }
     set params(params) {
         if (params) {
-            // Remove empty parameters
+            /* Remove empty parameters before change comparison. */
             Object.keys(params).forEach((key) => {
                 if (params[key] == null || params[key] == '' || params[key] == 'undefined') {
                     delete params[key];
                 }
             });
-            // Update parameters if they have changed
+            /* Update parameters only when values changed to avoid duplicate endpoint reloads. */
             if (JSON.stringify(this._params) !== JSON.stringify(params)) {
                 this._params = params;
                 this.endpointChanged();
@@ -16422,29 +16428,36 @@ class AbstractSelectFormField extends AbstractMatFormField {
      */
     constructor(controlType) {
         super(controlType);
+        /* Resolve HttpClient only for endpoint-driven mode where options are fetched remotely. */
         if (!this.enum) {
             this._http = inject(HttpClient);
         }
     }
     /**
-     * Lifecycle hook that is called after a component's
-     * view has been fully initialized.
+     * @description Initializes option sources and runtime subscriptions.
+     * For enum-driven controls, metadata is recalculated on parent form changes
+     * so hide and disable callbacks always use the latest form state.
      */
     ngOnInit() {
+        /* Keep filtered options aligned with the initial options input. */
         this.filteredOptions = this.options;
         if (this.enum) {
-            this.filterable = this.enumMetadata != null;
-            this.filteredOptions = this.options = this.enumMetadata ? EnumService.applyMetadata(this.enum, this.enumMetadata, this.context) : EnumService.toArray(this.enum, this.prefix);
-            /* Apply enum filters */
-            if (this._enumFilter && this.options) {
-                this.filteredOptions = this.options = this.options.filter(this._enumFilter);
-            }
-            if (Array.isArray(this.options)) {
-                this.handleItemSelected(this.value);
-            }
+            /* Build initial enum options before wiring reactive refresh subscriptions. */
+            this.rebuildEnumOptions();
+            /* Recalculate metadata-driven options whenever enum filters are updated at runtime. */
+            this._enumChange
+                .pipe(debounceTime(1), takeUntil$1(this.destroy$))
+                .subscribe(_ => this.rebuildEnumOptions());
+            /* Recalculate metadata-driven options whenever the parent form value changes. */
+            this.ngControl?.control?.root?.valueChanges
+                ?.pipe(debounceTime(1), takeUntil$1(this.destroy$))
+                .subscribe(_ => this.rebuildEnumOptions());
         }
         else if (!this.options) {
-            this._endpointChange.pipe(distinctUntilChanged()).pipe(debounceTime(1)).subscribe(_ => {
+            /* Lazy-load options from endpoint only when static options are not provided. */
+            this._endpointChange
+                .pipe(distinctUntilChanged(), debounceTime(1), takeUntil$1(this.destroy$))
+                .subscribe(_ => {
                 let headers = new HttpHeaders();
                 if (this.cache) {
                     headers.set('Client-Cache', 'Yes');
@@ -16462,16 +16475,20 @@ class AbstractSelectFormField extends AbstractMatFormField {
                 /* Get endpoint */
                 let endpoint = typeof this.endpoint === 'function' ? this.endpoint(this) : this.endpoint;
                 if (this._http && endpoint && this.loadData) {
+                    /* Resolve remote options and keep emitted item payloads in sync. */
                     this._http.get(endpoint, { params: params, headers: headers })
                         .pipe(map((x) => this.mapper ? this.mapper(x) : x))
                         .subscribe(x => {
                         this.filteredOptions = this.options = x;
+                        /* Select the first option by default if applicable */
                         if (this.selectFirst && !this.value && this.options?.length > 0) {
                             this.value = this.multiple ? [this.options[0]] : this.options[0][this.optionValueProperty];
                         }
+                        /* Handle item selection for the current value */
                         if (Array.isArray(this.options)) {
                             this.handleItemSelected(this.value);
                         }
+                        /* Write the current value to the form control */
                         super.writeValue(this.value);
                         this.changeDetectorRef.detectChanges();
                     });
@@ -16479,6 +16496,15 @@ class AbstractSelectFormField extends AbstractMatFormField {
             });
         }
     }
+    /**
+     * Disposes runtime subscriptions and delegates common form-field cleanup.
+     */
+    ngOnDestroy() {
+        /* Complete local lifecycle stream used by takeUntil subscriptions. */
+        this.destroy$.next();
+        this.destroy$.complete();
+        super.ngOnDestroy();
+    }
     /**
      * From ControlValueAccessor interface
      * @param value
@@ -16496,6 +16522,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * Method executed when an option changes
      */
     handleChange($event) {
+        /* Emit the raw event first, then emit mapped option item(s). */
         this.onValueChange.emit($event);
         this.handleItemChange($event.value);
     }
@@ -16504,6 +16531,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @param value
      */
     handleItemSelected(value) {
+        /* Map selected primitive values back to option model objects. */
         if (this.multiple) {
             this.onItemSelected.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
@@ -16516,6 +16544,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @param value
      */
     handleItemChange(value) {
+        /* Emit changed option model objects to keep consumers decoupled from raw ids. */
         if (this.multiple) {
             this.onItemChange.emit(this.options.filter((x) => (value || []).includes(x[this.optionValueProperty])));
         }
@@ -16528,6 +16557,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @param $event
      */
     handleFilter($event) {
+        /* Normalize search text and apply the configured option text projection. */
         let searchText = $event?.target?.value ?? '';
         if (this.searchField) {
             this.filteredOptions = this.options.filter((x) => this.searchField(x)?.toLowerCase().search(searchText.toLowerCase()) > -1);
@@ -16554,14 +16584,34 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * Trigger endpoint changed
      */
     endpointChanged() {
+        /* Emit endpoint signature so subscribers can react to source/query changes. */
         this._endpointChange.next([this.endpoint, this._params, this.projection, this._loadData]);
     }
     /**
      * Trigger enum changed
      */
     enumChanged() {
+        /* Emit enum filter updates to rebuild enum options with latest constraints. */
         this._enumChange.next([this._enumFilter]);
     }
+    /**
+     * @description Builds enum options from metadata and then applies runtime enum filters.
+     * @returns {void}
+     */
+    rebuildEnumOptions() {
+        /* Enable client-side filtering UI when metadata is present. */
+        this.filterable = this.enumMetadata != null;
+        /* Rebuild enum options from metadata so dynamic hide and disable callbacks re-run. */
+        this.options = this.enumMetadata
+            ? EnumService.applyMetadata(this.enum, this.enumMetadata, this.context)
+            : EnumService.toArray(this.enum, this.prefix);
+        /* Apply optional enum-level filter after metadata transformation. */
+        if (this._enumFilter && this.options) {
+            this.options = this.options.filter(this._enumFilter);
+        }
+        /* Keep filtered list synchronized with rebuilt options. */
+        this.filteredOptions = this.options;
+    }
     /**
      * Log to console
      * @param message
@@ -16813,7 +16863,7 @@ class VdSelectComponent extends AbstractSelectFormField {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <msa-selection-label [label]=\"label\"></msa-selection-label>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsaSelectionLabelComponent, selector: "msa-selection-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <msa-selection-label [label]=\"label\"></msa-selection-label>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option?.[optionValueProperty] ?? $index; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsaSelectionLabelComponent, selector: "msa-selection-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -16832,7 +16882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <msa-selection-label [label]=\"label\"></msa-selection-label>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
+                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex />\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <msa-selection-label [label]=\"label\"></msa-selection-label>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else\n                    {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    }\n                    @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option?.[optionValueProperty] ?? $index; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            } @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n<!-- #region Read only value -->\n@if (readonly) {\n    @if (currentValue) {\n        <div class=\"readonly-value\">\n            @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"readonly-content\">\n                    @for (option of selectedOptions; track option?.[optionValueProperty] ?? i; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            @if(!this.multiple) {\n                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                    <span>&nbsp;&nbsp;</span>\n                                }\n                                <span class=\"readonly-ellipsis-text\">\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                </span>\n                            }\n                            @else if(currentValue[i]){\n                                <mat-chip>\n                                    @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                        <span matChipAvatar>\n                                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                        </span>\n                                    }\n                                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                </mat-chip>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            }\n            @if (triggerTemplate && triggerTemplate.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                    </span>\n                </span>\n            }\n            @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger readonly-content\">\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                    <span>&nbsp;&nbsp;</span>\n                    <span class=\"readonly-ellipsis-text\">\n                        <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                    </span>\n                </span>\n            }\n        </div>\n        @if (onLaunch.observed) {\n            <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n    }\n    @if (!currentValue) {\n        <div>&nbsp;</div>\n    }\n}\n<!-- #endregion -->", styles: [":host{display:block;width:100%;min-width:0}.vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px;display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.readonly-value>*{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content{display:flex;align-items:center;width:0;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-ellipsis-text{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-value .readonly-content [layout=row],.readonly-value .readonly-content .option-text,.readonly-value .readonly-content .mat-mdc-chip,.readonly-value .readonly-content .mat-mdc-chip-action-label,.readonly-value .readonly-content .mat-mdc-standard-chip{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select .mat-mdc-form-field-infix{display:flex;align-items:center;min-width:0;max-width:100%;width:100%}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]