@xsmusices/ui 1.44.15 → 1.44.17

package/fesm2022/{xsmusices-ui-xs-filter-panel.xsstory-DbvxGppo.mjs → xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs}

@@ -10,7 +10,7 @@ const story = {
     multilanguage: true,
     updated: '2026-04-11T12:00:00.000Z',
     created: '2026-04-03T10:00:00.000Z',
-    description: 'Panel de filtros avanzado que emerge desde la parte inferior. Soporta múltiples tipos de filtros: selección única, selección múltiple, booleanos, rangos numéricos, rangos de fechas y búsqueda selectiva. Permite organizar filtros por grupos (acordeones) con selección única y buscador contextual interno para cada grupo. Incluye lógica de "Hecho" para cerrar y "Limpiar" para resetear selecciones específicas. Optimizado para dispositivos móviles con scroll independiente y cabeceras sticky.',
+    description: 'Panel de filtros avanzado con dos layouts: bottom-sheet (despliega desde abajo, por defecto) y side-panel (panel lateral derecho, pantalla completa en móvil). Soporta múltiples tipos de filtros: selección única, selección múltiple, booleanos, rangos numéricos, rangos de fechas y búsqueda selectiva. Permite organizar filtros por grupos (acordeones) con selección única y buscador contextual interno para cada grupo. Incluye lógica de "Hecho" para cerrar y "Limpiar" para resetear selecciones específicas. Optimizado para dispositivos móviles con scroll independiente y cabeceras sticky.',
     component: XSFilterPanelComponent,
     selector: 'xs-filter-panel',
     inputs: [
@@ -20,6 +20,12 @@ const story = {
             type: 'json',
             default: [],
         },
+        {
+            key: 'layout',
+            label: 'Layout',
+            type: 'text',
+            default: 'bottom-sheet',
+        },
     ],
     examples: [
         {
@@ -226,6 +232,33 @@ const story = {
                 ],
             },
         },
+        {
+            name: 'Panel lateral (side-panel)',
+            description: 'Mismo contenido en formato panel lateral derecho, usado en los listados de la app.',
+            inputs: {
+                layout: 'side-panel',
+                demoItems: [
+                    {
+                        id: 'country',
+                        title: 'Ubicación',
+                        selectedId: 'es',
+                        options: [
+                            { id: 'es', label: 'España' },
+                            { id: 'fr', label: 'Francia' },
+                            { id: 'it', label: 'Italia' },
+                        ],
+                    },
+                    {
+                        id: 'category',
+                        title: 'Estilo Artístico',
+                        options: [
+                            { id: 'modern', label: 'Moderno' },
+                            { id: 'classic', label: 'Clásico' },
+                        ],
+                    },
+                ],
+            },
+        },
         {
             name: 'Filtros Combinados',
             description: 'Ejemplo que combina diferentes tipos de filtros para una búsqueda avanzada.',
@@ -284,4 +317,4 @@ const story = {
 };
 
 export { story };
-//# sourceMappingURL=xsmusices-ui-xs-filter-panel.xsstory-DbvxGppo.mjs.map
+//# sourceMappingURL=xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs.map

package/fesm2022/xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs","sources":["../../../projects/xs-ui/src/lib/components/ui/filter-panel/xstory/xs-filter-panel.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../../story.types';\nimport { XSFilterPanelComponent } from '../xs-filter-panel.component';\n\nexport const story: StoryMeta = {\n  id: 'filter-panel',\n  name: 'Filter Panel',\n  type: 'component',\n  subtype: 'Base',\n  status: 'active',\n  usage: ['admin', 'app', 'monitor'],\n  multilanguage: true,\n  updated: '2026-04-11T12:00:00.000Z',\n  created: '2026-04-03T10:00:00.000Z',\n  description:\n    'Panel de filtros avanzado con dos layouts: bottom-sheet (despliega desde abajo, por defecto) y side-panel (panel lateral derecho, pantalla completa en móvil). Soporta múltiples tipos de filtros: selección única, selección múltiple, booleanos, rangos numéricos, rangos de fechas y búsqueda selectiva. Permite organizar filtros por grupos (acordeones) con selección única y buscador contextual interno para cada grupo. Incluye lógica de \"Hecho\" para cerrar y \"Limpiar\" para resetear selecciones específicas. Optimizado para dispositivos móviles con scroll independiente y cabeceras sticky.',\n  component: XSFilterPanelComponent,\n  selector: 'xs-filter-panel',\n  inputs: [\n    {\n      key: 'demoItems',\n      label: 'Demo Items',\n      type: 'json',\n      default: [],\n    },\n    {\n      key: 'layout',\n      label: 'Layout',\n      type: 'text',\n      default: 'bottom-sheet',\n    },\n  ],\n  examples: [\n    {\n      name: 'Filtros de Clasificación',\n      description:\n        'Ejemplo clásico de filtros para una aplicación de catálogo o marketplace.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'country',\n            title: 'Ubicación',\n            selectedId: 'es',\n            options: [\n              { id: 'es', label: 'España' },\n              { id: 'fr', label: 'Francia' },\n              { id: 'it', label: 'Italia' },\n              { id: 'pt', label: 'Portugal' },\n              { id: 'de', label: 'Alemania' },\n              { id: 'uk', label: 'Reino Unido' },\n            ],\n          },\n          {\n            id: 'category',\n            title: 'Estilo Artístico',\n            options: [\n              { id: 'modern', label: 'Moderno' },\n              { id: 'classic', label: 'Clásico' },\n              { id: 'minimalist', label: 'Minimalista' },\n              { id: 'industrial', label: 'Industrial' },\n              { id: 'vintage', label: 'Vintage' },\n            ],\n          },\n          {\n            id: 'price-range',\n            title: 'Rango de Precio',\n            options: [\n              { id: 'low', label: 'Económico' },\n              { id: 'mid', label: 'Intermedio' },\n              { id: 'high', label: 'Premium' },\n              { id: 'luxury', label: 'Lujo' },\n            ],\n          },\n        ],\n      },\n    },\n    {\n      name: 'Preferencias de Usuario',\n      description:\n        'Uso del panel para configurar preferencias rápidas de la interfaz.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'language',\n            title: 'Idioma de la interfaz',\n            selectedId: 'es-ES',\n            options: [\n              { id: 'es-ES', label: 'Español (España)' },\n              { id: 'en-US', label: 'English (US)' },\n              { id: 'fr-FR', label: 'Français' },\n              { id: 'de-DE', label: 'Deutsch' },\n              { id: 'jp-JP', label: '日本語' },\n            ],\n          },\n          {\n            id: 'theme',\n            title: 'Tema Visual',\n            selectedId: 'dark',\n            options: [\n              { id: 'light', label: 'Modo Claro' },\n              { id: 'dark', label: 'Modo Oscuro' },\n              { id: 'system', label: 'Sincronizar con Sistema' },\n            ],\n          },\n        ],\n      },\n    },\n    {\n      name: 'Rango de Fechas',\n      description:\n        'Ejemplo de filtro por rango de fechas para eventos o reservas.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'date-range',\n            title: 'Rango de Fechas',\n            type: 'dateRange',\n            dateFrom: '2026-04-01',\n            dateTo: '2026-04-30',\n          },\n          {\n            id: 'country',\n            title: 'País',\n            selectedId: 'es',\n            options: [\n              { id: 'es', label: 'España' },\n              { id: 'mx', label: 'México' },\n              { id: 'ar', label: 'Argentina' },\n            ],\n          },\n        ],\n      },\n    },\n    {\n      name: 'Selección Múltiple',\n      description:\n        'Ejemplo de filtro con selección múltiple para categorías.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'categories',\n            title: 'Categorías',\n            type: 'multiSelect',\n            selectedIds: ['rock', 'pop'],\n            options: [\n              { id: 'rock', label: 'Rock' },\n              { id: 'pop', label: 'Pop' },\n              { id: 'jazz', label: 'Jazz' },\n              { id: 'electronic', label: 'Electrónica' },\n              { id: 'classical', label: 'Clásica' },\n            ],\n          },\n          {\n            id: 'mood',\n            title: 'Estado de Ánimo',\n            type: 'multiSelect',\n            options: [\n              { id: 'energetic', label: 'Enérgico' },\n              { id: 'relaxed', label: 'Relajado' },\n              { id: 'melancholic', label: 'Melancólico' },\n              { id: 'happy', label: 'Feliz' },\n            ],\n          },\n        ],\n      },\n    },\n    {\n      name: 'Filtros Booleanos',\n      description:\n        'Ejemplo de filtros booleanos para opciones de sí/no.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'featured',\n            title: 'Destacado',\n            type: 'boolean',\n            selectedBoolean: true,\n          },\n          {\n            id: 'available',\n            title: 'Disponible',\n            type: 'boolean',\n            selectedBoolean: false,\n          },\n          {\n            id: 'premium',\n            title: 'Premium',\n            type: 'boolean',\n          },\n        ],\n      },\n    },\n    {\n      name: 'Rango Numérico',\n      description:\n        'Ejemplo de filtro por rango numérico para precios o calificaciones.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'price-range',\n            title: 'Rango de Precio',\n            type: 'range',\n            minValue: 0,\n            maxValue: 1000,\n            selectedMin: 100,\n            selectedMax: 500,\n          },\n          {\n            id: 'rating',\n            title: 'Calificación',\n            type: 'range',\n            minValue: 1,\n            maxValue: 5,\n            selectedMin: 3,\n          },\n        ],\n      },\n    },\n    {\n      name: 'Búsqueda Selectiva',\n      description:\n        'Ejemplo de filtro con búsqueda para selección de elementos.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'artist-search',\n            title: 'Buscar Artista',\n            type: 'searchSelect',\n            searchPlaceholder:\n              'Escribe el nombre del artista...',\n            selectedSearchValue: 'The Beatles',\n          },\n          {\n            id: 'genre',\n            title: 'Género',\n            selectedId: 'rock',\n            options: [\n              { id: 'rock', label: 'Rock' },\n              { id: 'pop', label: 'Pop' },\n              { id: 'jazz', label: 'Jazz' },\n            ],\n          },\n        ],\n      },\n    },\n    {\n      name: 'Panel lateral (side-panel)',\n      description:\n        'Mismo contenido en formato panel lateral derecho, usado en los listados de la app.',\n      inputs: {\n        layout: 'side-panel',\n        demoItems: [\n          {\n            id: 'country',\n            title: 'Ubicación',\n            selectedId: 'es',\n            options: [\n              { id: 'es', label: 'España' },\n              { id: 'fr', label: 'Francia' },\n              { id: 'it', label: 'Italia' },\n            ],\n          },\n          {\n            id: 'category',\n            title: 'Estilo Artístico',\n            options: [\n              { id: 'modern', label: 'Moderno' },\n              { id: 'classic', label: 'Clásico' },\n            ],\n          },\n        ],\n      },\n    },\n    {\n      name: 'Filtros Combinados',\n      description:\n        'Ejemplo que combina diferentes tipos de filtros para una búsqueda avanzada.',\n      inputs: {\n        demoItems: [\n          {\n            id: 'categories',\n            title: 'Categorías',\n            type: 'multiSelect',\n            selectedIds: ['rock', 'pop'],\n            options: [\n              { id: 'rock', label: 'Rock' },\n              { id: 'pop', label: 'Pop' },\n              { id: 'jazz', label: 'Jazz' },\n              { id: 'electronic', label: 'Electrónica' },\n            ],\n          },\n          {\n            id: 'price-range',\n            title: 'Rango de Precio',\n            type: 'range',\n            minValue: 0,\n            maxValue: 500,\n            selectedMin: 50,\n            selectedMax: 200,\n          },\n          {\n            id: 'featured',\n            title: 'Solo Destacados',\n            type: 'boolean',\n            selectedBoolean: true,\n          },\n          {\n            id: 'date-range',\n            title: 'Fecha de Evento',\n            type: 'dateRange',\n            dateFrom: '2026-05-01',\n            dateTo: '2026-05-31',\n          },\n          {\n            id: 'venue-search',\n            title: 'Buscar Venue',\n            type: 'searchSelect',\n            searchPlaceholder: 'Nombre del lugar...',\n          },\n        ],\n      },\n    },\n  ],\n  coverage: {\n    statements: 92,\n    branches: 85,\n    functions: 90,\n    lines: 92,\n  },\n};\n"],"names":[],"mappings":"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"}

