@messaia/cdk 21.1.0-rc.24 → 21.1.0-rc.26

package/fesm2022/messaia-cdk.mjs

@@ -14,7 +14,7 @@ import * as i1$3 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
-import { fromEvent, Subject, map, of, BehaviorSubject, firstValueFrom, throwError, filter, distinctUntilChanged, debounceTime, merge as merge$1, tap, Observable, takeUntil as takeUntil$1 } from 'rxjs';
+import { fromEvent, Subject, switchMap, timer, takeUntil as takeUntil$1, filter, map, tap, merge as merge$1, debounceTime, of, BehaviorSubject, firstValueFrom, throwError, distinctUntilChanged, Observable } from 'rxjs';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i8 from '@angular/material/icon';
@@ -25,7 +25,7 @@ import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import * as i3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { takeUntil, map as map$1, catchError, skip, switchMap, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, finalize } from 'rxjs/operators';
+import { takeUntil, map as map$1, catchError, skip, switchMap as switchMap$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, finalize } from 'rxjs/operators';
 import { CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i5$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -1485,38 +1485,62 @@ class BaseComponent {
                 /* Otherwise, expand the panel based on the URL hash if set */
                 this.expandPanelPath(this.urlHash ?? '');
             }
-            /* Detect changes for opened panels */
+            /* Array to hold all panel event streams */
+            const panelStateChanges$ = [];
+            /* Used to cancel pending close events when another panel opens */
+            const openedSignal$ = new Subject();
+            /* Prepare observables for all panels */
             this.matExpansionPanelQueryList?.forEach(y => {
-                this.matExpansionPanelSubscriptions.push(y.opened.subscribe(_ => {
+                /* Map closed events to their target parent hash */
+                panelStateChanges$.push(y.closed.pipe(switchMap(_ => {
+                    /* Get the id of the current closed panel */
+                    const currentPanelId = y['_viewContainerRef']?.element?.nativeElement?.id;
+                    const currentPanelIdParts = currentPanelId?.split('.');
+                    /* Extract parent ID if nested */
+                    const parentHash = (currentPanelIdParts && currentPanelIdParts.length > 1)
+                        ? currentPanelIdParts.slice(0, -1).join('.')
+                        : null;
+                    /* Delay close handling so a near-simultaneous open can cancel it */
+                    return timer(50).pipe(takeUntil$1(openedSignal$), 
+                    /* Ignore close when another panel is opening/opened */
+                    filter(_ => !(this.matExpansionPanelQueryList?.toArray()?.some(panel => {
+                        const panelId = panel['_viewContainerRef']?.element?.nativeElement?.id;
+                        return panel.expanded && panelId && panelId !== currentPanelId;
+                    }) ?? false)), map(_ => ({ action: 'close', hash: parentHash })));
+                })));
+                /* Map opened events to their target hash */
+                panelStateChanges$.push(y.opened.pipe(tap(_ => openedSignal$.next()), map(_ => {
+                    /* Get the id of the current opened panel */
+                    const currentPanelId = y['_viewContainerRef']?.element?.nativeElement?.id;
+                    return { action: 'open', hash: currentPanelId };
+                })));
+            });
+            /* Merge all event streams to handle concurrent open/close actions */
+            if (panelStateChanges$.length > 0) {
+                this.matExpansionPanelSubscriptions.push(merge$1(...panelStateChanges$).pipe(
+                /*
+                 * debounceTime(50) waits for all concurrent synchronous/rapid events
+                 * to finish firing before proceeding. If Panel A closes and Panel B
+                 * opens instantly, only Panel B's final state triggers navigation.
+                 */
+                debounceTime(50)).subscribe(eventState => {
                     if (this.setUrlHash) {
-                        /* Get the id of the current opened panel */
-                        var currentPanelId = y['_viewContainerRef']?.element?.nativeElement?.id;
-                        /* If the panel ID is set, set it as url segment (hash) */
-                        if (currentPanelId) {
-                            this.router.navigate([], { fragment: currentPanelId, replaceUrl: true });
+                        /* If a valid hash exists, set it as url segment */
+                        if (eventState.hash) {
+                            this.router.navigate([], { fragment: eventState.hash, replaceUrl: true });
                         }
-                        /* Otherwise remove the segment from the url */
-                        else {
+                        /*
+                         * Otherwise remove the segment from the url (only on open actions to prevent
+                         * clearing the hash when collapsing a nested child)
+                         */
+                        else if (eventState.action === 'open') {
                             this.router.navigate([], { replaceUrl: true });
                         }
                     }
-                    /* Detect changes */
-                    this.changeDetectorRef.detectChanges();
-                }));
-                /* Detect changes for closed panels */
-                this.matExpansionPanelSubscriptions.push(y.closed.subscribe(_ => {
-                    if (this.setUrlHash) {
-                        /* Get the id of the current opened panel */
-                        var currentPanelIdParts = y['_viewContainerRef']?.element?.nativeElement?.id?.split('.');
-                        /* If the panel ID is set, set it as url segment (hash) */
-                        if (currentPanelIdParts.length > 1) {
-                            this.router.navigate([], { fragment: currentPanelIdParts.slice(0, -1).join('.'), replaceUrl: true });
-                        }
-                    }
-                    /* Detect changes */
+                    /* Detect changes ONCE after the concurrent event storm settles */
                     this.changeDetectorRef.detectChanges();
                 }));
-            });
+            }
         });
         /* Notify expansion panel list changes */
         if (this.matExpansionPanelQueryList) {
@@ -16652,7 +16676,7 @@ class TableDataSource extends DataSource {
             this.onSortChange.subscribe(() => { this.paginator.pageIndex = 0; });
         }
         return merge$1(...displayDataChanges)
-            .pipe(skip(1), switchMap(() => {
+            .pipe(skip(1), switchMap$1(() => {
             /* Flip flag to show that loading has begun */
             this.isLoading = true;
             /* Remove empty filters */
@@ -17289,27 +17313,29 @@ class FilterInputComponent {
      * @param event
      */
     onKeyDown(event) {
-        /* Allow navigation keys and control keys */
-        const allowedKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
-        /* Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X */
-        if ((event.ctrlKey || event.metaKey) && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
-            return;
-        }
-        /* Allow Ctrl+Z, Ctrl+Y */
-        if ((event.ctrlKey || event.metaKey) && ['z', 'y'].includes(event.key.toLowerCase())) {
-            return;
-        }
-        /* Allow control keys */
-        if (event.ctrlKey || event.metaKey) {
-            return;
-        }
-        /* Allow navigation keys */
-        if (allowedKeys.includes(event.key)) {
-            return;
-        }
-        /* Block non-numeric characters */
-        if (event.key < '0' || event.key > '9') {
-            event.preventDefault();
+        if (this.onlyNumber) {
+            /* Allow navigation keys and control keys */
+            const allowedKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+            /* Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X */
+            if ((event.ctrlKey || event.metaKey) && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
+                return;
+            }
+            /* Allow Ctrl+Z, Ctrl+Y */
+            if ((event.ctrlKey || event.metaKey) && ['z', 'y'].includes(event.key.toLowerCase())) {
+                return;
+            }
+            /* Allow control keys */
+            if (event.ctrlKey || event.metaKey) {
+                return;
+            }
+            /* Allow navigation keys */
+            if (allowedKeys.includes(event.key)) {
+                return;
+            }
+            /* Block non-numeric characters */
+            if (event.key < '0' || event.key > '9') {
+                event.preventDefault();
+            }
         }
     }
     /**
@@ -22477,7 +22503,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\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate && chipTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\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>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":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;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;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 .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}: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 .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}: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 .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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.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: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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"] }] });
+        ], 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\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate && chipTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\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>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":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;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;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 .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}: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 .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}: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 .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: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.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: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
@@ -22497,7 +22523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatIconModule,
                         MatInputModule,
                         VdDynamicTableComponent,
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate && chipTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\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>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":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;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;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 .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}: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 .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}: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 .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]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate && chipTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\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>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":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;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;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 .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}: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 .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}: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 .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 }]