@xsmusices/ui 1.44.17 → 1.44.18
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 +14 -6
- 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" }] : []));
|
|
@@ -13409,7 +13417,7 @@ class XSFilterPanelComponent {
|
|
|
13409
13417
|
effect(() => this._data.set(this.data() ?? []));
|
|
13410
13418
|
if (isPlatformBrowser(this.platformId)) {
|
|
13411
13419
|
effect(() => {
|
|
13412
|
-
if (this.show()) {
|
|
13420
|
+
if (!this.embedded() && this.show()) {
|
|
13413
13421
|
setTimeout(() => {
|
|
13414
13422
|
const el = document.querySelector('[role="dialog"]');
|
|
13415
13423
|
el?.focus();
|
|
@@ -13420,6 +13428,7 @@ class XSFilterPanelComponent {
|
|
|
13420
13428
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
13421
13429
|
.subscribe((event) => {
|
|
13422
13430
|
if (event.key === 'Escape' &&
|
|
13431
|
+
!this.embedded() &&
|
|
13423
13432
|
this.show()) {
|
|
13424
13433
|
this.handleClose();
|
|
13425
13434
|
}
|
|
@@ -13490,8 +13499,12 @@ class XSFilterPanelComponent {
|
|
|
13490
13499
|
}
|
|
13491
13500
|
scrollToGroup(groupId) {
|
|
13492
13501
|
setTimeout(() => {
|
|
13502
|
+
if (!isPlatformBrowser(this.platformId))
|
|
13503
|
+
return;
|
|
13504
|
+
if (!this.show() && !this.embedded())
|
|
13505
|
+
return;
|
|
13493
13506
|
const el = document.getElementById(`group-${groupId}`);
|
|
13494
|
-
if (el
|
|
13507
|
+
if (el) {
|
|
13495
13508
|
el.scrollIntoView({
|
|
13496
13509
|
behavior: 'smooth',
|
|
13497
13510
|
block: 'nearest',
|
|
@@ -13765,12 +13778,12 @@ class XSFilterPanelComponent {
|
|
|
13765
13778
|
this.applied.emit();
|
|
13766
13779
|
}
|
|
13767
13780
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13768
|
-
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 });
|
|
13781
|
+
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 }, 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 (!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\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 <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}.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: "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 });
|
|
13769
13782
|
}
|
|
13770
13783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, decorators: [{
|
|
13771
13784
|
type: Component,
|
|
13772
|
-
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"] }]
|
|
13773
|
-
}], 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"] }] } });
|
|
13785
|
+
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\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 <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}.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"] }]
|
|
13786
|
+
}], 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 }] }], 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"] }] } });
|
|
13774
13787
|
|
|
13775
13788
|
var MENU_LABEL$1 = "Menú";
|
|
13776
13789
|
var es$d = {
|