@xsmusices/ui 1.44.13 → 1.44.17
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-xs-filter-panel.xsstory-DbvxGppo.mjs → xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs} +35 -2
- package/fesm2022/xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs.map +1 -0
- package/fesm2022/xsmusices-ui.mjs +10 -8
- package/fesm2022/xsmusices-ui.mjs.map +1 -1
- package/index.d.ts +3 -2
- package/package.json +1 -1
- package/fesm2022/xsmusices-ui-xs-filter-panel.xsstory-DbvxGppo.mjs.map +0 -1
|
@@ -13385,6 +13385,7 @@ class XSFilterPanelComponent {
|
|
|
13385
13385
|
demoItems = input([], ...(ngDevMode ? [{ debugName: "demoItems" }] : []));
|
|
13386
13386
|
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
13387
13387
|
activeFiltersCount = input(0, ...(ngDevMode ? [{ debugName: "activeFiltersCount" }] : []));
|
|
13388
|
+
layout = input('bottom-sheet', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
13388
13389
|
panelClose = output();
|
|
13389
13390
|
applied = output();
|
|
13390
13391
|
filterChange = output();
|
|
@@ -13764,12 +13765,12 @@ class XSFilterPanelComponent {
|
|
|
13764
13765
|
this.applied.emit();
|
|
13765
13766
|
}
|
|
13766
13767
|
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 });
|
|
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 });
|
|
13768
13769
|
}
|
|
13769
13770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSFilterPanelComponent, decorators: [{
|
|
13770
13771
|
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"] }] } });
|
|
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"] }] } });
|
|
13773
13774
|
|
|
13774
13775
|
var MENU_LABEL$1 = "Menú";
|
|
13775
13776
|
var es$d = {
|
|
@@ -17731,7 +17732,7 @@ class XSTableItemsEntityComponent {
|
|
|
17731
17732
|
return !Array.isArray(value);
|
|
17732
17733
|
}
|
|
17733
17734
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsEntityComponent, isStandalone: true, selector: "xs-table-items-entity", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let i = $any(item());\n@switch (header().type) {\n @case ('artist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n rounded=\"lg\"\n [objectFit]=\"'cover'\"\n size=\"full\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n }}\n </p>\n @if (i.country || itemForDisplay.country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.country?.code ||\n itemForDisplay.country?.code ||\n i.country ||\n itemForDisplay.country | countryFlag\n \"\n rounded=\"none\"\n [objectFit]=\"'cover'\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{\n i.country?.name ||\n itemForDisplay.country?.name ||\n (i.country | countryName) ||\n (itemForDisplay.country | countryName)\n }}\n </p>\n </div>\n }\n @if (!(i.country || itemForDisplay.country)) {\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{ textsService.notClaimed }}\n </p>\n }\n </div>\n </div>\n }\n @case ('artistNameAdmin') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n size=\"full\"\n rounded=\"lg\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-tight text-black dark:text-white\"\n >\n {{ itemForDisplay.name || i.name | truncateText: 40 }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('event') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'event'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n </div>\n </div>\n }\n @case ('media') {\n @if (\n itemForDisplay && itemForDisplay.name !== 'Desconocido'\n ) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'media'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 40\n }}\n </p>\n @if (itemForDisplay || item()) {\n <div class=\"flex gap-1 items-center\">\n <p class=\"text-xs font-light text-gray-400\">\n @if (\n getArtists(itemForDisplay || item()).length > 0\n ) {\n @for (\n artist of getArtists(\n itemForDisplay || item()\n ) | sliceArray: 0 : 3;\n track $index\n ) {\n @if ($index !== 0) {\n <span> & </span>\n }\n {{ artist.name }}\n }\n } @else {\n {{\n (itemForDisplay.artist || i.artist)?.name ||\n (itemForDisplay.user || i.user)?.name ||\n '---'\n }}\n }\n </p>\n </div>\n }\n </div>\n </div>\n }\n }\n @case ('site') {\n @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 20\n }}\n </p>\n <div class=\"flex items-center gap-1\">\n @if (itemForDisplay.address?.country?.code) {\n <xs-image\n [src]=\"\n itemForDisplay.address?.country?.code\n | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n }\n <span class=\"text-xs font-light text-gray-400\">\n {{\n itemForDisplay.address?.region\n ? (itemForDisplay.address.region.name\n | fixRegion\n | truncateText: 20)\n : (itemForDisplay.address?.country?.code\n | countryName)\n }}\n </span>\n </div>\n </div>\n </div>\n }\n }\n @case ('siteItem') {\n @if (i.site) {\n @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center w-64 gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.site\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-10 h-10\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.site.name | truncateText: 20 }}\n </p>\n <div\n class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n >\n <xs-image\n [src]=\"\n i.site.address?.country?.code | countryFlag\n \"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span>\n {{\n i.site.address?.region\n ? (i.site.address?.region.name\n | fixRegion\n | truncateText: 20)\n : (i.site.address?.town | truncateText: 20)\n }}\n </span>\n </div>\n </div>\n </div>\n }\n }\n }\n @case ('organization') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n <div class=\"flex items-center gap-1\">\n @if (\n itemForDisplay.country?.code ||\n (itemForDisplay.country &&\n itemForDisplay.country.length &&\n isNotArray(itemForDisplay.country))\n ) {\n <xs-image\n [src]=\"\n itemForDisplay.country?.code ||\n itemForDisplay.country | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n }\n <span class=\"text-xs font-light text-gray-400\">\n {{\n itemForDisplay.country?.name ||\n (itemForDisplay.country &&\n itemForDisplay.country.length &&\n isNotArray(itemForDisplay.country)\n ? (itemForDisplay.country | countryName)\n : '')\n }}\n </span>\n </div>\n </div>\n </div>\n }\n @case ('organizationObject') {\n @if (i.organizations?.length > 0) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.organizations[0]\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col justify-center gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.organizations[0]?.name | truncateText: 40 }}\n </p>\n @if (i.organizations[0].country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.organizations[0].country?.code ||\n i.organizations[0].country | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span class=\"text-xs font-light text-gray-400\">\n {{\n i.organizations[0].country?.name ||\n (i.organizations[0].country | countryName)\n }}\n </span>\n </div>\n }\n </div>\n @if (i.organizations.length > 1) {\n <p class=\"text-sm text-gray-500\">\n +{{ i.organizations.length - 1 }}\n </p>\n }\n </div>\n }\n @if (!i.organizations || i.organizations.length === 0) {\n <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n }\n }\n @case ('equipment') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"'equipment'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <p class=\"text-xs font-extralight\">\n {{\n i.manufacturer ??\n (i.equipment && i.equipment.length\n ? i.equipment[0]\n : '')\n }}\n </p>\n </div>\n </div>\n }\n @case ('equipmentSetupArtist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"i.artist\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.artist.name | truncateText: 40 }}\n </p>\n <p\n class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n >\n <xs-image\n [src]=\"i.artist.country?.code | countryFlag\"\n rounded=\"none\"\n objectFit=\"cover\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n {{ i.artist.country?.name | truncateText: 20 }}\n </p>\n </div>\n </div>\n }\n @case ('itemContactManagement') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"i.type\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <div class=\"flex items-center gap-1\">\n <xs-image\n [item]=\"i.country\"\n [typeItem]=\"'flag'\"\n [imageType]=\"'small'\"\n rounded=\"none\"\n customClass=\"w-4 h-4\"\n ></xs-image>\n <p class=\"text-xs font-extralight\">\n {{ i.country?.name }}\n </p>\n </div>\n </div>\n </div>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XSImageComponent, selector: "xs-image", inputs: ["config", "viewTransitionName", "src", "alt", "width", "height", "size", "rounded", "objectFit", "clickable", "item", "typeItem", "imageType", "fallbackSrc", "loading", "priority", "customClass", "generateAvatar"], outputs: ["onClick", "onLoad", "onError"] }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }, { kind: "pipe", type: CountryNamePipe, name: "countryName" }, { kind: "pipe", type: TruncateTextPipe, name: "truncateText" }, { kind: "pipe", type: FixRegionPipe, name: "fixRegion" }, { kind: "pipe", type: SliceArrayPipe, name: "sliceArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17735
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsEntityComponent, isStandalone: true, selector: "xs-table-items-entity", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let i = $any(item());\n@switch (header().type) {\n @case ('artist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n rounded=\"lg\"\n [objectFit]=\"'cover'\"\n size=\"full\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n }}\n </p>\n @if (i.country || itemForDisplay.country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.country?.code ||\n itemForDisplay.country?.code ||\n i.country ||\n itemForDisplay.country | countryFlag\n \"\n rounded=\"none\"\n [objectFit]=\"'cover'\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{\n i.country?.name ||\n itemForDisplay.country?.name ||\n (i.country | countryName) ||\n (itemForDisplay.country | countryName)\n }}\n </p>\n </div>\n }\n @if (!(i.country || itemForDisplay.country)) {\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{ textsService.notClaimed }}\n </p>\n }\n </div>\n </div>\n }\n @case ('artistNameAdmin') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n size=\"full\"\n rounded=\"lg\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-tight text-black dark:text-white\"\n >\n {{ itemForDisplay.name || i.name | truncateText: 40 }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('event') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'event'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('media') {\n @if (\n itemForDisplay && itemForDisplay.name !== 'Desconocido'\n ) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'media'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 40\n }}\n </p>\n @if (itemForDisplay || item()) {\n <div class=\"flex gap-1 items-center\">\n <p class=\"text-xs font-light text-gray-400\">\n @if (\n getArtists(itemForDisplay || item()).length > 0\n ) {\n @for (\n artist of getArtists(\n itemForDisplay || item()\n ) | sliceArray: 0 : 3;\n track $index\n ) {\n @if ($index !== 0) {\n <span> & </span>\n }\n {{ artist.name }}\n }\n } @else {\n {{\n (itemForDisplay.artist || i.artist)?.name ||\n (itemForDisplay.user || i.user)?.name ||\n '---'\n }}\n }\n </p>\n </div>\n }\n </div>\n </div>\n }\n }\n @case ('site') {\n @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 20\n }}\n </p>\n <div class=\"flex items-center gap-1\">\n @if (itemForDisplay.address?.country?.code) {\n <xs-image\n [src]=\"\n itemForDisplay.address?.country?.code\n | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n }\n <span class=\"text-xs font-light text-gray-400\">\n {{\n itemForDisplay.address?.region\n ? (itemForDisplay.address.region.name\n | fixRegion\n | truncateText: 20)\n : (itemForDisplay.address?.country?.code\n | countryName)\n }}\n </span>\n </div>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n }\n @case ('siteItem') {\n @if (i.site) {\n @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center w-64 gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.site\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-10 h-10\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.site.name | truncateText: 20 }}\n </p>\n <div\n class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n >\n <xs-image\n [src]=\"\n i.site.address?.country?.code | countryFlag\n \"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span>\n {{\n i.site.address?.region\n ? (i.site.address?.region.name\n | fixRegion\n | truncateText: 20)\n : (i.site.address?.town | truncateText: 20)\n }}\n </span>\n </div>\n </div>\n </div>\n }\n }\n }\n @case ('organization') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('organizationObject') {\n @if (i.organizations?.length > 0) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.organizations[0]\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col justify-center gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.organizations[0]?.name | truncateText: 40 }}\n </p>\n @if (i.organizations[0].country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.organizations[0].country?.code ||\n i.organizations[0].country | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span class=\"text-xs font-light text-gray-400\">\n {{\n i.organizations[0].country?.name ||\n (i.organizations[0].country | countryName)\n }}\n </span>\n </div>\n }\n </div>\n @if (i.organizations.length > 1) {\n <p class=\"text-sm text-gray-500\">\n +{{ i.organizations.length - 1 }}\n </p>\n }\n </div>\n }\n @if (!i.organizations || i.organizations.length === 0) {\n <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n }\n }\n @case ('equipment') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"'equipment'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <p class=\"text-xs font-extralight\">\n {{\n i.manufacturer ??\n (i.equipment && i.equipment.length\n ? i.equipment[0]\n : '')\n }}\n </p>\n </div>\n </div>\n }\n @case ('equipmentSetupArtist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"i.artist\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.artist.name | truncateText: 40 }}\n </p>\n <p\n class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n >\n <xs-image\n [src]=\"i.artist.country?.code | countryFlag\"\n rounded=\"none\"\n objectFit=\"cover\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n {{ i.artist.country?.name | truncateText: 20 }}\n </p>\n </div>\n </div>\n }\n @case ('itemContactManagement') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"i.type\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <div class=\"flex items-center gap-1\">\n <xs-image\n [item]=\"i.country\"\n [typeItem]=\"'flag'\"\n [imageType]=\"'small'\"\n rounded=\"none\"\n customClass=\"w-4 h-4\"\n ></xs-image>\n <p class=\"text-xs font-extralight\">\n {{ i.country?.name }}\n </p>\n </div>\n </div>\n </div>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: XSImageComponent, selector: "xs-image", inputs: ["config", "viewTransitionName", "src", "alt", "width", "height", "size", "rounded", "objectFit", "clickable", "item", "typeItem", "imageType", "fallbackSrc", "loading", "priority", "customClass", "generateAvatar"], outputs: ["onClick", "onLoad", "onError"] }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }, { kind: "pipe", type: CountryNamePipe, name: "countryName" }, { kind: "pipe", type: TruncateTextPipe, name: "truncateText" }, { kind: "pipe", type: FixRegionPipe, name: "fixRegion" }, { kind: "pipe", type: SliceArrayPipe, name: "sliceArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17735
17736
|
}
|
|
17736
17737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsEntityComponent, decorators: [{
|
|
17737
17738
|
type: Component,
|
|
@@ -17743,7 +17744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
|
|
|
17743
17744
|
TruncateTextPipe,
|
|
17744
17745
|
FixRegionPipe,
|
|
17745
17746
|
SliceArrayPipe,
|
|
17746
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = $any(item());\n@switch (header().type) {\n @case ('artist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n rounded=\"lg\"\n [objectFit]=\"'cover'\"\n size=\"full\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n }}\n </p>\n @if (i.country || itemForDisplay.country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.country?.code ||\n itemForDisplay.country?.code ||\n i.country ||\n itemForDisplay.country | countryFlag\n \"\n rounded=\"none\"\n [objectFit]=\"'cover'\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{\n i.country?.name ||\n itemForDisplay.country?.name ||\n (i.country | countryName) ||\n (itemForDisplay.country | countryName)\n }}\n </p>\n </div>\n }\n @if (!(i.country || itemForDisplay.country)) {\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{ textsService.notClaimed }}\n </p>\n }\n </div>\n </div>\n }\n @case ('artistNameAdmin') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n size=\"full\"\n rounded=\"lg\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-tight text-black dark:text-white\"\n >\n {{ itemForDisplay.name || i.name | truncateText: 40 }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('event') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'event'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n </div>\n </div>\n }\n @case ('media') {\n @if (\n itemForDisplay && itemForDisplay.name !== 'Desconocido'\n ) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'media'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 40\n }}\n </p>\n @if (itemForDisplay || item()) {\n <div class=\"flex gap-1 items-center\">\n <p class=\"text-xs font-light text-gray-400\">\n @if (\n getArtists(itemForDisplay || item()).length > 0\n ) {\n @for (\n artist of getArtists(\n itemForDisplay || item()\n ) | sliceArray: 0 : 3;\n track $index\n ) {\n @if ($index !== 0) {\n <span> & </span>\n }\n {{ artist.name }}\n }\n } @else {\n {{\n (itemForDisplay.artist || i.artist)?.name ||\n (itemForDisplay.user || i.user)?.name ||\n '---'\n }}\n }\n </p>\n </div>\n }\n </div>\n </div>\n }\n }\n @case ('site') {\n @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 20\n }}\n </p>\n <div class=\"flex items-center gap-1\">\n @if (itemForDisplay.address?.country?.code) {\n <xs-image\n [src]=\"\n itemForDisplay.address?.country?.code\n | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n }\n <span class=\"text-xs font-light text-gray-400\">\n {{\n itemForDisplay.address?.region\n ? (itemForDisplay.address.region.name\n | fixRegion\n | truncateText: 20)\n : (itemForDisplay.address?.country?.code\n | countryName)\n }}\n </span>\n </div>\n </div>\n </div>\n }\n }\n @case ('siteItem') {\n @if (i.site) {\n @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center w-64 gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.site\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-10 h-10\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.site.name | truncateText: 20 }}\n </p>\n <div\n class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n >\n <xs-image\n [src]=\"\n i.site.address?.country?.code | countryFlag\n \"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span>\n {{\n i.site.address?.region\n ? (i.site.address?.region.name\n | fixRegion\n | truncateText: 20)\n : (i.site.address?.town | truncateText: 20)\n }}\n </span>\n </div>\n </div>\n </div>\n }\n }\n }\n @case ('organization') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n <div class=\"flex items-center gap-1\">\n @if (\n itemForDisplay.country?.code ||\n (itemForDisplay.country &&\n itemForDisplay.country.length &&\n isNotArray(itemForDisplay.country))\n ) {\n <xs-image\n [src]=\"\n itemForDisplay.country?.code ||\n itemForDisplay.country | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n }\n <span class=\"text-xs font-light text-gray-400\">\n {{\n itemForDisplay.country?.name ||\n (itemForDisplay.country &&\n itemForDisplay.country.length &&\n isNotArray(itemForDisplay.country)\n ? (itemForDisplay.country | countryName)\n : '')\n }}\n </span>\n </div>\n </div>\n </div>\n }\n @case ('organizationObject') {\n @if (i.organizations?.length > 0) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.organizations[0]\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col justify-center gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.organizations[0]?.name | truncateText: 40 }}\n </p>\n @if (i.organizations[0].country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.organizations[0].country?.code ||\n i.organizations[0].country | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span class=\"text-xs font-light text-gray-400\">\n {{\n i.organizations[0].country?.name ||\n (i.organizations[0].country | countryName)\n }}\n </span>\n </div>\n }\n </div>\n @if (i.organizations.length > 1) {\n <p class=\"text-sm text-gray-500\">\n +{{ i.organizations.length - 1 }}\n </p>\n }\n </div>\n }\n @if (!i.organizations || i.organizations.length === 0) {\n <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n }\n }\n @case ('equipment') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"'equipment'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <p class=\"text-xs font-extralight\">\n {{\n i.manufacturer ??\n (i.equipment && i.equipment.length\n ? i.equipment[0]\n : '')\n }}\n </p>\n </div>\n </div>\n }\n @case ('equipmentSetupArtist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"i.artist\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.artist.name | truncateText: 40 }}\n </p>\n <p\n class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n >\n <xs-image\n [src]=\"i.artist.country?.code | countryFlag\"\n rounded=\"none\"\n objectFit=\"cover\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n {{ i.artist.country?.name | truncateText: 20 }}\n </p>\n </div>\n </div>\n }\n @case ('itemContactManagement') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"i.type\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <div class=\"flex items-center gap-1\">\n <xs-image\n [item]=\"i.country\"\n [typeItem]=\"'flag'\"\n [imageType]=\"'small'\"\n rounded=\"none\"\n customClass=\"w-4 h-4\"\n ></xs-image>\n <p class=\"text-xs font-extralight\">\n {{ i.country?.name }}\n </p>\n </div>\n </div>\n </div>\n }\n}\n" }]
|
|
17747
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = $any(item());\n@switch (header().type) {\n @case ('artist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n rounded=\"lg\"\n [objectFit]=\"'cover'\"\n size=\"full\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n }}\n </p>\n @if (i.country || itemForDisplay.country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.country?.code ||\n itemForDisplay.country?.code ||\n i.country ||\n itemForDisplay.country | countryFlag\n \"\n rounded=\"none\"\n [objectFit]=\"'cover'\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{\n i.country?.name ||\n itemForDisplay.country?.name ||\n (i.country | countryName) ||\n (itemForDisplay.country | countryName)\n }}\n </p>\n </div>\n }\n @if (!(i.country || itemForDisplay.country)) {\n <p\n class=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 leading-tight\"\n >\n {{ textsService.notClaimed }}\n </p>\n }\n </div>\n </div>\n }\n @case ('artistNameAdmin') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n [viewTransitionName]=\"itemForImage?._id || i._id\"\n size=\"full\"\n rounded=\"lg\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-tight text-black dark:text-white\"\n >\n {{ itemForDisplay.name || i.name | truncateText: 40 }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('event') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'event'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('media') {\n @if (\n itemForDisplay && itemForDisplay.name !== 'Desconocido'\n ) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'media'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 40\n }}\n </p>\n @if (itemForDisplay || item()) {\n <div class=\"flex gap-1 items-center\">\n <p class=\"text-xs font-light text-gray-400\">\n @if (\n getArtists(itemForDisplay || item()).length > 0\n ) {\n @for (\n artist of getArtists(\n itemForDisplay || item()\n ) | sliceArray: 0 : 3;\n track $index\n ) {\n @if ($index !== 0) {\n <span> & </span>\n }\n {{ artist.name }}\n }\n } @else {\n {{\n (itemForDisplay.artist || i.artist)?.name ||\n (itemForDisplay.user || i.user)?.name ||\n '---'\n }}\n }\n </p>\n </div>\n }\n </div>\n </div>\n }\n }\n @case ('site') {\n @if (itemForDisplay?._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name ||\n itemForDisplay.title ||\n i.name | truncateText: 20\n }}\n </p>\n <div class=\"flex items-center gap-1\">\n @if (itemForDisplay.address?.country?.code) {\n <xs-image\n [src]=\"\n itemForDisplay.address?.country?.code\n | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n }\n <span class=\"text-xs font-light text-gray-400\">\n {{\n itemForDisplay.address?.region\n ? (itemForDisplay.address.region.name\n | fixRegion\n | truncateText: 20)\n : (itemForDisplay.address?.country?.code\n | countryName)\n }}\n </span>\n </div>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n }\n @case ('siteItem') {\n @if (i.site) {\n @if (i.site._id === ImportantItems.ANONYMOUS_SITE) {\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n -\n </p>\n } @else {\n <div class=\"flex items-center w-64 gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.site\"\n [typeItem]=\"'site'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-10 h-10\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.site.name | truncateText: 20 }}\n </p>\n <div\n class=\"flex items-center gap-1 text-xs font-light text-gray-400\"\n >\n <xs-image\n [src]=\"\n i.site.address?.country?.code | countryFlag\n \"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span>\n {{\n i.site.address?.region\n ? (i.site.address?.region.name\n | fixRegion\n | truncateText: 20)\n : (i.site.address?.town | truncateText: 20)\n }}\n </span>\n </div>\n </div>\n </div>\n }\n }\n }\n @case ('organization') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"itemForImage\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex min-w-0 flex-col gap-1.5\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{\n itemForDisplay.name || itemForDisplay.title || i.name\n | truncateText: 40\n }}\n </p>\n @let ownerId =\n i.user?._id || itemForDisplay.user?._id;\n @let ownerName =\n i.user?.name || itemForDisplay.user?.name;\n @if (!ownerId || ownerId === ImportantItems.ADMIN_USER) {\n <span\n class=\"w-fit rounded bg-zinc-500/20 px-1.5 py-px text-[10px] font-semibold uppercase tracking-[0.08em] text-zinc-400\"\n >\n {{ textsService.notClaimed }}\n </span>\n } @else if (ownerName) {\n <p\n class=\"flex items-center gap-1 text-xs font-normal leading-normal text-zinc-500 dark:text-zinc-400\"\n >\n <span class=\"truncate\">{{\n ownerName | truncateText: 25\n }}</span>\n <svg\n [attr.aria-label]=\"\n textsService.t('TABLE_ITEMS.VERIFIED')\n \"\n fill=\"rgb(0, 149, 246)\"\n height=\"10\"\n viewBox=\"0 0 40 40\"\n width=\"10\"\n class=\"shrink-0\"\n >\n <path\n d=\"M19.998 3.094 14.638 0l-2.972 5.15H5.432v6.354L0 14.64 3.094 20 0 25.359l5.432 3.137v5.905h5.975L14.638 40l5.36-3.094L25.358 40l3.232-5.6h6.162v-6.01L40 25.359 36.905 20 40 14.641l-5.248-3.03v-6.46h-6.419L25.358 0l-5.36 3.094Zm7.415 11.225 2.254 2.287-11.43 11.5-6.835-6.93 2.244-2.258 4.587 4.581 9.18-9.18Z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </p>\n }\n </div>\n </div>\n }\n @case ('organizationObject') {\n @if (i.organizations?.length > 0) {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"i.organizations[0]\"\n [typeItem]=\"'organization'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col justify-center gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.organizations[0]?.name | truncateText: 40 }}\n </p>\n @if (i.organizations[0].country) {\n <div class=\"flex items-center gap-1\">\n <xs-image\n [src]=\"\n i.organizations[0].country?.code ||\n i.organizations[0].country | countryFlag\n \"\n rounded=\"none\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n <span class=\"text-xs font-light text-gray-400\">\n {{\n i.organizations[0].country?.name ||\n (i.organizations[0].country | countryName)\n }}\n </span>\n </div>\n }\n </div>\n @if (i.organizations.length > 1) {\n <p class=\"text-sm text-gray-500\">\n +{{ i.organizations.length - 1 }}\n </p>\n }\n </div>\n }\n @if (!i.organizations || i.organizations.length === 0) {\n <p>{{ textsService.t('TABLE_ITEMS.NO_LABEL') }}</p>\n }\n }\n @case ('equipment') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"'equipment'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n size=\"full\"\n objectFit=\"cover\"\n [generateAvatar]=\"true\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <p class=\"text-xs font-extralight\">\n {{\n i.manufacturer ??\n (i.equipment && i.equipment.length\n ? i.equipment[0]\n : '')\n }}\n </p>\n </div>\n </div>\n }\n @case ('equipmentSetupArtist') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"i.artist\"\n [typeItem]=\"'artist'\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.artist.name | truncateText: 40 }}\n </p>\n <p\n class=\"flex items-center gap-1 text-xs leading-none font-extralight\"\n >\n <xs-image\n [src]=\"i.artist.country?.code | countryFlag\"\n rounded=\"none\"\n objectFit=\"cover\"\n customClass=\"w-4 h-3\"\n ></xs-image>\n {{ i.artist.country?.name | truncateText: 20 }}\n </p>\n </div>\n </div>\n }\n @case ('itemContactManagement') {\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8\">\n <xs-image\n [item]=\"item()\"\n [typeItem]=\"i.type\"\n [imageType]=\"'small'\"\n rounded=\"lg\"\n customClass=\"object-cover object-center w-8 h-8\"\n ></xs-image>\n </div>\n <div class=\"flex flex-col gap-1\">\n <p\n class=\"mr-2 text-base font-bold leading-none text-black dark:text-white\"\n >\n {{ i.name | truncateText: 40 }}\n </p>\n <div class=\"flex items-center gap-1\">\n <xs-image\n [item]=\"i.country\"\n [typeItem]=\"'flag'\"\n [imageType]=\"'small'\"\n rounded=\"none\"\n customClass=\"w-4 h-4\"\n ></xs-image>\n <p class=\"text-xs font-extralight\">\n {{ i.country?.name }}\n </p>\n </div>\n </div>\n </div>\n }\n}\n" }]
|
|
17747
17748
|
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
|
|
17748
17749
|
|
|
17749
17750
|
class XSTableItemsStateComponent {
|
|
@@ -17818,7 +17819,7 @@ class XSTableItemsVisitsComponent {
|
|
|
17818
17819
|
return !Array.isArray(value);
|
|
17819
17820
|
}
|
|
17820
17821
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsVisitsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17821
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsVisitsComponent, isStandalone: true, selector: "xs-table-items-visits", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n @case ('visits') {\n <p class=\"text-sm font-black\">\n @if (v != null && isNotArray(v)) {\n {{ v | number }}\n } @else if (tv != null) {\n {{ tv | number }}\n }\n </p>\n }\n @case ('visitsMonth') {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n </p>\n }\n @case ('visitsTotal') {\n @if (v || tv != null) {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n </p>\n }\n }\n @case ('visitsAll') {\n <div class=\"flex flex-col\">\n @if (v?.length > 0) {\n <p class=\"\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n </span>\n <span class=\"text-xs font-extralight\">\n {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n </span>\n </p>\n <p>\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'total' | number }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n } @else {\n <p class=\"text-sm font-extralight\">\n {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n </p>\n }\n </div>\n }\n @case ('visitsAllLast') {\n @let iv = $any(i)[$any(i).type];\n @if (iv) {\n @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n <div class=\"flex flex-col\">\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n </p>\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n </div>\n } @else {\n <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n }\n }\n }\n @case ('visitsMonthLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n </p>\n }\n @case ('visitsTotalLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n </p>\n }\n}\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: VisitsMonthTotalPipe, name: "visitsMonthTotal" }, { kind: "pipe", type: NumberToMonthPipe, name: "numberToMonth" }, { kind: "pipe", type: XSDateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableItemsVisitsComponent, isStandalone: true, selector: "xs-table-items-visits", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n @case ('visits') {\n <p class=\"text-sm font-black\">\n @if (v != null && isNotArray(v)) {\n {{ v | number }}\n } @else if (tv != null) {\n {{ tv | number }}\n }\n </p>\n }\n @case ('followers') {\n <p class=\"text-sm font-black\">\n {{ $any(i).totalFollowers ?? 0 | number }}\n </p>\n }\n @case ('visitsMonth') {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n </p>\n }\n @case ('visitsTotal') {\n @if (v || tv != null) {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n </p>\n }\n }\n @case ('visitsAll') {\n <div class=\"flex flex-col\">\n @if (v?.length > 0) {\n <p class=\"\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n </span>\n <span class=\"text-xs font-extralight\">\n {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n </span>\n </p>\n <p>\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'total' | number }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n } @else {\n <p class=\"text-sm font-extralight\">\n {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n </p>\n }\n </div>\n }\n @case ('visitsAllLast') {\n @let iv = $any(i)[$any(i).type];\n @if (iv) {\n @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n <div class=\"flex flex-col\">\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n </p>\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n </div>\n } @else {\n <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n }\n }\n }\n @case ('visitsMonthLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n </p>\n }\n @case ('visitsTotalLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n </p>\n }\n}\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: VisitsMonthTotalPipe, name: "visitsMonthTotal" }, { kind: "pipe", type: NumberToMonthPipe, name: "numberToMonth" }, { kind: "pipe", type: XSDateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17822
17823
|
}
|
|
17823
17824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableItemsVisitsComponent, decorators: [{
|
|
17824
17825
|
type: Component,
|
|
@@ -17827,7 +17828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
|
|
|
17827
17828
|
VisitsMonthTotalPipe,
|
|
17828
17829
|
NumberToMonthPipe,
|
|
17829
17830
|
XSDateFormatPipe,
|
|
17830
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n @case ('visits') {\n <p class=\"text-sm font-black\">\n @if (v != null && isNotArray(v)) {\n {{ v | number }}\n } @else if (tv != null) {\n {{ tv | number }}\n }\n </p>\n }\n @case ('visitsMonth') {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n </p>\n }\n @case ('visitsTotal') {\n @if (v || tv != null) {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n </p>\n }\n }\n @case ('visitsAll') {\n <div class=\"flex flex-col\">\n @if (v?.length > 0) {\n <p class=\"\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n </span>\n <span class=\"text-xs font-extralight\">\n {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n </span>\n </p>\n <p>\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'total' | number }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n } @else {\n <p class=\"text-sm font-extralight\">\n {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n </p>\n }\n </div>\n }\n @case ('visitsAllLast') {\n @let iv = $any(i)[$any(i).type];\n @if (iv) {\n @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n <div class=\"flex flex-col\">\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n </p>\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n </div>\n } @else {\n <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n }\n }\n }\n @case ('visitsMonthLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n </p>\n }\n @case ('visitsTotalLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n </p>\n }\n}\n}\n" }]
|
|
17831
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let i = item();\n@if (i) {\n@let v = $any(i).visits;\n@let tv = $any(i).totalVisits;\n@let mv = $any(i).monthlyVisits;\n@switch (header().type) {\n @case ('visits') {\n <p class=\"text-sm font-black\">\n @if (v != null && isNotArray(v)) {\n {{ v | number }}\n } @else if (tv != null) {\n {{ tv | number }}\n }\n </p>\n }\n @case ('followers') {\n <p class=\"text-sm font-black\">\n {{ $any(i).totalFollowers ?? 0 | number }}\n </p>\n }\n @case ('visitsMonth') {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'month') : (mv ?? 0) }}\n </p>\n }\n @case ('visitsTotal') {\n @if (v || tv != null) {\n <p class=\"text-sm font-black\">\n {{ v ? (v | visitsMonthTotal: 'total') : (tv ?? 0) }}\n </p>\n }\n }\n @case ('visitsAll') {\n <div class=\"flex flex-col\">\n @if (v?.length > 0) {\n <p class=\"\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'month' : filters()?.sortVisitsByYear : filters()?.sortVisitsByMonth | number }}\n </span>\n <span class=\"text-xs font-extralight\">\n {{ filters()?.sortVisitsByMonth ? (filters()?.sortVisitsByMonth! | numberToMonth) : (currentDate | dateFormat: 'MMMM' | titlecase) }}\n </span>\n </p>\n <p>\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ v | visitsMonthTotal: 'total' | number }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n } @else {\n <p class=\"text-sm font-extralight\">\n {{ mv != null ? (mv | number) : (tv != null ? (tv | number) : textsService.t('TABLE_ITEMS.NO_VISITS')) }}\n </p>\n }\n </div>\n }\n @case ('visitsAllLast') {\n @let iv = $any(i)[$any(i).type];\n @if (iv) {\n @if (iv.visits?.length > 0 || iv.monthlyVisits != null || iv.totalVisits != null) {\n <div class=\"flex flex-col\">\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'month' | number) : (iv.monthlyVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">{{ currentDate | dateFormat: 'MMMM' | titlecase }}</span>\n </p>\n <p class=\"py-0 my-0\">\n <span class=\"mr-0.5 text-sm font-semibold\">\n {{ iv.visits?.length ? (iv.visits | visitsMonthTotal: 'total' | number) : (iv.totalVisits ?? 0) }}\n </span>\n <span class=\"text-xs font-extralight\">Total</span>\n </p>\n </div>\n } @else {\n <p class=\"text-sm font-extralight\">{{ textsService.t('TABLE_ITEMS.NO_VISITS') }}</p>\n }\n }\n }\n @case ('visitsMonthLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].monthlyVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'month') : '' }}\n </p>\n }\n @case ('visitsTotalLastVisits') {\n <p class=\"text-sm font-black\">\n {{ $any(i)[$any(i).type] ? ($any(i)[$any(i).type].totalVisits ?? $any(i)[$any(i).type].visits | visitsMonthTotal: 'total') : '' }}\n </p>\n }\n}\n}\n" }]
|
|
17831
17832
|
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }] } });
|
|
17832
17833
|
|
|
17833
17834
|
var TABLE_ITEMS_CHAT$1 = {
|
|
@@ -18119,6 +18120,7 @@ class XSTableItemsComponent {
|
|
|
18119
18120
|
'githubRun',
|
|
18120
18121
|
],
|
|
18121
18122
|
visits: [
|
|
18123
|
+
'followers',
|
|
18122
18124
|
'visitsAll',
|
|
18123
18125
|
'visitsAllLast',
|
|
18124
18126
|
'visitsMonth',
|
|
@@ -23231,7 +23233,7 @@ const LIB_STORIES = [
|
|
|
23231
23233
|
() => import('./xsmusices-ui-xs-badge.xsstory-B1QXLQ4H.mjs').then((m) => m.story),
|
|
23232
23234
|
() => import('./xsmusices-ui-xs-breadcrumbs.xsstory-CNyBeURd.mjs').then((m) => m.story),
|
|
23233
23235
|
() => import('./xsmusices-ui-xs-date-mini.xsstory-DXog7Yhg.mjs').then((m) => m.story),
|
|
23234
|
-
() => import('./xsmusices-ui-xs-filter-panel.xsstory-
|
|
23236
|
+
() => import('./xsmusices-ui-xs-filter-panel.xsstory-D0LDYd4E.mjs').then((m) => m.story),
|
|
23235
23237
|
() => import('./xsmusices-ui-xs-full-image.xsstory-xwN2jkW1.mjs').then((m) => m.story),
|
|
23236
23238
|
() => import('./xsmusices-ui-xs-info-blocks.xsstory-BHtaC7U6.mjs').then((m) => m.story),
|
|
23237
23239
|
() => import('./xsmusices-ui-xs-item-card.xsstory-EGJ6itkx.mjs').then((m) => m.story),
|