ngx-eiffage-material 0.1.1 → 0.1.3

package/fesm2022/ngx-eiffage-material.mjs

@@ -677,6 +677,14 @@ class NgxBasicSelect {
     errorStateMatcher = {
         isErrorState: () => !!(this._ngControl?.invalid && this._ngControl?.touched),
     };
+    /**
+     * Obligatorio si el control del formulario tiene el validador `required`.
+     * Se propaga al mat-select interno para que el mat-form-field pinte el
+     * asterisco, igual que hace Material con un `<input matInput>`.
+     */
+    isRequired() {
+        return this._ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
     constructor() {
         // Auto-registro como CVA (evita el provider NG_VALUE_ACCESSOR y su DI circular).
         if (this._ngControl)
@@ -752,7 +760,7 @@ class NgxBasicSelect {
         this._ngControl?.control?.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n        #matSelect\n        [formControl]=\"innerControl\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(isLoading()) {\n            <!--\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n                panel abre tambien durante la carga y se ve el indicador.\n            -->\n            <mat-option disabled class=\"stateOption loadingOption\">\n                <mat-spinner diameter=\"18\" />\n                <span>{{ intl.loadingMessage }}</span>\n            </mat-option>\n        } @else {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input\n                    matInput\n                    #searchInput\n                    type=\"text\"\n                    [attr.aria-label]=\"intl.searchPlaceholder\"\n                    [placeholder]=\"intl.searchPlaceholder\"\n                    [value]=\"searchQuery()\"\n                    (input)=\"onSearchInput($any($event.target).value)\"\n                    (keydown)=\"onSearchKeydown($event)\"\n                />\n                <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            <!--\n                Solo se renderizan las opciones que casan con el buscador (mas las\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n            -->\n            @for(option of displayedOptions(); track option.value) {\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                    {{ option.label }}\n                </mat-option>\n            }\n            @if(showNoOptionsMessage()) {\n                <mat-option disabled class=\"stateOption noResults\">\n                    {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\n        <button\n            matIconButton\n            matSuffix\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"onClearClick(); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatFormFieldModule }, { 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: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxBasicSelect, isStandalone: true, selector: "ngx-basic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, basicSelectConfig: { classPropertyName: "basicSelectConfig", publicName: "basicSelectConfig", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n        #matSelect\n        [formControl]=\"innerControl\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [required]=\"isRequired()\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(isLoading()) {\n            <!--\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n                panel abre tambien durante la carga y se ve el indicador.\n            -->\n            <mat-option disabled class=\"stateOption loadingOption\">\n                <mat-spinner diameter=\"18\" />\n                <span>{{ intl.loadingMessage }}</span>\n            </mat-option>\n        } @else {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input\n                    matInput\n                    #searchInput\n                    type=\"text\"\n                    [attr.aria-label]=\"intl.searchPlaceholder\"\n                    [placeholder]=\"intl.searchPlaceholder\"\n                    [value]=\"searchQuery()\"\n                    (input)=\"onSearchInput($any($event.target).value)\"\n                    (keydown)=\"onSearchKeydown($event)\"\n                />\n                <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            <!--\n                Solo se renderizan las opciones que casan con el buscador (mas las\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n            -->\n            @for(option of displayedOptions(); track option.value) {\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                    {{ option.label }}\n                </mat-option>\n            }\n            @if(showNoOptionsMessage()) {\n                <mat-option disabled class=\"stateOption noResults\">\n                    {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\n        <button\n            matIconButton\n            matSuffix\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"onClearClick(); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxBasicSelect, decorators: [{
             type: Component,
@@ -764,7 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatFormFieldModule,
                         ReactiveFormsModule,
                         MatProgressSpinnerModule,
-                    ], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n        #matSelect\n        [formControl]=\"innerControl\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(isLoading()) {\n            <!--\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n                panel abre tambien durante la carga y se ve el indicador.\n            -->\n            <mat-option disabled class=\"stateOption loadingOption\">\n                <mat-spinner diameter=\"18\" />\n                <span>{{ intl.loadingMessage }}</span>\n            </mat-option>\n        } @else {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input\n                    matInput\n                    #searchInput\n                    type=\"text\"\n                    [attr.aria-label]=\"intl.searchPlaceholder\"\n                    [placeholder]=\"intl.searchPlaceholder\"\n                    [value]=\"searchQuery()\"\n                    (input)=\"onSearchInput($any($event.target).value)\"\n                    (keydown)=\"onSearchKeydown($event)\"\n                />\n                <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            <!--\n                Solo se renderizan las opciones que casan con el buscador (mas las\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n            -->\n            @for(option of displayedOptions(); track option.value) {\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                    {{ option.label }}\n                </mat-option>\n            }\n            @if(showNoOptionsMessage()) {\n                <mat-option disabled class=\"stateOption noResults\">\n                    {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\n        <button\n            matIconButton\n            matSuffix\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"onClearClick(); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+                    ], template: "\n<mat-form-field [appearance]=\"appearance()\" [className]=\"class()\" [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n        #matSelect\n        [formControl]=\"innerControl\"\n        [errorStateMatcher]=\"errorStateMatcher\"\n        [required]=\"isRequired()\"\n        [multiple]=\"multiple()\"\n        [placeholder]=\"placeholder()\"\n        (openedChange)=\"onOpenedChange($event)\"\n    >\n        @if(isLoading()) {\n            <!--\n                Opcion deshabilitada (no un div): mat-select no abre el panel si no\n                tiene ninguna mat-option (_canOpen exige options.length > 0). Asi el\n                panel abre tambien durante la carga y se ve el indicador.\n            -->\n            <mat-option disabled class=\"stateOption loadingOption\">\n                <mat-spinner diameter=\"18\" />\n                <span>{{ intl.loadingMessage }}</span>\n            </mat-option>\n        } @else {\n            <div class=\"searchFilter\">\n                <mat-icon class=\"searchIcon\">search</mat-icon>\n                <input\n                    matInput\n                    #searchInput\n                    type=\"text\"\n                    [attr.aria-label]=\"intl.searchPlaceholder\"\n                    [placeholder]=\"intl.searchPlaceholder\"\n                    [value]=\"searchQuery()\"\n                    (input)=\"onSearchInput($any($event.target).value)\"\n                    (keydown)=\"onSearchKeydown($event)\"\n                />\n                <button matIconButton [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSearch()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n            <!--\n                Solo se renderizan las opciones que casan con el buscador (mas las\n                seleccionadas). Las que no casan se quitan del DOM para que no se puedan\n                enfocar con las flechas: con el panel abierto mat-select permite navegar\n                a opciones deshabilitadas, asi que ocultarlas + disabled no bastaria.\n            -->\n            @for(option of displayedOptions(); track option.value) {\n                <mat-option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                    {{ option.label }}\n                </mat-option>\n            }\n            @if(showNoOptionsMessage()) {\n                <mat-option disabled class=\"stateOption noResults\">\n                    {{ hasData() ? intl.noResultsMessage : intl.noDataMessage }}\n                </mat-option>\n            }\n        }\n    </mat-select>\n    @if(isLoading()) {\n        <mat-icon matSuffix><mat-spinner diameter=\"20\" /></mat-icon>\n    } @else if(clearable() && (multiple() ? value()?.length : value())) {\n        <button\n            matIconButton\n            matSuffix\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"onClearClick(); $event.stopPropagation()\"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    }\n    <mat-error>{{ error() }}</mat-error>\n</mat-form-field>\n\n<!-- Anuncio para lectores de pantalla del numero de resultados al filtrar -->\n<div class=\"srOnly\" aria-live=\"polite\">{{ searchAnnouncement() }}</div>\n", styles: [":host{display:block;width:100%}mat-form-field{width:100%}mat-select{width:100%}.searchFilter{display:flex;align-items:center;position:sticky;top:-8px;height:48px;width:100%;background:var(--mat-sys-surface-container);z-index:10;border-bottom:1px solid var(--mat-sys-outline-variant)}.searchFilter input{height:48px;padding:0 48px;width:calc(100% - 96px);position:absolute;top:0;left:0}.searchFilter .searchIcon{position:absolute;top:0;left:0;height:48px;width:48px;display:flex;align-items:center;justify-content:center}.searchFilter button{position:absolute;right:5px}.stateOption{justify-content:center;text-align:center;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium);pointer-events:none;opacity:1}.loadingOption{display:flex;align-items:center;gap:8px}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], basicSelectConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicSelectConfig", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", 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 }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 var DialogBodyType;
@@ -3469,7 +3477,7 @@ class NgxPaginatedSelectBottomSheetComponent {
         this._ref.dismiss(undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Filtros extra + chips: bloque con scroll propio para que no aplasten la lista -->\n    @if (data.extraFiltersTemplate || (data.multiple && selectedItems().length > 0)) {\n      <div class=\"ps-bs__header-scroll\">\n        <!-- Extra filters projection -->\n        @if (data.extraFiltersTemplate) {\n          <div class=\"ps-bs__extra-filters\">\n            <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n          </div>\n        }\n\n        <!-- Selected chips (custom lightweight chips) -->\n        @if (data.multiple && selectedItems().length > 0) {\n          <div class=\"ps-bs__selected-chips\">\n            @for (item of selectedItems(); track item[data.config.valueKey]) {\n              <div class=\"ps-bs__chip\">\n                <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n                <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n\n    <!-- Skeleton loading (only for the first page) -->\n    @if (isInitialLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Error state -->\n    @if (hasError() && !isLoading() && options().length === 0) {\n      <div class=\"ps-bs__state ps-bs__error\">\n        <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n          <mat-icon>error_outline</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n        <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n        <button matButton=\"tonal\" (click)=\"retry()\">\n          <mat-icon>refresh</mat-icon>\n          {{ intl.paginatedSelectRetryLabel }}\n        </button>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!hasError() && options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__state ps-bs__empty\">\n        <div class=\"ps-bs__state-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n        @if (query()) {\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n          <button matButton (click)=\"clearQuery(optionsContainer)\">\n            {{ intl.paginatedSelectClearSearchLabel }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n      @let avatarImg = getAvatarImage(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (avatarImg) {\n            <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n          } @else if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else if (selected) {\n          <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n        }\n      </div>\n    }\n\n    <!-- Loading more (pagination) / end of list -->\n    @if (isLoadingMore()) {\n      <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n      </div>\n    } @else if (allLoaded() && options().length > 0) {\n      <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(560px,100vw - 48px);min-width:0;max-width:560px;height:min(85vh,720px)!important;max-height:min(85vh,720px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__header-scroll{display:flex;flex-direction:column;gap:14px;min-height:0;max-height:34vh;overflow-y:auto}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:76px;overflow-y:auto;padding:4px 0 2px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 24px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,transparent)}.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 auto;min-height:25vh;overflow-y:auto;padding:6px 10px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent);box-shadow:inset 3px 0 0 0 var(--mat-sys-primary)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{box-shadow:0 0 0 2px var(--mat-sys-primary),0 0 0 4px var(--mat-sys-surface-container-high)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__options{padding:4px 8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, bodyContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (sticky top of the scroll area) -->\n    @if (data.multiple && data.showSelectAll && options().length > 0) {\n      <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n        <mat-checkbox\n          [checked]=\"allSelected()\"\n          [indeterminate]=\"someSelected()\"\n          (click)=\"$event.preventDefault()\"\n        />\n        <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"ps-bs__list\">\n\n      <!-- Skeleton loading (only for the first page) -->\n      @if (isInitialLoading()) {\n        @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n          <div class=\"ps-bs__skeleton\">\n            <div class=\"ps-bs__skeleton-avatar\"></div>\n            <div class=\"ps-bs__skeleton-content\">\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n            </div>\n          </div>\n        }\n      }\n\n      <!-- Error state -->\n      @if (hasError() && !isLoading() && options().length === 0) {\n        <div class=\"ps-bs__state ps-bs__error\">\n          <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n            <mat-icon>error_outline</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n          <button matButton=\"tonal\" (click)=\"retry()\">\n            <mat-icon>refresh</mat-icon>\n            {{ intl.paginatedSelectRetryLabel }}\n          </button>\n        </div>\n      }\n\n      <!-- Empty state -->\n      @if (!hasError() && options().length === 0 && !isLoading()) {\n        <div class=\"ps-bs__state ps-bs__empty\">\n          <div class=\"ps-bs__state-icon-wrap\">\n            <mat-icon>search_off</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n          @if (query()) {\n            <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n            <button matButton (click)=\"clearQuery(bodyContainer)\">\n              {{ intl.paginatedSelectClearSearchLabel }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Option rows -->\n      @for (item of options(); track item[data.config.valueKey]) {\n        @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n        @let selected = isSelected(item);\n        @let avatarImg = getAvatarImage(item);\n\n        <div\n          class=\"ps-bs__option\"\n          [class.ps-bs__option--selected]=\"selected\"\n          [class.ps-bs__option--disabled]=\"disabled\"\n          matRipple\n          [matRippleDisabled]=\"disabled\"\n          (click)=\"toggleItem(item)\"\n          role=\"option\"\n          [attr.aria-selected]=\"selected\"\n          [attr.aria-disabled]=\"disabled\"\n        >\n          <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n            @if (selected) {\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n            } @else if (avatarImg) {\n              <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n            } @else if (data.config.avatarText) {\n              {{ getAvatarText(item) }}\n            } @else if (data.config.avatarIcon) {\n              <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n            } @else {\n              {{ getAvatarText(item) }}\n            }\n          </div>\n\n          <!-- Content -->\n          <div class=\"ps-bs__option-content\">\n            @if (data.optionTemplate) {\n              <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n            } @else {\n              <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n              @if (data.config.subtitle) {\n                <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n              }\n            }\n          </div>\n\n          <!-- Check indicator -->\n          @if (data.multiple) {\n            <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n          } @else if (selected) {\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n          }\n        </div>\n      }\n\n      <!-- Loading more (pagination) / end of list -->\n      @if (isLoadingMore()) {\n        <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n        </div>\n      } @else if (allLoaded() && options().length > 0) {\n        <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: MatChipsModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, decorators: [{
             type: Component,
@@ -3487,7 +3495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatCheckboxModule,
                         MatTooltipModule,
                         MatBadgeModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, optionsContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(optionsContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Filtros extra + chips: bloque con scroll propio para que no aplasten la lista -->\n    @if (data.extraFiltersTemplate || (data.multiple && selectedItems().length > 0)) {\n      <div class=\"ps-bs__header-scroll\">\n        <!-- Extra filters projection -->\n        @if (data.extraFiltersTemplate) {\n          <div class=\"ps-bs__extra-filters\">\n            <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n          </div>\n        }\n\n        <!-- Selected chips (custom lightweight chips) -->\n        @if (data.multiple && selectedItems().length > 0) {\n          <div class=\"ps-bs__selected-chips\">\n            @for (item of selectedItems(); track item[data.config.valueKey]) {\n              <div class=\"ps-bs__chip\">\n                <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n                <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Select all (multiple mode) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (data.multiple && data.showSelectAll && options().length > 0) {\n    <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n      <mat-checkbox\n        [checked]=\"allSelected()\"\n        [indeterminate]=\"someSelected()\"\n        (click)=\"$event.preventDefault()\"\n      />\n      <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Options (scrollable, takes remaining space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n\n    <!-- Skeleton loading (only for the first page) -->\n    @if (isInitialLoading()) {\n      @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n        <div class=\"ps-bs__skeleton\">\n          <div class=\"ps-bs__skeleton-avatar\"></div>\n          <div class=\"ps-bs__skeleton-content\">\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n            <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Error state -->\n    @if (hasError() && !isLoading() && options().length === 0) {\n      <div class=\"ps-bs__state ps-bs__error\">\n        <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n          <mat-icon>error_outline</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n        <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n        <button matButton=\"tonal\" (click)=\"retry()\">\n          <mat-icon>refresh</mat-icon>\n          {{ intl.paginatedSelectRetryLabel }}\n        </button>\n      </div>\n    }\n\n    <!-- Empty state -->\n    @if (!hasError() && options().length === 0 && !isLoading()) {\n      <div class=\"ps-bs__state ps-bs__empty\">\n        <div class=\"ps-bs__state-icon-wrap\">\n          <mat-icon>search_off</mat-icon>\n        </div>\n        <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n        @if (query()) {\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n          <button matButton (click)=\"clearQuery(optionsContainer)\">\n            {{ intl.paginatedSelectClearSearchLabel }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Option rows -->\n    @for (item of options(); track item[data.config.valueKey]) {\n      @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n      @let selected = isSelected(item);\n      @let avatarImg = getAvatarImage(item);\n\n      <div\n        class=\"ps-bs__option\"\n        [class.ps-bs__option--selected]=\"selected\"\n        [class.ps-bs__option--disabled]=\"disabled\"\n        matRipple\n        [matRippleDisabled]=\"disabled\"\n        (click)=\"toggleItem(item)\"\n        role=\"option\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"disabled\"\n      >\n        <!-- Avatar -->\n        <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n          @if (avatarImg) {\n            <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n          } @else if (data.config.avatarText) {\n            {{ getAvatarText(item) }}\n          } @else if (data.config.avatarIcon) {\n            <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n          } @else {\n            {{ getAvatarText(item) }}\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"ps-bs__option-content\">\n          @if (data.optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n          } @else {\n            <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n            @if (data.config.subtitle) {\n              <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n            }\n          }\n        </div>\n\n        <!-- Check indicator -->\n        @if (data.multiple) {\n          <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n        } @else if (selected) {\n          <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n        }\n      </div>\n    }\n\n    <!-- Loading more (pagination) / end of list -->\n    @if (isLoadingMore()) {\n      <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-dot\"></span>\n        <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n      </div>\n    } @else if (allLoaded() && options().length > 0) {\n      <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(560px,100vw - 48px);min-width:0;max-width:560px;height:min(85vh,720px)!important;max-height:min(85vh,720px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__header-scroll{display:flex;flex-direction:column;gap:14px;min-height:0;max-height:34vh;overflow-y:auto}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:76px;overflow-y:auto;padding:4px 0 2px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 24px;cursor:pointer;border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,transparent)}.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__options{flex:1 1 auto;min-height:25vh;overflow-y:auto;padding:6px 10px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent);box-shadow:inset 3px 0 0 0 var(--mat-sys-primary)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{box-shadow:0 0 0 2px var(--mat-sys-primary),0 0 0 4px var(--mat-sys-surface-container-high)}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__options{padding:4px 8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ps-bs\">\n\n  <!-- \u2500\u2500 Handle bar (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__handle\">\n    <div class=\"ps-bs__handle-bar\"></div>\n  </div>\n\n  <!-- \u2500\u2500 Header (pinned: title + search only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__header\" [class.ps-bs__header--scrolled]=\"headerScrolled()\">\n    <div class=\"ps-bs__header-top\">\n      <div class=\"ps-bs__title-area\">\n        <span class=\"ps-bs__title\">{{ data.title }}</span>\n        @if (data.multiple && selectedCount() > 0) {\n          <span class=\"ps-bs__badge\">{{ selectedCount() }}</span>\n        }\n      </div>\n      <button mat-icon-button class=\"ps-bs__close-btn\" [attr.aria-label]=\"intl.closeButtonLabel\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Pill search -->\n    @if (data.showSearch) {\n      <div class=\"ps-bs__search\">\n        <mat-icon class=\"ps-bs__search-icon\">search</mat-icon>\n        <input\n          class=\"ps-bs__search-input\"\n          #searchInput\n          type=\"text\"\n          [value]=\"query() ?? ''\"\n          [placeholder]=\"data.searchPlaceholder\"\n          (input)=\"onQueryInput($event, bodyContainer)\"\n        />\n        @if (searchInput.value.length > 0) {\n          <button\n            class=\"ps-bs__search-clear\"\n            type=\"button\"\n            [attr.aria-label]=\"intl.clearSearchTooltip\"\n            (click)=\"clearQuery(bodyContainer); $event.stopPropagation()\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Body (\u00DANICA zona de scroll: filtros + chips + select-all + lista) \u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__body\" #bodyContainer (scroll)=\"onScroll(bodyContainer)\">\n\n    <!-- Extra filters projection -->\n    @if (data.extraFiltersTemplate) {\n      <div class=\"ps-bs__extra-filters\">\n        <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n      </div>\n    }\n\n    <!-- Selected chips (custom lightweight chips) -->\n    @if (data.multiple && selectedItems().length > 0) {\n      <div class=\"ps-bs__selected-chips\">\n        @for (item of selectedItems(); track item[data.config.valueKey]) {\n          <div class=\"ps-bs__chip\">\n            <span class=\"ps-bs__chip-label\">{{ getLabel(item) }}</span>\n            <button class=\"ps-bs__chip-remove\" type=\"button\" [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"removeSelectedChip(item)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Select all (sticky top of the scroll area) -->\n    @if (data.multiple && data.showSelectAll && options().length > 0) {\n      <div class=\"ps-bs__select-all\" matRipple (click)=\"toggleSelectAll()\">\n        <mat-checkbox\n          [checked]=\"allSelected()\"\n          [indeterminate]=\"someSelected()\"\n          (click)=\"$event.preventDefault()\"\n        />\n        <span class=\"ps-bs__select-all-label\">{{ data.selectAllLabel }}</span>\n      </div>\n    }\n\n    <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"ps-bs__list\">\n\n      <!-- Skeleton loading (only for the first page) -->\n      @if (isInitialLoading()) {\n        @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n          <div class=\"ps-bs__skeleton\">\n            <div class=\"ps-bs__skeleton-avatar\"></div>\n            <div class=\"ps-bs__skeleton-content\">\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--title\"></div>\n              <div class=\"ps-bs__skeleton-line ps-bs__skeleton-line--subtitle\"></div>\n            </div>\n          </div>\n        }\n      }\n\n      <!-- Error state -->\n      @if (hasError() && !isLoading() && options().length === 0) {\n        <div class=\"ps-bs__state ps-bs__error\">\n          <div class=\"ps-bs__state-icon-wrap ps-bs__error-icon-wrap\">\n            <mat-icon>error_outline</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ intl.paginatedSelectErrorTitle }}</div>\n          <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectErrorHint }}</div>\n          <button matButton=\"tonal\" (click)=\"retry()\">\n            <mat-icon>refresh</mat-icon>\n            {{ intl.paginatedSelectRetryLabel }}\n          </button>\n        </div>\n      }\n\n      <!-- Empty state -->\n      @if (!hasError() && options().length === 0 && !isLoading()) {\n        <div class=\"ps-bs__state ps-bs__empty\">\n          <div class=\"ps-bs__state-icon-wrap\">\n            <mat-icon>search_off</mat-icon>\n          </div>\n          <div class=\"ps-bs__state-title\">{{ data.noResultsMessage }}</div>\n          @if (query()) {\n            <div class=\"ps-bs__state-hint\">{{ intl.paginatedSelectNoResultsHint }}</div>\n            <button matButton (click)=\"clearQuery(bodyContainer)\">\n              {{ intl.paginatedSelectClearSearchLabel }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Option rows -->\n      @for (item of options(); track item[data.config.valueKey]) {\n        @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n        @let selected = isSelected(item);\n        @let avatarImg = getAvatarImage(item);\n\n        <div\n          class=\"ps-bs__option\"\n          [class.ps-bs__option--selected]=\"selected\"\n          [class.ps-bs__option--disabled]=\"disabled\"\n          matRipple\n          [matRippleDisabled]=\"disabled\"\n          (click)=\"toggleItem(item)\"\n          role=\"option\"\n          [attr.aria-selected]=\"selected\"\n          [attr.aria-disabled]=\"disabled\"\n        >\n          <!-- Avatar (al seleccionar se voltea a un check, estilo Gmail) -->\n          <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n            @if (selected) {\n              <mat-icon class=\"ps-bs__option-avatar-check\">check</mat-icon>\n            } @else if (avatarImg) {\n              <img [src]=\"avatarImg\" [alt]=\"getLabel(item)\" (error)=\"onAvatarError(item)\" loading=\"lazy\" />\n            } @else if (data.config.avatarText) {\n              {{ getAvatarText(item) }}\n            } @else if (data.config.avatarIcon) {\n              <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n            } @else {\n              {{ getAvatarText(item) }}\n            }\n          </div>\n\n          <!-- Content -->\n          <div class=\"ps-bs__option-content\">\n            @if (data.optionTemplate) {\n              <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n            } @else {\n              <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n              @if (data.config.subtitle) {\n                <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n              }\n            }\n          </div>\n\n          <!-- Check indicator -->\n          @if (data.multiple) {\n            <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n          } @else if (selected) {\n            <mat-icon class=\"ps-bs__option-check\">check_circle</mat-icon>\n          }\n        </div>\n      }\n\n      <!-- Loading more (pagination) / end of list -->\n      @if (isLoadingMore()) {\n        <div class=\"ps-bs__loading-more\" aria-live=\"polite\">\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-dot\"></span>\n          <span class=\"ps-bs__loading-more-text\">{{ intl.paginatedSelectLoadingMoreLabel }}</span>\n        </div>\n      } @else if (allLoaded() && options().length > 0) {\n        <div class=\"ps-bs__list-end\">{{ intl.paginatedSelectEndOfListLabel }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 Footer (ALWAYS VISIBLE \u2014 never scrolls) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"ps-bs__footer\">\n    <span class=\"ps-bs__footer-count\">\n      @if (data.multiple) {\n        {{ intl.getPaginatedSelectSelectedCountLabel(selectedCount(), total()) }}\n      } @else {\n        {{ intl.getPaginatedSelectResultsCountLabel(total()) }}\n      }\n    </span>\n\n    @if (data.multiple) {\n      <div class=\"ps-bs__footer-actions\">\n        @if (selectedCount() > 0) {\n          <button matButton (click)=\"reset()\">{{ data.resetLabel }}</button>\n        }\n        <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:center!important;justify-content:center!important}.ngx-paginated-select-backdrop{background:color-mix(in srgb,var(--mat-sys-scrim, #000) 40%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ngx-paginated-select-panel .mat-bottom-sheet-container{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;width:min(640px,100vw - 48px);min-width:0;max-width:640px;height:min(86vh,760px)!important;max-height:min(86vh,760px)!important;border-radius:28px;background:var(--mat-sys-surface-container-high);border:1px solid color-mix(in srgb,var(--mat-sys-outline-variant) 60%,transparent);box-shadow:0 1px 3px #0000001f,0 8px 24px #00000024,0 24px 48px #0000001a!important}ngx-paginated-select-bottom-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;width:100%}.ps-bs{display:flex;flex-direction:column;height:100%;overflow:hidden}.ps-bs__handle{display:none;justify-content:center;padding:12px 0 4px;flex:0 0 auto}.ps-bs__handle-bar{width:32px;height:4px;border-radius:9999px;background:var(--mat-sys-outline-variant)}.ps-bs__header{flex:0 0 auto;padding:20px 24px 14px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;transition:box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__header--scrolled{box-shadow:0 1px 0 0 var(--mat-sys-outline-variant),0 6px 14px -10px #00000059}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title-area{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ps-bs__title{font:var(--mat-sys-title-large);font-weight:600;color:var(--mat-sys-on-surface);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:9999px;font:var(--mat-sys-label-medium);font-weight:700;font-variant-numeric:tabular-nums;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);flex-shrink:0;animation:ps-badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes ps-badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 16px;background:var(--mat-sys-surface-container-highest);border-radius:9999px;border:1.5px solid transparent;transition:background .2s cubic-bezier(.2,0,0,1),border-color .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 4%,var(--mat-sys-surface-container-highest))}.ps-bs__search:focus-within{background:var(--mat-sys-surface);border-color:var(--mat-sys-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__search-icon{color:var(--mat-sys-on-surface-variant);font-size:22px;width:22px;height:22px;flex-shrink:0;transition:color .2s cubic-bezier(.2,0,0,1)}.ps-bs__search:focus-within .ps-bs__search-icon{color:var(--mat-sys-primary)}.ps-bs__search-input{flex:1;border:none;outline:none;background:transparent;font:var(--mat-sys-body-large);font-family:inherit;color:var(--mat-sys-on-surface);min-width:0}.ps-bs__search-input::placeholder{color:var(--mat-sys-on-surface-variant)}.ps-bs__search-clear{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--mat-sys-on-surface-variant);transition:background .15s cubic-bezier(.2,0,0,1);flex-shrink:0}.ps-bs__search-clear:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 10%,transparent)}.ps-bs__search-clear mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:6px 10px 8px;display:flex;flex-direction:column}.ps-bs__body>*{flex-shrink:0}.ps-bs__extra-filters{width:100%;padding:10px 6px 6px}.ps-bs__selected-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 6px 6px}.ps-bs__chip{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:9999px;background:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);white-space:nowrap;max-width:200px;animation:ps-chip-in .2s cubic-bezier(.2,0,0,1)}.ps-bs__chip-label{overflow:hidden;text-overflow:ellipsis}.ps-bs__chip-remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:inherit;opacity:.55;transition:opacity .15s,background .15s}.ps-bs__chip-remove:hover{opacity:1;background:color-mix(in srgb,var(--mat-sys-on-secondary-container) 12%,transparent)}.ps-bs__chip-remove mat-icon{font-size:16px;width:16px;height:16px}@keyframes ps-chip-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.ps-bs__select-all.ps-bs__select-all{position:sticky;top:-6px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -10px;padding:8px 24px;cursor:pointer;background:var(--mat-sys-surface-container-high);border-bottom:1px solid var(--mat-sys-outline-variant);transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__select-all.ps-bs__select-all:hover{background:color-mix(in srgb,var(--mat-sys-on-surface) 5%,var(--mat-sys-surface-container-high))}.ps-bs__select-all.ps-bs__select-all-label{font:var(--mat-sys-label-large);color:var(--mat-sys-on-surface)}.ps-bs__list{flex:1 1 auto}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;cursor:pointer;border-radius:16px;min-height:56px;transition:background .15s cubic-bezier(.2,0,0,1)}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent)}.ps-bs__option:active:not(.ps-bs__option--disabled){background:color-mix(in srgb,var(--mat-sys-on-surface) 12%,transparent)}.ps-bs__option--selected{background:color-mix(in srgb,var(--mat-sys-primary) 10%,transparent)}.ps-bs__option--selected:hover{background:color-mix(in srgb,var(--mat-sys-primary) 14%,transparent)}.ps-bs__option--disabled{opacity:.38;cursor:not-allowed}.ps-bs__option .mat-ripple-element{background:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.ps-bs__option .mat-mdc-checkbox{margin-left:auto;margin-right:-8px;flex-shrink:0}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font:var(--mat-sys-label-large);font-weight:600;background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-on-surface) 8%,transparent);transition:box-shadow .18s cubic-bezier(.2,0,0,1)}.ps-bs__option-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);box-shadow:none;animation:ps-avatar-flip .25s cubic-bezier(.05,.7,.1,1)}.ps-bs__option-avatar-check{color:var(--mat-sys-on-primary)}@keyframes ps-avatar-flip{0%{transform:scale(.6) rotate(-30deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font:var(--mat-sys-body-large);color:var(--mat-sys-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option-subtitle{font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{color:var(--mat-sys-primary);font-size:22px;width:22px;height:22px;margin-left:auto;flex-shrink:0}.ps-bs__skeleton{display:flex;align-items:center;gap:14px;padding:8px 12px;margin:2px 0;min-height:56px;border-radius:16px;opacity:0;animation:ps-skeleton-in .4s ease forwards}.ps-bs__skeleton-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-content{flex:1;display:flex;flex-direction:column;gap:10px}.ps-bs__skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-highest) 37%,var(--mat-sys-surface-container) 63%);background-size:400% 100%;animation:ps-shimmer 1.4s ease-in-out infinite}.ps-bs__skeleton-line--title{width:60%}.ps-bs__skeleton-line--subtitle{width:38%;height:10px}.ps-bs__skeleton:nth-child(1){animation-delay:0ms}.ps-bs__skeleton:nth-child(2){animation-delay:60ms}.ps-bs__skeleton:nth-child(3){animation-delay:.12s}.ps-bs__skeleton:nth-child(4){animation-delay:.18s}.ps-bs__skeleton:nth-child(5){animation-delay:.24s}.ps-bs__skeleton:nth-child(6){animation-delay:.3s}@keyframes ps-skeleton-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ps-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.ps-bs__loading-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-small)}.ps-bs__loading-more-dot{width:6px;height:6px;border-radius:50%;background:var(--mat-sys-primary);animation:ps-bounce 1s ease-in-out infinite}.ps-bs__loading-more-dot:nth-child(2){animation-delay:.15s}.ps-bs__loading-more-dot:nth-child(3){animation-delay:.3s}.ps-bs__loading-more-text{margin-left:6px}@keyframes ps-bounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}.ps-bs__list-end{text-align:center;padding:16px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant);opacity:.7}.ps-bs__state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 32px;gap:12px;text-align:center;animation:ps-fade-in .2s ease}.ps-bs__state-icon-wrap{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mat-sys-surface-container-highest)}.ps-bs__state-icon-wrap mat-icon{font-size:32px;width:32px;height:32px;color:var(--mat-sys-on-surface-variant)}.ps-bs__state-title{font:var(--mat-sys-title-medium);color:var(--mat-sys-on-surface)}.ps-bs__state-hint{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);max-width:280px}.ps-bs__state button{margin-top:4px}.ps-bs__error-icon-wrap{background:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}.ps-bs__error-icon-wrap mat-icon{color:var(--mat-sys-error)}@keyframes ps-fade-in{0%{opacity:0}to{opacity:1}}.ps-bs__footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:12px;z-index:2;background:var(--mat-sys-surface-container-high);border-top:1px solid var(--mat-sys-outline-variant)}.ps-bs__footer-count{font:var(--mat-sys-body-medium);color:var(--mat-sys-on-surface-variant);font-variant-numeric:tabular-nums;white-space:nowrap}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}.ps-bs__footer-actions button[matButton=filled]{min-width:96px;border-radius:9999px}@media (max-width: 600px){.cdk-global-overlay-wrapper:has(.ngx-paginated-select-panel){align-items:flex-end!important}.ngx-paginated-select-panel .mat-bottom-sheet-container{width:100vw;max-width:100vw;height:90vh!important;max-height:90vh!important;border-radius:24px 24px 0 0;border-bottom:none}.ps-bs__handle{display:flex}.ps-bs__header{padding:8px 16px 12px}.ps-bs__footer{padding:12px 16px}.ps-bs__body{padding:4px 8px 6px}.ps-bs__select-all{margin:0 -8px}}@media (prefers-reduced-motion: reduce){.ps-bs__badge,.ps-bs__chip,.ps-bs__skeleton,.ps-bs__option-avatar--selected,.ps-bs__state{animation:none}.ps-bs__skeleton-avatar,.ps-bs__skeleton-line{animation:none;background:var(--mat-sys-surface-container-highest)}.ps-bs__loading-more-dot{animation:none;opacity:.7}}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxPaginatedSelect {
@@ -3588,6 +3596,14 @@ class NgxPaginatedSelect {
     errorStateMatcher = {
         isErrorState: () => !!(this._ngControl?.invalid && this._ngControl?.touched),
     };
+    /**
+     * Obligatorio si el control del formulario tiene el validador `required`.
+     * Se propaga al input interno para que el mat-form-field pinte el asterisco,
+     * igual que hace Material con un `<input matInput>` normal.
+     */
+    isRequired() {
+        return this._ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
     // Etiquetas efectivas (override por input o valor por defecto de intl)
     effectiveSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.intl.searchPlaceholder, ...(ngDevMode ? [{ debugName: "effectiveSearchPlaceholder" }] : []));
     effectiveNoResults = computed(() => this.noResultsMessage() ?? this.intl.noResultsMessage, ...(ngDevMode ? [{ debugName: "effectiveNoResults" }] : []));
@@ -3756,7 +3772,7 @@ class NgxPaginatedSelect {
         this._ngControl?.control?.markAsTouched();
     }
     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 }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", 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 }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxChipsDisplayed: { classPropertyName: "maxChipsDisplayed", publicName: "maxChipsDisplayed", isSignal: true, isRequired: false, transformFunction: null }, chipsDirection: { classPropertyName: "chipsDirection", publicName: "chipsDirection", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid\n      #chipGrid\n      class=\"ps-trigger__chip-grid\"\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n    >\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n    <input\n      matInput\n      [matChipInputFor]=\"chipGrid\"\n      class=\"ps-trigger__kbd-input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [attr.aria-label]=\"label()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <input\n      matInput\n      class=\"ps-trigger__input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [value]=\"selectedLabel()\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--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)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { 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: MatChipsModule }, { kind: "component", type: i2$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", 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 }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxChipsDisplayed: { classPropertyName: "maxChipsDisplayed", publicName: "maxChipsDisplayed", isSignal: true, isRequired: false, transformFunction: null }, chipsDirection: { classPropertyName: "chipsDirection", publicName: "chipsDirection", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid\n      #chipGrid\n      class=\"ps-trigger__chip-grid\"\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n    >\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n    <input\n      matInput\n      [matChipInputFor]=\"chipGrid\"\n      class=\"ps-trigger__kbd-input\"\n      [required]=\"isRequired()\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [attr.aria-label]=\"label()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <input\n      matInput\n      class=\"ps-trigger__input\"\n      [required]=\"isRequired()\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [value]=\"selectedLabel()\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--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)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { 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: MatChipsModule }, { kind: "component", type: i2$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
             type: Component,
@@ -3771,7 +3787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInputModule,
                         MatTooltipModule,
                         MatProgressSpinnerModule,
-                    ], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid\n      #chipGrid\n      class=\"ps-trigger__chip-grid\"\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n    >\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n    <input\n      matInput\n      [matChipInputFor]=\"chipGrid\"\n      class=\"ps-trigger__kbd-input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [attr.aria-label]=\"label()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <input\n      matInput\n      class=\"ps-trigger__input\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [value]=\"selectedLabel()\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--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)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\n"] }]
+                    ], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    [class.ps-trigger--row]=\"chipsDirection() === 'row'\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <mat-chip-grid\n      #chipGrid\n      class=\"ps-trigger__chip-grid\"\n      [class.ps-trigger__chip-grid--column]=\"chipsDirection() === 'column'\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n    >\n      @for (item of displayedChips(); track item[config().valueKey]) {\n        <mat-chip-row\n          class=\"ps-trigger__chip\"\n          [value]=\"item[config().valueKey]\"\n          [disabled]=\"isDisabled()\"\n          (removed)=\"removeChip(item, $event)\"\n        >\n          {{ getLabel(item) }}\n          <button matChipRemove [disabled]=\"isDisabled()\" (click)=\"$event.stopPropagation()\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n\n    @if (remainingChipsCount() > 0) {\n      <span class=\"ps-trigger__remaining\">+{{ remainingChipsCount() }}</span>\n    }\n\n    <!-- Hidden input required for mat-chip-grid; tambi\u00E9n da foco de teclado al trigger -->\n    <input\n      matInput\n      [matChipInputFor]=\"chipGrid\"\n      class=\"ps-trigger__kbd-input\"\n      [required]=\"isRequired()\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [attr.aria-label]=\"label()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n  <mat-form-field\n    appearance=\"outline\"\n    floatLabel=\"always\"\n    [subscriptSizing]=\"subscriptSizing()\"\n    class=\"ps-trigger\"\n    [class.ps-trigger--disabled]=\"isDisabled()\"\n    [class.ps-trigger--open]=\"_isOpen()\"\n    (click)=\"openBottomSheet($event)\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n\n    <input\n      matInput\n      class=\"ps-trigger__input\"\n      [required]=\"isRequired()\"\n      readonly\n      role=\"combobox\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"_isOpen()\"\n      [value]=\"selectedLabel()\"\n      [disabled]=\"isDisabled()\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <div matSuffix class=\"ps-trigger__suffix\">\n      @if (clearable() && hasSelection() && !isDisabled()) {\n        <button matIconButton matSuffix [attr.aria-label]=\"intl.clearSearchTooltip\" (click)=\"clearSelection($event)\">\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n      <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n    </div>\n\n    @if (error()) {\n      <mat-error>{{ error() }}</mat-error>\n    }\n    @if (hint()) {\n      <mat-hint>{{ hint() }}</mat-hint>\n    }\n  </mat-form-field>\n}\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--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)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger--open{--mat-form-field-outlined-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-focus-outline-color: var(--mat-sys-primary);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-primary)}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__kbd-input{width:0;min-width:0;flex:0 0 0;padding:0;margin:0;caret-color:transparent}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:nowrap;overflow:hidden;gap:6px}.ps-trigger__chip-grid--column ::ng-deep .mdc-evolution-chip-set__chips{flex-wrap:wrap;overflow:visible}.ps-trigger__chip.mat-mdc-chip{height:30px;border:none!important;background-color:var(--mat-sys-secondary-container)!important;color:var(--mat-sys-on-secondary-container);font:var(--mat-sys-label-large);box-shadow:none!important;--mdc-chip-elevated-container-elevation: none;--mdc-chip-outline-width: 0}.ps-trigger__chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-focus-overlay{display:none}.ps-trigger__suffix{display:flex;align-items:center;gap:0;flex-shrink:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger__remaining{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--mat-sys-surface-container-highest);color:var(--mat-sys-on-surface-variant);margin-left:6px;white-space:nowrap;flex-shrink:0}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--row ::ng-deep .mat-mdc-form-field-infix{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;min-height:56px}.ps-trigger--row .ps-trigger__chip-grid{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ps-trigger--row .ps-trigger__chip-grid ::ng-deep .mdc-evolution-chip-set__chips{min-height:0}.ps-trigger--row .ps-trigger__remaining{flex:0 0 auto}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}.ps-trigger--disabled .ps-trigger__input,.ps-trigger--disabled .ps-trigger__chip,.ps-trigger--disabled .ps-trigger__suffix{opacity:.38}\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 }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", 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 }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], extraFiltersTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFiltersTemplate", required: false }] }], maxChipsDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipsDisplayed", required: false }] }], chipsDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsDirection", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class NgxSkeleton {