@messaia/cdk 22.0.1-rc.4 → 22.0.1-rc.6

package/fesm2022/messaia-cdk.mjs

@@ -1683,7 +1683,7 @@ class BaseComponent {
      * @param playSound A flag indicating whether to play a warning sound when the message type is Warning or Error. Defaults to false.
      * @returns An observable that emits when the action button is clicked.
      */
-    showMessage(message, type = MessageType.Success, duration, actionLabel = $localize `:@@ok:OK`, playSound = false) {
+    showMessage(message, type = MessageType.Success, duration, actionLabel = $localize `:@@ok:Ok`, playSound = false) {
         /* Default snack bar class to 'primary' (for success messages) */
         let snackBarClass = 'primary';
         /* If duration is not provided, calculate it based on message length */
@@ -12417,6 +12417,26 @@ function mixinDisabled(base) {
     };
 }
 
+class MsaSelectionLabelComponent {
+    /**
+     * Label value used by the i18n select expression.
+     */
+    label;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaSelectionLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MsaSelectionLabelComponent, isStandalone: true, selector: "msa-selection-label", inputs: { label: "label" }, ngImport: i0, template: '<span i18n="@@selection">{ label, select, option {option} other{ {{ label }} } }</span>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaSelectionLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'msa-selection-label',
+                    template: '<span i18n="@@selection">{ label, select, option {option} other{ {{ label }} } }</span>',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.Eager
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
 class MsaEnumDisplayComponent {
     /**
      * The numeric value of the enum to convert.
@@ -12539,11 +12559,13 @@ class MsaEnumDisplayComponent {
             </mat-icon>
         }
         @let text = resolvedText();    
-        <span class="enum-text" i18n="@@selection">{ text, select, type {type} other { {{text}}} }</span>`, isInline: true, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        <span class="enum-text">
+            <msa-selection-label [label]="text"></msa-selection-label>
+        </span>`, isInline: true, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MsaEnumDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'msa-enum-display', standalone: true, imports: [MatIcon, NgClass], template: `
+            args: [{ selector: 'msa-enum-display', standalone: true, imports: [MatIcon, NgClass, MsaSelectionLabelComponent], template: `
         @if (resolvedIcon(); as iconConfig) {
             <mat-icon
                 [svgIcon]="iconConfig.svgIcon"
@@ -12556,7 +12578,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             </mat-icon>
         }
         @let text = resolvedText();    
-        <span class="enum-text" i18n="@@selection">{ text, select, type {type} other { {{text}}} }</span>`, changeDetection: ChangeDetectionStrategy.Eager, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"] }]
+        <span class="enum-text">
+            <msa-selection-label [label]="text"></msa-selection-label>
+        </span>`, changeDetection: ChangeDetectionStrategy.Eager, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enumType: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumType", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 const headerMetadataKey = 'customer:vdHeader';
@@ -16806,7 +16830,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        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\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"] }], 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; 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -16817,14 +16841,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatIconModule,
                         MatChipsModule,
                         MatTooltip,
-                        FormsModule
+                        FormsModule,
+                        MsaSelectionLabelComponent
                     ], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         { provide: MatFormFieldControl, useExisting: VdSelectComponent },
                         {
                             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        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\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; 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"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -18233,7 +18258,7 @@ class FilterSelectComponent {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n\t@if (!value && value!=0 && !focused) {\r\n\t\t<span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n\t\t</span>\r\n\t}\r\n\t<mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n\t\t@if (filterable) {\r\n\t\t\t<mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n\t\t\t\t<input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n\t\t\t\t@if (filterInput?.value) {\r\n\t\t\t\t\t<mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t\t\t}\r\n\t\t\t</mat-form-field>\r\n\t\t}\r\n\t\t@if (!multiple) {\r\n\t\t\t<mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n\t\t}\r\n\t\t@for (option of filteredOptions; track option; let first = $first) {\r\n\t\t\t<mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t@if (!optionTemplate?.templateRef) {\r\n\t\t\t\t\t<span i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (optionTemplate?.templateRef) {\r\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n\t\t\t\t\t}\r\n\t\t\t</mat-option>\r\n\t\t\t}\r\n\t</mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\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: "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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: 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: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n    @if (!value && value!=0 && !focused) {\r\n        <span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n            <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n        </span>\r\n    }\r\n    <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n        @if (filterable) {\r\n            <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n                <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n                @if (filterInput?.value) {\r\n                    <mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                }\r\n            </mat-form-field>\r\n        }\r\n        @if (!multiple) {\r\n            <mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n        }\r\n        @for (option of filteredOptions; track option; let first = $first) {\r\n            <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n                @if (!optionTemplate?.templateRef) {\r\n                    <msa-selection-label [label]=\"option[text]\"></msa-selection-label>\r\n                }\r\n                @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n            </mat-option>\r\n        }\r\n    </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\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: "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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: 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: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: FilterSelectComponent, decorators: [{
             type: Component,
@@ -18243,7 +18268,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         MatSelectModule,
-                        MatIconModule
+                        MatIconModule,
+                        MsaSelectionLabelComponent
                     ], changeDetection: ChangeDetectionStrategy.Eager, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -18254,7 +18280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n\t@if (!value && value!=0 && !focused) {\r\n\t\t<span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n\t\t</span>\r\n\t}\r\n\t<mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n\t\t@if (filterable) {\r\n\t\t\t<mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n\t\t\t\t<input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n\t\t\t\t@if (filterInput?.value) {\r\n\t\t\t\t\t<mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t\t\t}\r\n\t\t\t</mat-form-field>\r\n\t\t}\r\n\t\t@if (!multiple) {\r\n\t\t\t<mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n\t\t}\r\n\t\t@for (option of filteredOptions; track option; let first = $first) {\r\n\t\t\t<mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t@if (!optionTemplate?.templateRef) {\r\n\t\t\t\t\t<span i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (optionTemplate?.templateRef) {\r\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n\t\t\t\t\t}\r\n\t\t\t</mat-option>\r\n\t\t\t}\r\n\t</mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"] }]
+                    ], template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n    @if (!value && value!=0 && !focused) {\r\n        <span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n            <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n        </span>\r\n    }\r\n    <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n        @if (filterable) {\r\n            <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n                <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n                @if (filterInput?.value) {\r\n                    <mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                }\r\n            </mat-form-field>\r\n        }\r\n        @if (!multiple) {\r\n            <mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n        }\r\n        @for (option of filteredOptions; track option; let first = $first) {\r\n            <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n                @if (!optionTemplate?.templateRef) {\r\n                    <msa-selection-label [label]=\"option[text]\"></msa-selection-label>\r\n                }\r\n                @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n            </mat-option>\r\n        }\r\n    </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatTable }, { type: i2$3.CdkColumnDef }], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdFilterOptionDirective]
@@ -25467,7 +25493,7 @@ class MsaGenericFormMsaChipsFieldComponent extends MsaGenericFormFieldBaseCompon
                 <mat-hint>{{field.hint}}</mat-hint>
             } 
             @if (vdChip.emptyResult) {
-                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
+                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results found</mat-hint>
             } 
             @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
                 <mat-error>{{errorMessage}}</mat-error>
@@ -25526,7 +25552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 <mat-hint>{{field.hint}}</mat-hint>
             } 
             @if (vdChip.emptyResult) {
-                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
+                <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results found</mat-hint>
             } 
             @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
                 <mat-error>{{errorMessage}}</mat-error>
@@ -25579,7 +25605,7 @@ class VdListComponent extends AbstractSelectFormField {
         this.selectEl?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\r\n                } @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n        </mat-list-option>\r\n        }\r\n        <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <msa-selection-label [label]=\"option[optionTextProperty]\"></msa-selection-label>\r\n            }\r\n            @if (optionTemplate?.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n            }\r\n        </mat-list-option>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { 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: VdListComponent, decorators: [{
             type: Component,
@@ -25587,8 +25613,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         CommonModule,
                         MatSelectionList,
                         MatListOption,
-                        FormsModule
-                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\r\n                } @if (optionTemplate?.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                }\r\n        </mat-list-option>\r\n        }\r\n        <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
+                        FormsModule,
+                        MsaSelectionLabelComponent
+                    ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n    <!-- #region Options -->\r\n    @for (option of filteredOptions; track option; let first = $first) {\r\n        <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            @if (!optionTemplate?.templateRef) {\r\n                <msa-selection-label [label]=\"option[optionTextProperty]\"></msa-selection-label>\r\n            }\r\n            @if (optionTemplate?.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n            }\r\n        </mat-list-option>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdListOptionDirective]
@@ -31320,5 +31347,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, MatInputRequiredDirective, MatSelectRequiredDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, MsaSelectRequiredDirective, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, TABLE_COLUMNS_METADATA_KEY, TABLE_DEFINITION_METADATA_KEY, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, hasRequiredValidator, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionArray, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, MatInputRequiredDirective, MatSelectRequiredDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, MsaSelectRequiredDirective, MsaSelectionLabelComponent, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, TABLE_COLUMNS_METADATA_KEY, TABLE_DEFINITION_METADATA_KEY, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, hasRequiredValidator, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionArray, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map