@messaia/cdk 22.0.0-rc.20 → 22.0.0-rc.22

package/fesm2022/messaia-cdk.mjs

@@ -22574,9 +22574,6 @@ class VdChipsComponent extends AbstractMatFormField {
      * Indicates whether the component is disabled.
      */
     get disabled() {
-        if (this._readonly) {
-            return true;
-        }
         return super.disabled;
     }
     /**
@@ -23083,7 +23080,7 @@ class VdChipsComponent extends AbstractMatFormField {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
             }
-        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip?.[key] ?? chip ?? $index; let first = $first; let index = $index) {\r\n        <mat-chip [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\">\r\n            @if(chip.icon) {\r\n                <span matChipAvatar>\r\n                    <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"chip.iconColor\">{{chip.icon}}</mat-icon>\r\n                </span>\r\n            }\r\n            @if (!chipTemplate?.templateRef) {\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{ chip }}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                }\r\n            }\r\n            @if (chipTemplate && chipTemplate.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n            }\r\n            @for (button of suffixButtons; track button?.icon ?? $index; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if (onLaunch.observed) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip>\r\n    }\r\n    <!-- #endregion -->\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" (click)=\"reopenPanel()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if (loading) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <mat-spinner diameter=\"32\"></mat-spinner>\r\n            </mat-option>\r\n        }\r\n        @if (!loading && ((dataSource?.items?.length ?? 0) === 0)) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <span i18n=\"@@noResultsFound\">No results found</span>\r\n            </mat-option>\r\n        }\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item?.[key] ?? item ?? $index; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    <div layout=\"row\" layout-align=\"start center\">\r\n                        @if(item.icon) {\r\n                            <span matChipAvatar>\r\n                                <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"item.iconColor\">{{item.icon}}</mat-icon>\r\n                            </span>\r\n                        }\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{item}}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                        }\r\n                    </div>\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;padding:0 8px;justify-content:center;margin:-4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.8;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing{width:19px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing:not(:last-child){padding-right:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8;padding-top:4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option{display:flex;justify-content:center;align-items:center;padding-left:0!important;padding-right:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option .mdc-list-item__primary-text{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option mat-spinner{margin:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"disabled && !readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip?.[key] ?? chip ?? $index; let first = $first; let index = $index) {\r\n        <mat-chip [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\">\r\n            @if(chip.icon) {\r\n                <span matChipAvatar>\r\n                    <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"chip.iconColor\">{{chip.icon}}</mat-icon>\r\n                </span>\r\n            }\r\n            @if (!chipTemplate?.templateRef) {\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{ chip }}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                }\r\n            }\r\n            @if (chipTemplate && chipTemplate.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n            }\r\n            @for (button of suffixButtons; track button?.icon ?? $index; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if (onLaunch.observed) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip>\r\n    }\r\n    <!-- #endregion -->\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" (click)=\"reopenPanel()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if (loading) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <mat-spinner diameter=\"32\"></mat-spinner>\r\n            </mat-option>\r\n        }\r\n        @if (!loading && ((dataSource?.items?.length ?? 0) === 0)) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <span i18n=\"@@noResultsFound\">No results found</span>\r\n            </mat-option>\r\n        }\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item?.[key] ?? item ?? $index; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    <div layout=\"row\" layout-align=\"start center\">\r\n                        @if(item.icon) {\r\n                            <span matChipAvatar>\r\n                                <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"item.iconColor\">{{item.icon}}</mat-icon>\r\n                            </span>\r\n                        }\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{item}}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                        }\r\n                    </div>\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;padding:0 10px;justify-content:center;margin:-4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.8;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing{width:19px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing:not(:last-child){padding-right:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8;padding-top:4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option{display:flex;justify-content:center;align-items:center;padding-left:0!important;padding-right:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option .mdc-list-item__primary-text{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option mat-spinner{margin:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
@@ -23104,7 +23101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MatProgressSpinnerModule,
                         VdDynamicTableComponent,
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip?.[key] ?? chip ?? $index; let first = $first; let index = $index) {\r\n        <mat-chip [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\">\r\n            @if(chip.icon) {\r\n                <span matChipAvatar>\r\n                    <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"chip.iconColor\">{{chip.icon}}</mat-icon>\r\n                </span>\r\n            }\r\n            @if (!chipTemplate?.templateRef) {\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{ chip }}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                }\r\n            }\r\n            @if (chipTemplate && chipTemplate.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n            }\r\n            @for (button of suffixButtons; track button?.icon ?? $index; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if (onLaunch.observed) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip>\r\n    }\r\n    <!-- #endregion -->\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" (click)=\"reopenPanel()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if (loading) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <mat-spinner diameter=\"32\"></mat-spinner>\r\n            </mat-option>\r\n        }\r\n        @if (!loading && ((dataSource?.items?.length ?? 0) === 0)) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <span i18n=\"@@noResultsFound\">No results found</span>\r\n            </mat-option>\r\n        }\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item?.[key] ?? item ?? $index; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    <div layout=\"row\" layout-align=\"start center\">\r\n                        @if(item.icon) {\r\n                            <span matChipAvatar>\r\n                                <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"item.iconColor\">{{item.icon}}</mat-icon>\r\n                            </span>\r\n                        }\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{item}}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                        }\r\n                    </div>\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;padding:0 8px;justify-content:center;margin:-4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.8;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing{width:19px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing:not(:last-child){padding-right:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8;padding-top:4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option{display:flex;justify-content:center;align-items:center;padding-left:0!important;padding-right:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option .mdc-list-item__primary-text{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option mat-spinner{margin:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
+                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"disabled && !readonly\">\r\n    <!-- #region Chips -->\r\n    @for (chip of chips; track chip?.[key] ?? chip ?? $index; let first = $first; let index = $index) {\r\n        <mat-chip [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\">\r\n            @if(chip.icon) {\r\n                <span matChipAvatar>\r\n                    <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"chip.iconColor\">{{chip.icon}}</mat-icon>\r\n                </span>\r\n            }\r\n            @if (!chipTemplate?.templateRef) {\r\n                @if (!autocompleteOptionTemplate?.templateRef) {\r\n                    <span>{{ chip }}</span>\r\n                }\r\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n                }\r\n            }\r\n            @if (chipTemplate && chipTemplate.templateRef) {\r\n                <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n            }\r\n            @for (button of suffixButtons; track button?.icon ?? $index; let first = $first) {\r\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n                </a>\r\n            }\r\n            @if (onLaunch.observed) {\r\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n                </a>\r\n            }\r\n            @if (!readonly) {\r\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </a>\r\n            }\r\n        </mat-chip>\r\n    }\r\n    <!-- #endregion -->\r\n    <!-- #region Search box -->\r\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" (click)=\"reopenPanel()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\r\n    <!-- #endregion -->\r\n    <!-- #region Reset button -->\r\n    @if ((!value || empty) && !readonly && !disabled) {\r\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n            </svg>\r\n        </a>\r\n    }\r\n    <!-- #endregion -->\r\n</mat-chip-grid>\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n    @if(opened){\r\n        @if (loading) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <mat-spinner diameter=\"32\"></mat-spinner>\r\n            </mat-option>\r\n        }\r\n        @if (!loading && ((dataSource?.items?.length ?? 0) === 0)) {\r\n            <mat-option disabled class=\"vd-chips-loading-option\">\r\n                <span i18n=\"@@noResultsFound\">No results found</span>\r\n            </mat-option>\r\n        }\r\n        @if(!classType)\r\n        {\r\n            @for (item of dataSource?.items; track item?.[key] ?? item ?? $index; let first = $first; let last = $last) {\r\n                <mat-option [value]=\"item\">\r\n                    <div layout=\"row\" layout-align=\"start center\">\r\n                        @if(item.icon) {\r\n                            <span matChipAvatar>\r\n                                <mat-icon fontSet=\"material-symbols-outlined\" [style.color]=\"item.iconColor\">{{item.icon}}</mat-icon>\r\n                            </span>\r\n                        }\r\n                        @if (!autocompleteOptionTemplate?.templateRef) {\r\n                            <span>{{item}}</span>\r\n                        }\r\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n                        }\r\n                    </div>\r\n                </mat-option>\r\n                @if(!last){\r\n                    <mat-divider></mat-divider>\r\n                }\r\n            }\r\n        }\r\n        @if (classType) {\r\n            <mat-option hide=\"true\"></mat-option>\r\n            <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n        }\r\n    }\r\n    <div class=\"vd-chips-paginator\">\r\n        <mat-divider></mat-divider>\r\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n    </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected.mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;padding:0 10px;justify-content:center;margin:-4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.8;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing{width:19px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__icon--trailing:not(:last-child){padding-right:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8;padding-top:4px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option{display:flex;justify-content:center;align-items:center;padding-left:0!important;padding-right:0!important}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option .mdc-list-item__primary-text{display:flex;width:100%;justify-content:center;align-items:center}::ng-deep .vd-chips-autocomplete .vd-chips-loading-option mat-spinner{margin:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
                 type: ViewChild,
                 args: [VdDynamicTableComponent, { static: false }]
@@ -30833,7 +30830,7 @@ class VdNavigationDrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$6.Router, optional: true }, { token: i1$3.DomSanitizer }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\" [class.is-expanded]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\" [class.is-expanded]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{grid-template-rows:0fr;height:0%;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr;height:100%}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\" [class.is-expanded]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\" [class.is-expanded]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{grid-template-rows:0fr;height:0%;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr;height:calc(100% - 58px)}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
             type: Component,
@@ -30842,7 +30839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatToolbarModule,
                         MatIcon,
                         MatIconButton
-                    ], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\" [class.is-expanded]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\" [class.is-expanded]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{grid-template-rows:0fr;height:0%;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr;height:100%}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"] }]
+                    ], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n    <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n    @if (!isCustomToolbar && !mini) {\r\n        @if (email && name) {\r\n            <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n        }\r\n        @if (email || name) {\r\n            <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n                <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n                @if (isMenuAvailable) {\r\n                    <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n                        @if (!menuToggled) {\r\n                            <mat-icon>arrow_drop_down</mat-icon>\r\n                        }\r\n                        @if (menuToggled) {\r\n                            <mat-icon>arrow_drop_up</mat-icon>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    }\r\n    @if (mini && !expanded) {\r\n        <div layout=\"column\" layout-align=\"center center\" flex>\r\n            <button mat-icon-button (click)=\"toggleMenu()\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n            </button>\r\n        </div>\r\n    }\r\n</mat-toolbar>\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\" [class.is-expanded]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\" [class.is-expanded]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n    <div class=\"vd-collapse-inner\">\r\n        <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{grid-template-rows:0fr;height:0%;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr;height:calc(100% - 58px)}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: VdLayoutComponent, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => VdLayoutComponent)]