@xsmusices/ui 1.41.1 → 1.43.0

package/fesm2022/xsmusices-ui.mjs

@@ -2143,7 +2143,6 @@ class XSDateFormatPipe {
             : dateTime);
         if (Number.isNaN(d.getTime()))
             return '';
-        // Handle specific formats
         if (format === 'MMMM') {
             try {
                 return new Intl.DateTimeFormat(locale, {
@@ -2164,7 +2163,6 @@ class XSDateFormatPipe {
                 return d.toLocaleString(locale, { month: 'short' });
             }
         }
-        // Handle time formats
         if (format === 'HH') {
             try {
                 return new Intl.DateTimeFormat('es-ES', {
@@ -2225,7 +2223,6 @@ class XSDateFormatPipe {
                 return `${day}-${month}-${year} ${hours}:${minutes}`;
             }
         }
-        // Fallback to default locale string
         return d.toLocaleString(locale);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSDateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -2331,13 +2328,10 @@ class XSAvatarService {
     getInitials(name) {
         if (!name)
             return 'U';
-        // 1. Quitar contenido entre paréntesis y corchetes (ej. Cream (KR) -> Cream)
         let clean = name
             .replace(/\(.*?\)/g, '')
             .replace(/\[.*?\]/g, '');
-        // 2. Dejar solo letras (incluyendo acentos y ñ/ü) y convertir otros caracteres a espacios
         clean = clean.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]/g, ' ');
-        // 3. Dividir por espacios y filtrar partes vacías
         const parts = clean
             .trim()
             .split(/\s+/)
@@ -2358,9 +2352,9 @@ class XSAvatarService {
         for (let i = 0; i < name.length; i++) {
             hash = name.codePointAt(i) + ((hash << 5) - hash);
         }
-        const hue = Math.abs(hash) % 360; // 360 tonos posibles
-        const saturation = 65; // %
-        const lightness = 45; // %
+        const hue = Math.abs(hash) % 360;
+        const saturation = 65;
+        const lightness = 45;
         return this.hslToHex(hue, saturation, lightness);
     }
     hslToHex(h, s, l) {
@@ -2424,7 +2418,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                 }]
         }] });
 
-// file: lib/tokens/api-url.token.ts
 const XS_API_URL = new InjectionToken('URL del servidor API', {
     providedIn: 'root',
     factory: () => 'https://api-v2.xsmusic.es',
@@ -2653,7 +2646,6 @@ class NumberToMonthPipe {
         }
         // El constructor de Date usa meses de 0 a 11, por lo que restamos 1 al número.
         const date = new Date(2025, monthNumber - 1, 1);
-        // Usamos formatDate para obtener el nombre completo del mes.
         return formatDate(date, 'MMMM', locale);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: NumberToMonthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -3841,9 +3833,7 @@ class XSSafeUrlPipe {
                 return this.sanitizer.bypassSecurityTrustResourceUrl(value);
             }
         }
-        catch {
-            // URL inválida: devolver vacío seguro
-        }
+        catch { }
         return this.sanitizer.bypassSecurityTrustResourceUrl(EMPTY_SAFE_URL);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSSafeUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -4590,23 +4580,18 @@ class XSToastService {
     // Estado centralizado con Signals para máxima performance en Angular 20
     _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
     toasts = this._toasts.asReadonly();
-    // Eventos de stream para el chat
     _chatNotificationClicked = new Subject();
     chatNotificationClicked$ = this._chatNotificationClicked.asObservable();
-    /**
-     * Método core privado para instanciar cualquier toast
-     */
     show(config) {
         const id = config.id || v4();
         const newToast = {
-            message: '', // Default
+            message: '',
             ...config,
             id,
             duration: config.duration ?? 3000,
             closable: config.closable ?? true,
             type: config.type ?? 'info',
         };
-        // Actualización atómica del estado
         this._toasts.update((state) => [...state, newToast]);
         // Auto-cierre: Solo si tiene duración 0 se considera permanente
         const isPermanent = newToast.duration === 0;
@@ -4614,15 +4599,11 @@ class XSToastService {
             setTimeout(() => this.removeToast(id), newToast.duration);
         }
     }
-    /**
-     * Elimina un toast por su ID
-     */
     removeToast(id) {
         if (!id)
             return;
         this._toasts.update((state) => state.filter((t) => t.id !== id));
     }
-    // --- Métodos de conveniencia ---
     showSuccess(message, title, duration) {
         this.show({ message, title, type: 'success', duration });
     }
@@ -4654,9 +4635,6 @@ class XSToastService {
             closable: true,
         });
     }
-    /**
-     * Notificación específica de Chat con avatares
-     */
     showNotification(message, chatId, items, senderName, messagePreview, duration = 0) {
         this.show({
             message,
@@ -4670,15 +4648,9 @@ class XSToastService {
             closable: true,
         });
     }
-    /**
-     * Emite el evento de click en chat y limpia el rastro
-     */
     emitChatNotificationClicked(chatId) {
         this._chatNotificationClicked.next(chatId);
     }
-    /**
-     * Limpia toda la pantalla de notificaciones
-     */
     closeAll() {
         this._toasts.set([]);
     }
@@ -5210,11 +5182,11 @@ class XSItemsSliderTitleButtonsComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemsSliderTitleButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemsSliderTitleButtonsComponent, isStandalone: true, selector: "xs-items-slider-title-buttons", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, hasSortButton: { classPropertyName: "hasSortButton", publicName: "hasSortButton", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, manage: { classPropertyName: "manage", publicName: "manage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, hasViewButtons: { classPropertyName: "hasViewButtons", publicName: "hasViewButtons", isSignal: true, isRequired: false, transformFunction: null }, hasSoundcloudItems: { classPropertyName: "hasSoundcloudItems", publicName: "hasSoundcloudItems", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, selectedTab: { classPropertyName: "selectedTab", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, isPlayingAll: { classPropertyName: "isPlayingAll", publicName: "isPlayingAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTab: "selectedTabChange", onClickChangeView: "onClickChangeView", onClickPlayAll: "onClickPlayAll", onClickSort: "onClickSort", onChangeState: "onChangeState", onClickTab: "onClickTab" }, host: { attributes: { "xs-items-slider-title-buttons-host": "" } }, ngImport: i0, template: "<div\n  class=\"flex justify-between\"\n  [ngClass]=\"{\n    'items-center w-full px-6 py-2 rounded-xl bg-zinc-900/50 hover:opacity-70 cursor-pointer':\n      manage(),\n    'items-end': !manage(),\n  }\"\n  (click)=\"manage() ? onChangeState.emit(undefined) : null\"\n  (keydown.enter)=\"manage() ? onChangeState.emit(undefined) : null\"\n>\n  <div\n    [id]=\"titleId() ? titleId() : 'profile-' + type() + '-title'\"\n    class=\"flex items-center gap-1 font-black text-left\"\n    [ngClass]=\"{ 'text-sm': manage() }\"\n  >\n    <!-- TYPE NO setup -->\n    @if (type() !== 'setup') {\n      @if (label()) {\n        {{ label() }}\n      }\n      @if (label() && total() && total() > 0) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ total() }})\n        </span>\n      }\n    }\n\n    <!-- TYPE setup -->\n    @if (type() === 'setup') {\n      @if (label()) {\n        Setup\n        {{ tabSelected?.name | titlecase }}\n      }\n      @if (tabSelected?.components?.length) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ tabSelected?.components?.length }})\n        </span>\n      }\n    }\n  </div>\n\n  <div class=\"flex items-center gap-2\">\n    <div class=\"flex gap-2 text-xs text-zinc-400\">\n      @if (tabs() && tabs()!.length <= 2 && tabs()!.length > 1) {\n        @for (tab of tabs()!; track $index; let i = $index) {\n          <xs-button\n            [variant]=\"selectedTab() !== i ? 'primary' : 'selected'\"\n            [label]=\"tab.label\"\n            [layout]=\"'badge'\"\n            (click)=\"onClickTab.emit(i)\"\n            (keydown.enter)=\"onClickTab.emit(i)\"\n          >\n            {{ tab.label }}\n          </xs-button>\n        }\n      }\n      @if (tabs() && tabs()!.length > 2) {\n        <xs-button\n          label=\"\"\n          [variant]=\"selectedTab() === 0 ? 'selected' : 'primary'\"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-left' }\"\n          [disabled]=\"selectedTab() === 0\"\n          (click)=\"onClickTabChevron('left')\"\n          (keydown.enter)=\"onClickTabChevron('left')\"\n        >\n        </xs-button>\n        <xs-button\n          label=\"\"\n          [variant]=\"\n            selectedTab() === (tabs()?.length ?? 0) - 1\n              ? 'selected'\n              : 'primary'\n          \"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-right' }\"\n          [disabled]=\"selectedTab() === (tabs()?.length ?? 0) - 1\"\n          (click)=\"onClickTabChevron('right')\"\n          (keydown.enter)=\"onClickTabChevron('right')\"\n        >\n        </xs-button>\n      }\n    </div>\n\n    @if (tabs() && tabs()!.length > 1) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSoundcloudItems()) {\n      <xs-button\n        icon=\"play\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"!isPlayingAll() && onClickPlayAll.emit(undefined)\"\n        [title]=\"texts().play\"\n        [disabled]=\"loading().play || isPlayingAll()\"\n      />\n    }\n\n    @if (hasSoundcloudItems()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasViewButtons()) {\n      <xs-button\n        icon=\"image\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'cards',\n          'bg-zinc-900': view() === 'list',\n        }\"\n        (onClick)=\"onClickChangeView.emit('cards')\"\n        [title]=\"texts().changeView\"\n      />\n      <xs-button\n        icon=\"list\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'list',\n          'bg-zinc-900': view() === 'cards',\n        }\"\n        (onClick)=\"onClickChangeView.emit('list')\"\n        [title]=\"texts().changeView\"\n      />\n    }\n\n    @if (hasSortButton()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSortButton()) {\n      <xs-button\n        icon=\"sort\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"onClickSort.emit(undefined)\"\n        [title]=\"texts().sort\"\n      />\n    }\n  </div>\n\n  @if (manage()) {\n    <xs-button\n      [icon]=\"{ name: !state() ? 'chevron-down' : 'chevron-up' }\"\n      layout=\"iconOnlyMini\"\n      variant=\"custom\"\n      customClass=\"hover:opacity-70\"\n      [title]=\"texts().changeView\"\n    />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemsSliderTitleButtonsComponent, isStandalone: true, selector: "xs-items-slider-title-buttons", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, hasSortButton: { classPropertyName: "hasSortButton", publicName: "hasSortButton", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, manage: { classPropertyName: "manage", publicName: "manage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, hasViewButtons: { classPropertyName: "hasViewButtons", publicName: "hasViewButtons", isSignal: true, isRequired: false, transformFunction: null }, hasSoundcloudItems: { classPropertyName: "hasSoundcloudItems", publicName: "hasSoundcloudItems", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, selectedTab: { classPropertyName: "selectedTab", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, isPlayingAll: { classPropertyName: "isPlayingAll", publicName: "isPlayingAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTab: "selectedTabChange", onClickChangeView: "onClickChangeView", onClickPlayAll: "onClickPlayAll", onClickSort: "onClickSort", onChangeState: "onChangeState", onClickTab: "onClickTab" }, host: { attributes: { "xs-items-slider-title-buttons-host": "" } }, ngImport: i0, template: "<div\n  class=\"flex justify-between\"\n  [ngClass]=\"{\n    'items-center w-full px-6 py-2 rounded-xl bg-zinc-900/50 hover:opacity-70 cursor-pointer':\n      manage(),\n    'items-end': !manage(),\n  }\"\n  (click)=\"manage() ? onChangeState.emit(undefined) : null\"\n  (keydown.enter)=\"manage() ? onChangeState.emit(undefined) : null\"\n>\n  <div\n    [id]=\"titleId() ? titleId() : 'profile-' + type() + '-title'\"\n    class=\"flex items-center gap-1 font-black text-left\"\n    [ngClass]=\"{ 'text-sm': manage() }\"\n  >\n    @if (type() !== 'setup') {\n      @if (label()) {\n        {{ label() }}\n      }\n      @if (label() && total() && total() > 0) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ total() }})\n        </span>\n      }\n    }\n\n    @if (type() === 'setup') {\n      @if (label()) {\n        Setup\n        {{ tabSelected?.name | titlecase }}\n      }\n      @if (tabSelected?.components?.length) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ tabSelected?.components?.length }})\n        </span>\n      }\n    }\n  </div>\n\n  <div class=\"flex items-center gap-2\">\n    <div class=\"flex gap-2 text-xs text-zinc-400\">\n      @if (tabs() && tabs()!.length <= 2 && tabs()!.length > 1) {\n        @for (tab of tabs()!; track $index; let i = $index) {\n          <xs-button\n            [variant]=\"selectedTab() !== i ? 'primary' : 'selected'\"\n            [label]=\"tab.label\"\n            [layout]=\"'badge'\"\n            (click)=\"onClickTab.emit(i)\"\n            (keydown.enter)=\"onClickTab.emit(i)\"\n          >\n            {{ tab.label }}\n          </xs-button>\n        }\n      }\n      @if (tabs() && tabs()!.length > 2) {\n        <xs-button\n          label=\"\"\n          [variant]=\"selectedTab() === 0 ? 'selected' : 'primary'\"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-left' }\"\n          [disabled]=\"selectedTab() === 0\"\n          (click)=\"onClickTabChevron('left')\"\n          (keydown.enter)=\"onClickTabChevron('left')\"\n        >\n        </xs-button>\n        <xs-button\n          label=\"\"\n          [variant]=\"\n            selectedTab() === (tabs()?.length ?? 0) - 1\n              ? 'selected'\n              : 'primary'\n          \"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-right' }\"\n          [disabled]=\"selectedTab() === (tabs()?.length ?? 0) - 1\"\n          (click)=\"onClickTabChevron('right')\"\n          (keydown.enter)=\"onClickTabChevron('right')\"\n        >\n        </xs-button>\n      }\n    </div>\n\n    @if (tabs() && tabs()!.length > 1) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSoundcloudItems()) {\n      <xs-button\n        icon=\"play\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"!isPlayingAll() && onClickPlayAll.emit(undefined)\"\n        [title]=\"texts().play\"\n        [disabled]=\"loading().play || isPlayingAll()\"\n      />\n    }\n\n    @if (hasSoundcloudItems()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasViewButtons()) {\n      <xs-button\n        icon=\"image\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'cards',\n          'bg-zinc-900': view() === 'list',\n        }\"\n        (onClick)=\"onClickChangeView.emit('cards')\"\n        [title]=\"texts().changeView\"\n      />\n      <xs-button\n        icon=\"list\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'list',\n          'bg-zinc-900': view() === 'cards',\n        }\"\n        (onClick)=\"onClickChangeView.emit('list')\"\n        [title]=\"texts().changeView\"\n      />\n    }\n\n    @if (hasSortButton()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSortButton()) {\n      <xs-button\n        icon=\"sort\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"onClickSort.emit(undefined)\"\n        [title]=\"texts().sort\"\n      />\n    }\n  </div>\n\n  @if (manage()) {\n    <xs-button\n      [icon]=\"{ name: !state() ? 'chevron-down' : 'chevron-up' }\"\n      layout=\"iconOnlyMini\"\n      variant=\"custom\"\n      customClass=\"hover:opacity-70\"\n      [title]=\"texts().changeView\"\n    />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }, { kind: "ngmodule", type: PipesModule }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemsSliderTitleButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xs-items-slider-title-buttons', host: { 'xs-items-slider-title-buttons-host': '' }, imports: [CommonModule, XSButtonComponent, PipesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex justify-between\"\n  [ngClass]=\"{\n    'items-center w-full px-6 py-2 rounded-xl bg-zinc-900/50 hover:opacity-70 cursor-pointer':\n      manage(),\n    'items-end': !manage(),\n  }\"\n  (click)=\"manage() ? onChangeState.emit(undefined) : null\"\n  (keydown.enter)=\"manage() ? onChangeState.emit(undefined) : null\"\n>\n  <div\n    [id]=\"titleId() ? titleId() : 'profile-' + type() + '-title'\"\n    class=\"flex items-center gap-1 font-black text-left\"\n    [ngClass]=\"{ 'text-sm': manage() }\"\n  >\n    <!-- TYPE NO setup -->\n    @if (type() !== 'setup') {\n      @if (label()) {\n        {{ label() }}\n      }\n      @if (label() && total() && total() > 0) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ total() }})\n        </span>\n      }\n    }\n\n    <!-- TYPE setup -->\n    @if (type() === 'setup') {\n      @if (label()) {\n        Setup\n        {{ tabSelected?.name | titlecase }}\n      }\n      @if (tabSelected?.components?.length) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ tabSelected?.components?.length }})\n        </span>\n      }\n    }\n  </div>\n\n  <div class=\"flex items-center gap-2\">\n    <div class=\"flex gap-2 text-xs text-zinc-400\">\n      @if (tabs() && tabs()!.length <= 2 && tabs()!.length > 1) {\n        @for (tab of tabs()!; track $index; let i = $index) {\n          <xs-button\n            [variant]=\"selectedTab() !== i ? 'primary' : 'selected'\"\n            [label]=\"tab.label\"\n            [layout]=\"'badge'\"\n            (click)=\"onClickTab.emit(i)\"\n            (keydown.enter)=\"onClickTab.emit(i)\"\n          >\n            {{ tab.label }}\n          </xs-button>\n        }\n      }\n      @if (tabs() && tabs()!.length > 2) {\n        <xs-button\n          label=\"\"\n          [variant]=\"selectedTab() === 0 ? 'selected' : 'primary'\"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-left' }\"\n          [disabled]=\"selectedTab() === 0\"\n          (click)=\"onClickTabChevron('left')\"\n          (keydown.enter)=\"onClickTabChevron('left')\"\n        >\n        </xs-button>\n        <xs-button\n          label=\"\"\n          [variant]=\"\n            selectedTab() === (tabs()?.length ?? 0) - 1\n              ? 'selected'\n              : 'primary'\n          \"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-right' }\"\n          [disabled]=\"selectedTab() === (tabs()?.length ?? 0) - 1\"\n          (click)=\"onClickTabChevron('right')\"\n          (keydown.enter)=\"onClickTabChevron('right')\"\n        >\n        </xs-button>\n      }\n    </div>\n\n    @if (tabs() && tabs()!.length > 1) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSoundcloudItems()) {\n      <xs-button\n        icon=\"play\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"!isPlayingAll() && onClickPlayAll.emit(undefined)\"\n        [title]=\"texts().play\"\n        [disabled]=\"loading().play || isPlayingAll()\"\n      />\n    }\n\n    @if (hasSoundcloudItems()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasViewButtons()) {\n      <xs-button\n        icon=\"image\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'cards',\n          'bg-zinc-900': view() === 'list',\n        }\"\n        (onClick)=\"onClickChangeView.emit('cards')\"\n        [title]=\"texts().changeView\"\n      />\n      <xs-button\n        icon=\"list\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'list',\n          'bg-zinc-900': view() === 'cards',\n        }\"\n        (onClick)=\"onClickChangeView.emit('list')\"\n        [title]=\"texts().changeView\"\n      />\n    }\n\n    @if (hasSortButton()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSortButton()) {\n      <xs-button\n        icon=\"sort\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"onClickSort.emit(undefined)\"\n        [title]=\"texts().sort\"\n      />\n    }\n  </div>\n\n  @if (manage()) {\n    <xs-button\n      [icon]=\"{ name: !state() ? 'chevron-down' : 'chevron-up' }\"\n      layout=\"iconOnlyMini\"\n      variant=\"custom\"\n      customClass=\"hover:opacity-70\"\n      [title]=\"texts().changeView\"\n    />\n  }\n</div>\n" }]
+            args: [{ selector: 'xs-items-slider-title-buttons', host: { 'xs-items-slider-title-buttons-host': '' }, imports: [CommonModule, XSButtonComponent, PipesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex justify-between\"\n  [ngClass]=\"{\n    'items-center w-full px-6 py-2 rounded-xl bg-zinc-900/50 hover:opacity-70 cursor-pointer':\n      manage(),\n    'items-end': !manage(),\n  }\"\n  (click)=\"manage() ? onChangeState.emit(undefined) : null\"\n  (keydown.enter)=\"manage() ? onChangeState.emit(undefined) : null\"\n>\n  <div\n    [id]=\"titleId() ? titleId() : 'profile-' + type() + '-title'\"\n    class=\"flex items-center gap-1 font-black text-left\"\n    [ngClass]=\"{ 'text-sm': manage() }\"\n  >\n    @if (type() !== 'setup') {\n      @if (label()) {\n        {{ label() }}\n      }\n      @if (label() && total() && total() > 0) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ total() }})\n        </span>\n      }\n    }\n\n    @if (type() === 'setup') {\n      @if (label()) {\n        Setup\n        {{ tabSelected?.name | titlecase }}\n      }\n      @if (tabSelected?.components?.length) {\n        <span\n          class=\"pt-0.5 text-xs font-extralight\"\n        >\n          ({{ tabSelected?.components?.length }})\n        </span>\n      }\n    }\n  </div>\n\n  <div class=\"flex items-center gap-2\">\n    <div class=\"flex gap-2 text-xs text-zinc-400\">\n      @if (tabs() && tabs()!.length <= 2 && tabs()!.length > 1) {\n        @for (tab of tabs()!; track $index; let i = $index) {\n          <xs-button\n            [variant]=\"selectedTab() !== i ? 'primary' : 'selected'\"\n            [label]=\"tab.label\"\n            [layout]=\"'badge'\"\n            (click)=\"onClickTab.emit(i)\"\n            (keydown.enter)=\"onClickTab.emit(i)\"\n          >\n            {{ tab.label }}\n          </xs-button>\n        }\n      }\n      @if (tabs() && tabs()!.length > 2) {\n        <xs-button\n          label=\"\"\n          [variant]=\"selectedTab() === 0 ? 'selected' : 'primary'\"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-left' }\"\n          [disabled]=\"selectedTab() === 0\"\n          (click)=\"onClickTabChevron('left')\"\n          (keydown.enter)=\"onClickTabChevron('left')\"\n        >\n        </xs-button>\n        <xs-button\n          label=\"\"\n          [variant]=\"\n            selectedTab() === (tabs()?.length ?? 0) - 1\n              ? 'selected'\n              : 'primary'\n          \"\n          [layout]=\"'iconOnlyMini'\"\n          [icon]=\"{ name: 'chevron-right' }\"\n          [disabled]=\"selectedTab() === (tabs()?.length ?? 0) - 1\"\n          (click)=\"onClickTabChevron('right')\"\n          (keydown.enter)=\"onClickTabChevron('right')\"\n        >\n        </xs-button>\n      }\n    </div>\n\n    @if (tabs() && tabs()!.length > 1) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSoundcloudItems()) {\n      <xs-button\n        icon=\"play\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"!isPlayingAll() && onClickPlayAll.emit(undefined)\"\n        [title]=\"texts().play\"\n        [disabled]=\"loading().play || isPlayingAll()\"\n      />\n    }\n\n    @if (hasSoundcloudItems()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasViewButtons()) {\n      <xs-button\n        icon=\"image\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'cards',\n          'bg-zinc-900': view() === 'list',\n        }\"\n        (onClick)=\"onClickChangeView.emit('cards')\"\n        [title]=\"texts().changeView\"\n      />\n      <xs-button\n        icon=\"list\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl hover:opacity-70\"\n        [ngClass]=\"{\n          'bg-zinc-700': view() === 'list',\n          'bg-zinc-900': view() === 'cards',\n        }\"\n        (onClick)=\"onClickChangeView.emit('list')\"\n        [title]=\"texts().changeView\"\n      />\n    }\n\n    @if (hasSortButton()) {\n      <span class=\"text-zinc-900\">|</span>\n    }\n\n    @if (hasSortButton()) {\n      <xs-button\n        icon=\"sort\"\n        layout=\"iconOnlyMini\"\n        variant=\"custom\"\n        customClass=\"px-3 py-1 rounded-xl bg-zinc-900/50 hover:opacity-70\"\n        (onClick)=\"onClickSort.emit(undefined)\"\n        [title]=\"texts().sort\"\n      />\n    }\n  </div>\n\n  @if (manage()) {\n    <xs-button\n      [icon]=\"{ name: !state() ? 'chevron-down' : 'chevron-up' }\"\n      layout=\"iconOnlyMini\"\n      variant=\"custom\"\n      customClass=\"hover:opacity-70\"\n      [title]=\"texts().changeView\"\n    />\n  }\n</div>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], hasSortButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSortButton", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], manage: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], hasViewButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasViewButtons", required: false }] }], hasSoundcloudItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSoundcloudItems", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], selectedTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTab", required: false }] }, { type: i0.Output, args: ["selectedTabChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], isPlayingAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlayingAll", required: false }] }], onClickChangeView: [{ type: i0.Output, args: ["onClickChangeView"] }], onClickPlayAll: [{ type: i0.Output, args: ["onClickPlayAll"] }], onClickSort: [{ type: i0.Output, args: ["onClickSort"] }], onChangeState: [{ type: i0.Output, args: ["onChangeState"] }], onClickTab: [{ type: i0.Output, args: ["onClickTab"] }] } });
 
 class XSSkeletonForSliderComponent {
@@ -5524,7 +5496,7 @@ class XSItemsSliderComponent {
         this.loadMoreData.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemsSliderComponent, isStandalone: true, selector: "xs-items-slider", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, typeFrom: { classPropertyName: "typeFrom", publicName: "typeFrom", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, hasViewButtons: { classPropertyName: "hasViewButtons", publicName: "hasViewButtons", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sortButtonInput: { classPropertyName: "sortButtonInput", publicName: "sortButtonInput", isSignal: true, isRequired: false, transformFunction: null }, sortValues: { classPropertyName: "sortValues", publicName: "sortValues", isSignal: true, isRequired: false, transformFunction: null }, manage: { classPropertyName: "manage", publicName: "manage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, selectedTab: { classPropertyName: "selectedTab", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, hasSoundcloudItems: { classPropertyName: "hasSoundcloudItems", publicName: "hasSoundcloudItems", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, itemCardTexts: { classPropertyName: "itemCardTexts", publicName: "itemCardTexts", isSignal: true, isRequired: false, transformFunction: null }, isPlayingAll: { classPropertyName: "isPlayingAll", publicName: "isPlayingAll", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selectedTab: "selectedTabChange", loadMoreData: "loadMoreData", onClickChangeSort: "onClickChangeSort", onClickPlay: "onClickPlay" }, host: { attributes: { "xs-items-slider-host": "" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"pt-3 mx-auto max-w-full-xl max-w-7sm\"\n  [ngClass]=\"{\n    'mb-3 pt-3': !manage(),\n    'mb-2': manage(),\n  }\"\n>\n  <xs-items-slider-title-buttons\n    [label]=\"label()\"\n    [items]=\"items()\"\n    [type]=\"type()\"\n    [titleId]=\"titleId()\"\n    [hasSortButton]=\"hasSortButton()\"\n    [manage]=\"manage()\"\n    [state]=\"state()\"\n    [total]=\"total()\"\n    [view]=\"view()\"\n    [hasViewButtons]=\"hasViewButtons()\"\n    [hasSoundcloudItems]=\"hasSoundcloudItems()\"\n    [tabs]=\"tabs()\"\n    [selectedTab]=\"selectedTab()\"\n    [texts]=\"texts()\"\n    [isPlayingAll]=\"isPlayingAll()\"\n    (onClickChangeView)=\"onClickChangeView($event)\"\n    (onClickPlayAll)=\"onClickPlay.emit()\"\n    (onClickSort)=\"onClickSort()\"\n    (onClickTab)=\"onClickTab($event)\"\n  ></xs-items-slider-title-buttons>\n\n  @if ((manage() && state()) || (!manage() && !state())) {\n    <!-- CARDS -->\n    @if (!loading().items && view() === 'cards') {\n      <div class=\"relative\">\n        @if (canScrollLeft) {\n          <button\n            (click)=\"scrollLeftBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg left-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n        }\n\n        @if (type() !== 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (scroll)=\"onScroll()\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @for (item of items(); track $index; let i = $index) {\n              <div\n                class=\"flex flex-col items-center flex-shrink-0\"\n              >\n                <xs-item-card\n                  [item]=\"item\"\n                  [type]=\"$any(type())\"\n                  [forSlider]=\"true\"\n                  [styles]=\"true\"\n                  [i]=\"i\"\n                  [user]=\"user()\"\n                  [year]=\"type() === 'media'\"\n                  [texts]=\"itemCardTexts()\"\n                  [language]=\"language()\"\n                ></xs-item-card>\n              </div>\n            }\n          </div>\n        }\n        @if (type() === 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n              @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n                <div\n                  class=\"flex flex-col items-center flex-shrink-0\"\n                >\n                  <xs-item-card\n                    [item]=\"component\"\n                    [type]=\"'equipment'\"\n                    [forSlider]=\"true\"\n                    [styles]=\"true\"\n                    [i]=\"ii\"\n                    [user]=\"user()\"\n                    [texts]=\"itemCardTexts()\"\n                    [language]=\"language()\"\n                  ></xs-item-card>\n                </div>\n              }\n            }\n          </div>\n        }\n\n        @if (canScrollRight) {\n          <button\n            (click)=\"scrollRightBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg right-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (loading().items && view() === 'cards') {\n      <div class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\" (wheel)=\"onHorizontalWheel($event)\">\n        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n          <xs-skeleton-for-slider\n            type=\"normal\"\n          ></xs-skeleton-for-slider>\n        }\n      </div>\n    }\n\n    <!-- LIST -->\n    @if (view() === 'list') {\n      <div\n        class=\"grid w-full grid-cols-1 gap-2 lg:gap-3 p-1.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\"\n      >\n        @if (type() !== 'setup') {\n          @for (item of items(); track $index; let i = $index) {\n            <!-- <xs-item-compact\n              [item]=\"item\"\n              [type]=\"type\"\n              [user]=\"user\"\n              [language]=\"language\"\n            ></xs-item-compact> -->\n          }\n        }\n\n          @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n            @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n            <!-- <xs-item-compact\n              [item]=\"component\"\n              [type]=\"'equipment'\"\n              [user]=\"user\"\n              [language]=\"language\"\n            ></xs-item-compact> -->\n          }\n        }\n      </div>\n      @if (!loading().items && items().length >= 10 && total() > items().length) {\n        <xs-button\n          [label]=\"texts().viewMore\"\n          [layout]=\"'between'\"\n          [isFull]=\"true\"\n          [icon]=\"{ name: 'plus' }\"\n          [disabled]=\"loading().more || loading().items\"\n          [loading]=\"loading().more || loading().items\"\n          (onClick)=\"onScrollTable()\"\n        >\n        </xs-button>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XSItemCardComponent, selector: "xs-item-card", inputs: ["type", "subtypeForced", "item", "viewTransitionName", "forSlider", "forTop", "position", "edit", "year", "styles", "stylesLeft", "link", "clickEmit", "i", "user", "count", "showLabelType", "language", "texts"], outputs: ["onGoToItem"] }, { kind: "component", type: XSItemsSliderTitleButtonsComponent, selector: "xs-items-slider-title-buttons", inputs: ["label", "titleId", "type", "hasSortButton", "items", "manage", "state", "total", "view", "hasViewButtons", "hasSoundcloudItems", "tabs", "selectedTab", "loading", "texts", "isPlayingAll"], outputs: ["selectedTabChange", "onClickChangeView", "onClickPlayAll", "onClickSort", "onChangeState", "onClickTab"] }, { kind: "component", type: XSSkeletonForSliderComponent, selector: "xs-skeleton-for-slider", inputs: ["displayType", "forSlider"] }, { 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"] }, { kind: "ngmodule", type: PipesModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemsSliderComponent, isStandalone: true, selector: "xs-items-slider", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, typeFrom: { classPropertyName: "typeFrom", publicName: "typeFrom", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, hasViewButtons: { classPropertyName: "hasViewButtons", publicName: "hasViewButtons", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sortButtonInput: { classPropertyName: "sortButtonInput", publicName: "sortButtonInput", isSignal: true, isRequired: false, transformFunction: null }, sortValues: { classPropertyName: "sortValues", publicName: "sortValues", isSignal: true, isRequired: false, transformFunction: null }, manage: { classPropertyName: "manage", publicName: "manage", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, selectedTab: { classPropertyName: "selectedTab", publicName: "selectedTab", isSignal: true, isRequired: false, transformFunction: null }, hasSoundcloudItems: { classPropertyName: "hasSoundcloudItems", publicName: "hasSoundcloudItems", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, itemCardTexts: { classPropertyName: "itemCardTexts", publicName: "itemCardTexts", isSignal: true, isRequired: false, transformFunction: null }, isPlayingAll: { classPropertyName: "isPlayingAll", publicName: "isPlayingAll", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selectedTab: "selectedTabChange", loadMoreData: "loadMoreData", onClickChangeSort: "onClickChangeSort", onClickPlay: "onClickPlay" }, host: { attributes: { "xs-items-slider-host": "" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"pt-3 mx-auto max-w-full-xl max-w-7sm\"\n  [ngClass]=\"{\n    'mb-3 pt-3': !manage(),\n    'mb-2': manage(),\n  }\"\n>\n  <xs-items-slider-title-buttons\n    [label]=\"label()\"\n    [items]=\"items()\"\n    [type]=\"type()\"\n    [titleId]=\"titleId()\"\n    [hasSortButton]=\"hasSortButton()\"\n    [manage]=\"manage()\"\n    [state]=\"state()\"\n    [total]=\"total()\"\n    [view]=\"view()\"\n    [hasViewButtons]=\"hasViewButtons()\"\n    [hasSoundcloudItems]=\"hasSoundcloudItems()\"\n    [tabs]=\"tabs()\"\n    [selectedTab]=\"selectedTab()\"\n    [texts]=\"texts()\"\n    [isPlayingAll]=\"isPlayingAll()\"\n    (onClickChangeView)=\"onClickChangeView($event)\"\n    (onClickPlayAll)=\"onClickPlay.emit()\"\n    (onClickSort)=\"onClickSort()\"\n    (onClickTab)=\"onClickTab($event)\"\n  ></xs-items-slider-title-buttons>\n\n  @if ((manage() && state()) || (!manage() && !state())) {\n    @if (!loading().items && view() === 'cards') {\n      <div class=\"relative\">\n        @if (canScrollLeft) {\n          <button\n            (click)=\"scrollLeftBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg left-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n        }\n\n        @if (type() !== 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (scroll)=\"onScroll()\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @for (item of items(); track $index; let i = $index) {\n              <div\n                class=\"flex flex-col items-center flex-shrink-0\"\n              >\n                <xs-item-card\n                  [item]=\"item\"\n                  [type]=\"$any(type())\"\n                  [forSlider]=\"true\"\n                  [styles]=\"true\"\n                  [i]=\"i\"\n                  [user]=\"user()\"\n                  [year]=\"type() === 'media'\"\n                  [texts]=\"itemCardTexts()\"\n                  [language]=\"language()\"\n                ></xs-item-card>\n              </div>\n            }\n          </div>\n        }\n        @if (type() === 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n              @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n                <div\n                  class=\"flex flex-col items-center flex-shrink-0\"\n                >\n                  <xs-item-card\n                    [item]=\"component\"\n                    [type]=\"'equipment'\"\n                    [forSlider]=\"true\"\n                    [styles]=\"true\"\n                    [i]=\"ii\"\n                    [user]=\"user()\"\n                    [texts]=\"itemCardTexts()\"\n                    [language]=\"language()\"\n                  ></xs-item-card>\n                </div>\n              }\n            }\n          </div>\n        }\n\n        @if (canScrollRight) {\n          <button\n            (click)=\"scrollRightBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg right-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (loading().items && view() === 'cards') {\n      <div class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\" (wheel)=\"onHorizontalWheel($event)\">\n        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n          <xs-skeleton-for-slider\n            type=\"normal\"\n          ></xs-skeleton-for-slider>\n        }\n      </div>\n    }\n\n    @if (view() === 'list') {\n      <div\n        class=\"grid w-full grid-cols-1 gap-2 lg:gap-3 p-1.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\"\n      >\n        @if (type() !== 'setup') {\n          @for (item of items(); track $index; let i = $index) {\n          }\n        }\n\n          @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n            @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n          }\n        }\n      </div>\n      @if (!loading().items && items().length >= 10 && total() > items().length) {\n        <xs-button\n          [label]=\"texts().viewMore\"\n          [layout]=\"'between'\"\n          [isFull]=\"true\"\n          [icon]=\"{ name: 'plus' }\"\n          [disabled]=\"loading().more || loading().items\"\n          [loading]=\"loading().more || loading().items\"\n          (onClick)=\"onScrollTable()\"\n        >\n        </xs-button>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XSItemCardComponent, selector: "xs-item-card", inputs: ["type", "subtypeForced", "item", "viewTransitionName", "forSlider", "forTop", "position", "edit", "year", "styles", "stylesLeft", "link", "clickEmit", "i", "user", "count", "showLabelType", "language", "texts"], outputs: ["onGoToItem"] }, { kind: "component", type: XSItemsSliderTitleButtonsComponent, selector: "xs-items-slider-title-buttons", inputs: ["label", "titleId", "type", "hasSortButton", "items", "manage", "state", "total", "view", "hasViewButtons", "hasSoundcloudItems", "tabs", "selectedTab", "loading", "texts", "isPlayingAll"], outputs: ["selectedTabChange", "onClickChangeView", "onClickPlayAll", "onClickSort", "onChangeState", "onClickTab"] }, { kind: "component", type: XSSkeletonForSliderComponent, selector: "xs-skeleton-for-slider", inputs: ["displayType", "forSlider"] }, { 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"] }, { kind: "ngmodule", type: PipesModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemsSliderComponent, decorators: [{
             type: Component,
@@ -5535,7 +5507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         XSSkeletonForSliderComponent,
                         XSButtonComponent,
                         PipesModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"pt-3 mx-auto max-w-full-xl max-w-7sm\"\n  [ngClass]=\"{\n    'mb-3 pt-3': !manage(),\n    'mb-2': manage(),\n  }\"\n>\n  <xs-items-slider-title-buttons\n    [label]=\"label()\"\n    [items]=\"items()\"\n    [type]=\"type()\"\n    [titleId]=\"titleId()\"\n    [hasSortButton]=\"hasSortButton()\"\n    [manage]=\"manage()\"\n    [state]=\"state()\"\n    [total]=\"total()\"\n    [view]=\"view()\"\n    [hasViewButtons]=\"hasViewButtons()\"\n    [hasSoundcloudItems]=\"hasSoundcloudItems()\"\n    [tabs]=\"tabs()\"\n    [selectedTab]=\"selectedTab()\"\n    [texts]=\"texts()\"\n    [isPlayingAll]=\"isPlayingAll()\"\n    (onClickChangeView)=\"onClickChangeView($event)\"\n    (onClickPlayAll)=\"onClickPlay.emit()\"\n    (onClickSort)=\"onClickSort()\"\n    (onClickTab)=\"onClickTab($event)\"\n  ></xs-items-slider-title-buttons>\n\n  @if ((manage() && state()) || (!manage() && !state())) {\n    <!-- CARDS -->\n    @if (!loading().items && view() === 'cards') {\n      <div class=\"relative\">\n        @if (canScrollLeft) {\n          <button\n            (click)=\"scrollLeftBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg left-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n        }\n\n        @if (type() !== 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (scroll)=\"onScroll()\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @for (item of items(); track $index; let i = $index) {\n              <div\n                class=\"flex flex-col items-center flex-shrink-0\"\n              >\n                <xs-item-card\n                  [item]=\"item\"\n                  [type]=\"$any(type())\"\n                  [forSlider]=\"true\"\n                  [styles]=\"true\"\n                  [i]=\"i\"\n                  [user]=\"user()\"\n                  [year]=\"type() === 'media'\"\n                  [texts]=\"itemCardTexts()\"\n                  [language]=\"language()\"\n                ></xs-item-card>\n              </div>\n            }\n          </div>\n        }\n        @if (type() === 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n              @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n                <div\n                  class=\"flex flex-col items-center flex-shrink-0\"\n                >\n                  <xs-item-card\n                    [item]=\"component\"\n                    [type]=\"'equipment'\"\n                    [forSlider]=\"true\"\n                    [styles]=\"true\"\n                    [i]=\"ii\"\n                    [user]=\"user()\"\n                    [texts]=\"itemCardTexts()\"\n                    [language]=\"language()\"\n                  ></xs-item-card>\n                </div>\n              }\n            }\n          </div>\n        }\n\n        @if (canScrollRight) {\n          <button\n            (click)=\"scrollRightBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg right-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (loading().items && view() === 'cards') {\n      <div class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\" (wheel)=\"onHorizontalWheel($event)\">\n        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n          <xs-skeleton-for-slider\n            type=\"normal\"\n          ></xs-skeleton-for-slider>\n        }\n      </div>\n    }\n\n    <!-- LIST -->\n    @if (view() === 'list') {\n      <div\n        class=\"grid w-full grid-cols-1 gap-2 lg:gap-3 p-1.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\"\n      >\n        @if (type() !== 'setup') {\n          @for (item of items(); track $index; let i = $index) {\n            <!-- <xs-item-compact\n              [item]=\"item\"\n              [type]=\"type\"\n              [user]=\"user\"\n              [language]=\"language\"\n            ></xs-item-compact> -->\n          }\n        }\n\n          @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n            @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n            <!-- <xs-item-compact\n              [item]=\"component\"\n              [type]=\"'equipment'\"\n              [user]=\"user\"\n              [language]=\"language\"\n            ></xs-item-compact> -->\n          }\n        }\n      </div>\n      @if (!loading().items && items().length >= 10 && total() > items().length) {\n        <xs-button\n          [label]=\"texts().viewMore\"\n          [layout]=\"'between'\"\n          [isFull]=\"true\"\n          [icon]=\"{ name: 'plus' }\"\n          [disabled]=\"loading().more || loading().items\"\n          [loading]=\"loading().more || loading().items\"\n          (onClick)=\"onScrollTable()\"\n        >\n        </xs-button>\n      }\n    }\n  }\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"pt-3 mx-auto max-w-full-xl max-w-7sm\"\n  [ngClass]=\"{\n    'mb-3 pt-3': !manage(),\n    'mb-2': manage(),\n  }\"\n>\n  <xs-items-slider-title-buttons\n    [label]=\"label()\"\n    [items]=\"items()\"\n    [type]=\"type()\"\n    [titleId]=\"titleId()\"\n    [hasSortButton]=\"hasSortButton()\"\n    [manage]=\"manage()\"\n    [state]=\"state()\"\n    [total]=\"total()\"\n    [view]=\"view()\"\n    [hasViewButtons]=\"hasViewButtons()\"\n    [hasSoundcloudItems]=\"hasSoundcloudItems()\"\n    [tabs]=\"tabs()\"\n    [selectedTab]=\"selectedTab()\"\n    [texts]=\"texts()\"\n    [isPlayingAll]=\"isPlayingAll()\"\n    (onClickChangeView)=\"onClickChangeView($event)\"\n    (onClickPlayAll)=\"onClickPlay.emit()\"\n    (onClickSort)=\"onClickSort()\"\n    (onClickTab)=\"onClickTab($event)\"\n  ></xs-items-slider-title-buttons>\n\n  @if ((manage() && state()) || (!manage() && !state())) {\n    @if (!loading().items && view() === 'cards') {\n      <div class=\"relative\">\n        @if (canScrollLeft) {\n          <button\n            (click)=\"scrollLeftBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg left-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n        }\n\n        @if (type() !== 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (scroll)=\"onScroll()\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @for (item of items(); track $index; let i = $index) {\n              <div\n                class=\"flex flex-col items-center flex-shrink-0\"\n              >\n                <xs-item-card\n                  [item]=\"item\"\n                  [type]=\"$any(type())\"\n                  [forSlider]=\"true\"\n                  [styles]=\"true\"\n                  [i]=\"i\"\n                  [user]=\"user()\"\n                  [year]=\"type() === 'media'\"\n                  [texts]=\"itemCardTexts()\"\n                  [language]=\"language()\"\n                ></xs-item-card>\n              </div>\n            }\n          </div>\n        }\n        @if (type() === 'setup') {\n          <div\n            #scrollContainer\n            class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\"\n            (wheel)=\"onHorizontalWheel($event)\"\n          >\n            @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n              @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n                <div\n                  class=\"flex flex-col items-center flex-shrink-0\"\n                >\n                  <xs-item-card\n                    [item]=\"component\"\n                    [type]=\"'equipment'\"\n                    [forSlider]=\"true\"\n                    [styles]=\"true\"\n                    [i]=\"ii\"\n                    [user]=\"user()\"\n                    [texts]=\"itemCardTexts()\"\n                    [language]=\"language()\"\n                  ></xs-item-card>\n                </div>\n              }\n            }\n          </div>\n        }\n\n        @if (canScrollRight) {\n          <button\n            (click)=\"scrollRightBtn()\"\n            class=\"absolute z-10 p-2 text-white transition-opacity -translate-y-1/2 rounded-full shadow-lg right-2 top-1/2 bg-black/70 hover:bg-black/90\"\n          >\n            <svg\n              class=\"w-6 h-6\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (loading().items && view() === 'cards') {\n      <div class=\"flex gap-4 py-2 overflow-scroll overflow-x-auto scrollbar-hidden scroll-smooth\" (wheel)=\"onHorizontalWheel($event)\">\n        @for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n          <xs-skeleton-for-slider\n            type=\"normal\"\n          ></xs-skeleton-for-slider>\n        }\n      </div>\n    }\n\n    @if (view() === 'list') {\n      <div\n        class=\"grid w-full grid-cols-1 gap-2 lg:gap-3 p-1.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\"\n      >\n        @if (type() !== 'setup') {\n          @for (item of items(); track $index; let i = $index) {\n          }\n        }\n\n          @if (items() && items().length > 0 && selectedTab() !== undefined && selectedTab() >= 0 && selectedTab() < items().length && $any(items()[selectedTab()])?.components) {\n            @for (component of $any(items()[selectedTab()]).components; track $index; let ii = $index) {\n          }\n        }\n      </div>\n      @if (!loading().items && items().length >= 10 && total() > items().length) {\n        <xs-button\n          [label]=\"texts().viewMore\"\n          [layout]=\"'between'\"\n          [isFull]=\"true\"\n          [icon]=\"{ name: 'plus' }\"\n          [disabled]=\"loading().more || loading().items\"\n          [loading]=\"loading().more || loading().items\"\n          (onClick)=\"onScrollTable()\"\n        >\n        </xs-button>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], typeFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeFrom", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], hasViewButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasViewButtons", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], sortButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortButtonInput", required: false }] }], sortValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValues", required: false }] }], manage: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], selectedTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTab", required: false }] }, { type: i0.Output, args: ["selectedTabChange"] }], hasSoundcloudItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSoundcloudItems", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], itemCardTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCardTexts", required: false }] }], isPlayingAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlayingAll", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], loadMoreData: [{ type: i0.Output, args: ["loadMoreData"] }], onClickChangeSort: [{ type: i0.Output, args: ["onClickChangeSort"] }], onClickPlay: [{ type: i0.Output, args: ["onClickPlay"] }] } });
 
 class XSTitleCollapseComponent {
@@ -9147,7 +9119,6 @@ class XSModalService {
         this.translateService.registerTranslations({ es: es$l, en: en$l });
     }
     open(componentType, options = {}) {
-        // Set default values
         const defaultOptions = {
             type: 'bottom-sheet',
         };
@@ -11408,7 +11379,6 @@ class XSAuthComponent {
     get showInfoIcons() {
         return this.cfg?.showInfoIcons !== false;
     }
-    // --- Header ---
     get title() {
         this.syncTranslations();
         switch (this.activeMode) {
@@ -11447,7 +11417,6 @@ class XSAuthComponent {
                 return '';
         }
     }
-    // --- Form fields ---
     get loginFields() {
         this.syncTranslations();
         if (!this._loginFields) {
@@ -11553,7 +11522,6 @@ class XSAuthComponent {
         }
         return this._twoFactorFields;
     }
-    // --- Mode switching ---
     changeMode(mode) {
         this.service.activeMode = mode;
         this.formModel = {};
@@ -11564,7 +11532,6 @@ class XSAuthComponent {
     markEmailSent() {
         this.emailSent.set(true);
     }
-    // --- Form handlers ---
     onFormReady(form) {
         this.formGroup = form;
         Promise.resolve().then(() => {
@@ -11578,7 +11545,6 @@ class XSAuthComponent {
         this.formModel = formData ?? {};
         this.isFormValid = this.formGroup?.valid ?? false;
     }
-    // --- Actions ---
     actionSocial(provider) {
         this.onAction.emit({
             action: provider === 'google'
@@ -12649,7 +12615,6 @@ class XSFullImageComponent {
             this.dismiss();
         }
     }
-    /* ---- Zoom helpers ---- */
     resetZoom() {
         this.zoom.set(1);
         this.translateX.set(0);
@@ -12665,7 +12630,6 @@ class XSFullImageComponent {
             this.translateY.set(0);
         }
     }
-    /* ---- Backdrop click ---- */
     onBackdropClick(event) {
         if (event.target === event.currentTarget) {
             this.dismiss();
@@ -12676,7 +12640,6 @@ class XSFullImageComponent {
         event.stopPropagation();
         this.dismiss();
     }
-    /* ---- Pointer pan (desktop) ---- */
     onImagePointerDown(event) {
         event.stopPropagation();
         if (this.zoom() <= 1)
@@ -12699,7 +12662,6 @@ class XSFullImageComponent {
     onPointerUp(_event) {
         this.isPointerPanning = false;
     }
-    /* ---- Touch handlers (mobile) ---- */
     onTouchStart(event) {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -12778,7 +12740,6 @@ class XSFullImageComponent {
         const dy = touches[0].clientY - touches[1].clientY;
         return Math.sqrt(dx * dx + dy * dy);
     }
-    /* ---- Scroll wheel zoom (desktop) ---- */
     onWheel(event) {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -12786,7 +12747,6 @@ class XSFullImageComponent {
         const delta = event.deltaY > 0 ? -0.1 : 0.1;
         this.setZoom(this.zoom() + delta);
     }
-    /* ---- Download ---- */
     onDownload(event) {
         event.stopPropagation();
         if (!isPlatformBrowser(this.platformId))
@@ -12815,7 +12775,6 @@ class XSFullImageComponent {
             a.click();
         });
     }
-    /* ---- Share ---- */
     async onShare(event) {
         event.stopPropagation();
         if (!isPlatformBrowser(this.platformId))
@@ -16063,6 +16022,7 @@ class XSNavbarComponent {
     showBack = input(true, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
     showMenu = input(false, ...(ngDevMode ? [{ debugName: "showMenu" }] : []));
     menuIcon = input('bars', ...(ngDevMode ? [{ debugName: "menuIcon" }] : []));
+    contextual = input(false, ...(ngDevMode ? [{ debugName: "contextual" }] : []));
     showLanguage = input(true, ...(ngDevMode ? [{ debugName: "showLanguage" }] : []));
     showNotifications = input(false, ...(ngDevMode ? [{ debugName: "showNotifications" }] : []));
     showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : []));
@@ -16121,7 +16081,7 @@ class XSNavbarComponent {
         this.translateService.setLanguage(newLang);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSNavbarComponent, isStandalone: true, selector: "xs-navbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, mobileSubtitle: { classPropertyName: "mobileSubtitle", publicName: "mobileSubtitle", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, showLanguage: { classPropertyName: "showLanguage", publicName: "showLanguage", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, showImpersonation: { classPropertyName: "showImpersonation", publicName: "showImpersonation", isSignal: true, isRequired: false, transformFunction: null }, unreadChatMessages: { classPropertyName: "unreadChatMessages", publicName: "unreadChatMessages", isSignal: true, isRequired: false, transformFunction: null }, unreadNotifications: { classPropertyName: "unreadNotifications", publicName: "unreadNotifications", isSignal: true, isRequired: false, transformFunction: null }, homeRoute: { classPropertyName: "homeRoute", publicName: "homeRoute", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, hideEnvBadge: { classPropertyName: "hideEnvBadge", publicName: "hideEnvBadge", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back", menuToggle: "menuToggle", titleClick: "titleClick", notificationsClick: "notificationsClick", chatClick: "chatClick", impersonationClick: "impersonationClick" }, host: { attributes: { "role": "banner" }, properties: { "class.sticky": "sticky()", "class.top-0": "sticky()", "class.z-50": "sticky()" } }, queries: [{ propertyName: "bottomContent", first: true, predicate: ["[bottom]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (!hidden()) {\n<header\n  [class.bg-black/80]=\"!transparent()\"\n  [class.backdrop-blur-xl]=\"!transparent()\"\n  class=\"ease-in-out transition-all duration-300\"\n  [attr.aria-label]=\"ariaLabel() || title()\"\n>\n  <div\n    class=\"mx-auto px-4 pt-3 pb-2\"\n    [class.border-b]=\"showBorder()\"\n    [class.border-white/5]=\"showBorder()\"\n    [style.max-width]=\"maxWidth()\"\n  >\n    <div class=\"flex items-center justify-between gap-4 w-full\">\n      <div class=\"flex items-center min-w-0 flex-1\">\n        @if (showLeftButton) {\n          <xs-button\n            (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n            [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n            layout=\"iconOnlyHeader\"\n            variant=\"custom\"\n            customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n            [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n          />\n        }\n\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <a\n            [routerLink]=\"homeRoute()\"\n            (click)=\"titleClick.emit()\"\n            class=\"inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n            [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n          >\n            @if (mobileTitle()) {\n              <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n              <span class=\"hidden lg:inline\">{{ title() }}</span>\n            } @else {\n              {{ title() }}\n            }\n          </a>\n\n          @if (subtitle()) {\n            <div\n              class=\"flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n            >\n              <div\n                class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n              >\n                @if (mobileSubtitle()) {\n                  <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n                  <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n                } @else {\n                  {{ subtitle() }}\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex items-center justify-end gap-3 min-w-0\">\n        <ng-content select=\"[actions]\"></ng-content>\n\n        @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n          <span\n            class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n            [class.bg-amber-500/10]=\"envName === 'dev'\"\n            [class.border-amber-500/20]=\"envName === 'dev'\"\n            [class.text-amber-500]=\"envName === 'dev'\"\n            [class.bg-orange-500/10]=\"envName === 'uat'\"\n            [class.border-orange-500/20]=\"envName === 'uat'\"\n            [class.text-orange-500]=\"envName === 'uat'\"\n            [title]=\"envName\"\n          >{{ envName }}</span>\n        }\n\n        @if (showChat()) {\n          <button\n            (click)=\"chatClick.emit()\"\n            class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('CHAT')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n              <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n            </svg>\n            @if (unreadChatMessages() > 0) {\n              <span\n                class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n                [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n              >\n                {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (showNotifications()) {\n          <xs-button\n            (onClick)=\"notificationsClick.emit()\"\n            icon=\"bell\"\n            layout=\"iconOnly\"\n            variant=\"custom\"\n            customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n            [title]=\"t('NOTIFICATIONS')\"\n            [badgeCount]=\"unreadNotifications()\"\n          />\n        }\n\n        @if (showImpersonation()) {\n          <button\n            (click)=\"impersonationClick.emit()\"\n            class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n              <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n            </svg>\n          </button>\n        }\n\n        @if (showLanguage()) {\n          <button\n            (click)=\"onToggleLang()\"\n            class=\"flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n          >\n            <img\n              [src]=\"\n                langSignal() === 'es'\n                  ? ('es' | countryFlag)\n                  : ('us' | countryFlag)\n              \"\n              class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n              [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n            />\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (hasBottom) {\n      <div\n        class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n      >\n        <ng-content select=\"[bottom]\"></ng-content>\n      </div>\n    }\n  </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSNavbarComponent, isStandalone: true, selector: "xs-navbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, mobileSubtitle: { classPropertyName: "mobileSubtitle", publicName: "mobileSubtitle", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, contextual: { classPropertyName: "contextual", publicName: "contextual", isSignal: true, isRequired: false, transformFunction: null }, showLanguage: { classPropertyName: "showLanguage", publicName: "showLanguage", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, showImpersonation: { classPropertyName: "showImpersonation", publicName: "showImpersonation", isSignal: true, isRequired: false, transformFunction: null }, unreadChatMessages: { classPropertyName: "unreadChatMessages", publicName: "unreadChatMessages", isSignal: true, isRequired: false, transformFunction: null }, unreadNotifications: { classPropertyName: "unreadNotifications", publicName: "unreadNotifications", isSignal: true, isRequired: false, transformFunction: null }, homeRoute: { classPropertyName: "homeRoute", publicName: "homeRoute", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, hideEnvBadge: { classPropertyName: "hideEnvBadge", publicName: "hideEnvBadge", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back", menuToggle: "menuToggle", titleClick: "titleClick", notificationsClick: "notificationsClick", chatClick: "chatClick", impersonationClick: "impersonationClick" }, host: { attributes: { "role": "banner" }, properties: { "class.sticky": "sticky()", "class.top-0": "sticky()", "class.z-50": "sticky()", "class.navbar-contextual": "contextual()" } }, queries: [{ propertyName: "bottomContent", first: true, predicate: ["[bottom]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (!hidden()) {\n<header\n  [class.bg-black/80]=\"!transparent()\"\n  [class.backdrop-blur-xl]=\"!transparent()\"\n  class=\"ease-in-out transition-all duration-300\"\n  [attr.aria-label]=\"ariaLabel() || title()\"\n>\n  <div\n    class=\"mx-auto px-4 pt-3 pb-2\"\n    [class.border-b]=\"showBorder()\"\n    [class.border-white/5]=\"showBorder()\"\n    [style.max-width]=\"maxWidth()\"\n  >\n    <div class=\"flex items-center justify-between gap-4 w-full\">\n      <div class=\"navbar-left flex items-center min-w-0 flex-1\">\n        @if (showLeftButton) {\n          <xs-button\n            (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n            [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n            layout=\"iconOnlyHeader\"\n            variant=\"custom\"\n            customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n            [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n          />\n        }\n\n        <div class=\"navbar-leading flex-none\">\n          <ng-content select=\"[leading]\"></ng-content>\n        </div>\n\n        <div class=\"navbar-title-wrap flex flex-col min-w-0 flex-1\">\n          <a\n            [routerLink]=\"homeRoute()\"\n            (click)=\"titleClick.emit()\"\n            class=\"navbar-default-title inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n            [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n          >\n            @if (mobileTitle()) {\n              <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n              <span class=\"hidden lg:inline\">{{ title() }}</span>\n            } @else {\n              {{ title() }}\n            }\n          </a>\n\n          @if (subtitle()) {\n            <div\n              class=\"navbar-default-subtitle flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n            >\n              <div\n                class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n              >\n                @if (mobileSubtitle()) {\n                  <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n                  <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n                } @else {\n                  {{ subtitle() }}\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"navbar-right flex items-center justify-end gap-3 min-w-0\">\n        <ng-content select=\"[actions]\"></ng-content>\n\n        @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n          <span\n            class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n            [class.bg-amber-500/10]=\"envName === 'dev'\"\n            [class.border-amber-500/20]=\"envName === 'dev'\"\n            [class.text-amber-500]=\"envName === 'dev'\"\n            [class.bg-orange-500/10]=\"envName === 'uat'\"\n            [class.border-orange-500/20]=\"envName === 'uat'\"\n            [class.text-orange-500]=\"envName === 'uat'\"\n            [title]=\"envName\"\n          >{{ envName }}</span>\n        }\n\n        @if (showChat()) {\n          <button\n            (click)=\"chatClick.emit()\"\n            class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('CHAT')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n              <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n            </svg>\n            @if (unreadChatMessages() > 0) {\n              <span\n                class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n                [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n              >\n                {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (showNotifications()) {\n          <xs-button\n            (onClick)=\"notificationsClick.emit()\"\n            icon=\"bell\"\n            layout=\"iconOnly\"\n            variant=\"custom\"\n            customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n            [title]=\"t('NOTIFICATIONS')\"\n            [badgeCount]=\"unreadNotifications()\"\n          />\n        }\n\n        @if (showImpersonation()) {\n          <button\n            (click)=\"impersonationClick.emit()\"\n            class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n              <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n            </svg>\n          </button>\n        }\n\n        @if (showLanguage()) {\n          <button\n            (click)=\"onToggleLang()\"\n            class=\"navbar-lang flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n          >\n            <img\n              [src]=\"\n                langSignal() === 'es'\n                  ? ('es' | countryFlag)\n                  : ('us' | countryFlag)\n              \"\n              class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n              [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n            />\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (hasBottom) {\n      <div\n        class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n      >\n        <ng-content select=\"[bottom]\"></ng-content>\n      </div>\n    }\n  </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}.navbar-leading:has(>*){margin-left:4px}:host(.navbar-contextual) .navbar-title-wrap{display:none}:host(.navbar-contextual) .navbar-lang{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSNavbarComponent, decorators: [{
             type: Component,
@@ -16135,8 +16095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         '[class.sticky]': 'sticky()',
                         '[class.top-0]': 'sticky()',
                         '[class.z-50]': 'sticky()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden()) {\n<header\n  [class.bg-black/80]=\"!transparent()\"\n  [class.backdrop-blur-xl]=\"!transparent()\"\n  class=\"ease-in-out transition-all duration-300\"\n  [attr.aria-label]=\"ariaLabel() || title()\"\n>\n  <div\n    class=\"mx-auto px-4 pt-3 pb-2\"\n    [class.border-b]=\"showBorder()\"\n    [class.border-white/5]=\"showBorder()\"\n    [style.max-width]=\"maxWidth()\"\n  >\n    <div class=\"flex items-center justify-between gap-4 w-full\">\n      <div class=\"flex items-center min-w-0 flex-1\">\n        @if (showLeftButton) {\n          <xs-button\n            (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n            [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n            layout=\"iconOnlyHeader\"\n            variant=\"custom\"\n            customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n            [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n          />\n        }\n\n        <div class=\"flex flex-col min-w-0 flex-1\">\n          <a\n            [routerLink]=\"homeRoute()\"\n            (click)=\"titleClick.emit()\"\n            class=\"inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n            [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n          >\n            @if (mobileTitle()) {\n              <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n              <span class=\"hidden lg:inline\">{{ title() }}</span>\n            } @else {\n              {{ title() }}\n            }\n          </a>\n\n          @if (subtitle()) {\n            <div\n              class=\"flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n            >\n              <div\n                class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n              >\n                @if (mobileSubtitle()) {\n                  <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n                  <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n                } @else {\n                  {{ subtitle() }}\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex items-center justify-end gap-3 min-w-0\">\n        <ng-content select=\"[actions]\"></ng-content>\n\n        @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n          <span\n            class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n            [class.bg-amber-500/10]=\"envName === 'dev'\"\n            [class.border-amber-500/20]=\"envName === 'dev'\"\n            [class.text-amber-500]=\"envName === 'dev'\"\n            [class.bg-orange-500/10]=\"envName === 'uat'\"\n            [class.border-orange-500/20]=\"envName === 'uat'\"\n            [class.text-orange-500]=\"envName === 'uat'\"\n            [title]=\"envName\"\n          >{{ envName }}</span>\n        }\n\n        @if (showChat()) {\n          <button\n            (click)=\"chatClick.emit()\"\n            class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('CHAT')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n              <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n            </svg>\n            @if (unreadChatMessages() > 0) {\n              <span\n                class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n                [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n              >\n                {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (showNotifications()) {\n          <xs-button\n            (onClick)=\"notificationsClick.emit()\"\n            icon=\"bell\"\n            layout=\"iconOnly\"\n            variant=\"custom\"\n            customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n            [title]=\"t('NOTIFICATIONS')\"\n            [badgeCount]=\"unreadNotifications()\"\n          />\n        }\n\n        @if (showImpersonation()) {\n          <button\n            (click)=\"impersonationClick.emit()\"\n            class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n              <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n            </svg>\n          </button>\n        }\n\n        @if (showLanguage()) {\n          <button\n            (click)=\"onToggleLang()\"\n            class=\"flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n          >\n            <img\n              [src]=\"\n                langSignal() === 'es'\n                  ? ('es' | countryFlag)\n                  : ('us' | countryFlag)\n              \"\n              class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n              [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n            />\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (hasBottom) {\n      <div\n        class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n      >\n        <ng-content select=\"[bottom]\"></ng-content>\n      </div>\n    }\n  </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], mobileTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileTitle", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], mobileSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSubtitle", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], showMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenu", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], showLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLanguage", required: false }] }], showNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotifications", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], showImpersonation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImpersonation", required: false }] }], unreadChatMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadChatMessages", required: false }] }], unreadNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadNotifications", required: false }] }], homeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeRoute", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], hideEnvBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideEnvBadge", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], menuToggle: [{ type: i0.Output, args: ["menuToggle"] }], titleClick: [{ type: i0.Output, args: ["titleClick"] }], notificationsClick: [{ type: i0.Output, args: ["notificationsClick"] }], chatClick: [{ type: i0.Output, args: ["chatClick"] }], impersonationClick: [{ type: i0.Output, args: ["impersonationClick"] }], bottomContent: [{ type: i0.ContentChild, args: ['[bottom]', { ...{
+                        '[class.navbar-contextual]': 'contextual()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden()) {\n<header\n  [class.bg-black/80]=\"!transparent()\"\n  [class.backdrop-blur-xl]=\"!transparent()\"\n  class=\"ease-in-out transition-all duration-300\"\n  [attr.aria-label]=\"ariaLabel() || title()\"\n>\n  <div\n    class=\"mx-auto px-4 pt-3 pb-2\"\n    [class.border-b]=\"showBorder()\"\n    [class.border-white/5]=\"showBorder()\"\n    [style.max-width]=\"maxWidth()\"\n  >\n    <div class=\"flex items-center justify-between gap-4 w-full\">\n      <div class=\"navbar-left flex items-center min-w-0 flex-1\">\n        @if (showLeftButton) {\n          <xs-button\n            (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n            [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n            layout=\"iconOnlyHeader\"\n            variant=\"custom\"\n            customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n            [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n          />\n        }\n\n        <div class=\"navbar-leading flex-none\">\n          <ng-content select=\"[leading]\"></ng-content>\n        </div>\n\n        <div class=\"navbar-title-wrap flex flex-col min-w-0 flex-1\">\n          <a\n            [routerLink]=\"homeRoute()\"\n            (click)=\"titleClick.emit()\"\n            class=\"navbar-default-title inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n            [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n          >\n            @if (mobileTitle()) {\n              <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n              <span class=\"hidden lg:inline\">{{ title() }}</span>\n            } @else {\n              {{ title() }}\n            }\n          </a>\n\n          @if (subtitle()) {\n            <div\n              class=\"navbar-default-subtitle flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n            >\n              <div\n                class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n              >\n                @if (mobileSubtitle()) {\n                  <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n                  <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n                } @else {\n                  {{ subtitle() }}\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"navbar-right flex items-center justify-end gap-3 min-w-0\">\n        <ng-content select=\"[actions]\"></ng-content>\n\n        @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n          <span\n            class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n            [class.bg-amber-500/10]=\"envName === 'dev'\"\n            [class.border-amber-500/20]=\"envName === 'dev'\"\n            [class.text-amber-500]=\"envName === 'dev'\"\n            [class.bg-orange-500/10]=\"envName === 'uat'\"\n            [class.border-orange-500/20]=\"envName === 'uat'\"\n            [class.text-orange-500]=\"envName === 'uat'\"\n            [title]=\"envName\"\n          >{{ envName }}</span>\n        }\n\n        @if (showChat()) {\n          <button\n            (click)=\"chatClick.emit()\"\n            class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('CHAT')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n              <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n            </svg>\n            @if (unreadChatMessages() > 0) {\n              <span\n                class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n                [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n              >\n                {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (showNotifications()) {\n          <xs-button\n            (onClick)=\"notificationsClick.emit()\"\n            icon=\"bell\"\n            layout=\"iconOnly\"\n            variant=\"custom\"\n            customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n            [title]=\"t('NOTIFICATIONS')\"\n            [badgeCount]=\"unreadNotifications()\"\n          />\n        }\n\n        @if (showImpersonation()) {\n          <button\n            (click)=\"impersonationClick.emit()\"\n            class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n              <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n            </svg>\n          </button>\n        }\n\n        @if (showLanguage()) {\n          <button\n            (click)=\"onToggleLang()\"\n            class=\"navbar-lang flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n            type=\"button\"\n            [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n          >\n            <img\n              [src]=\"\n                langSignal() === 'es'\n                  ? ('es' | countryFlag)\n                  : ('us' | countryFlag)\n              \"\n              class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n              [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n            />\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (hasBottom) {\n      <div\n        class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n      >\n        <ng-content select=\"[bottom]\"></ng-content>\n      </div>\n    }\n  </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}.navbar-leading:has(>*){margin-left:4px}:host(.navbar-contextual) .navbar-title-wrap{display:none}:host(.navbar-contextual) .navbar-lang{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], mobileTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileTitle", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], mobileSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSubtitle", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], showMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenu", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], contextual: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextual", required: false }] }], showLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLanguage", required: false }] }], showNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotifications", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], showImpersonation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImpersonation", required: false }] }], unreadChatMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadChatMessages", required: false }] }], unreadNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadNotifications", required: false }] }], homeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeRoute", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], hideEnvBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideEnvBadge", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], menuToggle: [{ type: i0.Output, args: ["menuToggle"] }], titleClick: [{ type: i0.Output, args: ["titleClick"] }], notificationsClick: [{ type: i0.Output, args: ["notificationsClick"] }], chatClick: [{ type: i0.Output, args: ["chatClick"] }], impersonationClick: [{ type: i0.Output, args: ["impersonationClick"] }], bottomContent: [{ type: i0.ContentChild, args: ['[bottom]', { ...{
                             read: ElementRef,
                         }, isSignal: true }] }] } });
 
@@ -16545,7 +16506,6 @@ class OnImageErrorDirective {
             el.src = this.defaultImagePath;
             return;
         }
-        // Generar avatar con iniciales
         el.src = this.avatarService.generateAvatar(nameForAvatar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: OnImageErrorDirective, deps: [{ token: i0.ElementRef }, { token: XS_DEFAULT_IMAGE_PATH }, { token: XSAvatarService }], target: i0.ɵɵFactoryTarget.Directive });
@@ -16802,7 +16762,7 @@ class XSItemTypeUserComponent extends XSItemTypeBaseComponent {
         return typeof type === 'string' ? type : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeUserComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeUserComponent, isStandalone: true, selector: "xs-item-type-user", host: { attributes: { "xs-item-type-user-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del usuario -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [src]=\"item() | imageApi: 'user' : 'small'\"\n                size=\"full\"\n                objectFit=\"cover\"\n              ></xs-image>\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ item()['name'] }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <img\n                  [src]=\"getCountryCode() | countryFlag\"\n                  [alt]=\"getCountryName()\"\n                  class=\"flex-shrink-0 w-3 h-3 rounded-sm \"\n                />\n                <span class=\"flex-1 truncate\">\n                  {{ getItemType() | XSTypeUser }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (\n            item()['value'] !== undefined && item()['unit']\n          ) {\n            <div class=\"flex items-center text-right mr-2\">\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: XSTypeUserPipe, name: "XSTypeUser" }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeUserComponent, isStandalone: true, selector: "xs-item-type-user", host: { attributes: { "xs-item-type-user-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [src]=\"item() | imageApi: 'user' : 'small'\"\n                size=\"full\"\n                objectFit=\"cover\"\n              ></xs-image>\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ item()['name'] }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <img\n                  [src]=\"getCountryCode() | countryFlag\"\n                  [alt]=\"getCountryName()\"\n                  class=\"flex-shrink-0 w-3 h-3 rounded-sm \"\n                />\n                <span class=\"flex-1 truncate\">\n                  {{ getItemType() | XSTypeUser }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          @if (\n            item()['value'] !== undefined && item()['unit']\n          ) {\n            <div class=\"flex items-center text-right mr-2\">\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: XSTypeUserPipe, name: "XSTypeUser" }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeUserComponent, decorators: [{
             type: Component,
@@ -16814,7 +16774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         XSIconComponent,
                         ImageApiPipe,
                         CountryFlagPipe,
-                    ], host: { 'xs-item-type-user-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del usuario -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [src]=\"item() | imageApi: 'user' : 'small'\"\n                size=\"full\"\n                objectFit=\"cover\"\n              ></xs-image>\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ item()['name'] }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <img\n                  [src]=\"getCountryCode() | countryFlag\"\n                  [alt]=\"getCountryName()\"\n                  class=\"flex-shrink-0 w-3 h-3 rounded-sm \"\n                />\n                <span class=\"flex-1 truncate\">\n                  {{ getItemType() | XSTypeUser }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (\n            item()['value'] !== undefined && item()['unit']\n          ) {\n            <div class=\"flex items-center text-right mr-2\">\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-user-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [src]=\"item() | imageApi: 'user' : 'small'\"\n                size=\"full\"\n                objectFit=\"cover\"\n              ></xs-image>\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ item()['name'] }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <img\n                  [src]=\"getCountryCode() | countryFlag\"\n                  [alt]=\"getCountryName()\"\n                  class=\"flex-shrink-0 w-3 h-3 rounded-sm \"\n                />\n                <span class=\"flex-1 truncate\">\n                  {{ getItemType() | XSTypeUser }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          @if (\n            item()['value'] !== undefined && item()['unit']\n          ) {\n            <div class=\"flex items-center text-right mr-2\">\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeUserStatsComponent extends XSItemTypeBaseComponent {
@@ -17051,7 +17011,7 @@ class XSItemTypeTrackingComponent extends XSItemTypeBaseComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeTrackingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeTrackingComponent, isStandalone: true, selector: "xs-item-type-tracking", host: { attributes: { "xs-item-type-tracking-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen para tracking -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [item]=\"userForImage\"\n                typeItem=\"user\"\n                imageType=\"small\"\n                size=\"full\"\n                objectFit=\"cover\"\n                [generateAvatar]=\"true\"\n              ></xs-image>\n            </div>\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getModule() | firstLetterCase }}\n                  {{ getAction() }}\n                </span>\n              </h3>\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex items-center gap-1\">\n                  <!-- Bandera del pa\u00EDs del usuario si existe, o 'nd' para an\u00F3nimo -->\n\n                  <img\n                    [src]=\"getDeviceCountry() | countryFlag\"\n                    [alt]=\"getDeviceCountry()\"\n                    class=\"flex-shrink-0 w-3 h-3 rounded-sm\"\n                  />\n\n                  {{ getUserName() }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Contenido especial para tracking -->\n          <div\n            class=\"flex flex-col items-end justify-center gap-0 py-0 text-xs text-zinc-300\"\n          >\n            <span class=\"font-semibold\">{{\n              item()['created'] | dateChat | firstLetterCase\n            }}</span>\n            <span\n              class=\"font-extralight\"\n              [ngClass]=\"{\n                'text-red-600': item()['isError'],\n                'text-green-500': !item()['isError'],\n              }\"\n            >\n              {{ item()['isError'] ? 'Error' : 'OK' }}\n            </span>\n          </div>\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: DateChatPipe, name: "dateChat" }, { kind: "pipe", type: XSFirstLetterPipe, name: "firstLetterCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeTrackingComponent, isStandalone: true, selector: "xs-item-type-tracking", host: { attributes: { "xs-item-type-tracking-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [item]=\"userForImage\"\n                typeItem=\"user\"\n                imageType=\"small\"\n                size=\"full\"\n                objectFit=\"cover\"\n                [generateAvatar]=\"true\"\n              ></xs-image>\n            </div>\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getModule() | firstLetterCase }}\n                  {{ getAction() }}\n                </span>\n              </h3>\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex items-center gap-1\">\n\n                  <img\n                    [src]=\"getDeviceCountry() | countryFlag\"\n                    [alt]=\"getDeviceCountry()\"\n                    class=\"flex-shrink-0 w-3 h-3 rounded-sm\"\n                  />\n\n                  {{ getUserName() }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <div\n            class=\"flex flex-col items-end justify-center gap-0 py-0 text-xs text-zinc-300\"\n          >\n            <span class=\"font-semibold\">{{\n              item()['created'] | dateChat | firstLetterCase\n            }}</span>\n            <span\n              class=\"font-extralight\"\n              [ngClass]=\"{\n                'text-red-600': item()['isError'],\n                'text-green-500': !item()['isError'],\n              }\"\n            >\n              {{ item()['isError'] ? 'Error' : 'OK' }}\n            </span>\n          </div>\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: DateChatPipe, name: "dateChat" }, { kind: "pipe", type: XSFirstLetterPipe, name: "firstLetterCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeTrackingComponent, decorators: [{
             type: Component,
@@ -17062,7 +17022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         DateChatPipe,
                         XSImageComponent,
                         XSFirstLetterPipe,
-                    ], host: { 'xs-item-type-tracking-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen para tracking -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [item]=\"userForImage\"\n                typeItem=\"user\"\n                imageType=\"small\"\n                size=\"full\"\n                objectFit=\"cover\"\n                [generateAvatar]=\"true\"\n              ></xs-image>\n            </div>\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getModule() | firstLetterCase }}\n                  {{ getAction() }}\n                </span>\n              </h3>\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex items-center gap-1\">\n                  <!-- Bandera del pa\u00EDs del usuario si existe, o 'nd' para an\u00F3nimo -->\n\n                  <img\n                    [src]=\"getDeviceCountry() | countryFlag\"\n                    [alt]=\"getDeviceCountry()\"\n                    class=\"flex-shrink-0 w-3 h-3 rounded-sm\"\n                  />\n\n                  {{ getUserName() }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Contenido especial para tracking -->\n          <div\n            class=\"flex flex-col items-end justify-center gap-0 py-0 text-xs text-zinc-300\"\n          >\n            <span class=\"font-semibold\">{{\n              item()['created'] | dateChat | firstLetterCase\n            }}</span>\n            <span\n              class=\"font-extralight\"\n              [ngClass]=\"{\n                'text-red-600': item()['isError'],\n                'text-green-500': !item()['isError'],\n              }\"\n            >\n              {{ item()['isError'] ? 'Error' : 'OK' }}\n            </span>\n          </div>\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-tracking-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              <xs-image\n                [item]=\"userForImage\"\n                typeItem=\"user\"\n                imageType=\"small\"\n                size=\"full\"\n                objectFit=\"cover\"\n                [generateAvatar]=\"true\"\n              ></xs-image>\n            </div>\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getModule() | firstLetterCase }}\n                  {{ getAction() }}\n                </span>\n              </h3>\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex items-center gap-1\">\n\n                  <img\n                    [src]=\"getDeviceCountry() | countryFlag\"\n                    [alt]=\"getDeviceCountry()\"\n                    class=\"flex-shrink-0 w-3 h-3 rounded-sm\"\n                  />\n\n                  {{ getUserName() }}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <div\n            class=\"flex flex-col items-end justify-center gap-0 py-0 text-xs text-zinc-300\"\n          >\n            <span class=\"font-semibold\">{{\n              item()['created'] | dateChat | firstLetterCase\n            }}</span>\n            <span\n              class=\"font-extralight\"\n              [ngClass]=\"{\n                'text-red-600': item()['isError'],\n                'text-green-500': !item()['isError'],\n              }\"\n            >\n              {{ item()['isError'] ? 'Error' : 'OK' }}\n            </span>\n          </div>\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeEventComponent extends XSItemTypeBaseComponent {
@@ -17088,7 +17048,7 @@ class XSItemTypeEventComponent extends XSItemTypeBaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeEventComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeEventComponent, isStandalone: true, selector: "xs-item-type-event", host: { attributes: { "xs-item-type-event-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del evento -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'event' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de evento -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"calendar\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Evento </span>\n                @if (item()['date']) {\n                  <span class=\"text-zinc-400\">\n                    \u2022 {{ formatDate(getItemDate()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeEventComponent, isStandalone: true, selector: "xs-item-type-event", host: { attributes: { "xs-item-type-event-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'event' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"calendar\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Evento </span>\n                @if (item()['date']) {\n                  <span class=\"text-zinc-400\">\n                    \u2022 {{ formatDate(getItemDate()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeEventComponent, decorators: [{
             type: Component,
@@ -17098,7 +17058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-event-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del evento -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'event' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de evento -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"calendar\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Evento </span>\n                @if (item()['date']) {\n                  <span class=\"text-zinc-400\">\n                    \u2022 {{ formatDate(getItemDate()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-event-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'event' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"calendar\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Evento </span>\n                @if (item()['date']) {\n                  <span class=\"text-zinc-400\">\n                    \u2022 {{ formatDate(getItemDate()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeEquipmentComponent extends XSItemTypeBaseComponent {
@@ -17118,7 +17078,7 @@ class XSItemTypeEquipmentComponent extends XSItemTypeBaseComponent {
         return this.item()?.['unit'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeEquipmentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeEquipmentComponent, isStandalone: true, selector: "xs-item-type-equipment", host: { attributes: { "xs-item-type-equipment-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del equipo -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'equipment' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de equipo -->\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"cogs\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Equipo </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeEquipmentComponent, isStandalone: true, selector: "xs-item-type-equipment", host: { attributes: { "xs-item-type-equipment-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'equipment' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"cogs\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Equipo </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeEquipmentComponent, decorators: [{
             type: Component,
@@ -17128,7 +17088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-equipment-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del equipo -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'equipment' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de equipo -->\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"cogs\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Equipo </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-equipment-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'equipment' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"cogs\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Equipo </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeMediaComponent extends XSItemTypeBaseComponent {
@@ -17148,7 +17108,7 @@ class XSItemTypeMediaComponent extends XSItemTypeBaseComponent {
         return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeMediaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeMediaComponent, isStandalone: true, selector: "xs-item-type-media", host: { attributes: { "xs-item-type-media-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del media -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'media' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de media -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"music\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Media </span>\n                @if (item()['duration']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n                @if (item()['genre']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ item()['genre'] }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeMediaComponent, isStandalone: true, selector: "xs-item-type-media", host: { attributes: { "xs-item-type-media-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'media' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"music\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Media </span>\n                @if (item()['duration']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n                @if (item()['genre']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ item()['genre'] }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeMediaComponent, decorators: [{
             type: Component,
@@ -17158,7 +17118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-media-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del media -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'media' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de media -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"music\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Media </span>\n                @if (item()['duration']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n                @if (item()['genre']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ item()['genre'] }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-media-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'media' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"music\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Media </span>\n                @if (item()['duration']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n                @if (item()['genre']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ item()['genre'] }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypePlaylistComponent extends XSItemTypeBaseComponent {
@@ -17182,7 +17142,7 @@ class XSItemTypePlaylistComponent extends XSItemTypeBaseComponent {
         return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypePlaylistComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypePlaylistComponent, isStandalone: true, selector: "xs-item-type-playlist", host: { attributes: { "xs-item-type-playlist-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen de la playlist -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'playlist' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de playlist -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"list\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Playlist </span>\n                @if (getTracksLength() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getTracksLength() }} pistas\n                  </span>\n                }\n                @if (getItemDuration() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypePlaylistComponent, isStandalone: true, selector: "xs-item-type-playlist", host: { attributes: { "xs-item-type-playlist-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'playlist' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"list\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Playlist </span>\n                @if (getTracksLength() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getTracksLength() }} pistas\n                  </span>\n                }\n                @if (getItemDuration() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypePlaylistComponent, decorators: [{
             type: Component,
@@ -17192,7 +17152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-playlist-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen de la playlist -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'playlist' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de playlist -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"list\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Playlist </span>\n                @if (getTracksLength() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getTracksLength() }} pistas\n                  </span>\n                }\n                @if (getItemDuration() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-playlist-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'playlist' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"list\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Playlist </span>\n                @if (getTracksLength() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getTracksLength() }} pistas\n                  </span>\n                }\n                @if (getItemDuration() > 0) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ formatDuration(getItemDuration()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeOrganizationComponent extends XSItemTypeBaseComponent {
@@ -17212,7 +17172,7 @@ class XSItemTypeOrganizationComponent extends XSItemTypeBaseComponent {
         return this.item()?.['unit'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeOrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeOrganizationComponent, isStandalone: true, selector: "xs-item-type-organization", host: { attributes: { "xs-item-type-organization-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen de la organizaci\u00F3n -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'organization' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de organizaci\u00F3n -->\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"building\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Organizaci\u00F3n </span>\n                @if (getItemOrgType()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemOrgType() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeOrganizationComponent, isStandalone: true, selector: "xs-item-type-organization", host: { attributes: { "xs-item-type-organization-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'organization' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"building\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Organizaci\u00F3n </span>\n                @if (getItemOrgType()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemOrgType() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeOrganizationComponent, decorators: [{
             type: Component,
@@ -17222,7 +17182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-organization-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen de la organizaci\u00F3n -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'organization' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de organizaci\u00F3n -->\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"building\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Organizaci\u00F3n </span>\n                @if (getItemOrgType()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemOrgType() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-organization-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'organization' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"building\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Organizaci\u00F3n </span>\n                @if (getItemOrgType()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemOrgType() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeSiteComponent extends XSItemTypeBaseComponent {
@@ -17240,12 +17200,11 @@ class XSItemTypeSiteComponent extends XSItemTypeBaseComponent {
     getShortAddress(address) {
         if (!address || typeof address !== 'string')
             return '';
-        // Mostrar solo la primera parte de la dirección
         const parts = address.split(',');
         return parts[0].trim();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeSiteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeSiteComponent, isStandalone: true, selector: "xs-item-type-site", host: { attributes: { "xs-item-type-site-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del sitio -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'site' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de sitio -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"map-marker-alt\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Sitio </span>\n                @if (item()['address']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getShortAddress(getItemAddress()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeSiteComponent, isStandalone: true, selector: "xs-item-type-site", host: { attributes: { "xs-item-type-site-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'site' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"map-marker-alt\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Sitio </span>\n                @if (item()['address']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getShortAddress(getItemAddress()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeSiteComponent, decorators: [{
             type: Component,
@@ -17255,7 +17214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-site-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del sitio -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'site' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de sitio -->\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"map-marker-alt\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Sitio </span>\n                @if (item()['address']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getShortAddress(getItemAddress()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-site-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'site' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (item()['imageUrl']) {\n                <xs-image\n                  [src]=\"item()['imageUrl']\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!item()['imageUrl']) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"map-marker-alt\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Sitio </span>\n                @if (item()['address']) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getShortAddress(getItemAddress()) }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (item()['value'] !== undefined && item()['unit']) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ item()['value'] }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ item()['unit'] }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    item()['value'] !== undefined && item()['unit']\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeTipComponent extends XSItemTypeBaseComponent {
@@ -17279,7 +17238,7 @@ class XSItemTypeTipComponent extends XSItemTypeBaseComponent {
         return this.item()?.['unit'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeTipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeTipComponent, isStandalone: true, selector: "xs-item-type-tip", host: { attributes: { "xs-item-type-tip-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del tip -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'tip' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de tip -->\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"lightbulb\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Tip </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSItemTypeTipComponent, isStandalone: true, selector: "xs-item-type-tip", host: { attributes: { "xs-item-type-tip-host": "" } }, usesInheritance: true, ngImport: i0, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'tip' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"lightbulb\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Tip </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { 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: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }, { kind: "pipe", type: ImageApiPipe, name: "imageApi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSItemTypeTipComponent, decorators: [{
             type: Component,
@@ -17289,7 +17248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
                         ImageApiPipe,
                         XSImageComponent,
                         XSIconComponent,
-                    ], host: { 'xs-item-type-tip-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <!-- Imagen del tip -->\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'tip' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              <!-- Fallback: icono de tip -->\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"lightbulb\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <!-- Second line content -->\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Tip </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Value/Unit display -->\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          <!-- Chevron / loading spinner -->\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
+                    ], host: { 'xs-item-type-tip-host': '' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n    @if (isLink()) {\n      <a\n        [class]=\"itemClasses\"\n        (click)=\"handleClick($event)\"\n      >\n        <div class=\"flex items-center justify-between w-full\">\n          <div class=\"flex items-center flex-1 min-w-0 gap-2\">\n            <div\n              class=\"flex-shrink-0 w-10 h-10 overflow-hidden rounded-xl\"\n              [ngClass]=\"[\n                size() === 'small' ? 'w-8 h-8' : 'w-10 h-10 mr-1',\n              ]\"\n            >\n              @if (!getItemImageUrl()) {\n                <xs-image\n                  [src]=\"item() | imageApi: 'tip' : 'small'\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (getItemImageUrl()) {\n                <xs-image\n                  [src]=\"getItemImageUrl()\"\n                  size=\"full\"\n                  objectFit=\"cover\"\n                ></xs-image>\n              }\n              @if (!getItemImageUrl()) {\n                <div\n                  class=\"flex items-center justify-center w-full h-full rounded-xl bg-zinc-700\"\n                >\n                  <xs-icon\n                    icon=\"lightbulb\"\n                    class=\"text-zinc-400\"\n                  ></xs-icon>\n                </div>\n              }\n            </div>\n\n            <div\n              class=\"flex flex-col items-start justify-start w-full min-w-0\"\n            >\n              <h3\n                class=\"w-full text-[16px] font-semibold text-white pr-2\"\n              >\n                <span class=\"block max-w-full pr-2 truncate\">\n                  {{ getItemTitle() }}\n                </span>\n              </h3>\n\n              <div\n                class=\"flex items-center min-w-0 gap-1 text-xs text-zinc-500\"\n              >\n                <span class=\"flex-1 truncate\"> Tip </span>\n                @if (getItemCategory()) {\n                  <span\n                    class=\"text-zinc-400\"\n                  >\n                    \u2022 {{ getItemCategory() }}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n\n          @if (getItemValue() !== undefined && getItemUnit()) {\n            <div\n              class=\"flex items-center text-right mr-2\"\n            >\n              <span class=\"text-white font-semibold text-sm\">\n                {{ getItemValue() }}\n              </span>\n              <span class=\"text-zinc-400 text-xs ml-1\">\n                {{ getItemUnit() }}\n              </span>\n            </div>\n          }\n\n          @if (showChevron() || loading()) {\n            <div\n              class=\"flex items-center flex-shrink-0 h-full ml-2\"\n            >\n              @if (loading()) {\n                <div\n                  class=\"w-4 h-4 border-2 border-white rounded-full border-t-transparent animate-spin\"\n                  aria-label=\"Cargando\"\n                ></div>\n              }\n              @if (!loading()) {\n                <xs-icon\n                  icon=\"chevron-right\"\n                  class=\"text-zinc-400\"\n                  [ngClass]=\"\n                    getItemValue() !== undefined && getItemUnit()\n                      ? 'ml-1'\n                      : 'ml-2'\n                  \"\n                ></xs-icon>\n              }\n            </div>\n          }\n        </div>\n      </a>\n    }\n  " }]
         }] });
 
 class XSItemTypeComponent {
@@ -18009,7 +17968,6 @@ class XSTableItemsComponent {
     ngOnDestroy() {
         this.langSubscription.unsubscribe();
     }
-    // --- LÓGICA DE VALIDACIÓN ---
     isString(val) {
         return typeof val === 'string';
     }
@@ -18022,7 +17980,6 @@ class XSTableItemsComponent {
     isNotArray(value) {
         return !Array.isArray(value);
     }
-    // --- LÓGICA DE IMAGEN Y DISPLAY ---
     get typeForImage() {
         if (this.header().key === 'name' && this.item()?.['slides'])
             return 'tip';
@@ -18131,7 +18088,6 @@ class XSTableItemsComponent {
         }
         return type;
     }
-    // --- LÓGICA DE FECHAS Y TIEMPO ---
     isDateInRangeF(date, minDays, maxDays) {
         if (!date)
             return false;
@@ -18192,7 +18148,6 @@ class XSTableItemsComponent {
             return 0;
         }
     }
-    // --- LÓGICA DE ESTADOS Y CLASES ---
     getStateClasses(state) {
         const base = 'inline-flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-xl';
         switch (state?.toLowerCase()) {
@@ -18248,7 +18203,6 @@ class XSTableItemsComponent {
     getStateFullText = (state) => state
         ? state.toLowerCase().replaceAll('_', ' ')
         : 'desconocido';
-    // --- LÓGICA DE USUARIOS Y ROLES ---
     getRoleIcon(role) {
         const roles = {
             admin: 'crown',
@@ -18291,7 +18245,6 @@ class XSTableItemsComponent {
             });
         return buttons;
     }
-    // --- LÓGICA DE MÉTRICAS ---
     sumVisitsf(item) {
         if (!item)
             return 0;
@@ -18319,7 +18272,6 @@ class XSTableItemsComponent {
             return 0;
         return ((i.maxUses - (i.usedCount ?? 0)) / i.maxUses) * 100;
     }
-    // --- OTROS AYUDANTES ---
     getUrlStatsPage = (item) => {
         const i = item;
         return i.path ? `https://xsmusic.es${i.path}` : '';
@@ -18449,11 +18401,11 @@ class XSTableCheckboxComponent {
         this.checkedChange.emit(!this.checked());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.33", type: XSTableCheckboxComponent, isStandalone: true, selector: "xs-table-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "    <label\n      class=\"relative flex items-center justify-center cursor-pointer\"\n    >\n      <input\n        type=\"checkbox\"\n        class=\"sr-only peer\"\n        [checked]=\"checked()\"\n        (change)=\"onToggle()\"\n        [attr.aria-label]=\"checked() ? 'Deseleccionar fila' : 'Seleccionar fila'\"\n      />\n      <div\n        class=\"w-5 h-5 border-2 border-zinc-800 rounded-md peer-checked:bg-zinc-100 peer-checked:border-zinc-100 transition-all duration-300\"\n        [class.border-zinc-700]=\"checked()\"\n      >\n        <xs-icon\n          icon=\"check\"\n          class=\"hidden peer-checked:block text-zinc-900 text-[10px] m-auto\"\n        />\n      </div>\n    </label>\n", dependencies: [{ kind: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSTableCheckboxComponent, isStandalone: true, selector: "xs-table-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "    <label\n      class=\"relative flex items-center justify-center cursor-pointer\"\n    >\n      <input\n        type=\"checkbox\"\n        class=\"sr-only peer\"\n        [checked]=\"checked()\"\n        (change)=\"onToggle()\"\n        [attr.aria-label]=\"checked() ? 'Deseleccionar fila' : 'Seleccionar fila'\"\n      />\n      <div\n        class=\"flex items-center justify-center w-5 h-5 border-2 border-zinc-800 rounded-md peer-checked:bg-zinc-100 peer-checked:border-zinc-100 transition-all duration-300\"\n        [class.border-zinc-700]=\"checked()\"\n      >\n        @if (checked()) {\n          <xs-icon\n            icon=\"check\"\n            class=\"text-zinc-900 text-[10px]\"\n          />\n        }\n      </div>\n    </label>\n", dependencies: [{ kind: "component", type: XSIconComponent, selector: "xs-icon", inputs: ["icon", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSTableCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xs-table-checkbox', standalone: true, imports: [XSIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <label\n      class=\"relative flex items-center justify-center cursor-pointer\"\n    >\n      <input\n        type=\"checkbox\"\n        class=\"sr-only peer\"\n        [checked]=\"checked()\"\n        (change)=\"onToggle()\"\n        [attr.aria-label]=\"checked() ? 'Deseleccionar fila' : 'Seleccionar fila'\"\n      />\n      <div\n        class=\"w-5 h-5 border-2 border-zinc-800 rounded-md peer-checked:bg-zinc-100 peer-checked:border-zinc-100 transition-all duration-300\"\n        [class.border-zinc-700]=\"checked()\"\n      >\n        <xs-icon\n          icon=\"check\"\n          class=\"hidden peer-checked:block text-zinc-900 text-[10px] m-auto\"\n        />\n      </div>\n    </label>\n" }]
+            args: [{ selector: 'xs-table-checkbox', standalone: true, imports: [XSIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "    <label\n      class=\"relative flex items-center justify-center cursor-pointer\"\n    >\n      <input\n        type=\"checkbox\"\n        class=\"sr-only peer\"\n        [checked]=\"checked()\"\n        (change)=\"onToggle()\"\n        [attr.aria-label]=\"checked() ? 'Deseleccionar fila' : 'Seleccionar fila'\"\n      />\n      <div\n        class=\"flex items-center justify-center w-5 h-5 border-2 border-zinc-800 rounded-md peer-checked:bg-zinc-100 peer-checked:border-zinc-100 transition-all duration-300\"\n        [class.border-zinc-700]=\"checked()\"\n      >\n        @if (checked()) {\n          <xs-icon\n            icon=\"check\"\n            class=\"text-zinc-900 text-[10px]\"\n          />\n        }\n      </div>\n    </label>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
 function getVal(item, key) {
@@ -18552,7 +18504,6 @@ class XSTableComponent {
     langVersion = signal(0, ...(ngDevMode ? [{ debugName: "langVersion" }] : []));
     platformId = inject(PLATFORM_ID);
     uid = `xs-table-jump-${Math.random().toString(36).slice(2, 9)}`;
-    // -- Inputs --
     headers = input([], ...(ngDevMode ? [{ debugName: "headers" }] : []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -18588,21 +18539,17 @@ class XSTableComponent {
     idKey = input('_id', ...(ngDevMode ? [{ debugName: "idKey" }] : []));
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
     pageSize = model(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    // -- Sticky mode --
     sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : []));
     containerHeight = input('100%', ...(ngDevMode ? [{ debugName: "containerHeight" }] : []));
-    // -- Outputs --
     rowClick = output();
     selectionChange = output();
     selectedAction = output();
     sortChange = output();
     searchQuerySubmit = output();
-    // -- Content children --
     cellTemplate = contentChild('xsCell', ...(ngDevMode ? [{ debugName: "cellTemplate" }] : []));
     expandedContent = contentChild('xsExpandedRow', ...(ngDevMode ? [{ debugName: "expandedContent" }] : []));
     toolbarExtra = contentChild('toolbarExtra', ...(ngDevMode ? [{ debugName: "toolbarExtra" }] : []));
     columnTemplates = input({}, ...(ngDevMode ? [{ debugName: "columnTemplates" }] : []));
-    // -- State signals --
     selectedSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedSet" }] : []));
     expandedItemId = signal(null, ...(ngDevMode ? [{ debugName: "expandedItemId" }] : []));
     sortState = signal({
@@ -18617,7 +18564,6 @@ class XSTableComponent {
     searchTimer;
     saveTimeoutId;
     resizeData = null;
-    // -- Computeds --
     showSelection = computed(() => this.selectable() ||
         (this.selectedButtons()?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "showSelection" }] : []));
     hasActions = computed(() => (this.actionButtons()?.length ?? 0) > 0 ||
@@ -18725,7 +18671,6 @@ class XSTableComponent {
         this.copyable() ||
         this.toolbarButtons().length > 0 ||
         !!this.toolbarExtra(), ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
-    // -- Lifecycle --
     constructor() {
         if (typeof this.translateService?.registerTranslations ===
             'function') {
@@ -18754,7 +18699,6 @@ class XSTableComponent {
             clearTimeout(this.saveTimeoutId);
         });
     }
-    // -- Search --
     onSearchInput(value) {
         clearTimeout(this.searchTimer);
         this.searchTimer = setTimeout(() => {
@@ -18774,7 +18718,6 @@ class XSTableComponent {
         this.searchQuery.set('');
         this.searchQuerySubmit.emit('');
     }
-    // -- Persistence --
     loadState() {
         const k = this.storageKey();
         if (!k)
@@ -18817,7 +18760,6 @@ class XSTableComponent {
             /* ignore */
         }
     }
-    // -- Pagination --
     jumpPageTimeoutId;
     onJumpPageInput(event) {
         const target = event.target;
@@ -18841,7 +18783,6 @@ class XSTableComponent {
         this.pageSize.set(Number(value));
         this.page.set(1);
     }
-    // -- Sort --
     toggleSort(header) {
         if (!header.action)
             return;
@@ -18858,7 +18799,6 @@ class XSTableComponent {
         });
         this.scheduleSave();
     }
-    // -- Selection --
     onToggleAll(checked) {
         this.selectedSet.update((set) => {
             const newSet = new Set(set);
@@ -18881,7 +18821,6 @@ class XSTableComponent {
             return newSet;
         });
     }
-    // -- Row click --
     onRowClick(item) {
         if (this.expandable()) {
             const id = getItemId(item, this.idKey());
@@ -18890,7 +18829,6 @@ class XSTableComponent {
         if (this.hasActions())
             this.rowClick.emit(item);
     }
-    // -- Three dots --
     onThreeDotsClick() {
         const items = this.selectedButtons().map((btn) => ({
             name: btn.name || btn.action,
@@ -18906,7 +18844,6 @@ class XSTableComponent {
             }
         });
     }
-    // -- Export --
     async onCopyVisible() {
         const h = this.processedHeaders();
         const rows = this.renderedItems();
@@ -18941,7 +18878,6 @@ class XSTableComponent {
         a.click();
         URL.revokeObjectURL(url);
     }
-    // -- Cell context --
     getCellContext(item, header, rowIndex) {
         return { $implicit: item, header, rowIndex };
     }
@@ -18964,7 +18900,6 @@ class XSTableComponent {
         return cellString(item, header, this.idKey());
     }
     trackById = (index, item) => getItemId(item, this.idKey()) || index;
-    // -- Column resize --
     onResizeStart(key, event) {
         event.preventDefault();
         const target = event.currentTarget;
@@ -18999,7 +18934,6 @@ class XSTableComponent {
             [this.resizeData.key]: newWidth,
         }));
     }
-    // -- Column toggle --
     toggleColumn(key) {
         this.visibleColumnKeys.update((current) => {
             const s = new Set(current ?? this.headers().map((h) => h.key));
@@ -19011,7 +18945,6 @@ class XSTableComponent {
         const v = this.visibleColumnKeys();
         return v ? v.has(key) : true;
     }
-    // -- Column reorder --
     onHeaderDragStart(key, event) {
         event.dataTransfer?.setData('text/plain', key);
     }
@@ -20800,9 +20733,7 @@ class XSMapLibreService {
                     }
                     this.loadedImages.add(url);
                 }
-                catch {
-                    // ignore
-                }
+                catch { }
             }));
             await new Promise((r) => setTimeout(r, 50));
         }
@@ -23195,28 +23126,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
             args: [{ selector: 'xs-feedback', host: { 'xs-feedback-host': '' }, imports: [CommonModule, FormsModule, XSIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"xs-feedback-container\">\n  @if (state() === 'initial') {\n    <div class=\"xs-feedback-row\">\n      <span class=\"xs-feedback-question\">{{ effectiveQuestion() }}</span>\n      <div class=\"xs-feedback-actions\">\n        <button\n          class=\"xs-feedback-btn xs-feedback-btn--positive\"\n          (click)=\"onVote('positive')\"\n          aria-label=\"Positivo\"\n          type=\"button\">\n          <xs-icon icon=\"thumbs-up\" size=\"sm\"></xs-icon>\n        </button>\n        <button\n          class=\"xs-feedback-btn xs-feedback-btn--negative\"\n          (click)=\"onVote('negative')\"\n          aria-label=\"Negativo\"\n          type=\"button\">\n          <xs-icon icon=\"thumbs-down\" size=\"sm\"></xs-icon>\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (state() === 'positive') {\n    <div class=\"xs-feedback-row\">\n      <span class=\"xs-feedback-thanks\">Gracias por tu feedback</span>\n      @if (effectiveAllowComment()) {\n        <div class=\"xs-feedback-comment-row\">\n          <input\n            class=\"xs-feedback-input\"\n            type=\"text\"\n            placeholder=\"Comentario opcional...\"\n            [ngModel]=\"commentText()\"\n            (ngModelChange)=\"commentText.set($event)\"\n            (keyup.enter)=\"onSubmitComment()\"\n          />\n          <button\n            class=\"xs-feedback-submit\"\n            (click)=\"onSubmitComment()\"\n            type=\"button\">\n            Enviar\n          </button>\n          <button\n            class=\"xs-feedback-skip\"\n            (click)=\"onSkipComment()\"\n            type=\"button\">\n            Omitir\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (state() === 'negative') {\n    <div class=\"xs-feedback-col\">\n      <span class=\"xs-feedback-thanks\">Gracias por tu feedback</span>\n      @if (effectiveShowNegativeOptions() && effectiveNegativeOptions().length > 0) {\n        <span class=\"xs-feedback-subtitle\">\u00BFQu\u00E9 ha fallado?</span>\n        <div class=\"xs-feedback-options\">\n          @for (option of effectiveNegativeOptions(); track option) {\n            <button\n              class=\"xs-feedback-option\"\n              [class.xs-feedback-option--selected]=\"selectedReason() === option\"\n              (click)=\"onNegativeReasonSelect(option)\"\n              type=\"button\">\n              {{ option }}\n            </button>\n          }\n        </div>\n      }\n      @if (effectiveAllowComment()) {\n        <div class=\"xs-feedback-comment-row\">\n          <input\n            class=\"xs-feedback-input\"\n            type=\"text\"\n            placeholder=\"Comentario opcional...\"\n            [ngModel]=\"commentText()\"\n            (ngModelChange)=\"commentText.set($event)\"\n            (keyup.enter)=\"onSubmitComment()\"\n          />\n          <button\n            class=\"xs-feedback-submit\"\n            (click)=\"onSubmitComment()\"\n            type=\"button\">\n            Enviar\n          </button>\n          <button\n            class=\"xs-feedback-skip\"\n            (click)=\"onSkipComment()\"\n            type=\"button\">\n            Omitir\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (state() === 'submitted') {\n    <div class=\"xs-feedback-row\">\n      <span class=\"xs-feedback-thanks\">Gracias por tu feedback</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.xs-feedback-container{width:100%;border-radius:.75rem;background-color:#18181b80;padding:.75rem 1rem}.xs-feedback-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.xs-feedback-col{display:flex;flex-direction:column;gap:.5rem}.xs-feedback-question{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.xs-feedback-thanks{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(113 113 122 / var(--tw-text-opacity, 1))}.xs-feedback-subtitle{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(113 113 122 / var(--tw-text-opacity, 1))}.xs-feedback-actions{display:flex;flex-shrink:0;align-items:center;gap:.25rem}.xs-feedback-btn{display:flex;height:1.75rem;width:1.75rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgb(113 113 122 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.xs-feedback-btn:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.xs-feedback-btn--positive:hover{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.xs-feedback-btn--negative:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.xs-feedback-options{display:flex;flex-wrap:wrap;gap:.5rem}.xs-feedback-option{cursor:pointer;border-radius:.5rem;border-width:1px;border-color:#3f3f4680;background-color:transparent;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.xs-feedback-option:hover{--tw-border-opacity: 1;border-color:rgb(113 113 122 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.xs-feedback-option--selected{--tw-border-opacity: 1;border-color:rgb(113 113 122 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.xs-feedback-comment-row{margin-top:.25rem;display:flex;align-items:center;gap:.5rem}.xs-feedback-input{flex:1 1 0%;border-radius:.5rem;border-width:1px;border-color:#3f3f4680;background-color:transparent;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity, 1))}.xs-feedback-input::placeholder{--tw-placeholder-opacity: 1;color:rgb(82 82 91 / var(--tw-placeholder-opacity, 1))}.xs-feedback-input{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.xs-feedback-input:focus{--tw-border-opacity: 1;border-color:rgb(113 113 122 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px}.xs-feedback-submit{cursor:pointer;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));padding:.375rem .75rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.xs-feedback-submit:hover{--tw-bg-opacity: 1;background-color:rgb(82 82 91 / var(--tw-bg-opacity, 1))}.xs-feedback-skip{cursor:pointer;border-radius:.5rem;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(113 113 122 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.xs-feedback-skip:hover{--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity, 1))}\n"] }]
         }], propDecorators: { survey: [{ type: i0.Input, args: [{ isSignal: true, alias: "survey", required: true }] }], question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: false }] }], allowComment: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowComment", required: false }] }], showNegativeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNegativeOptions", required: false }] }], negativeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "negativeOptions", required: false }] }], voteSubmitted: [{ type: i0.Output, args: ["voteSubmitted"] }], commentSubmitted: [{ type: i0.Output, args: ["commentSubmitted"] }], negativeReasonSubmitted: [{ type: i0.Output, args: ["negativeReasonSubmitted"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
-// Core UI primitives — always bundled
-
 // Form components — lazy-loadable (brings @ngx-formly)
 
-// Layout components — section titles, tabs, breadcrumbs, scroll
-
-// Data display — tables, lists, cards, filters, info blocks
-
 // Chart components — lazy-loadable (brings chart.js ~220KB)
 
-// Profile components — used in artist/event/site detail pages
-
-// Alert components — notification system
-
-// Auth components — login, register, 2FA
-
 // Map components — lazy-loadable (brings maplibre ~1MB)
 
-/*
- * Public API Surface of xs-ui
- */
-
 const LIB_STORIES = [
     () => import('./xsmusices-ui-xs-action-sheet.xsstory-CBpZBlfx.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-block.xsstory-GXV6UFJo.mjs').then((m) => m.story),
@@ -23228,14 +23143,14 @@ const LIB_STORIES = [
     () => import('./xsmusices-ui-xs-icon.xsstory-asFaHy5H.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-image.xsstory-BaeUg3Zp.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-modal.xsstory-B96CYHF0.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-navbar.xsstory-CkdvldoV.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-navbar.xsstory-BDW0nLAH.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-navbar-sidebar.xsstory-DHmPSARx.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-stats-card.xsstory-PWTUDysc.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-toast.xsstory-BBhGu-j4.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-alert.xsstory-CXTRbHHS.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-alert-group.xsstory-HMGGLHfv.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-auth.xsstory-DxO8iDpd.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-badge.xsstory-BZnTAQWz.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-badge.xsstory-B1QXLQ4H.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-breadcrumbs.xsstory-CNyBeURd.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-date-mini.xsstory-DXog7Yhg.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-filter-panel.xsstory-DbvxGppo.mjs').then((m) => m.story),
@@ -23243,11 +23158,11 @@ const LIB_STORIES = [
     () => import('./xsmusices-ui-xs-info-blocks.xsstory-BHtaC7U6.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-item-card.xsstory-EGJ6itkx.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-item-action.xsstory-839UkJyC.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-item-compact.xsstory-DuSgaCDY.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-item-type.xsstory-BWJQ-hDk.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-items-slider.xsstory-CS4xTKuJ.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-list.xsstory-BxAErIEF.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-map.xsstory-DBT6h0Hv.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-item-compact.xsstory-LhApuPL7.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-item-type.xsstory-DUeCnW0R.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-items-slider.xsstory-Dt0bXZI_.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-list.xsstory-lElGfvcY.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-map.xsstory-C__bUaLQ.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-maplibre.xsstory-u_NroLqJ.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-profile-comments.xsstory-CHpCDxLe.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-profile-current-event.xsstory-BtRq4wE4.mjs').then((m) => m.story),
@@ -23261,7 +23176,7 @@ const LIB_STORIES = [
     () => import('./xsmusices-ui-xs-profile-verified.xsstory-HtbUlJFX.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-skeleton-for-slider.xsstory-k-uutKIV.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-table-items.xsstory-vR5x6wZe.mjs').then((m) => m.story),
-    () => import('./xsmusices-ui-xs-table.xsstory-DXiZHI7p.mjs').then((m) => m.story),
+    () => import('./xsmusices-ui-xs-table.xsstory-s13JV3k9.mjs').then((m) => m.story),
     () => import('./xsmusices-ui-xs-title-collapse.xsstory-COqb1jdP.mjs').then((m) => m.story),
     () => Promise.resolve().then(function () { return xsSpinner_xsstory; }).then((m) => m.story),
     () => import('./xsmusices-ui-country-flag.xsstory-BPTu5b4i.mjs').then((m) => m.story),
@@ -23417,10 +23332,6 @@ const uiComponentsExportWithDateMini = [
     XSDateMiniComponent,
 ];
 
-/*
- * Public API Surface of xs-ui
- */
-
 /**
  * Generated bundle index. Do not edit.
  */