@xsmusices/ui 1.44.7 → 1.44.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/xsmusices-ui.mjs +18 -5
- package/fesm2022/xsmusices-ui.mjs.map +1 -1
- package/index.d.ts +16 -8
- package/package.json +1 -1
|
@@ -13379,6 +13379,14 @@ var en$e = {
|
|
|
13379
13379
|
class XSFilterPanelComponent {
|
|
13380
13380
|
scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
|
|
13381
13381
|
show = model(false, ...(ngDevMode ? [{ debugName: "show" }] : []));
|
|
13382
|
+
/**
|
|
13383
|
+
* Modo embebido (Fase 1 App): el panel se presenta como contenido dentro
|
|
13384
|
+
* de un XSModal y NO pinta su propio overlay, hoja, cabecera ni gestiona
|
|
13385
|
+
* Escape/foco (lo hace el modal anfitrión). La lógica de grupos, tipos de
|
|
13386
|
+
* filtro y eventos se conserva intacta. Por defecto false: comportamiento
|
|
13387
|
+
* histórico sin cambios.
|
|
13388
|
+
*/
|
|
13389
|
+
embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
|
|
13382
13390
|
externalTranslateService = input(...(ngDevMode ? [undefined, { debugName: "externalTranslateService" }] : []));
|
|
13383
13391
|
_demoItems = signal([], ...(ngDevMode ? [{ debugName: "_demoItems" }] : []));
|
|
13384
13392
|
_data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
|
|
@@ -13408,7 +13416,7 @@ class XSFilterPanelComponent {
|
|
|
13408
13416
|
effect(() => this._data.set(this.data() ?? []));
|
|
13409
13417
|
if (isPlatformBrowser(this.platformId)) {
|
|
13410
13418
|
effect(() => {
|
|
13411
|
-
if (this.show()) {
|
|
13419
|
+
if (!this.embedded() && this.show()) {
|
|
13412
13420
|
setTimeout(() => {
|
|
13413
13421
|
const el = document.querySelector('[role="dialog"]');
|
|
13414
13422
|
el?.focus();
|
|
@@ -13419,6 +13427,7 @@ class XSFilterPanelComponent {
|
|
|
13419
13427
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
13420
13428
|
.subscribe((event) => {
|
|
13421
13429
|
if (event.key === 'Escape' &&
|
|
13430
|
+
!this.embedded() &&
|
|
13422
13431
|
this.show()) {
|
|
13423
13432
|
this.handleClose();
|
|
13424
13433
|
}
|
|
@@ -13489,8 +13498,12 @@ class XSFilterPanelComponent {
|
|
|
13489
13498
|
}
|
|
13490
13499
|
scrollToGroup(groupId) {
|
|
13491
13500
|
setTimeout(() => {
|
|
13501
|
+
if (!isPlatformBrowser(this.platformId))
|
|
13502
|
+
return;
|
|
13503
|
+
if (!this.show() && !this.embedded())
|
|
13504
|
+
return;
|
|
13492
13505
|
const el = document.getElementById(`group-${groupId}`);
|
|
13493
|
-
if (el
|
|
13506
|
+
if (el) {
|
|
13494
13507
|
el.scrollIntoView({
|
|
13495
13508
|
behavior: 'smooth',
|
|
13496
13509
|
block: 'nearest',
|
|
@@ -13764,12 +13777,12 @@ class XSFilterPanelComponent {
|
|
|
13764
13777
|
this.applied.emit();
|
|
13765
13778
|
}
|
|
13766
13779
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13767
|
-
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 });
|
|
13780
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSFilterPanelComponent, isStandalone: true, selector: "xs-filter-panel", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, externalTranslateService: { classPropertyName: "externalTranslateService", publicName: "externalTranslateService", isSignal: true, isRequired: false, transformFunction: null }, demoItems: { classPropertyName: "demoItems", publicName: "demoItems", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", panelClose: "panelClose", applied: "applied", filterChange: "filterChange", clear: "clear" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!embedded() && _demoItems().length > 0) {\n <div\n class=\"p-4 mb-4 rounded-xl bg-zinc-900/50 flex justify-between items-center\"\n >\n <div>\n <p class=\"text-white font-bold text-sm\">\n {{ t('DEMO_TITLE') }}\n </p>\n <p class=\"text-zinc-500 text-xs\">\n {{ t('DEMO_DESCRIPTION') }}\n </p>\n </div>\n <xs-button\n (onClick)=\"show.set(true)\"\n [label]=\"t('OPEN_FILTERS')\"\n variant=\"custom\"\n customClass=\"px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl active:scale-95\"\n />\n </div>\n}\n\n@if (show() || embedded()) {\n @if (show() && !embedded()) {\n <div\n class=\"fixed inset-0 z-[9000] bg-black/60 backdrop-blur-sm overlay-fade-in cursor-default\"\n (click)=\"handleClose()\"\n role=\"presentation\"\n ></div>\n <div class=\"fixed inset-0 z-[9000] flex items-end justify-center pointer-events-none\">\n <section\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"t('FILTERS')\"\n tabindex=\"-1\"\n class=\"relative w-full max-w-md mx-auto overflow-hidden bg-black shadow-2xl rounded-t-[2.5rem] sheet-slide-up max-h-[85vh] flex flex-col cursor-auto pointer-events-auto outline-none\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <div class=\"flex justify-center pt-4 pb-2\">\n <div class=\"w-12 h-1.5 bg-zinc-800 rounded-full\"></div>\n </div>\n\n <div class=\"px-6 py-2 flex justify-between items-center\">\n <h2\n class=\"text-xl font-bold text-white tracking-tight uppercase\"\n >\n {{ t('FILTERS') }}\n </h2>\n <div class=\"flex items-center gap-2\">\n @if (activeFiltersCount() > 0) {\n <xs-button\n (onClick)=\"clear.emit()\"\n [label]=\"capitalize(t('CLEAR'))\"\n layout=\"mini\"\n variant=\"custom\"\n customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n />\n }\n <xs-button\n (onClick)=\"handleApply()\"\n [label]=\"t('DONE')\"\n layout=\"mini\"\n variant=\"custom\"\n customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n />\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n </section>\n </div>\n } @else if (embedded()) {\n <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n }\n}\n\n<ng-template #groupsTpl>\n <div\n #scrollContainer\n [class.flex-1]=\"!embedded()\"\n [class.overflow-y-auto]=\"!embedded()\"\n [class.no-scrollbar]=\"!embedded()\"\n class=\"px-4 pt-4 pb-12 space-y-3\"\n >\n @for (group of filteredData(); track group.id) {\n <div\n [id]=\"'group-' + group.id\"\n class=\"overflow-hidden rounded-[2.5rem] bg-zinc-900/50 transition-all duration-300 filter-group-item border-none\"\n >\n <button\n (click)=\"toggleGroup(group.id)\"\n type=\"button\"\n [attr.aria-expanded]=\"activeGroupId() === group.id\"\n [attr.aria-controls]=\"'group-content-' + group.id\"\n class=\"w-full flex items-center justify-between px-6 py-4 transition-colors border-none\"\n [class]=\"\n activeGroupId() === group.id\n ? 'bg-zinc-900/50'\n : 'bg-transparent hover:bg-black/40 active:bg-black/20'\n \"\n >\n <div\n class=\"flex-1 flex flex-col text-left justify-center h-full\"\n >\n <span\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-[0.15em] leading-none mb-2\"\n >\n {{ t(group.title) }}\n </span>\n <span\n class=\"text-base font-semibold leading-tight\"\n [class.text-white]=\"\n group.selectedId ||\n (group.type === 'dateRange' &&\n (group.dateFrom || group.dateTo))\n \"\n >\n {{\n getSelectedLabel(group) || t('NOT_SELECTED')\n }}\n </span>\n </div>\n <div class=\"flex items-center justify-center pl-4\">\n <div\n class=\"chevron opacity-40\"\n [class.open]=\"activeGroupId() === group.id\"\n ></div>\n </div>\n </button>\n\n <div\n [id]=\"'group-content-' + group.id\"\n class=\"collapsible-content\"\n [class.open]=\"activeGroupId() === group.id\"\n role=\"region\"\n [attr.aria-label]=\"t(group.title)\"\n >\n <div class=\"collapsible-inner\">\n <div class=\"px-2 pb-3 bg-zinc-900/50\">\n <div\n class=\"bg-zinc-900/50 rounded-[1.8rem] overflow-hidden inner-panel shadow-2xl border-none\"\n >\n @if (activeGroupType() !== 'searchSelect' && activeGroupType() !== 'dateRange') {\n <div class=\"p-3 bg-zinc-900/50\">\n <div class=\"relative\">\n <input\n type=\"text\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"\n searchQuery.set($event)\n \"\n [placeholder]=\"capitalize(t('SEARCH')) + '...'\"\n [attr.aria-label]=\"capitalize(t('SEARCH'))\"\n class=\"w-full bg-zinc-900/50 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:ring-0 placeholder:text-zinc-500 transition-all outline-none border-none\"\n />\n <span\n class=\"absolute left-3 top-3 opacity-40 text-sm\"\n aria-hidden=\"true\"\n >\uD83D\uDD0D</span\n >\n </div>\n </div>\n }\n\n <div class=\"flex flex-col\">\n @if (\n group.type === 'select' ||\n group.type === undefined ||\n group.type === 'searchSelect'\n ) {\n @for (\n opt of group.options;\n track $index\n ) {\n <button\n (click)=\"\n onSelectOption(group.id, opt.id)\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedId === opt.id\n \"\n [class.font-bold]=\"\n group.selectedId === opt.id\n \"\n [class.text-zinc-500]=\"\n group.selectedId !== opt.id\n \"\n >\n {{ capitalize(t(opt.label)) }}\n </span>\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n group.selectedId !== opt.id\n \"\n [class.opacity-100]=\"\n group.selectedId === opt.id\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n }\n }\n\n @if (group.type === 'multiSelect') {\n @for (\n opt of group.options;\n track $index\n ) {\n <button\n (click)=\"\n onMultiSelectOption(\n group.id,\n opt.id\n )\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedIds?.includes(\n opt.id\n )\n \"\n [class.font-bold]=\"\n group.selectedIds?.includes(\n opt.id\n )\n \"\n [class.text-zinc-500]=\"\n !group.selectedIds?.includes(\n opt.id\n )\n \"\n >\n {{ capitalize(t(opt.label)) }}\n </span>\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n !group.selectedIds?.includes(\n opt.id\n )\n \"\n [class.opacity-100]=\"\n group.selectedIds?.includes(\n opt.id\n )\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n }\n }\n\n @if (group.type === 'boolean') {\n <button\n (click)=\"\n onBooleanToggle(group.id, true)\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedBoolean === true\n \"\n [class.font-bold]=\"\n group.selectedBoolean === true\n \"\n [class.text-zinc-500]=\"\n group.selectedBoolean !== true\n \"\n >{{ capitalize(t('YES')) }}</span\n >\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n group.selectedBoolean !== true\n \"\n [class.opacity-100]=\"\n group.selectedBoolean === true\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n <button\n (click)=\"\n onBooleanToggle(group.id, false)\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedBoolean === false\n \"\n [class.font-bold]=\"\n group.selectedBoolean === false\n \"\n [class.text-zinc-500]=\"\n group.selectedBoolean !== false\n \"\n >{{ capitalize(t('NO')) }}</span\n >\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n group.selectedBoolean !== false\n \"\n [class.opacity-100]=\"\n group.selectedBoolean === false\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n }\n\n @if (group.type === 'range') {\n <div\n class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n >\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >\n {{ t('MIN_VALUE') }}\n </label>\n <input\n type=\"number\"\n [value]=\"\n group.selectedMin ||\n group.minValue ||\n ''\n \"\n (input)=\"\n onRangeChange(\n group.id,\n 'min',\n $event\n )\n \"\n [min]=\"group.minValue\"\n [max]=\"group.maxValue\"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >\n {{ t('MAX_VALUE') }}\n </label>\n <input\n type=\"number\"\n [value]=\"\n group.selectedMax ||\n group.maxValue ||\n ''\n \"\n (input)=\"\n onRangeChange(\n group.id,\n 'max',\n $event\n )\n \"\n [min]=\"group.minValue\"\n [max]=\"group.maxValue\"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n </div>\n }\n\n @if (group.type === 'searchSelect') {\n <div class=\"px-6 py-4 bg-zinc-900/50\">\n <input\n type=\"text\"\n [value]=\"\n group.selectedSearchValue || ''\n \"\n (input)=\"\n onSearchChange(group.id, $event)\n \"\n [placeholder]=\"\n group.searchPlaceholder ||\n capitalize(t('SEARCH'))\n \"\n [attr.aria-label]=\"group.searchPlaceholder || capitalize(t('SEARCH'))\"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n }\n\n @if (group.type === 'dateRange') {\n <div\n class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n >\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >{{ t('FROM_DATE') }}</label\n >\n <input\n type=\"date\"\n [value]=\"group.dateFrom || ''\"\n (change)=\"\n onDateChange(\n group.id,\n 'from',\n $event\n )\n \"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >{{ t('TO_DATE') }}</label\n >\n <input\n type=\"date\"\n [value]=\"group.dateTo || ''\"\n (change)=\"\n onDateChange(\n group.id,\n 'to',\n $event\n )\n \"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".overlay-fade-in{animation:fadeIn .25s ease-out forwards}.sheet-slide-up{will-change:transform;animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.chevron{height:.5rem;width:.5rem;border-right-width:2px;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity, 1));transition:transform .4s cubic-bezier(.33,1,.68,1),border-color .3s ease;transform:rotate(45deg)}.chevron.open{transform:rotate(225deg) translateY(-1px) translate(-1px)}.filter-group-item:has(.collapsible-content.open){border-color:#3f3f4699;box-shadow:0 10px 30px -10px #00000080}.collapsible-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility .3s;visibility:hidden;opacity:0;overflow:hidden}.collapsible-content.open{grid-template-rows:1fr;visibility:visible;opacity:1}.collapsible-inner{min-height:0}.inner-panel{transform:scale(.98) translateY(-5px);transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s ease;opacity:0}.collapsible-content.open .inner-panel{transform:scale(1) translateY(0);opacity:1}@media(hover:hover){.active\\:bg-zinc-800\\/50:hover{background-color:#3f3f464d}.active\\:bg-zinc-900\\/40:hover{background-color:#24242780}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13768
13781
|
}
|
|
13769
13782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, decorators: [{
|
|
13770
13783
|
type: Component,
|
|
13771
|
-
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"] }]
|
|
13772
|
-
}], 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"] }] } });
|
|
13784
|
+
args: [{ selector: 'xs-filter-panel', standalone: true, imports: [CommonModule, FormsModule, XSButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!embedded() && _demoItems().length > 0) {\n <div\n class=\"p-4 mb-4 rounded-xl bg-zinc-900/50 flex justify-between items-center\"\n >\n <div>\n <p class=\"text-white font-bold text-sm\">\n {{ t('DEMO_TITLE') }}\n </p>\n <p class=\"text-zinc-500 text-xs\">\n {{ t('DEMO_DESCRIPTION') }}\n </p>\n </div>\n <xs-button\n (onClick)=\"show.set(true)\"\n [label]=\"t('OPEN_FILTERS')\"\n variant=\"custom\"\n customClass=\"px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl active:scale-95\"\n />\n </div>\n}\n\n@if (show() || embedded()) {\n @if (show() && !embedded()) {\n <div\n class=\"fixed inset-0 z-[9000] bg-black/60 backdrop-blur-sm overlay-fade-in cursor-default\"\n (click)=\"handleClose()\"\n role=\"presentation\"\n ></div>\n <div class=\"fixed inset-0 z-[9000] flex items-end justify-center pointer-events-none\">\n <section\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"t('FILTERS')\"\n tabindex=\"-1\"\n class=\"relative w-full max-w-md mx-auto overflow-hidden bg-black shadow-2xl rounded-t-[2.5rem] sheet-slide-up max-h-[85vh] flex flex-col cursor-auto pointer-events-auto outline-none\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <div class=\"flex justify-center pt-4 pb-2\">\n <div class=\"w-12 h-1.5 bg-zinc-800 rounded-full\"></div>\n </div>\n\n <div class=\"px-6 py-2 flex justify-between items-center\">\n <h2\n class=\"text-xl font-bold text-white tracking-tight uppercase\"\n >\n {{ t('FILTERS') }}\n </h2>\n <div class=\"flex items-center gap-2\">\n @if (activeFiltersCount() > 0) {\n <xs-button\n (onClick)=\"clear.emit()\"\n [label]=\"capitalize(t('CLEAR'))\"\n layout=\"mini\"\n variant=\"custom\"\n customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n />\n }\n <xs-button\n (onClick)=\"handleApply()\"\n [label]=\"t('DONE')\"\n layout=\"mini\"\n variant=\"custom\"\n customClass=\"text-zinc-400 hover:text-white text-sm font-medium p-2 uppercase\"\n />\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n </section>\n </div>\n } @else if (embedded()) {\n <ng-container *ngTemplateOutlet=\"groupsTpl\" />\n }\n}\n\n<ng-template #groupsTpl>\n <div\n #scrollContainer\n [class.flex-1]=\"!embedded()\"\n [class.overflow-y-auto]=\"!embedded()\"\n [class.no-scrollbar]=\"!embedded()\"\n class=\"px-4 pt-4 pb-12 space-y-3\"\n >\n @for (group of filteredData(); track group.id) {\n <div\n [id]=\"'group-' + group.id\"\n class=\"overflow-hidden rounded-[2.5rem] bg-zinc-900/50 transition-all duration-300 filter-group-item border-none\"\n >\n <button\n (click)=\"toggleGroup(group.id)\"\n type=\"button\"\n [attr.aria-expanded]=\"activeGroupId() === group.id\"\n [attr.aria-controls]=\"'group-content-' + group.id\"\n class=\"w-full flex items-center justify-between px-6 py-4 transition-colors border-none\"\n [class]=\"\n activeGroupId() === group.id\n ? 'bg-zinc-900/50'\n : 'bg-transparent hover:bg-black/40 active:bg-black/20'\n \"\n >\n <div\n class=\"flex-1 flex flex-col text-left justify-center h-full\"\n >\n <span\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-[0.15em] leading-none mb-2\"\n >\n {{ t(group.title) }}\n </span>\n <span\n class=\"text-base font-semibold leading-tight\"\n [class.text-white]=\"\n group.selectedId ||\n (group.type === 'dateRange' &&\n (group.dateFrom || group.dateTo))\n \"\n >\n {{\n getSelectedLabel(group) || t('NOT_SELECTED')\n }}\n </span>\n </div>\n <div class=\"flex items-center justify-center pl-4\">\n <div\n class=\"chevron opacity-40\"\n [class.open]=\"activeGroupId() === group.id\"\n ></div>\n </div>\n </button>\n\n <div\n [id]=\"'group-content-' + group.id\"\n class=\"collapsible-content\"\n [class.open]=\"activeGroupId() === group.id\"\n role=\"region\"\n [attr.aria-label]=\"t(group.title)\"\n >\n <div class=\"collapsible-inner\">\n <div class=\"px-2 pb-3 bg-zinc-900/50\">\n <div\n class=\"bg-zinc-900/50 rounded-[1.8rem] overflow-hidden inner-panel shadow-2xl border-none\"\n >\n @if (activeGroupType() !== 'searchSelect' && activeGroupType() !== 'dateRange') {\n <div class=\"p-3 bg-zinc-900/50\">\n <div class=\"relative\">\n <input\n type=\"text\"\n [ngModel]=\"searchQuery()\"\n (ngModelChange)=\"\n searchQuery.set($event)\n \"\n [placeholder]=\"capitalize(t('SEARCH')) + '...'\"\n [attr.aria-label]=\"capitalize(t('SEARCH'))\"\n class=\"w-full bg-zinc-900/50 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:ring-0 placeholder:text-zinc-500 transition-all outline-none border-none\"\n />\n <span\n class=\"absolute left-3 top-3 opacity-40 text-sm\"\n aria-hidden=\"true\"\n >\uD83D\uDD0D</span\n >\n </div>\n </div>\n }\n\n <div class=\"flex flex-col\">\n @if (\n group.type === 'select' ||\n group.type === undefined ||\n group.type === 'searchSelect'\n ) {\n @for (\n opt of group.options;\n track $index\n ) {\n <button\n (click)=\"\n onSelectOption(group.id, opt.id)\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedId === opt.id\n \"\n [class.font-bold]=\"\n group.selectedId === opt.id\n \"\n [class.text-zinc-500]=\"\n group.selectedId !== opt.id\n \"\n >\n {{ capitalize(t(opt.label)) }}\n </span>\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n group.selectedId !== opt.id\n \"\n [class.opacity-100]=\"\n group.selectedId === opt.id\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n }\n }\n\n @if (group.type === 'multiSelect') {\n @for (\n opt of group.options;\n track $index\n ) {\n <button\n (click)=\"\n onMultiSelectOption(\n group.id,\n opt.id\n )\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50 group/opt\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedIds?.includes(\n opt.id\n )\n \"\n [class.font-bold]=\"\n group.selectedIds?.includes(\n opt.id\n )\n \"\n [class.text-zinc-500]=\"\n !group.selectedIds?.includes(\n opt.id\n )\n \"\n >\n {{ capitalize(t(opt.label)) }}\n </span>\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n !group.selectedIds?.includes(\n opt.id\n )\n \"\n [class.opacity-100]=\"\n group.selectedIds?.includes(\n opt.id\n )\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n }\n }\n\n @if (group.type === 'boolean') {\n <button\n (click)=\"\n onBooleanToggle(group.id, true)\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedBoolean === true\n \"\n [class.font-bold]=\"\n group.selectedBoolean === true\n \"\n [class.text-zinc-500]=\"\n group.selectedBoolean !== true\n \"\n >{{ capitalize(t('YES')) }}</span\n >\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n group.selectedBoolean !== true\n \"\n [class.opacity-100]=\"\n group.selectedBoolean === true\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n <button\n (click)=\"\n onBooleanToggle(group.id, false)\n \"\n type=\"button\"\n class=\"w-full flex items-center justify-between px-6 py-4 text-sm border-none bg-transparent transition-all hover:bg-zinc-900/50 active:bg-zinc-900/50\"\n >\n <span\n class=\"transition-colors duration-200\"\n [class.text-white]=\"\n group.selectedBoolean === false\n \"\n [class.font-bold]=\"\n group.selectedBoolean === false\n \"\n [class.text-zinc-500]=\"\n group.selectedBoolean !== false\n \"\n >{{ capitalize(t('NO')) }}</span\n >\n <div\n class=\"flex items-center justify-center w-5 h-5\"\n >\n <div\n [class.opacity-0]=\"\n group.selectedBoolean !== false\n \"\n [class.opacity-100]=\"\n group.selectedBoolean === false\n \"\n class=\"w-2.5 h-2.5 rounded-full bg-red-500 transition-opacity duration-200\"\n ></div>\n </div>\n </button>\n }\n\n @if (group.type === 'range') {\n <div\n class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n >\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >\n {{ t('MIN_VALUE') }}\n </label>\n <input\n type=\"number\"\n [value]=\"\n group.selectedMin ||\n group.minValue ||\n ''\n \"\n (input)=\"\n onRangeChange(\n group.id,\n 'min',\n $event\n )\n \"\n [min]=\"group.minValue\"\n [max]=\"group.maxValue\"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >\n {{ t('MAX_VALUE') }}\n </label>\n <input\n type=\"number\"\n [value]=\"\n group.selectedMax ||\n group.maxValue ||\n ''\n \"\n (input)=\"\n onRangeChange(\n group.id,\n 'max',\n $event\n )\n \"\n [min]=\"group.minValue\"\n [max]=\"group.maxValue\"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n </div>\n }\n\n @if (group.type === 'searchSelect') {\n <div class=\"px-6 py-4 bg-zinc-900/50\">\n <input\n type=\"text\"\n [value]=\"\n group.selectedSearchValue || ''\n \"\n (input)=\"\n onSearchChange(group.id, $event)\n \"\n [placeholder]=\"\n group.searchPlaceholder ||\n capitalize(t('SEARCH'))\n \"\n [attr.aria-label]=\"group.searchPlaceholder || capitalize(t('SEARCH'))\"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n }\n\n @if (group.type === 'dateRange') {\n <div\n class=\"px-6 py-4 space-y-4 bg-zinc-900/50\"\n >\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >{{ t('FROM_DATE') }}</label\n >\n <input\n type=\"date\"\n [value]=\"group.dateFrom || ''\"\n (change)=\"\n onDateChange(\n group.id,\n 'from',\n $event\n )\n \"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n <div class=\"space-y-2\">\n <label\n class=\"text-[10px] font-bold text-zinc-500 uppercase tracking-widest pl-1\"\n >{{ t('TO_DATE') }}</label\n >\n <input\n type=\"date\"\n [value]=\"group.dateTo || ''\"\n (change)=\"\n onDateChange(\n group.id,\n 'to',\n $event\n )\n \"\n class=\"w-full bg-zinc-900/50 border-none rounded-xl py-3 px-4 text-sm text-white outline-none focus:ring-0 transition-all\"\n />\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".overlay-fade-in{animation:fadeIn .25s ease-out forwards}.sheet-slide-up{will-change:transform;animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.chevron{height:.5rem;width:.5rem;border-right-width:2px;border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity, 1));transition:transform .4s cubic-bezier(.33,1,.68,1),border-color .3s ease;transform:rotate(45deg)}.chevron.open{transform:rotate(225deg) translateY(-1px) translate(-1px)}.filter-group-item:has(.collapsible-content.open){border-color:#3f3f4699;box-shadow:0 10px 30px -10px #00000080}.collapsible-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility .3s;visibility:hidden;opacity:0;overflow:hidden}.collapsible-content.open{grid-template-rows:1fr;visibility:visible;opacity:1}.collapsible-inner{min-height:0}.inner-panel{transform:scale(.98) translateY(-5px);transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s ease;opacity:0}.collapsible-content.open .inner-panel{transform:scale(1) translateY(0);opacity:1}@media(hover:hover){.active\\:bg-zinc-800\\/50:hover{background-color:#3f3f464d}.active\\:bg-zinc-900\\/40:hover{background-color:#24242780}}\n"] }]
|
|
13785
|
+
}], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }, { type: i0.Output, args: ["showChange"] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], externalTranslateService: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalTranslateService", required: false }] }], demoItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "demoItems", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], activeFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFiltersCount", required: false }] }], panelClose: [{ type: i0.Output, args: ["panelClose"] }], applied: [{ type: i0.Output, args: ["applied"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
|
|
13773
13786
|
|
|
13774
13787
|
var MENU_LABEL$1 = "Menú";
|
|
13775
13788
|
var es$d = {
|