@messaia/cdk 21.1.0-rc.7 → 21.1.0-rc.9

package/fesm2022/messaia-cdk.mjs

@@ -5,7 +5,7 @@ import { HttpHeaders, HttpParams, HttpClient, HttpRequest, HttpEventType, HttpRe
 import * as i0 from '@angular/core';
 import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, HostListener, forwardRef, LOCALE_ID, NgModule, Pipe, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, Self, SimpleChange, Attribute, SecurityContext } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
-import { MatDialogModule, MatDialogConfig, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogModule, MatDialogConfig, MatDialog, MAT_DIALOG_DATA, MatDialogTitle } from '@angular/material/dialog';
 import * as i6$3 from '@angular/material/expansion';
 import { MatExpansionPanel, MatExpansionModule } from '@angular/material/expansion';
 import * as i2$3 from '@angular/material/snack-bar';
@@ -48,7 +48,7 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i1$5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i3$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { __decorate, __metadata } from 'tslib';
 import 'reflect-metadata';
 import * as i2$1 from '@angular/material/select';
@@ -2130,6 +2130,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: [{ required: true }]
             }] } });
 
+/** * Reusable dialog header that handles dragging, maximizing, and closing.
+ */
+class VdDialogHeaderComponent {
+    /**
+     * Reference to the dialog instance to allow the close button to work.
+     * @type {MatDialogRef<any>}
+     */
+    dialogRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogHeaderComponent, isStandalone: true, selector: "vd-dialog-header", inputs: { dialogRef: "dialogRef" }, ngImport: i0, template: `
+        <div vdDialogMaximize 
+             #maximize="dialogMaximize" 
+             cdkDrag 
+             cdkDragRootElement=".cdk-overlay-pane" 
+             [cdkDragDisabled]="maximize.isMaximized"
+             cdkDragHandle
+             class="dialog-header-container pad-right-sm push-none" 
+             layout="row" 
+             layout-align="space-between center">            
+            <span mat-dialog-title class="pad-left-sm push-left-sm" flex>
+                <ng-content></ng-content>
+            </span>
+            <vd-dialog-header-actions [maximize]="maximize" [dialogRef]="dialogRef"></vd-dialog-header-actions>
+        </div>`, isInline: true, styles: [".dialog-header-container{cursor:move;display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: VdDialogMaximizeDirective, selector: "[vdDialogMaximize]", inputs: ["rootElementSelector"], exportAs: ["dialogMaximize"] }, { kind: "component", type: VdDialogHeaderActionsComponent, selector: "vd-dialog-header-actions", inputs: ["maximize", "dialogRef"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vd-dialog-header', template: `
+        <div vdDialogMaximize 
+             #maximize="dialogMaximize" 
+             cdkDrag 
+             cdkDragRootElement=".cdk-overlay-pane" 
+             [cdkDragDisabled]="maximize.isMaximized"
+             cdkDragHandle
+             class="dialog-header-container pad-right-sm push-none" 
+             layout="row" 
+             layout-align="space-between center">            
+            <span mat-dialog-title class="pad-left-sm push-left-sm" flex>
+                <ng-content></ng-content>
+            </span>
+            <vd-dialog-header-actions [maximize]="maximize" [dialogRef]="dialogRef"></vd-dialog-header-actions>
+        </div>`, imports: [
+                        MatDialogTitle,
+                        VdDialogMaximizeDirective,
+                        VdDialogHeaderActionsComponent,
+                        CdkDragHandle,
+                        CdkDrag
+                    ], styles: [".dialog-header-container{cursor:move;display:flex;width:100%}\n"] }]
+        }], propDecorators: { dialogRef: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 /**
  * This class sets up a blueprint for creating typed forms by providing a property (formGroup)
  * for handling form data of a specific type (T). Users can extend this class and implement
@@ -13261,6 +13314,12 @@ class EnumMetadata {
      * @type {string}
      */
     display;
+    /**
+     * @property Hint
+     * @description An optional hint string associated with the enum value. This string can be used to provide additional information or guidance in the UI.
+     * @type {string}
+     */
+    hint;
     /**
      * @property Icon
      * @description An optional icon associated with the enum value. This can be used to visually represent the enum value in the UI.
@@ -14744,6 +14803,7 @@ class EnumService {
             return {
                 id: key,
                 name: metadata?.display ?? enumObj[key],
+                hint: metadata?.hint,
                 icon: metadata?.icon,
                 textColor: metadata?.textColor,
                 disabled: metadata?.disabled || metadata?.disable?.(context) || false,
@@ -16077,7 +16137,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\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\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                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\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\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !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                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Trigger for icons -->\n        @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n            <mat-select-trigger>\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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 [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\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\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    @if (!optionTemplate?.templateRef) {\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        }\n                        @if (optionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                </mat-option>\n                }\n                <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.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-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.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$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { 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"] }] });
+        ], 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\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\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                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\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\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !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                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\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                        <!-- #region Property icon -->\n                        <span class=\"option-icon\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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 [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                        </span>\n                        <!-- #endregion -->\n\n                        <!-- #region Text -->\n                        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n                        </span>\n                        <!-- #endregion -->\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\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\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\n                    <!-- #region Text -->\n                    <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n                        @if (!optionTemplate?.templateRef) {\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                            }\n                            @if (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\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.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-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}mat-select-trigger .option-text,.mat-mdc-option .option-text{display:block!important;width:calc(100% - 36px)}mat-select-trigger .option-text.option-has-hint,.mat-mdc-option .option-text.option-has-hint{line-height:.92em}mat-select-trigger .option-text .option-hint,.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}mat-select-trigger .option-text{width:calc(100% - 36px)}.mat-mdc-option .option-text{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.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$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -16087,6 +16147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatChipsModule,
+                        MatTooltip,
                         FormsModule
                     ], providers: [
                         { provide: MatFormFieldControl, useExisting: VdSelectComponent },
@@ -16094,7 +16155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\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                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\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\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !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                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Trigger for icons -->\n        @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n            <mat-select-trigger>\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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 [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\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\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    @if (!optionTemplate?.templateRef) {\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        }\n                        @if (optionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                </mat-option>\n                }\n                <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.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-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\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\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\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                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\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\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !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                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\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                        <!-- #region Property icon -->\n                        <span class=\"option-icon\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\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 [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                        </span>\n                        <!-- #endregion -->\n\n                        <!-- #region Text -->\n                        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n                        </span>\n                        <!-- #endregion -->\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\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\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\n                    <!-- #region Text -->\n                    <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n                        @if (!optionTemplate?.templateRef) {\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                            }\n                            @if (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\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\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]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.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-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}mat-select-trigger .option-text,.mat-mdc-option .option-text{display:block!important;width:calc(100% - 36px)}mat-select-trigger .option-text.option-has-hint,.mat-mdc-option .option-text.option-has-hint{line-height:.92em}mat-select-trigger .option-text .option-hint,.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}mat-select-trigger .option-text{width:calc(100% - 36px)}.mat-mdc-option .option-text{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -18504,26 +18565,8 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
     updateColumns() {
         this.genericList?.updateColumns();
     }
-    dialogRoot;
-    isMaximized = false;
-    toggleMaximize() {
-        // Find the overlay pane that we are targeting with cdkDragRootElement
-        const pane = this.dialogRoot.nativeElement.closest('.cdk-overlay-pane');
-        if (!pane)
-            return;
-        this.isMaximized = !this.isMaximized;
-        if (this.isMaximized) {
-            // Store original position if needed, or just force max-size
-            pane.classList.add('dialog-maximized');
-            // Reset the cdkDrag transform so it centers correctly
-            pane.style.transform = 'none';
-        }
-        else {
-            pane.classList.remove('dialog-maximized');
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RxFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableConfigDialogComponent, isStandalone: true, selector: "vd-dynamic-table-config-dialog", viewQueries: [{ propertyName: "dialogRoot", first: true, predicate: ["dialogRoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<div vdDialogMaximize #maximize=\"dialogMaximize\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n    <!-- Dialog title -->\r\n    <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n    <!-- Maximize and close buttons -->\r\n    <vd-dialog-header-actions [maximize]=\"maximize\" [dialogRef]=\"dialogRef\"></vd-dialog-header-actions>\r\n</div>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".mat-mdc-dialog-title{cursor:move}.dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container mat-toolbar{background-color:var(--mat-sys-primary);min-height:52px;border-radius:inherit;border-bottom-right-radius:0;border-bottom-left-radius:0}.dialog-container vd-dynamic-table{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "directive", type: VdDialogMaximizeDirective, selector: "[vdDialogMaximize]", inputs: ["rootElementSelector"], exportAs: ["dialogMaximize"] }, { kind: "component", type: VdDialogHeaderActionsComponent, selector: "vd-dialog-header-actions", inputs: ["maximize", "dialogRef"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableConfigDialogComponent, isStandalone: true, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<vd-dialog-header [dialogRef]=\"dialogRef\" i18n=\"@@tableConfiguration\">Table configuration</vd-dialog-header>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container vd-dynamic-table{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: VdDialogHeaderComponent, selector: "vd-dialog-header", inputs: ["dialogRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
             type: Component,
@@ -18537,18 +18580,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatPaginatorModule,
                         MatButtonModule,
                         VdDynamicTableComponent,
-                        VdDialogMaximizeDirective,
-                        VdDialogHeaderActionsComponent,
-                        CdkDragHandle,
-                        CdkDrag
-                    ], template: "<!-- Title bar with close button -->\r\n<div vdDialogMaximize #maximize=\"dialogMaximize\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n    <!-- Dialog title -->\r\n    <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n    <!-- Maximize and close buttons -->\r\n    <vd-dialog-header-actions [maximize]=\"maximize\" [dialogRef]=\"dialogRef\"></vd-dialog-header-actions>\r\n</div>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".mat-mdc-dialog-title{cursor:move}.dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container mat-toolbar{background-color:var(--mat-sys-primary);min-height:52px;border-radius:inherit;border-bottom-right-radius:0;border-bottom-left-radius:0}.dialog-container vd-dynamic-table{max-height:100%!important}\n"] }]
+                        VdDialogHeaderComponent
+                    ], template: "<!-- Title bar with close button -->\r\n<vd-dialog-header [dialogRef]=\"dialogRef\" i18n=\"@@tableConfiguration\">Table configuration</vd-dialog-header>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container vd-dynamic-table{max-height:100%!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: RxFormBuilder }], propDecorators: { dialogRoot: [{
-                type: ViewChild,
-                args: ['dialogRoot']
-            }] } });
+                }] }, { type: RxFormBuilder }] });
 
 /**
  * A base list component for components with pagination support
@@ -28452,5 +28489,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, 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, 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, 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, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, 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, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, 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, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, 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, 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, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, 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, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map