package/fesm2022/xsmusices-ui.mjs

@@ -13385,6 +13385,7 @@ class XSFilterPanelComponent {
     demoItems = input([], ...(ngDevMode ? [{ debugName: "demoItems" }] : []));
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     activeFiltersCount = input(0, ...(ngDevMode ? [{ debugName: "activeFiltersCount" }] : []));
+    layout = input('bottom-sheet', ...(ngDevMode ? [{ debugName: "layout" }] : []));
     panelClose = output();
     applied = output();
     filterChange = output();
@@ -13764,12 +13765,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 }, 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 }, layout: { classPropertyName: "layout", publicName: "layout", 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\n    class=\"fixed inset-0 z-[9000] pointer-events-none flex\"\n    [class.items-end]=\"layout() === 'bottom-sheet'\"\n    [class.justify-center]=\"layout() === 'bottom-sheet'\"\n    [class.justify-end]=\"layout() === 'side-panel'\"\n    [class.items-stretch]=\"layout() === 'side-panel'\"\n  >\n    <section\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"t('FILTERS')\"\n      tabindex=\"-1\"\n      class=\"relative w-full overflow-hidden bg-black shadow-2xl flex flex-col cursor-auto pointer-events-auto outline-none\"\n      [class.max-w-md]=\"layout() === 'bottom-sheet'\"\n      [class.mx-auto]=\"layout() === 'bottom-sheet'\"\n      [class.rounded-t-[2.5rem]]=\"layout() === 'bottom-sheet'\"\n      [class.sheet-slide-up]=\"layout() === 'bottom-sheet'\"\n      [class.max-h-[85vh]]=\"layout() === 'bottom-sheet'\"\n      [class.h-full]=\"layout() === 'side-panel'\"\n      [class.sm:max-w-md]=\"layout() === 'side-panel'\"\n      [class.sm:rounded-l-[2.5rem]]=\"layout() === 'side-panel'\"\n      [class.panel-slide-in]=\"layout() === 'side-panel'\"\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}.panel-slide-in{will-change:transform;animation:slideInRight .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)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(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 });
 }
 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 (_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\n    class=\"fixed inset-0 z-[9000] pointer-events-none flex\"\n    [class.items-end]=\"layout() === 'bottom-sheet'\"\n    [class.justify-center]=\"layout() === 'bottom-sheet'\"\n    [class.justify-end]=\"layout() === 'side-panel'\"\n    [class.items-stretch]=\"layout() === 'side-panel'\"\n  >\n    <section\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-label]=\"t('FILTERS')\"\n      tabindex=\"-1\"\n      class=\"relative w-full overflow-hidden bg-black shadow-2xl flex flex-col cursor-auto pointer-events-auto outline-none\"\n      [class.max-w-md]=\"layout() === 'bottom-sheet'\"\n      [class.mx-auto]=\"layout() === 'bottom-sheet'\"\n      [class.rounded-t-[2.5rem]]=\"layout() === 'bottom-sheet'\"\n      [class.sheet-slide-up]=\"layout() === 'bottom-sheet'\"\n      [class.max-h-[85vh]]=\"layout() === 'bottom-sheet'\"\n      [class.h-full]=\"layout() === 'side-panel'\"\n      [class.sm:max-w-md]=\"layout() === 'side-panel'\"\n      [class.sm:rounded-l-[2.5rem]]=\"layout() === 'side-panel'\"\n      [class.panel-slide-in]=\"layout() === 'side-panel'\"\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}.panel-slide-in{will-change:transform;animation:slideInRight .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)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(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 }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", 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 = {
@@ -23232,7 +23233,7 @@ const LIB_STORIES = [
     () => import('./xsmusices-ui-xs-badge.xsstory-B1QXLQ4H.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-breadcrumbs.xsstory-CNyBeURd.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-date-mini.xsstory-DXog7Yhg.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-filter-panel.xsstory-DbvxGppo.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-full-image.xsstory-xwN2jkW1.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-info-blocks.xsstory-BHtaC7U6.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-item-card.xsstory-EGJ6itkx.mjs').then((m) => m.story),