@xsmusices/ui 1.44.6 → 1.44.8

package/fesm2022/xsmusices-ui.mjs

@@ -5223,36 +5223,82 @@ class XSBodyOverflowService {
     platformId;
     documentService;
     count = 0;
+    locked = [];
     constructor(platformId, documentService) {
         this.platformId = platformId;
         this.documentService = documentService;
     }
-    lock() {
+    /**
+     * Bloquea el scroll. Sin selector bloquea body (histórico).
+     * Con selector CSS bloquea ese elemento ADEMÁS de body, restaurando
+     * el valor previo exacto al desbloquear. Si el selector no existe,
+     * solo se bloquea body. Contador para aperturas repetidas.
+     */
+    lock(selector) {
         this.count++;
-        if (isPlatformBrowser(this.platformId) && this.count === 1) {
-            const doc = this.documentService.document;
-            if (doc) {
-                doc.body.style.overflow = 'hidden';
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.count !== 1)
+            return;
+        const doc = this.documentService.document;
+        if (!doc)
+            return;
+        this.lockEl(doc.body);
+        if (selector) {
+            try {
+                const target = doc.querySelector(selector);
+                if (target instanceof HTMLElement &&
+                    target !== doc.body) {
+                    this.lockEl(target);
+                }
+            }
+            catch {
+                // Selector inválido: se mantiene solo el bloqueo de body.
             }
         }
     }
+    lockEl(el) {
+        this.locked.push({ el, prevOverflow: el.style.overflow });
+        el.style.overflow = 'hidden';
+    }
     unlock() {
         this.count = Math.max(0, this.count - 1);
-        if (isPlatformBrowser(this.platformId) && this.count === 0) {
-            const doc = this.documentService.document;
-            if (doc) {
-                doc.body.style.overflow = '';
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.count !== 0)
+            return;
+        const doc = this.documentService.document;
+        if (!doc) {
+            this.locked = [];
+            return;
+        }
+        for (const { el, prevOverflow } of this.locked) {
+            if (el.isConnected) {
+                el.style.overflow = prevOverflow;
             }
         }
+        this.locked = [];
     }
     reset() {
         this.count = 0;
-        if (isPlatformBrowser(this.platformId)) {
-            const doc = this.documentService.document;
-            if (doc) {
+        if (!isPlatformBrowser(this.platformId)) {
+            this.locked = [];
+            return;
+        }
+        const doc = this.documentService.document;
+        if (doc) {
+            for (const { el, prevOverflow } of this.locked) {
+                if (el.isConnected) {
+                    el.style.overflow = prevOverflow;
+                }
+            }
+            // Compatibilidad: por si algún consumidor antiguo mutó body
+            // directamente fuera del registro.
+            if (doc.body.style.overflow === 'hidden') {
                 doc.body.style.overflow = '';
             }
         }
+        this.locked = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSBodyOverflowService, deps: [{ token: PLATFORM_ID }, { token: XSDocumentService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSBodyOverflowService, providedIn: 'root' });
@@ -7884,6 +7930,7 @@ class XSModalComponent {
     injector = inject(Injector);
     dynamicContentPlaceholder = viewChild.required('dynamicContentPlaceholder', { read: ViewContainerRef });
     destroyRef = inject(DestroyRef);
+    hostRef = inject(ElementRef);
     translateService = inject(XSTranslateService);
     langVersion = signal(0, ...(ngDevMode ? [{ debugName: "langVersion" }] : []));
     platformId = inject(PLATFORM_ID);
@@ -7901,6 +7948,10 @@ class XSModalComponent {
     buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
     hasOverflow = true;
     closeOnBackdropClick = signal(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    showCloseButton = signal(false, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
+    closeLabel = signal('', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    contentPadding = signal('default', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    panelSize = signal('xl', ...(ngDevMode ? [{ debugName: "panelSize" }] : []));
     // unknown es necesario porque la acción que emite el modal es genérica y la define el componente inyectado
     onAction = new Subject();
     constructor() {
@@ -7932,7 +7983,7 @@ class XSModalComponent {
     // unknown es necesario porque el modal acepta cualquier tipo de componente a inyectar
     componentType, 
     // unknown es necesario porque el dato es genérico y lo define el componente inyectado
-    data, type, title, subTitle, buttons, _hasOverflow, _closeOnBackdropClick) {
+    data, type, title, subTitle, buttons, _hasOverflow, _closeOnBackdropClick, _showCloseButton, _closeLabel, _contentPadding, _panelSize) {
         const placeholder = this.dynamicContentPlaceholder();
         placeholder?.clear();
         this.injectedComponentRef = placeholder.createComponent(componentType, {
@@ -7954,8 +8005,13 @@ class XSModalComponent {
         }
         this.closeRequested = false;
         this.isVisible.set(true);
-        this.previousActiveElement =
-            document.activeElement;
+        if (isPlatformBrowser(this.platformId)) {
+            this.previousActiveElement =
+                document.activeElement;
+        }
+        else {
+            this.previousActiveElement = null;
+        }
         if (title !== undefined)
             this.modalTitle.set(title);
         if (subTitle !== undefined)
@@ -7966,6 +8022,17 @@ class XSModalComponent {
             this.hasOverflow = _hasOverflow;
         if (_closeOnBackdropClick !== undefined)
             this.closeOnBackdropClick.set(_closeOnBackdropClick);
+        if (_showCloseButton !== undefined)
+            this.showCloseButton.set(_showCloseButton);
+        if (_closeLabel !== undefined)
+            this.closeLabel.set(_closeLabel);
+        if (_contentPadding !== undefined)
+            this.contentPadding.set(_contentPadding);
+        if (_panelSize !== undefined)
+            this.panelSize.set(_panelSize);
+        if (isPlatformBrowser(this.platformId)) {
+            setTimeout(() => this.focusInitial(), 0);
+        }
         const fbInstance = this.injectedComponentRef?.instance?.footerButtons;
         if (fbInstance) {
             this.footerSyncEffect?.destroy();
@@ -8000,6 +8067,11 @@ class XSModalComponent {
     onTabKey(event) {
         if (!this.isVisible())
             return;
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const active = document.activeElement;
+        if (!active || !this.hostRef.nativeElement.contains(active))
+            return;
         const focusable = this.getFocusableElements();
         if (focusable.length === 0) {
             event.preventDefault();
@@ -8018,19 +8090,37 @@ class XSModalComponent {
         }
     }
     getFocusableElements() {
-        const hostEl = document.querySelector('[xs-modal-host]');
+        const hostEl = this.hostRef.nativeElement;
         if (!hostEl)
             return [];
         return Array.from(hostEl.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'));
     }
+    /** Lleva el foco al panel o a su primer elemento enfocable. */
+    focusInitial() {
+        if (!this.isVisible())
+            return;
+        const focusable = this.getFocusableElements();
+        if (focusable.length > 0) {
+            focusable[0].focus();
+            return;
+        }
+        const panel = this.hostRef.nativeElement.querySelector('[data-xs-modal-panel]');
+        panel?.focus();
+    }
     close(result) {
         if (this.closeRequested)
             return;
         this.modalResult.next(result !== undefined ? result : null);
         this.closeRequested = true;
         this.isVisible.set(false);
-        this.previousActiveElement?.focus();
+        const prev = this.previousActiveElement;
         this.previousActiveElement = null;
+        if (isPlatformBrowser(this.platformId) &&
+            prev &&
+            prev.isConnected &&
+            typeof prev.focus === 'function') {
+            prev.focus();
+        }
     }
     onBackdropMouseDown(event) {
         if (event.target === event.currentTarget &&
@@ -8069,14 +8159,14 @@ class XSModalComponent {
         return this.translateService.translate(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSModalComponent, isStandalone: true, selector: "xs-modal", host: { attributes: { "xs-modal-host": "" }, listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "dynamicContentPlaceholder", first: true, predicate: ["dynamicContentPlaceholder"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"modal-overlay\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-label]=\"modalTitle() || translate('MODAL.DIALOG_LABEL')\"\n  [ngClass]=\"{\n    'bottom-sheet': currentModalType() === 'bottom-sheet',\n    centered: currentModalType() === 'centered',\n    'side-panel': currentModalType() === 'side-panel',\n  }\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n>\n  <div\n    class=\"relative p-4 bg-black shadow-lg max-h-[80vh] flex flex-col\"\n    [ngClass]=\"{\n      'modal-bottom-sheet': currentModalType() === 'bottom-sheet',\n      'modal-centered': currentModalType() === 'centered',\n      'modal-side-panel': currentModalType() === 'side-panel',\n      'animate-slide-up':\n        isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-slide-down':\n        !isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-zoom-in':\n        isVisible() && currentModalType() === 'centered',\n      'animate-slide-in-right':\n        isVisible() && currentModalType() === 'side-panel',\n      'animate-slide-out-right':\n        !isVisible() && currentModalType() === 'side-panel',\n    }\"\n    role=\"document\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (mouseup)=\"$event.stopPropagation()\"\n    (animationend)=\"onAnimationEnd()\"\n  >\n    @if (currentModalType() === 'bottom-sheet') {\n      <div\n        class=\"flex justify-center p-2\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <div class=\"w-10 h-1 bg-gray-300 rounded-full\"></div>\n      </div>\n    }\n    @if (modalTitle()) {\n      <div\n        class=\"px-4 pb-2 text-center\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <h2 class=\"text-xl font-bold text-white\">\n          {{ modalTitle() }}\n        </h2>\n        @if (modalSubTitle()) {\n          <p class=\"text-sm text-gray-300\">\n            {{ modalSubTitle() }}\n          </p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 px-2 overflow-y-auto overflow-x-hidden\">\n      <ng-template #dynamicContentPlaceholder></ng-template>\n    </div>\n\n    @if (buttons() && buttons().length > 0) {\n      <div\n        class=\"modal-footer grid grid-cols-12 gap-2 pt-4 mt-2 bg-black border-t border-zinc-800/30\"\n      >\n        @for (button of buttons(); track button.id ?? $index) {\n          <xs-button\n            [id]=\"\n              button.id\n                ? button.id\n                : buttons().indexOf(button).toString()\n            \"\n            (click)=\"handleButtonAction(button.action!)\"\n            [variant]=\"\n              button.variant ? button.variant : 'primary'\n            \"\n            [layout]=\"button.layout ? button.layout : 'between'\"\n            [isFull]=\"true\"\n            [disabled]=\"button.disabled ?? false\"\n            [loading]=\"button.loading ?? false\"\n            [icon]=\"button.icon\"\n            [label]=\"button.label\"\n            [ngClass]=\"getButtonClass(button)\"\n          >\n          </xs-button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .5}.modal-bottom-sheet{z-index:10001;width:100%;max-width:28rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.modal-overlay.bottom-sheet{align-items:flex-end}.modal-centered{z-index:10001;margin:1rem;width:100%;max-width:32rem;border-radius:.75rem}.modal-overlay.centered{align-items:center}.modal-footer{padding-bottom:max(1rem,env(safe-area-inset-bottom,0px))}.modal-side-panel{z-index:10001;margin:0;height:100vh;max-height:100vh;width:100%;border-radius:0;border-left-width:1px;--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1))}@media(min-width:640px){.modal-side-panel{max-width:36rem}}@media(min-width:1024px){.modal-side-panel{max-width:42rem}}.modal-side-panel{height:100dvh;max-height:100dvh}.modal-overlay.side-panel{align-items:stretch;justify-content:flex-end;padding:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}.animate-slide-in-right{animation:slideInRight .3s ease-out forwards}.animate-slide-out-right{animation:slideOutRight .3s ease-in forwards}.animate-zoom-in{animation:zoomIn .3s ease-out forwards}.animate-slide-up{animation:slideUp .3s ease-out forwards}.animate-slide-down{animation:slideDown .3s ease-in forwards}:host h2{text-transform:uppercase}:host-context(xs-button) button{text-transform:uppercase}.close-button{position:absolute;top:.75rem;right:.75rem;cursor:pointer;font-size:1.5rem;line-height:2rem;font-weight:700;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.close-button:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.modal-open{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSModalComponent, isStandalone: true, selector: "xs-modal", host: { attributes: { "xs-modal-host": "" }, listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "dynamicContentPlaceholder", first: true, predicate: ["dynamicContentPlaceholder"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"modal-overlay\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-label]=\"modalTitle() || translate('MODAL.DIALOG_LABEL')\"\n  [ngClass]=\"{\n    'bottom-sheet': currentModalType() === 'bottom-sheet',\n    centered: currentModalType() === 'centered',\n    'side-panel': currentModalType() === 'side-panel',\n  }\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n>\n  <div\n    data-xs-modal-panel\n    tabindex=\"-1\"\n    class=\"relative bg-black shadow-lg max-h-[80vh] flex flex-col\"\n    [class.p-4]=\"contentPadding() === 'default'\"\n    [class.p-0]=\"contentPadding() === 'none'\"\n    [ngClass]=\"{\n      'modal-bottom-sheet': currentModalType() === 'bottom-sheet',\n      'modal-centered': currentModalType() === 'centered',\n      'modal-side-panel': currentModalType() === 'side-panel',\n      'modal-side-panel-sm': currentModalType() === 'side-panel' && panelSize() === 'sm',\n      'modal-side-panel-md': currentModalType() === 'side-panel' && panelSize() === 'md',\n      'modal-side-panel-lg': currentModalType() === 'side-panel' && panelSize() === 'lg',\n      'animate-slide-up':\n        isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-slide-down':\n        !isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-zoom-in':\n        isVisible() && currentModalType() === 'centered',\n      'animate-slide-in-right':\n        isVisible() && currentModalType() === 'side-panel',\n      'animate-slide-out-right':\n        !isVisible() && currentModalType() === 'side-panel',\n    }\"\n    role=\"document\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (mouseup)=\"$event.stopPropagation()\"\n    (animationend)=\"onAnimationEnd()\"\n  >\n    @if (currentModalType() === 'bottom-sheet') {\n      <div\n        class=\"flex justify-center p-2\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <div class=\"w-10 h-1 bg-gray-300 rounded-full\"></div>\n      </div>\n    }\n    @if (modalTitle()) {\n      <div\n        class=\"modal-header px-4 pb-2 text-center\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <h2 class=\"text-xl font-bold text-white\">\n          {{ modalTitle() }}\n        </h2>\n        @if (modalSubTitle()) {\n          <p class=\"text-sm text-gray-300\">\n            {{ modalSubTitle() }}\n          </p>\n        }\n      </div>\n    }\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"modal-close-btn\"\n        (click)=\"close()\"\n        [attr.aria-label]=\"closeLabel() || translate('MODAL.CLOSE')\"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n      </button>\n    }\n\n    <div class=\"flex-1 px-2 overflow-y-auto overflow-x-hidden\">\n      <ng-template #dynamicContentPlaceholder></ng-template>\n    </div>\n\n    @if (buttons() && buttons().length > 0) {\n      <div\n        class=\"modal-footer grid grid-cols-12 gap-2 pt-4 mt-2 bg-black border-t border-zinc-800/30\"\n      >\n        @for (button of buttons(); track button.id ?? $index) {\n          <xs-button\n            [id]=\"\n              button.id\n                ? button.id\n                : buttons().indexOf(button).toString()\n            \"\n            (click)=\"handleButtonAction(button.action!)\"\n            [variant]=\"\n              button.variant ? button.variant : 'primary'\n            \"\n            [layout]=\"button.layout ? button.layout : 'between'\"\n            [isFull]=\"true\"\n            [disabled]=\"button.disabled ?? false\"\n            [loading]=\"button.loading ?? false\"\n            [icon]=\"button.icon\"\n            [label]=\"button.label\"\n            [ngClass]=\"getButtonClass(button)\"\n          >\n          </xs-button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .5}.modal-bottom-sheet{z-index:10001;width:100%;max-width:28rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.modal-overlay.bottom-sheet{align-items:flex-end}.modal-centered{z-index:10001;margin:1rem;width:100%;max-width:32rem;border-radius:.75rem}.modal-overlay.centered{align-items:center}.modal-footer{padding-bottom:max(1rem,env(safe-area-inset-bottom,0px));padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}.modal-overlay.side-panel .modal-header{padding-top:max(.5rem,env(safe-area-inset-top,0px))}.modal-close-btn{position:absolute;top:.75rem;right:.75rem;z-index:10;display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem;line-height:1;--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-close-btn:hover{background-color:#27272a99;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.modal-close-btn:focus-visible{outline-width:2px;outline-color:#fff}.modal-overlay.side-panel .modal-close-btn{top:max(.75rem,env(safe-area-inset-top,0px));right:max(.75rem,env(safe-area-inset-right,0px))}.modal-side-panel{z-index:10001;margin:0;height:100vh;max-height:100vh;width:100%;border-radius:0;border-left-width:1px;--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1));height:100dvh;max-height:100dvh}.modal-side-panel,.modal-side-panel-sm,.modal-side-panel-md,.modal-side-panel-lg{width:100%}@media(min-width:640px){.modal-side-panel-sm{max-width:28rem}.modal-side-panel-md{max-width:32rem}.modal-side-panel-lg,.modal-side-panel{max-width:36rem}}@media(min-width:1024px){.modal-side-panel{max-width:42rem}}.modal-overlay.side-panel{align-items:stretch;justify-content:flex-end;padding:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}.animate-slide-in-right{animation:slideInRight .3s ease-out forwards}.animate-slide-out-right{animation:slideOutRight .3s ease-in forwards}.animate-zoom-in{animation:zoomIn .3s ease-out forwards}.animate-slide-up{animation:slideUp .3s ease-out forwards}.animate-slide-down{animation:slideDown .3s ease-in forwards}:host h2{text-transform:uppercase}:host-context(xs-button) button{text-transform:uppercase}.close-button{position:absolute;top:.75rem;right:.75rem;cursor:pointer;font-size:1.5rem;line-height:2rem;font-weight:700;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.close-button:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.modal-open{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'xs-modal', imports: [CommonModule, XSButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'xs-modal-host': '',
                         '(document:keydown.escape)': 'onEscapeKey($event)',
-                    }, template: "<div\n  class=\"modal-overlay\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-label]=\"modalTitle() || translate('MODAL.DIALOG_LABEL')\"\n  [ngClass]=\"{\n    'bottom-sheet': currentModalType() === 'bottom-sheet',\n    centered: currentModalType() === 'centered',\n    'side-panel': currentModalType() === 'side-panel',\n  }\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n>\n  <div\n    class=\"relative p-4 bg-black shadow-lg max-h-[80vh] flex flex-col\"\n    [ngClass]=\"{\n      'modal-bottom-sheet': currentModalType() === 'bottom-sheet',\n      'modal-centered': currentModalType() === 'centered',\n      'modal-side-panel': currentModalType() === 'side-panel',\n      'animate-slide-up':\n        isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-slide-down':\n        !isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-zoom-in':\n        isVisible() && currentModalType() === 'centered',\n      'animate-slide-in-right':\n        isVisible() && currentModalType() === 'side-panel',\n      'animate-slide-out-right':\n        !isVisible() && currentModalType() === 'side-panel',\n    }\"\n    role=\"document\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (mouseup)=\"$event.stopPropagation()\"\n    (animationend)=\"onAnimationEnd()\"\n  >\n    @if (currentModalType() === 'bottom-sheet') {\n      <div\n        class=\"flex justify-center p-2\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <div class=\"w-10 h-1 bg-gray-300 rounded-full\"></div>\n      </div>\n    }\n    @if (modalTitle()) {\n      <div\n        class=\"px-4 pb-2 text-center\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <h2 class=\"text-xl font-bold text-white\">\n          {{ modalTitle() }}\n        </h2>\n        @if (modalSubTitle()) {\n          <p class=\"text-sm text-gray-300\">\n            {{ modalSubTitle() }}\n          </p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 px-2 overflow-y-auto overflow-x-hidden\">\n      <ng-template #dynamicContentPlaceholder></ng-template>\n    </div>\n\n    @if (buttons() && buttons().length > 0) {\n      <div\n        class=\"modal-footer grid grid-cols-12 gap-2 pt-4 mt-2 bg-black border-t border-zinc-800/30\"\n      >\n        @for (button of buttons(); track button.id ?? $index) {\n          <xs-button\n            [id]=\"\n              button.id\n                ? button.id\n                : buttons().indexOf(button).toString()\n            \"\n            (click)=\"handleButtonAction(button.action!)\"\n            [variant]=\"\n              button.variant ? button.variant : 'primary'\n            \"\n            [layout]=\"button.layout ? button.layout : 'between'\"\n            [isFull]=\"true\"\n            [disabled]=\"button.disabled ?? false\"\n            [loading]=\"button.loading ?? false\"\n            [icon]=\"button.icon\"\n            [label]=\"button.label\"\n            [ngClass]=\"getButtonClass(button)\"\n          >\n          </xs-button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .5}.modal-bottom-sheet{z-index:10001;width:100%;max-width:28rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.modal-overlay.bottom-sheet{align-items:flex-end}.modal-centered{z-index:10001;margin:1rem;width:100%;max-width:32rem;border-radius:.75rem}.modal-overlay.centered{align-items:center}.modal-footer{padding-bottom:max(1rem,env(safe-area-inset-bottom,0px))}.modal-side-panel{z-index:10001;margin:0;height:100vh;max-height:100vh;width:100%;border-radius:0;border-left-width:1px;--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1))}@media(min-width:640px){.modal-side-panel{max-width:36rem}}@media(min-width:1024px){.modal-side-panel{max-width:42rem}}.modal-side-panel{height:100dvh;max-height:100dvh}.modal-overlay.side-panel{align-items:stretch;justify-content:flex-end;padding:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}.animate-slide-in-right{animation:slideInRight .3s ease-out forwards}.animate-slide-out-right{animation:slideOutRight .3s ease-in forwards}.animate-zoom-in{animation:zoomIn .3s ease-out forwards}.animate-slide-up{animation:slideUp .3s ease-out forwards}.animate-slide-down{animation:slideDown .3s ease-in forwards}:host h2{text-transform:uppercase}:host-context(xs-button) button{text-transform:uppercase}.close-button{position:absolute;top:.75rem;right:.75rem;cursor:pointer;font-size:1.5rem;line-height:2rem;font-weight:700;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.close-button:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.modal-open{overflow:hidden}\n"] }]
+                    }, template: "<div\n  class=\"modal-overlay\"\n  role=\"dialog\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-label]=\"modalTitle() || translate('MODAL.DIALOG_LABEL')\"\n  [ngClass]=\"{\n    'bottom-sheet': currentModalType() === 'bottom-sheet',\n    centered: currentModalType() === 'centered',\n    'side-panel': currentModalType() === 'side-panel',\n  }\"\n  (mousedown)=\"onBackdropMouseDown($event)\"\n>\n  <div\n    data-xs-modal-panel\n    tabindex=\"-1\"\n    class=\"relative bg-black shadow-lg max-h-[80vh] flex flex-col\"\n    [class.p-4]=\"contentPadding() === 'default'\"\n    [class.p-0]=\"contentPadding() === 'none'\"\n    [ngClass]=\"{\n      'modal-bottom-sheet': currentModalType() === 'bottom-sheet',\n      'modal-centered': currentModalType() === 'centered',\n      'modal-side-panel': currentModalType() === 'side-panel',\n      'modal-side-panel-sm': currentModalType() === 'side-panel' && panelSize() === 'sm',\n      'modal-side-panel-md': currentModalType() === 'side-panel' && panelSize() === 'md',\n      'modal-side-panel-lg': currentModalType() === 'side-panel' && panelSize() === 'lg',\n      'animate-slide-up':\n        isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-slide-down':\n        !isVisible() && currentModalType() === 'bottom-sheet',\n      'animate-zoom-in':\n        isVisible() && currentModalType() === 'centered',\n      'animate-slide-in-right':\n        isVisible() && currentModalType() === 'side-panel',\n      'animate-slide-out-right':\n        !isVisible() && currentModalType() === 'side-panel',\n    }\"\n    role=\"document\"\n    (mousedown)=\"$event.stopPropagation()\"\n    (mouseup)=\"$event.stopPropagation()\"\n    (animationend)=\"onAnimationEnd()\"\n  >\n    @if (currentModalType() === 'bottom-sheet') {\n      <div\n        class=\"flex justify-center p-2\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <div class=\"w-10 h-1 bg-gray-300 rounded-full\"></div>\n      </div>\n    }\n    @if (modalTitle()) {\n      <div\n        class=\"modal-header px-4 pb-2 text-center\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (mouseup)=\"$event.stopPropagation()\"\n      >\n        <h2 class=\"text-xl font-bold text-white\">\n          {{ modalTitle() }}\n        </h2>\n        @if (modalSubTitle()) {\n          <p class=\"text-sm text-gray-300\">\n            {{ modalSubTitle() }}\n          </p>\n        }\n      </div>\n    }\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"modal-close-btn\"\n        (click)=\"close()\"\n        [attr.aria-label]=\"closeLabel() || translate('MODAL.CLOSE')\"\n      >\n        <span aria-hidden=\"true\">\u00D7</span>\n      </button>\n    }\n\n    <div class=\"flex-1 px-2 overflow-y-auto overflow-x-hidden\">\n      <ng-template #dynamicContentPlaceholder></ng-template>\n    </div>\n\n    @if (buttons() && buttons().length > 0) {\n      <div\n        class=\"modal-footer grid grid-cols-12 gap-2 pt-4 mt-2 bg-black border-t border-zinc-800/30\"\n      >\n        @for (button of buttons(); track button.id ?? $index) {\n          <xs-button\n            [id]=\"\n              button.id\n                ? button.id\n                : buttons().indexOf(button).toString()\n            \"\n            (click)=\"handleButtonAction(button.action!)\"\n            [variant]=\"\n              button.variant ? button.variant : 'primary'\n            \"\n            [layout]=\"button.layout ? button.layout : 'between'\"\n            [isFull]=\"true\"\n            [disabled]=\"button.disabled ?? false\"\n            [loading]=\"button.loading ?? false\"\n            [icon]=\"button.icon\"\n            [label]=\"button.label\"\n            [ngClass]=\"getButtonClass(button)\"\n          >\n          </xs-button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .5}.modal-bottom-sheet{z-index:10001;width:100%;max-width:28rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.modal-overlay.bottom-sheet{align-items:flex-end}.modal-centered{z-index:10001;margin:1rem;width:100%;max-width:32rem;border-radius:.75rem}.modal-overlay.centered{align-items:center}.modal-footer{padding-bottom:max(1rem,env(safe-area-inset-bottom,0px));padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}.modal-overlay.side-panel .modal-header{padding-top:max(.5rem,env(safe-area-inset-top,0px))}.modal-close-btn{position:absolute;top:.75rem;right:.75rem;z-index:10;display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem;line-height:1;--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-close-btn:hover{background-color:#27272a99;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.modal-close-btn:focus-visible{outline-width:2px;outline-color:#fff}.modal-overlay.side-panel .modal-close-btn{top:max(.75rem,env(safe-area-inset-top,0px));right:max(.75rem,env(safe-area-inset-right,0px))}.modal-side-panel{z-index:10001;margin:0;height:100vh;max-height:100vh;width:100%;border-radius:0;border-left-width:1px;--tw-border-opacity: 1;border-color:rgb(39 39 42 / var(--tw-border-opacity, 1));height:100dvh;max-height:100dvh}.modal-side-panel,.modal-side-panel-sm,.modal-side-panel-md,.modal-side-panel-lg{width:100%}@media(min-width:640px){.modal-side-panel-sm{max-width:28rem}.modal-side-panel-md{max-width:32rem}.modal-side-panel-lg,.modal-side-panel{max-width:36rem}}@media(min-width:1024px){.modal-side-panel{max-width:42rem}}.modal-overlay.side-panel{align-items:stretch;justify-content:flex-end;padding:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}.animate-slide-in-right{animation:slideInRight .3s ease-out forwards}.animate-slide-out-right{animation:slideOutRight .3s ease-in forwards}.animate-zoom-in{animation:zoomIn .3s ease-out forwards}.animate-slide-up{animation:slideUp .3s ease-out forwards}.animate-slide-down{animation:slideDown .3s ease-in forwards}:host h2{text-transform:uppercase}:host-context(xs-button) button{text-transform:uppercase}.close-button{position:absolute;top:.75rem;right:.75rem;cursor:pointer;font-size:1.5rem;line-height:2rem;font-weight:700;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.close-button:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.modal-open{overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dynamicContentPlaceholder: [{ type: i0.ViewChild, args: ['dynamicContentPlaceholder', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class XSModalConfirmComponent {
@@ -9125,7 +9215,7 @@ class XSModalService {
         if (this.modalComponentRef) {
             this.doCloseModal();
         }
-        this.bodyOverflow.lock();
+        this.bodyOverflow.lock(options.scrollLockSelector);
         this.modalComponentRef = createComponent(XSModalComponent, {
             environmentInjector: this.appRef.injector,
             elementInjector: this.injector,
@@ -9139,7 +9229,7 @@ class XSModalService {
         this.currentModalResult$ = modalResult$;
         const result$ = modalResult$.asObservable();
         if (this.modalComponentRef) {
-            this.modalComponentRef.instance.injectComponent(componentType, options.data, options.type, options.title, options.subTitle, options.buttons, options.hasOverflow, options.closeOnBackdropClick);
+            this.modalComponentRef.instance.injectComponent(componentType, options.data, options.type, options.title, options.subTitle, options.buttons, options.hasOverflow, options.closeOnBackdropClick, options.showCloseButton, options.closeLabel, options.contentPadding, options.panelSize);
             result$.onAction =
                 this.modalComponentRef.instance.onAction.asObservable();
             this.modalComponentRef.instance.onClose
@@ -13289,6 +13379,14 @@ var en$e = {
 class XSFilterPanelComponent {
     scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
     show = model(false, ...(ngDevMode ? [{ debugName: "show" }] : []));
+    /**
+     * Modo embebido (Fase 1 App): el panel se presenta como contenido dentro
+     * de un XSModal y NO pinta su propio overlay, hoja, cabecera ni gestiona
+     * Escape/foco (lo hace el modal anfitrión). La lógica de grupos, tipos de
+     * filtro y eventos se conserva intacta. Por defecto false: comportamiento
+     * histórico sin cambios.
+     */
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
     externalTranslateService = input(...(ngDevMode ? [undefined, { debugName: "externalTranslateService" }] : []));
     _demoItems = signal([], ...(ngDevMode ? [{ debugName: "_demoItems" }] : []));
     _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
@@ -13318,7 +13416,7 @@ class XSFilterPanelComponent {
         effect(() => this._data.set(this.data() ?? []));
         if (isPlatformBrowser(this.platformId)) {
             effect(() => {
-                if (this.show()) {
+                if (!this.embedded() && this.show()) {
                     setTimeout(() => {
                         const el = document.querySelector('[role="dialog"]');
                         el?.focus();
@@ -13329,6 +13427,7 @@ class XSFilterPanelComponent {
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((event) => {
                 if (event.key === 'Escape' &&
+                    !this.embedded() &&
                     this.show()) {
                     this.handleClose();
                 }
@@ -13399,8 +13498,12 @@ class XSFilterPanelComponent {
     }
     scrollToGroup(groupId) {
         setTimeout(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            if (!this.show() && !this.embedded())
+                return;
             const el = document.getElementById(`group-${groupId}`);
-            if (el && this.scrollContainer()) {
+            if (el) {
                 el.scrollIntoView({
                     behavior: 'smooth',
                     block: 'nearest',
@@ -13674,12 +13777,12 @@ class XSFilterPanelComponent {
         this.applied.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSFilterPanelComponent, isStandalone: true, selector: "xs-filter-panel", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, externalTranslateService: { classPropertyName: "externalTranslateService", publicName: "externalTranslateService", isSignal: true, isRequired: false, transformFunction: null }, demoItems: { classPropertyName: "demoItems", publicName: "demoItems", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", panelClose: "panelClose", applied: "applied", filterChange: "filterChange", clear: "clear" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (_demoItems().length > 0) {\n  <div\n    class=\"p-4 mb-4 rounded-xl bg-zinc-900/50 flex justify-between items-center\"\n  >\n    <div>\n      <p class=\"text-white font-bold text-sm\">\n        {{ t('DEMO_TITLE') }}\n      </p>\n      <p class=\"text-zinc-500 text-xs\">\n        {{ t('DEMO_DESCRIPTION') }}\n      </p>\n    </div>\n    <xs-button\n      (onClick)=\"show.set(true)\"\n      [label]=\"t('OPEN_FILTERS')\"\n      variant=\"custom\"\n      customClass=\"px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl active:scale-95\"\n    />\n  </div>\n}\n\n@if (show()) {\n  <div\n    class=\"fixed inset-0 z-[9000] bg-black/60 backdrop-blur-sm overlay-fade-in cursor-default\"\n    (click)=\"handleClose()\"\n    role=\"presentation\"\n  ></div>\n  <div class=\"fixed inset-0 z-[9000] flex items-end justify-center pointer-events-none\">\n    <section\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"t('FILTERS')\"\n      tabindex=\"-1\"\n      class=\"relative w-full max-w-md mx-auto overflow-hidden bg-black shadow-2xl rounded-t-[2.5rem] sheet-slide-up max-h-[85vh] flex flex-col cursor-auto pointer-events-auto outline-none\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n    >\n      <div class=\"flex justify-center pt-4 pb-2\">\n        <div class=\"w-12 h-1.5 bg-zinc-800 rounded-full\"></div>\n      </div>\n\n      <div class=\"px-6 py-2 flex justify-between items-center\">\n        <h2\n          class=\"text-xl font-bold text-white tracking-tight uppercase\"\n        >\n          {{ t('FILTERS') }}\n        </h2>\n        <div class=\"flex items-center gap-2\">\n          @if (activeFiltersCount() > 0) {\n            <xs-button\n              (onClick)=\"clear.emit()\"\n              [label]=\"capitalize(t('CLEAR'))\"\n              layout=\"mini\"\n              variant=\"custom\"\n              customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n            />\n          }\n          <xs-button\n            (onClick)=\"handleApply()\"\n            [label]=\"t('DONE')\"\n            layout=\"mini\"\n            variant=\"custom\"\n            customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n          />\n        </div>\n      </div>\n\n      <div\n        #scrollContainer\n        class=\"flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-12 space-y-3\"\n      >\n        @for (group of filteredData(); track group.id) {\n          <div\n            [id]=\"'group-' + group.id\"\n            class=\"overflow-hidden rounded-[2.5rem] bg-zinc-900/50 transition-all duration-300 filter-group-item border-none\"\n          >\n            <button\n              (click)=\"toggleGroup(group.id)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"activeGroupId() === group.id\"\n              [attr.aria-controls]=\"'group-content-' + group.id\"\n              class=\"w-full flex items-center justify-between px-6 py-4 transition-colors border-none\"\n              [class]=\"\n                activeGroupId() === group.id\n                  ? 'bg-zinc-900/50'\n                  : 'bg-transparent hover:bg-black/40 active:bg-black/20'\n              \"\n            >\n              <div\n                class=\"flex-1 flex flex-col text-left justify-center h-full\"\n              >\n                <span\n                  class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-[0.15em] leading-none mb-2\"\n                >\n                  {{ t(group.title) }}\n                </span>\n                <span\n                  class=\"text-base font-semibold leading-tight\"\n                  [class.text-white]=\"\n                    group.selectedId ||\n                    (group.type === 'dateRange' &&\n                      (group.dateFrom || group.dateTo))\n                  \"\n                >\n                  {{\n                    getSelectedLabel(group) || t('NOT_SELECTED')\n                  }}\n                </span>\n              </div>\n              <div class=\"flex items-center justify-center pl-4\">\n                <div\n                  class=\"chevron opacity-40\"\n                  [class.open]=\"activeGroupId() === group.id\"\n                ></div>\n              </div>\n            </button>\n\n            <div\n              [id]=\"'group-content-' + group.id\"\n              class=\"collapsible-content\"\n              [class.open]=\"activeGroupId() === group.id\"\n              role=\"region\"\n              [attr.aria-label]=\"t(group.title)\"\n            >\n              <div class=\"collapsible-inner\">\n                <div class=\"px-2 pb-3 bg-zinc-900/50\">\n                  <div\n                    class=\"bg-zinc-900/50 rounded-[1.8rem] overflow-hidden inner-panel shadow-2xl border-none\"\n                  >\n                    @if (activeGroupType() !== 'searchSelect' && activeGroupType() !== 'dateRange') {\n                      <div class=\"p-3 bg-zinc-900/50\">\n                        <div class=\"relative\">\n                          <input\n                            type=\"text\"\n                            [ngModel]=\"searchQuery()\"\n                            (ngModelChange)=\"\n                              searchQuery.set($event)\n                            \"\n                            [placeholder]=\"capitalize(t('SEARCH')) + '...'\"\n                            [attr.aria-label]=\"capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:ring-0 placeholder:text-zinc-500 transition-all outline-none border-none\"\n                          />\n                          <span\n                            class=\"absolute left-3 top-3 opacity-40 text-sm\"\n                            aria-hidden=\"true\"\n                            >\uD83D\uDD0D</span\n                          >\n                        </div>\n                      </div>\n                    }\n\n                    <div class=\"flex flex-col\">\n                      @if (\n                        group.type === 'select' ||\n                        group.type === undefined ||\n                        group.type === 'searchSelect'\n                      ) {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onSelectOption(group.id, opt.id)\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.text-zinc-500]=\"\n                                group.selectedId !== opt.id\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  group.selectedId !== opt.id\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedId === opt.id\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'multiSelect') {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onMultiSelectOption(\n                                group.id,\n                                opt.id\n                              )\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.text-zinc-500]=\"\n                                !group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  !group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'boolean') {\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, true)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== true\n                            \"\n                            >{{ capitalize(t('YES')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== true\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === true\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, false)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== false\n                            \"\n                            >{{ capitalize(t('NO')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== false\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === false\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                      }\n\n                      @if (group.type === 'range') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MIN_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMin ||\n                                group.minValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'min',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MAX_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMax ||\n                                group.maxValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'max',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n\n                      @if (group.type === 'searchSelect') {\n                        <div class=\"px-6 py-4 bg-zinc-900/50\">\n                          <input\n                            type=\"text\"\n                            [value]=\"\n                              group.selectedSearchValue || ''\n                            \"\n                            (input)=\"\n                              onSearchChange(group.id, $event)\n                            \"\n                            [placeholder]=\"\n                              group.searchPlaceholder ||\n                              capitalize(t('SEARCH'))\n                            \"\n                            [attr.aria-label]=\"group.searchPlaceholder || capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                          />\n                        </div>\n                      }\n\n                      @if (group.type === 'dateRange') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('FROM_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateFrom || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'from',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('TO_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateTo || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'to',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n  </div>\n}\n", styles: [".overlay-fade-in{animation:fadeIn .25s ease-out forwards}.sheet-slide-up{will-change:transform;animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.chevron{height:.5rem;width:.5rem;border-right-width:2px;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity, 1));transition:transform .4s cubic-bezier(.33,1,.68,1),border-color .3s ease;transform:rotate(45deg)}.chevron.open{transform:rotate(225deg) translateY(-1px) translate(-1px)}.filter-group-item:has(.collapsible-content.open){border-color:#3f3f4699;box-shadow:0 10px 30px -10px #00000080}.collapsible-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility .3s;visibility:hidden;opacity:0;overflow:hidden}.collapsible-content.open{grid-template-rows:1fr;visibility:visible;opacity:1}.collapsible-inner{min-height:0}.inner-panel{transform:scale(.98) translateY(-5px);transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s ease;opacity:0}.collapsible-content.open .inner-panel{transform:scale(1) translateY(0);opacity:1}@media(hover:hover){.active\\:bg-zinc-800\\/50:hover{background-color:#3f3f464d}.active\\:bg-zinc-900\\/40:hover{background-color:#24242780}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSFilterPanelComponent, isStandalone: true, selector: "xs-filter-panel", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, externalTranslateService: { classPropertyName: "externalTranslateService", publicName: "externalTranslateService", isSignal: true, isRequired: false, transformFunction: null }, demoItems: { classPropertyName: "demoItems", publicName: "demoItems", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", panelClose: "panelClose", applied: "applied", filterChange: "filterChange", clear: "clear" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!embedded() && _demoItems().length > 0) {\n  <div\n    class=\"p-4 mb-4 rounded-xl bg-zinc-900/50 flex justify-between items-center\"\n  >\n    <div>\n      <p class=\"text-white font-bold text-sm\">\n        {{ t('DEMO_TITLE') }}\n      </p>\n      <p class=\"text-zinc-500 text-xs\">\n        {{ t('DEMO_DESCRIPTION') }}\n      </p>\n    </div>\n    <xs-button\n      (onClick)=\"show.set(true)\"\n      [label]=\"t('OPEN_FILTERS')\"\n      variant=\"custom\"\n      customClass=\"px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl active:scale-95\"\n    />\n  </div>\n}\n\n@if (show() || embedded()) {\n  @if (show() && !embedded()) {\n    <div\n      class=\"fixed inset-0 z-[9000] bg-black/60 backdrop-blur-sm overlay-fade-in cursor-default\"\n      (click)=\"handleClose()\"\n      role=\"presentation\"\n    ></div>\n    <div class=\"fixed inset-0 z-[9000] flex items-end justify-center pointer-events-none\">\n      <section\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [attr.aria-label]=\"t('FILTERS')\"\n        tabindex=\"-1\"\n        class=\"relative w-full max-w-md mx-auto overflow-hidden bg-black shadow-2xl rounded-t-[2.5rem] sheet-slide-up max-h-[85vh] flex flex-col cursor-auto pointer-events-auto outline-none\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\"\n      >\n        <div class=\"flex justify-center pt-4 pb-2\">\n          <div class=\"w-12 h-1.5 bg-zinc-800 rounded-full\"></div>\n        </div>\n\n        <div class=\"px-6 py-2 flex justify-between items-center\">\n          <h2\n            class=\"text-xl font-bold text-white tracking-tight uppercase\"\n          >\n            {{ t('FILTERS') }}\n          </h2>\n          <div class=\"flex items-center gap-2\">\n            @if (activeFiltersCount() > 0) {\n              <xs-button\n                (onClick)=\"clear.emit()\"\n                [label]=\"capitalize(t('CLEAR'))\"\n                layout=\"mini\"\n                variant=\"custom\"\n                customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n              />\n            }\n            <xs-button\n              (onClick)=\"handleApply()\"\n              [label]=\"t('DONE')\"\n              layout=\"mini\"\n              variant=\"custom\"\n              customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n            />\n          </div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n      </section>\n    </div>\n  } @else if (embedded()) {\n    <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n  }\n}\n\n<ng-template #groupsTpl>\n      <div\n        #scrollContainer\n        [class.flex-1]=\"!embedded()\"\n        [class.overflow-y-auto]=\"!embedded()\"\n        [class.no-scrollbar]=\"!embedded()\"\n        class=\"px-4 pt-4 pb-12 space-y-3\"\n      >\n        @for (group of filteredData(); track group.id) {\n          <div\n            [id]=\"'group-' + group.id\"\n            class=\"overflow-hidden rounded-[2.5rem] bg-zinc-900/50 transition-all duration-300 filter-group-item border-none\"\n          >\n            <button\n              (click)=\"toggleGroup(group.id)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"activeGroupId() === group.id\"\n              [attr.aria-controls]=\"'group-content-' + group.id\"\n              class=\"w-full flex items-center justify-between px-6 py-4 transition-colors border-none\"\n              [class]=\"\n                activeGroupId() === group.id\n                  ? 'bg-zinc-900/50'\n                  : 'bg-transparent hover:bg-black/40 active:bg-black/20'\n              \"\n            >\n              <div\n                class=\"flex-1 flex flex-col text-left justify-center h-full\"\n              >\n                <span\n                  class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-[0.15em] leading-none mb-2\"\n                >\n                  {{ t(group.title) }}\n                </span>\n                <span\n                  class=\"text-base font-semibold leading-tight\"\n                  [class.text-white]=\"\n                    group.selectedId ||\n                    (group.type === 'dateRange' &&\n                      (group.dateFrom || group.dateTo))\n                  \"\n                >\n                  {{\n                    getSelectedLabel(group) || t('NOT_SELECTED')\n                  }}\n                </span>\n              </div>\n              <div class=\"flex items-center justify-center pl-4\">\n                <div\n                  class=\"chevron opacity-40\"\n                  [class.open]=\"activeGroupId() === group.id\"\n                ></div>\n              </div>\n            </button>\n\n            <div\n              [id]=\"'group-content-' + group.id\"\n              class=\"collapsible-content\"\n              [class.open]=\"activeGroupId() === group.id\"\n              role=\"region\"\n              [attr.aria-label]=\"t(group.title)\"\n            >\n              <div class=\"collapsible-inner\">\n                <div class=\"px-2 pb-3 bg-zinc-900/50\">\n                  <div\n                    class=\"bg-zinc-900/50 rounded-[1.8rem] overflow-hidden inner-panel shadow-2xl border-none\"\n                  >\n                    @if (activeGroupType() !== 'searchSelect' && activeGroupType() !== 'dateRange') {\n                      <div class=\"p-3 bg-zinc-900/50\">\n                        <div class=\"relative\">\n                          <input\n                            type=\"text\"\n                            [ngModel]=\"searchQuery()\"\n                            (ngModelChange)=\"\n                              searchQuery.set($event)\n                            \"\n                            [placeholder]=\"capitalize(t('SEARCH')) + '...'\"\n                            [attr.aria-label]=\"capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:ring-0 placeholder:text-zinc-500 transition-all outline-none border-none\"\n                          />\n                          <span\n                            class=\"absolute left-3 top-3 opacity-40 text-sm\"\n                            aria-hidden=\"true\"\n                            >\uD83D\uDD0D</span\n                          >\n                        </div>\n                      </div>\n                    }\n\n                    <div class=\"flex flex-col\">\n                      @if (\n                        group.type === 'select' ||\n                        group.type === undefined ||\n                        group.type === 'searchSelect'\n                      ) {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onSelectOption(group.id, opt.id)\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.text-zinc-500]=\"\n                                group.selectedId !== opt.id\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  group.selectedId !== opt.id\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedId === opt.id\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'multiSelect') {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onMultiSelectOption(\n                                group.id,\n                                opt.id\n                              )\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.text-zinc-500]=\"\n                                !group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  !group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'boolean') {\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, true)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== true\n                            \"\n                            >{{ capitalize(t('YES')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== true\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === true\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, false)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== false\n                            \"\n                            >{{ capitalize(t('NO')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== false\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === false\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                      }\n\n                      @if (group.type === 'range') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MIN_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMin ||\n                                group.minValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'min',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MAX_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMax ||\n                                group.maxValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'max',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n\n                      @if (group.type === 'searchSelect') {\n                        <div class=\"px-6 py-4 bg-zinc-900/50\">\n                          <input\n                            type=\"text\"\n                            [value]=\"\n                              group.selectedSearchValue || ''\n                            \"\n                            (input)=\"\n                              onSearchChange(group.id, $event)\n                            \"\n                            [placeholder]=\"\n                              group.searchPlaceholder ||\n                              capitalize(t('SEARCH'))\n                            \"\n                            [attr.aria-label]=\"group.searchPlaceholder || capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                          />\n                        </div>\n                      }\n\n                      @if (group.type === 'dateRange') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('FROM_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateFrom || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'from',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('TO_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateTo || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'to',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n</ng-template>\n", styles: [".overlay-fade-in{animation:fadeIn .25s ease-out forwards}.sheet-slide-up{will-change:transform;animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.chevron{height:.5rem;width:.5rem;border-right-width:2px;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity, 1));transition:transform .4s cubic-bezier(.33,1,.68,1),border-color .3s ease;transform:rotate(45deg)}.chevron.open{transform:rotate(225deg) translateY(-1px) translate(-1px)}.filter-group-item:has(.collapsible-content.open){border-color:#3f3f4699;box-shadow:0 10px 30px -10px #00000080}.collapsible-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility .3s;visibility:hidden;opacity:0;overflow:hidden}.collapsible-content.open{grid-template-rows:1fr;visibility:visible;opacity:1}.collapsible-inner{min-height:0}.inner-panel{transform:scale(.98) translateY(-5px);transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s ease;opacity:0}.collapsible-content.open .inner-panel{transform:scale(1) translateY(0);opacity:1}@media(hover:hover){.active\\:bg-zinc-800\\/50:hover{background-color:#3f3f464d}.active\\:bg-zinc-900\\/40:hover{background-color:#24242780}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xs-filter-panel', standalone: true, imports: [CommonModule, FormsModule, XSButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_demoItems().length > 0) {\n  <div\n    class=\"p-4 mb-4 rounded-xl bg-zinc-900/50 flex justify-between items-center\"\n  >\n    <div>\n      <p class=\"text-white font-bold text-sm\">\n        {{ t('DEMO_TITLE') }}\n      </p>\n      <p class=\"text-zinc-500 text-xs\">\n        {{ t('DEMO_DESCRIPTION') }}\n      </p>\n    </div>\n    <xs-button\n      (onClick)=\"show.set(true)\"\n      [label]=\"t('OPEN_FILTERS')\"\n      variant=\"custom\"\n      customClass=\"px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl active:scale-95\"\n    />\n  </div>\n}\n\n@if (show()) {\n  <div\n    class=\"fixed inset-0 z-[9000] bg-black/60 backdrop-blur-sm overlay-fade-in cursor-default\"\n    (click)=\"handleClose()\"\n    role=\"presentation\"\n  ></div>\n  <div class=\"fixed inset-0 z-[9000] flex items-end justify-center pointer-events-none\">\n    <section\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"t('FILTERS')\"\n      tabindex=\"-1\"\n      class=\"relative w-full max-w-md mx-auto overflow-hidden bg-black shadow-2xl rounded-t-[2.5rem] sheet-slide-up max-h-[85vh] flex flex-col cursor-auto pointer-events-auto outline-none\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n    >\n      <div class=\"flex justify-center pt-4 pb-2\">\n        <div class=\"w-12 h-1.5 bg-zinc-800 rounded-full\"></div>\n      </div>\n\n      <div class=\"px-6 py-2 flex justify-between items-center\">\n        <h2\n          class=\"text-xl font-bold text-white tracking-tight uppercase\"\n        >\n          {{ t('FILTERS') }}\n        </h2>\n        <div class=\"flex items-center gap-2\">\n          @if (activeFiltersCount() > 0) {\n            <xs-button\n              (onClick)=\"clear.emit()\"\n              [label]=\"capitalize(t('CLEAR'))\"\n              layout=\"mini\"\n              variant=\"custom\"\n              customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n            />\n          }\n          <xs-button\n            (onClick)=\"handleApply()\"\n            [label]=\"t('DONE')\"\n            layout=\"mini\"\n            variant=\"custom\"\n            customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n          />\n        </div>\n      </div>\n\n      <div\n        #scrollContainer\n        class=\"flex-1 overflow-y-auto no-scrollbar px-4 pt-4 pb-12 space-y-3\"\n      >\n        @for (group of filteredData(); track group.id) {\n          <div\n            [id]=\"'group-' + group.id\"\n            class=\"overflow-hidden rounded-[2.5rem] bg-zinc-900/50 transition-all duration-300 filter-group-item border-none\"\n          >\n            <button\n              (click)=\"toggleGroup(group.id)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"activeGroupId() === group.id\"\n              [attr.aria-controls]=\"'group-content-' + group.id\"\n              class=\"w-full flex items-center justify-between px-6 py-4 transition-colors border-none\"\n              [class]=\"\n                activeGroupId() === group.id\n                  ? 'bg-zinc-900/50'\n                  : 'bg-transparent hover:bg-black/40 active:bg-black/20'\n              \"\n            >\n              <div\n                class=\"flex-1 flex flex-col text-left justify-center h-full\"\n              >\n                <span\n                  class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-[0.15em] leading-none mb-2\"\n                >\n                  {{ t(group.title) }}\n                </span>\n                <span\n                  class=\"text-base font-semibold leading-tight\"\n                  [class.text-white]=\"\n                    group.selectedId ||\n                    (group.type === 'dateRange' &&\n                      (group.dateFrom || group.dateTo))\n                  \"\n                >\n                  {{\n                    getSelectedLabel(group) || t('NOT_SELECTED')\n                  }}\n                </span>\n              </div>\n              <div class=\"flex items-center justify-center pl-4\">\n                <div\n                  class=\"chevron opacity-40\"\n                  [class.open]=\"activeGroupId() === group.id\"\n                ></div>\n              </div>\n            </button>\n\n            <div\n              [id]=\"'group-content-' + group.id\"\n              class=\"collapsible-content\"\n              [class.open]=\"activeGroupId() === group.id\"\n              role=\"region\"\n              [attr.aria-label]=\"t(group.title)\"\n            >\n              <div class=\"collapsible-inner\">\n                <div class=\"px-2 pb-3 bg-zinc-900/50\">\n                  <div\n                    class=\"bg-zinc-900/50 rounded-[1.8rem] overflow-hidden inner-panel shadow-2xl border-none\"\n                  >\n                    @if (activeGroupType() !== 'searchSelect' && activeGroupType() !== 'dateRange') {\n                      <div class=\"p-3 bg-zinc-900/50\">\n                        <div class=\"relative\">\n                          <input\n                            type=\"text\"\n                            [ngModel]=\"searchQuery()\"\n                            (ngModelChange)=\"\n                              searchQuery.set($event)\n                            \"\n                            [placeholder]=\"capitalize(t('SEARCH')) + '...'\"\n                            [attr.aria-label]=\"capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:ring-0 placeholder:text-zinc-500 transition-all outline-none border-none\"\n                          />\n                          <span\n                            class=\"absolute left-3 top-3 opacity-40 text-sm\"\n                            aria-hidden=\"true\"\n                            >\uD83D\uDD0D</span\n                          >\n                        </div>\n                      </div>\n                    }\n\n                    <div class=\"flex flex-col\">\n                      @if (\n                        group.type === 'select' ||\n                        group.type === undefined ||\n                        group.type === 'searchSelect'\n                      ) {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onSelectOption(group.id, opt.id)\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.text-zinc-500]=\"\n                                group.selectedId !== opt.id\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  group.selectedId !== opt.id\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedId === opt.id\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'multiSelect') {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onMultiSelectOption(\n                                group.id,\n                                opt.id\n                              )\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.text-zinc-500]=\"\n                                !group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  !group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'boolean') {\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, true)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== true\n                            \"\n                            >{{ capitalize(t('YES')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== true\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === true\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, false)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== false\n                            \"\n                            >{{ capitalize(t('NO')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== false\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === false\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                      }\n\n                      @if (group.type === 'range') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MIN_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMin ||\n                                group.minValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'min',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MAX_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMax ||\n                                group.maxValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'max',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n\n                      @if (group.type === 'searchSelect') {\n                        <div class=\"px-6 py-4 bg-zinc-900/50\">\n                          <input\n                            type=\"text\"\n                            [value]=\"\n                              group.selectedSearchValue || ''\n                            \"\n                            (input)=\"\n                              onSearchChange(group.id, $event)\n                            \"\n                            [placeholder]=\"\n                              group.searchPlaceholder ||\n                              capitalize(t('SEARCH'))\n                            \"\n                            [attr.aria-label]=\"group.searchPlaceholder || capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                          />\n                        </div>\n                      }\n\n                      @if (group.type === 'dateRange') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('FROM_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateFrom || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'from',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('TO_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateTo || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'to',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n  </div>\n}\n", styles: [".overlay-fade-in{animation:fadeIn .25s ease-out forwards}.sheet-slide-up{will-change:transform;animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.chevron{height:.5rem;width:.5rem;border-right-width:2px;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity, 1));transition:transform .4s cubic-bezier(.33,1,.68,1),border-color .3s ease;transform:rotate(45deg)}.chevron.open{transform:rotate(225deg) translateY(-1px) translate(-1px)}.filter-group-item:has(.collapsible-content.open){border-color:#3f3f4699;box-shadow:0 10px 30px -10px #00000080}.collapsible-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility .3s;visibility:hidden;opacity:0;overflow:hidden}.collapsible-content.open{grid-template-rows:1fr;visibility:visible;opacity:1}.collapsible-inner{min-height:0}.inner-panel{transform:scale(.98) translateY(-5px);transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s ease;opacity:0}.collapsible-content.open .inner-panel{transform:scale(1) translateY(0);opacity:1}@media(hover:hover){.active\\:bg-zinc-800\\/50:hover{background-color:#3f3f464d}.active\\:bg-zinc-900\\/40:hover{background-color:#24242780}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], externalTranslateService: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalTranslateService", required: false }] }], demoItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "demoItems", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], activeFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFiltersCount", required: false }] }], panelClose: [{ type: i0.Output, args: ["panelClose"] }], applied: [{ type: i0.Output, args: ["applied"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+            args: [{ selector: 'xs-filter-panel', standalone: true, imports: [CommonModule, FormsModule, XSButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!embedded() && _demoItems().length > 0) {\n  <div\n    class=\"p-4 mb-4 rounded-xl bg-zinc-900/50 flex justify-between items-center\"\n  >\n    <div>\n      <p class=\"text-white font-bold text-sm\">\n        {{ t('DEMO_TITLE') }}\n      </p>\n      <p class=\"text-zinc-500 text-xs\">\n        {{ t('DEMO_DESCRIPTION') }}\n      </p>\n    </div>\n    <xs-button\n      (onClick)=\"show.set(true)\"\n      [label]=\"t('OPEN_FILTERS')\"\n      variant=\"custom\"\n      customClass=\"px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl active:scale-95\"\n    />\n  </div>\n}\n\n@if (show() || embedded()) {\n  @if (show() && !embedded()) {\n    <div\n      class=\"fixed inset-0 z-[9000] bg-black/60 backdrop-blur-sm overlay-fade-in cursor-default\"\n      (click)=\"handleClose()\"\n      role=\"presentation\"\n    ></div>\n    <div class=\"fixed inset-0 z-[9000] flex items-end justify-center pointer-events-none\">\n      <section\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [attr.aria-label]=\"t('FILTERS')\"\n        tabindex=\"-1\"\n        class=\"relative w-full max-w-md mx-auto overflow-hidden bg-black shadow-2xl rounded-t-[2.5rem] sheet-slide-up max-h-[85vh] flex flex-col cursor-auto pointer-events-auto outline-none\"\n        (click)=\"$event.stopPropagation()\"\n        (keydown)=\"$event.stopPropagation()\"\n      >\n        <div class=\"flex justify-center pt-4 pb-2\">\n          <div class=\"w-12 h-1.5 bg-zinc-800 rounded-full\"></div>\n        </div>\n\n        <div class=\"px-6 py-2 flex justify-between items-center\">\n          <h2\n            class=\"text-xl font-bold text-white tracking-tight uppercase\"\n          >\n            {{ t('FILTERS') }}\n          </h2>\n          <div class=\"flex items-center gap-2\">\n            @if (activeFiltersCount() > 0) {\n              <xs-button\n                (onClick)=\"clear.emit()\"\n                [label]=\"capitalize(t('CLEAR'))\"\n                layout=\"mini\"\n                variant=\"custom\"\n                customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n              />\n            }\n            <xs-button\n              (onClick)=\"handleApply()\"\n              [label]=\"t('DONE')\"\n              layout=\"mini\"\n              variant=\"custom\"\n              customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n            />\n          </div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n      </section>\n    </div>\n  } @else if (embedded()) {\n    <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n  }\n}\n\n<ng-template #groupsTpl>\n      <div\n        #scrollContainer\n        [class.flex-1]=\"!embedded()\"\n        [class.overflow-y-auto]=\"!embedded()\"\n        [class.no-scrollbar]=\"!embedded()\"\n        class=\"px-4 pt-4 pb-12 space-y-3\"\n      >\n        @for (group of filteredData(); track group.id) {\n          <div\n            [id]=\"'group-' + group.id\"\n            class=\"overflow-hidden rounded-[2.5rem] bg-zinc-900/50 transition-all duration-300 filter-group-item border-none\"\n          >\n            <button\n              (click)=\"toggleGroup(group.id)\"\n              type=\"button\"\n              [attr.aria-expanded]=\"activeGroupId() === group.id\"\n              [attr.aria-controls]=\"'group-content-' + group.id\"\n              class=\"w-full flex items-center justify-between px-6 py-4 transition-colors border-none\"\n              [class]=\"\n                activeGroupId() === group.id\n                  ? 'bg-zinc-900/50'\n                  : 'bg-transparent hover:bg-black/40 active:bg-black/20'\n              \"\n            >\n              <div\n                class=\"flex-1 flex flex-col text-left justify-center h-full\"\n              >\n                <span\n                  class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-[0.15em] leading-none mb-2\"\n                >\n                  {{ t(group.title) }}\n                </span>\n                <span\n                  class=\"text-base font-semibold leading-tight\"\n                  [class.text-white]=\"\n                    group.selectedId ||\n                    (group.type === 'dateRange' &&\n                      (group.dateFrom || group.dateTo))\n                  \"\n                >\n                  {{\n                    getSelectedLabel(group) || t('NOT_SELECTED')\n                  }}\n                </span>\n              </div>\n              <div class=\"flex items-center justify-center pl-4\">\n                <div\n                  class=\"chevron opacity-40\"\n                  [class.open]=\"activeGroupId() === group.id\"\n                ></div>\n              </div>\n            </button>\n\n            <div\n              [id]=\"'group-content-' + group.id\"\n              class=\"collapsible-content\"\n              [class.open]=\"activeGroupId() === group.id\"\n              role=\"region\"\n              [attr.aria-label]=\"t(group.title)\"\n            >\n              <div class=\"collapsible-inner\">\n                <div class=\"px-2 pb-3 bg-zinc-900/50\">\n                  <div\n                    class=\"bg-zinc-900/50 rounded-[1.8rem] overflow-hidden inner-panel shadow-2xl border-none\"\n                  >\n                    @if (activeGroupType() !== 'searchSelect' && activeGroupType() !== 'dateRange') {\n                      <div class=\"p-3 bg-zinc-900/50\">\n                        <div class=\"relative\">\n                          <input\n                            type=\"text\"\n                            [ngModel]=\"searchQuery()\"\n                            (ngModelChange)=\"\n                              searchQuery.set($event)\n                            \"\n                            [placeholder]=\"capitalize(t('SEARCH')) + '...'\"\n                            [attr.aria-label]=\"capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:ring-0 placeholder:text-zinc-500 transition-all outline-none border-none\"\n                          />\n                          <span\n                            class=\"absolute left-3 top-3 opacity-40 text-sm\"\n                            aria-hidden=\"true\"\n                            >\uD83D\uDD0D</span\n                          >\n                        </div>\n                      </div>\n                    }\n\n                    <div class=\"flex flex-col\">\n                      @if (\n                        group.type === 'select' ||\n                        group.type === undefined ||\n                        group.type === 'searchSelect'\n                      ) {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onSelectOption(group.id, opt.id)\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedId === opt.id\n                              \"\n                              [class.text-zinc-500]=\"\n                                group.selectedId !== opt.id\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  group.selectedId !== opt.id\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedId === opt.id\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'multiSelect') {\n                        @for (\n                          opt of group.options;\n                          track $index\n                        ) {\n                          <button\n                            (click)=\"\n                              onMultiSelectOption(\n                                group.id,\n                                opt.id\n                              )\n                            \"\n                            type=\"button\"\n                            class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n                          >\n                            <span\n                              class=\"transition-colors duration-200\"\n                              [class.text-white]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.font-bold]=\"\n                                group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                              [class.text-zinc-500]=\"\n                                !group.selectedIds?.includes(\n                                  opt.id\n                                )\n                              \"\n                            >\n                              {{ capitalize(t(opt.label)) }}\n                            </span>\n                            <div\n                              class=\"flex items-center justify-center w-5 h-5\"\n                            >\n                              <div\n                                [class.opacity-0]=\"\n                                  !group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                [class.opacity-100]=\"\n                                  group.selectedIds?.includes(\n                                    opt.id\n                                  )\n                                \"\n                                class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                              ></div>\n                            </div>\n                          </button>\n                        }\n                      }\n\n                      @if (group.type === 'boolean') {\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, true)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === true\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== true\n                            \"\n                            >{{ capitalize(t('YES')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== true\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === true\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                        <button\n                          (click)=\"\n                            onBooleanToggle(group.id, false)\n                          \"\n                          type=\"button\"\n                          class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n                        >\n                          <span\n                            class=\"transition-colors duration-200\"\n                            [class.text-white]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.font-bold]=\"\n                              group.selectedBoolean === false\n                            \"\n                            [class.text-zinc-500]=\"\n                              group.selectedBoolean !== false\n                            \"\n                            >{{ capitalize(t('NO')) }}</span\n                          >\n                          <div\n                            class=\"flex items-center justify-center w-5 h-5\"\n                          >\n                            <div\n                              [class.opacity-0]=\"\n                                group.selectedBoolean !== false\n                              \"\n                              [class.opacity-100]=\"\n                                group.selectedBoolean === false\n                              \"\n                              class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n                            ></div>\n                          </div>\n                        </button>\n                      }\n\n                      @if (group.type === 'range') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MIN_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMin ||\n                                group.minValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'min',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                            >\n                              {{ t('MAX_VALUE') }}\n                            </label>\n                            <input\n                              type=\"number\"\n                              [value]=\"\n                                group.selectedMax ||\n                                group.maxValue ||\n                                ''\n                              \"\n                              (input)=\"\n                                onRangeChange(\n                                  group.id,\n                                  'max',\n                                  $event\n                                )\n                              \"\n                              [min]=\"group.minValue\"\n                              [max]=\"group.maxValue\"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n\n                      @if (group.type === 'searchSelect') {\n                        <div class=\"px-6 py-4 bg-zinc-900/50\">\n                          <input\n                            type=\"text\"\n                            [value]=\"\n                              group.selectedSearchValue || ''\n                            \"\n                            (input)=\"\n                              onSearchChange(group.id, $event)\n                            \"\n                            [placeholder]=\"\n                              group.searchPlaceholder ||\n                              capitalize(t('SEARCH'))\n                            \"\n                            [attr.aria-label]=\"group.searchPlaceholder || capitalize(t('SEARCH'))\"\n                            class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                          />\n                        </div>\n                      }\n\n                      @if (group.type === 'dateRange') {\n                        <div\n                          class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n                        >\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('FROM_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateFrom || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'from',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                          <div class=\"space-y-2\">\n                            <label\n                              class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n                              >{{ t('TO_DATE') }}</label\n                            >\n                            <input\n                              type=\"date\"\n                              [value]=\"group.dateTo || ''\"\n                              (change)=\"\n                                onDateChange(\n                                  group.id,\n                                  'to',\n                                  $event\n                                )\n                              \"\n                              class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n                            />\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n</ng-template>\n", styles: [".overlay-fade-in{animation:fadeIn .25s ease-out forwards}.sheet-slide-up{will-change:transform;animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.chevron{height:.5rem;width:.5rem;border-right-width:2px;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity, 1));transition:transform .4s cubic-bezier(.33,1,.68,1),border-color .3s ease;transform:rotate(45deg)}.chevron.open{transform:rotate(225deg) translateY(-1px) translate(-1px)}.filter-group-item:has(.collapsible-content.open){border-color:#3f3f4699;box-shadow:0 10px 30px -10px #00000080}.collapsible-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility .3s;visibility:hidden;opacity:0;overflow:hidden}.collapsible-content.open{grid-template-rows:1fr;visibility:visible;opacity:1}.collapsible-inner{min-height:0}.inner-panel{transform:scale(.98) translateY(-5px);transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s ease;opacity:0}.collapsible-content.open .inner-panel{transform:scale(1) translateY(0);opacity:1}@media(hover:hover){.active\\:bg-zinc-800\\/50:hover{background-color:#3f3f464d}.active\\:bg-zinc-900\\/40:hover{background-color:#24242780}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], externalTranslateService: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalTranslateService", required: false }] }], demoItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "demoItems", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], activeFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFiltersCount", required: false }] }], panelClose: [{ type: i0.Output, args: ["panelClose"] }], applied: [{ type: i0.Output, args: ["applied"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 var MENU_LABEL$1 = "Menú";
 var es$d = {