ngx-eiffage-material 0.0.28 → 0.0.29

package/fesm2022/ngx-eiffage-material.mjs

@@ -724,7 +724,7 @@ class PaginatedSelectBottomSheetComponent {
         this._bottomSheetRef.dismiss(this.selectedsOptions());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", viewQueries: [{ propertyName: "selectionList", first: true, predicate: ["selectionList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bottomSheetContainer\">\n    <div class=\"header\">\n        @if(_data.title) {\n            <div class=\"title\">\n                {{ _data.title }}\n            </div>\n        }\n        @if(!_data.hideFilter) {\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\n                <mat-icon matPrefix>search</mat-icon>\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\n                @if(searchInput.value.length > 0) {\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                }\n            </mat-form-field>\n        \n            <mat-chip-listbox [multiple]=\"false\">\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\n                }\n            </mat-chip-listbox>\n        }\n\n        @if(_data.extraFiltersTemplate) {\n            <br />\n            <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\n        }\n    </div>\n    <div>\n        @if(isLoading()) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n    </div>\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n        <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\n            @if(options().length === 0 && !isLoading()) {\n                <div class=\"no-results\">\n                    <mat-icon>search_off</mat-icon>\n                    <p>{{ _data.noResultsMessage }}</p>\n                </div>\n            }\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\n                <mat-list-option \n                    [value]=\"option[_data.config.valueKey]\"\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\n                >\n                    @if(_data.optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\n                    } @else {\n                        {{_data.config.displayedLabel(option)}}\n                    }\n                </mat-list-option>\n                @if(!last) {\n                    <mat-divider />\n                }\n            }\n        </mat-selection-list>\n    </div> \n\n\n    <div class=\"footer\">\n        @if(_data.multiple) {\n            <div class=\"length\">\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\n            </div>\n            <div class=\"actions\">\n                @if(selectedsOptions().length > 0) {\n                    <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n                }\n                <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\n            </div>\n        } @else {\n            <div class=\"length\">\n                {{ total() }} {{ _data.itemsLabel }}\n            </div>\n        }\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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: MatChipsModule }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i9.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatedSelectBottomSheetComponent, isStandalone: true, selector: "paginated-select-bottom-sheet", viewQueries: [{ propertyName: "selectionList", first: true, predicate: ["selectionList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bottomSheetContainer\">\r\n    <div class=\"header\">\r\n        @if(_data.title) {\r\n            <div class=\"title\">\r\n                {{ _data.title }}\r\n            </div>\r\n        }\r\n        @if(!_data.hideFilter) {\r\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\r\n                <mat-icon matPrefix>search</mat-icon>\r\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\r\n                @if(searchInput.value.length > 0) {\r\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                }\r\n            </mat-form-field>\r\n        \r\n            <mat-chip-listbox [multiple]=\"false\">\r\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\r\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\r\n                }\r\n            </mat-chip-listbox>\r\n        }\r\n\r\n        @if(_data.extraFiltersTemplate) {\r\n            <br />\r\n            <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\r\n        }\r\n    </div>\r\n    <div>\r\n        @if(isLoading()) {\r\n            <mat-progress-bar mode=\"indeterminate\" />\r\n        }\r\n    </div>\r\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\r\n        <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\r\n            @if(options().length === 0 && !isLoading()) {\r\n                <div class=\"no-results\">\r\n                    <mat-icon>search_off</mat-icon>\r\n                    <p>{{ _data.noResultsMessage }}</p>\r\n                </div>\r\n            }\r\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\r\n                <mat-list-option \r\n                    [value]=\"option[_data.config.valueKey]\"\r\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\r\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\r\n                >\r\n                    @if(_data.optionTemplate) {\r\n                        <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\r\n                    } @else {\r\n                        {{_data.config.displayedLabel(option)}}\r\n                    }\r\n                </mat-list-option>\r\n                @if(!last) {\r\n                    <mat-divider />\r\n                }\r\n            }\r\n        </mat-selection-list>\r\n    </div> \r\n\r\n\r\n    <div class=\"footer\">\r\n        @if(_data.multiple) {\r\n            <div class=\"length\">\r\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\r\n            </div>\r\n            <div class=\"actions\">\r\n                @if(selectedsOptions().length > 0) {\r\n                    <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\r\n                }\r\n                <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\r\n            </div>\r\n        } @else {\r\n            <div class=\"length\">\r\n                {{ total() }} {{ _data.itemsLabel }}\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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: MatChipsModule }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i9.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i9.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatedSelectBottomSheetComponent, decorators: [{
             type: Component,
@@ -739,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatProgressBarModule,
                         MatListModule,
                         ReactiveFormsModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"bottomSheetContainer\">\n    <div class=\"header\">\n        @if(_data.title) {\n            <div class=\"title\">\n                {{ _data.title }}\n            </div>\n        }\n        @if(!_data.hideFilter) {\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\n                <mat-icon matPrefix>search</mat-icon>\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\n                @if(searchInput.value.length > 0) {\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                }\n            </mat-form-field>\n        \n            <mat-chip-listbox [multiple]=\"false\">\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\n                }\n            </mat-chip-listbox>\n        }\n\n        @if(_data.extraFiltersTemplate) {\n            <br />\n            <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\n        }\n    </div>\n    <div>\n        @if(isLoading()) {\n            <mat-progress-bar mode=\"indeterminate\" />\n        }\n    </div>\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\n        <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\n            @if(options().length === 0 && !isLoading()) {\n                <div class=\"no-results\">\n                    <mat-icon>search_off</mat-icon>\n                    <p>{{ _data.noResultsMessage }}</p>\n                </div>\n            }\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\n                <mat-list-option \n                    [value]=\"option[_data.config.valueKey]\"\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\n                >\n                    @if(_data.optionTemplate) {\n                        <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\n                    } @else {\n                        {{_data.config.displayedLabel(option)}}\n                    }\n                </mat-list-option>\n                @if(!last) {\n                    <mat-divider />\n                }\n            }\n        </mat-selection-list>\n    </div> \n\n\n    <div class=\"footer\">\n        @if(_data.multiple) {\n            <div class=\"length\">\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\n            </div>\n            <div class=\"actions\">\n                @if(selectedsOptions().length > 0) {\n                    <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\n                }\n                <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\n            </div>\n        } @else {\n            <div class=\"length\">\n                {{ total() }} {{ _data.itemsLabel }}\n            </div>\n        }\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"bottomSheetContainer\">\r\n    <div class=\"header\">\r\n        @if(_data.title) {\r\n            <div class=\"title\">\r\n                {{ _data.title }}\r\n            </div>\r\n        }\r\n        @if(!_data.hideFilter) {\r\n            <mat-form-field subscriptSizing=\"dynamic\" appearance=\"outline\">\r\n                <mat-icon matPrefix>search</mat-icon>\r\n                <input matInput #searchInput [placeholder]=\"_data.filterPlaceholder\" [value]=\"queryInput()\" (input)=\"onQueryChange($event, optionsContainer); $event.stopPropagation()\" />\r\n                @if(searchInput.value.length > 0) {\r\n                    <button matSuffix mat-icon-button (click)=\"onClearClick(searchInput); $event.stopPropagation()\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                }\r\n            </mat-form-field>\r\n        \r\n            <mat-chip-listbox [multiple]=\"false\">\r\n                @for(filterKey of _data.config.filtersKeys; track filterKey.key) {\r\n                    <mat-chip-option [value]=\"filterKey.key\" [selected]=\"\">{{ filterKey.label() }}</mat-chip-option>\r\n                }\r\n            </mat-chip-listbox>\r\n        }\r\n\r\n        @if(_data.extraFiltersTemplate) {\r\n            <br />\r\n            <ng-container *ngTemplateOutlet=\"_data.extraFiltersTemplate;\"></ng-container>\r\n        }\r\n    </div>\r\n    <div>\r\n        @if(isLoading()) {\r\n            <mat-progress-bar mode=\"indeterminate\" />\r\n        }\r\n    </div>\r\n    <div #optionsContainer class=\"optionsContainer\" (scroll)=\"onScroll(optionsContainer)\">\r\n        <mat-selection-list #selectionList [multiple]=\"_data.multiple\" (selectionChange)=\"onSelectionChange($event)\">\r\n            @if(options().length === 0 && !isLoading()) {\r\n                <div class=\"no-results\">\r\n                    <mat-icon>search_off</mat-icon>\r\n                    <p>{{ _data.noResultsMessage }}</p>\r\n                </div>\r\n            }\r\n            @for(option of options(); track option[_data.config.valueKey]; let last = $last) {\r\n                <mat-list-option \r\n                    [value]=\"option[_data.config.valueKey]\"\r\n                    [selected]=\"isSelected(option[_data.config.valueKey])\"\r\n                    [disabled]=\"_data.config.disabled ? _data.config.disabled(option) : false\"\r\n                >\r\n                    @if(_data.optionTemplate) {\r\n                        <ng-container *ngTemplateOutlet=\"_data.optionTemplate; context: { $implicit: option }\"></ng-container>\r\n                    } @else {\r\n                        {{_data.config.displayedLabel(option)}}\r\n                    }\r\n                </mat-list-option>\r\n                @if(!last) {\r\n                    <mat-divider />\r\n                }\r\n            }\r\n        </mat-selection-list>\r\n    </div> \r\n\r\n\r\n    <div class=\"footer\">\r\n        @if(_data.multiple) {\r\n            <div class=\"length\">\r\n                {{ selectedsOptions().length }} / {{ total() }} {{ _data.multipleItemsLabel }}\r\n            </div>\r\n            <div class=\"actions\">\r\n                @if(selectedsOptions().length > 0) {\r\n                    <button matButton (click)=\"onResetClick()\">{{ _data.resetLabel }}</button>\r\n                }\r\n                <button matButton=\"filled\" color=\"primary\" (click)=\"onConfirmMultiSelectionClick()\">{{ _data.confirmLabel }}</button>\r\n            </div>\r\n        } @else {\r\n            <div class=\"length\">\r\n                {{ total() }} {{ _data.itemsLabel }}\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:720px}.mat-bottom-sheet-container{padding:0 16px!important}.bottomSheetContainer{display:flex;flex-direction:column;height:100%;max-height:80vh}.bottomSheetContainer .header{width:100%;flex:0 0 auto;margin-top:15px}.bottomSheetContainer .header .title{margin-bottom:10px;font-size:20px;font-weight:500}.bottomSheetContainer .header mat-form-field{width:100%}.bottomSheetContainer .header mat-chip-listbox{width:100%}.bottomSheetContainer .loading{display:flex;align-items:center;width:100%;height:20px}.bottomSheetContainer .optionsContainer{flex:1 1 auto;height:360px;width:100%;overflow-y:auto}.bottomSheetContainer .optionsContainer .no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;color:#666;text-align:center}.bottomSheetContainer .optionsContainer .no-results mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px;opacity:.5}.bottomSheetContainer .optionsContainer .no-results p{margin:0;font-size:16px}.bottomSheetContainer .footer{margin-top:8px;width:100%;flex:0 0 auto;display:flex;justify-content:space-between;height:56px;box-shadow:0 15px 10px -15px #0000001a}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}:root{--mat-list-list-item-one-line-container-height: auto;--mat-list-list-item-two-line-container-height: auto;--mat-list-list-item-three-line-container-height: auto}@media (max-width: 960px){:host{min-width:auto}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectionList: [{ type: i0.ViewChild, args: ['selectionList', { isSignal: true }] }] } });
 
 class NgxPaginatedSelect {
@@ -800,34 +800,16 @@ class NgxPaginatedSelect {
     // effect
     controlEffect = effect(() => {
         const selectedItems = this._selectedItems();
-        const currentValue = this.control()?.value;
         if (this.multiple()) {
-            const newValue = selectedItems.map((item) => item[this.config().valueKey]);
-            // Check if arrays are equal before updating
-            if (!this.arraysEqual(currentValue, newValue)) {
-                this.control()?.setValue(newValue, { emitEvent: false });
-                this.valueChange.emit(selectedItems);
-            }
+            this.control()?.setValue(selectedItems.map((item) => item[this.config().valueKey]));
+            this.valueChange.emit(selectedItems);
         }
         else {
-            const newValue = selectedItems?.[0]?.[this.config().valueKey];
-            // Check if value changed before updating
-            if (currentValue !== newValue) {
-                this.control()?.setValue(newValue, { emitEvent: false });
-                this.valueChange.emit(selectedItems?.[0]);
-            }
+            this.control()?.setValue(selectedItems?.[0]?.[this.config().valueKey]);
+            this.valueChange.emit(selectedItems?.[0]);
         }
         this._cdr.markForCheck();
     }, ...(ngDevMode ? [{ debugName: "controlEffect" }] : []));
-    arraysEqual(a, b) {
-        if (!Array.isArray(a) || !Array.isArray(b))
-            return false;
-        if (a.length !== b.length)
-            return false;
-        const sortedA = [...a].sort();
-        const sortedB = [...b].sort();
-        return sortedA.every((val, index) => val === sortedB[index]);
-    }
     onOpenBottomSheetClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -888,7 +870,7 @@ class NgxPaginatedSelect {
         this._cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, multipleItemsLabel: { classPropertyName: "multipleItemsLabel", publicName: "multipleItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, hideChips: { classPropertyName: "hideChips", publicName: "hideChips", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", valueChange: "valueChange" }, viewQueries: [{ propertyName: "extraFiltersTemplate", first: true, predicate: ["extraFiltersTemplate"], descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(hideChips()) {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\"\n        (click)=\"onOpenBottomSheetClick($event)\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n        <mat-select \n            #matSelect\n            [formControl]=\"control()\"\n            [multiple]=\"multiple()\"\n            class=\"clickable-input\"\n            (openedChange)=\"preventOpening($event)\"\n        >\n            @for(item of _selectedItems(); track item[config().valueKey]) {\n                <mat-option [value]=\"item[config().valueKey]\">\n                    {{ config().displayedLabel(item) }}\n                </mat-option>\n            }\n        </mat-select>\n        <div matSuffix>\n            @if(clearable() && control()?.value) {\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        </div>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n} @else {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\"\n        (click)=\"onOpenBottomSheetClick($event)\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n        <mat-chip-grid \n            #chipGrid \n            class=\"chips-grid\" \n            [formControl]=\"control()\"\n        >\n            @for(item of _selectedItems(); track item[config().valueKey]) {\n                <mat-chip-row\n                    (removed)=\"onChipRemoved(item)\"\n                    class=\"chip-item\"\n                >\n                    {{ config().displayedLabel(item) }}\n                    <button matChipRemove>\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </mat-chip-row>\n            }\n        </mat-chip-grid>\n\n\n        <input \n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            style=\"display: none\"\n        />\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n}\n\n<ng-template #extraFiltersTemplate>\n    <ng-content select=\"[extra-filters]\" />\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, hideFilter: { classPropertyName: "hideFilter", publicName: "hideFilter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, multipleItemsLabel: { classPropertyName: "multipleItemsLabel", publicName: "multipleItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, hideChips: { classPropertyName: "hideChips", publicName: "hideChips", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetFilters: "resetFilters", valueChange: "valueChange" }, viewQueries: [{ propertyName: "extraFiltersTemplate", first: true, predicate: ["extraFiltersTemplate"], descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(hideChips()) {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-select \r\n            #matSelect\r\n            [formControl]=\"control()\"\r\n            [multiple]=\"multiple()\"\r\n            class=\"clickable-input\"\r\n            (openedChange)=\"preventOpening($event)\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-option [value]=\"item[config().valueKey]\">\r\n                    {{ config().displayedLabel(item) }}\r\n                </mat-option>\r\n            }\r\n        </mat-select>\r\n        <div matSuffix>\r\n            @if(clearable() && control()?.value) {\r\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            }\r\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        </div>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n} @else {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-chip-grid \r\n            #chipGrid \r\n            class=\"chips-grid\" \r\n            [formControl]=\"control()\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-chip-row\r\n                    (removed)=\"onChipRemoved(item)\"\r\n                    class=\"chip-item\"\r\n                >\r\n                    {{ config().displayedLabel(item) }}\r\n                    <button matChipRemove>\r\n                        <mat-icon>cancel</mat-icon>\r\n                    </button>\r\n                </mat-chip-row>\r\n            }\r\n        </mat-chip-grid>\r\n\r\n\r\n        <input \r\n            matInput\r\n            [matChipInputFor]=\"chipGrid\"\r\n            style=\"display: none\"\r\n        />\r\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n<ng-template #extraFiltersTemplate>\r\n    <ng-content select=\"[extra-filters]\" />\r\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
             type: Component,
@@ -903,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ReactiveFormsModule,
                         MatChipsModule,
                         MatSelectModule,
-                    ], template: "@if(hideChips()) {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\"\n        (click)=\"onOpenBottomSheetClick($event)\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n        <mat-select \n            #matSelect\n            [formControl]=\"control()\"\n            [multiple]=\"multiple()\"\n            class=\"clickable-input\"\n            (openedChange)=\"preventOpening($event)\"\n        >\n            @for(item of _selectedItems(); track item[config().valueKey]) {\n                <mat-option [value]=\"item[config().valueKey]\">\n                    {{ config().displayedLabel(item) }}\n                </mat-option>\n            }\n        </mat-select>\n        <div matSuffix>\n            @if(clearable() && control()?.value) {\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            }\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        </div>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n} @else {\n    <mat-form-field \n        appearance=\"outline\" \n        floatLabel=\"always\"\n        (click)=\"onOpenBottomSheetClick($event)\"\n    >\n        <mat-label>{{ label() }}</mat-label>\n        <mat-chip-grid \n            #chipGrid \n            class=\"chips-grid\" \n            [formControl]=\"control()\"\n        >\n            @for(item of _selectedItems(); track item[config().valueKey]) {\n                <mat-chip-row\n                    (removed)=\"onChipRemoved(item)\"\n                    class=\"chip-item\"\n                >\n                    {{ config().displayedLabel(item) }}\n                    <button matChipRemove>\n                        <mat-icon>cancel</mat-icon>\n                    </button>\n                </mat-chip-row>\n            }\n        </mat-chip-grid>\n\n\n        <input \n            matInput\n            [matChipInputFor]=\"chipGrid\"\n            style=\"display: none\"\n        />\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\n        <mat-error>{{ error() }}</mat-error>\n    </mat-form-field>\n}\n\n<ng-template #extraFiltersTemplate>\n    <ng-content select=\"[extra-filters]\" />\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"] }]
+                    ], template: "@if(hideChips()) {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-select \r\n            #matSelect\r\n            [formControl]=\"control()\"\r\n            [multiple]=\"multiple()\"\r\n            class=\"clickable-input\"\r\n            (openedChange)=\"preventOpening($event)\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-option [value]=\"item[config().valueKey]\">\r\n                    {{ config().displayedLabel(item) }}\r\n                </mat-option>\r\n            }\r\n        </mat-select>\r\n        <div matSuffix>\r\n            @if(clearable() && control()?.value) {\r\n                <button matIconButton matSuffix  (click)=\"onResetClick($event);\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            }\r\n            <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        </div>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n} @else {\r\n    <mat-form-field \r\n        appearance=\"outline\" \r\n        floatLabel=\"always\"\r\n        (click)=\"onOpenBottomSheetClick($event)\"\r\n    >\r\n        <mat-label>{{ label() }}</mat-label>\r\n        <mat-chip-grid \r\n            #chipGrid \r\n            class=\"chips-grid\" \r\n            [formControl]=\"control()\"\r\n        >\r\n            @for(item of _selectedItems(); track item[config().valueKey]) {\r\n                <mat-chip-row\r\n                    (removed)=\"onChipRemoved(item)\"\r\n                    class=\"chip-item\"\r\n                >\r\n                    {{ config().displayedLabel(item) }}\r\n                    <button matChipRemove>\r\n                        <mat-icon>cancel</mat-icon>\r\n                    </button>\r\n                </mat-chip-row>\r\n            }\r\n        </mat-chip-grid>\r\n\r\n\r\n        <input \r\n            matInput\r\n            [matChipInputFor]=\"chipGrid\"\r\n            style=\"display: none\"\r\n        />\r\n        <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n        <mat-error>{{ error() }}</mat-error>\r\n    </mat-form-field>\r\n}\r\n\r\n<ng-template #extraFiltersTemplate>\r\n    <ng-content select=\"[extra-filters]\" />\r\n</ng-template>", styles: [":host{display:block;height:100%}mat-form-field{width:100%;cursor:pointer}:host ::ng-deep mat-select .mat-mdc-select-arrow-wrapper{display:none}.clickable-input{cursor:pointer!important;pointer-events:none}.chips-grid{display:flex;flex-wrap:wrap;gap:8px}.chip-item{width:auto!important;max-width:fit-content}mat-form-field{--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-focus-label-text-color: var(--mat-sys-on-surface)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], hideFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFilter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], multipleItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleItemsLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], hideChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideChips", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], extraFiltersTemplate: [{ type: i0.ViewChild, args: ['extraFiltersTemplate', { isSignal: true }] }], matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }] } });
 
 var DialogBodyType;