codexly-ui 0.10.112 → 0.11.0

package/fesm2022/codexly-ui.mjs

@@ -627,6 +627,28 @@ class ClxThemeService {
             bordered: t?.bordered ?? true,
         };
     }, ...(ngDevMode ? [{ debugName: "paginationStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxNotificationComponent — severity colors fall back to built-in
+     *  green/amber/sky/red, unreadColor to primaryColor, borderColor to listBorderColor then
+     *  primaryColor, radius to the app-wide borderRadius. Per-instance inputs on clx-notification
+     *  still take precedence over this theme-wide default. */
+    notificationStyle = computed(() => {
+        const n = this._config().notification;
+        return {
+            severityColors: {
+                success: n?.severityColors?.success ?? this._config().successColor,
+                warning: n?.severityColors?.warning ?? this._config().warningColor,
+                info: n?.severityColors?.info ?? 'sky',
+                error: n?.severityColors?.error ?? this._config().dangerColor,
+            },
+            unreadColor: n?.unreadColor ?? this._config().primaryColor,
+            size: n?.size ?? 'md',
+            borderColor: n?.borderColor ?? this._config().listBorderColor ?? this._config().primaryColor,
+            radius: n?.radius ?? this._config().borderRadius,
+            titleWeight: n?.titleWeight ?? 600,
+            detailColor: n?.detailColor,
+            groupLabelWeight: n?.groupLabelWeight ?? 700,
+        };
+    }, ...(ngDevMode ? [{ debugName: "notificationStyle" }] : /* istanbul ignore next */ []));
     /** Resolved text color for solid primary/secondary buttons — undefined means "let
      *  resolveColor() auto-pick white/dark-800 based on shade", same as today. */
     buttonTextColor(role) {
@@ -11236,6 +11258,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], confirmButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], confirmClick: [{ type: i0.Output, args: ["confirmClick"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] } });
 
+// ── Size map — same density-token shape as LIST_SIZE_MAP ──────────────────────
+const NOTIFICATION_SIZE_MAP = {
+    sm: { row: 'py-2', iconWrap: 'w-7 h-7', iconSize: 'xs', title: 'text-xs', detail: 'text-[11px]', time: 'text-[10px]' },
+    md: { row: 'py-2.5', iconWrap: 'w-8.5 h-8.5', iconSize: 'sm', title: 'text-[13px]', detail: 'text-xs', time: 'text-[11px]' },
+    lg: { row: 'py-3', iconWrap: 'w-10 h-10', iconSize: 'md', title: 'text-sm', detail: 'text-[13px]', time: 'text-xs' },
+};
+// ── Default icon per severity — used when an item doesn't specify its own `icon` ──
+const NOTIFICATION_SEVERITY_ICON = {
+    success: 'check_circle',
+    warning: 'notifications_active',
+    info: 'info',
+    error: 'error',
+};
+
+/** "Dumb" panel: renders whatever list of items it's given via `items()` and emits intent
+ *  (itemClick/markRead/markAllRead/delete/deleteAllRead) outward — it never fetches, persists,
+ *  or connects to a real-time source itself. Callers (e.g. codexly-app's NotificationService,
+ *  backed by SSE) own that and just feed the current list in. Meant to be projected inside
+ *  clx-drawer's body, same as any other content. */
+class ClxNotificationComponent {
+    _themeSvc = inject(ClxThemeService);
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    markRead = output();
+    markAllRead = output();
+    delete = output();
+    deleteAllRead = output();
+    _filter = signal('all', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
+    _style = this._themeSvc.notificationStyle;
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _resolvedSize = computed(() => this.size() ?? this._style().size, ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
+    _sizeTokens = computed(() => NOTIFICATION_SIZE_MAP[this._resolvedSize()], ...(ngDevMode ? [{ debugName: "_sizeTokens" }] : /* istanbul ignore next */ []));
+    _unreadCount = computed(() => this.items().filter(i => !i.read).length, ...(ngDevMode ? [{ debugName: "_unreadCount" }] : /* istanbul ignore next */ []));
+    _readCount = computed(() => this.items().filter(i => i.read).length, ...(ngDevMode ? [{ debugName: "_readCount" }] : /* istanbul ignore next */ []));
+    _visibleItems = computed(() => this._filter() === 'unread' ? this.items().filter(i => !i.read) : this.items(), ...(ngDevMode ? [{ debugName: "_visibleItems" }] : /* istanbul ignore next */ []));
+    _groups = computed(() => {
+        const byLabel = new Map();
+        for (const item of this._visibleItems()) {
+            const label = this._dayLabel(item.createdAt);
+            const bucket = byLabel.get(label);
+            if (bucket)
+                bucket.push(item);
+            else
+                byLabel.set(label, [item]);
+        }
+        return Array.from(byLabel, ([label, items]) => ({ label, items }));
+    }, ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    _wrapClass = computed(() => `flex flex-col ${resolveContainerRadius(this._style().radius)}`, ...(ngDevMode ? [{ debugName: "_wrapClass" }] : /* istanbul ignore next */ []));
+    _groupLabelClass = computed(() => {
+        const w = this._style().groupLabelWeight;
+        return `px-1 pt-3 pb-1.5 text-[11px] uppercase tracking-wide text-clx-text-subtle font-[${w}]`;
+    }, ...(ngDevMode ? [{ debugName: "_groupLabelClass" }] : /* istanbul ignore next */ []));
+    _linkClass = computed(() => resolveColor(this._color()).textSubtle, ...(ngDevMode ? [{ debugName: "_linkClass" }] : /* istanbul ignore next */ []));
+    _unreadRailClass = computed(() => resolveColor(this._style().unreadColor).bg, ...(ngDevMode ? [{ debugName: "_unreadRailClass" }] : /* istanbul ignore next */ []));
+    _unreadDotClass = computed(() => `w-1.5 h-1.5 rounded-full shrink-0 ${resolveColor(this._style().unreadColor).bg}`, ...(ngDevMode ? [{ debugName: "_unreadDotClass" }] : /* istanbul ignore next */ []));
+    _detailClass = computed(() => this._style().detailColor ? resolveColor(this._style().detailColor).textSubtle : 'text-clx-text-muted', ...(ngDevMode ? [{ debugName: "_detailClass" }] : /* istanbul ignore next */ []));
+    _titleClass(item) {
+        const weight = item.read ? 500 : this._style().titleWeight;
+        return `text-clx-text-label font-[${weight}]`;
+    }
+    _iconWrapClass(item) {
+        const c = resolveColor(this._severityColor(item.severity));
+        return `flex items-center justify-center rounded-lg shrink-0 ${c.bgSubtle} ${c.textSubtle} ${this._sizeTokens().iconWrap}`;
+    }
+    _defaultIcon(severity) {
+        return NOTIFICATION_SEVERITY_ICON[severity];
+    }
+    _open(item) {
+        this.itemClick.emit(item);
+        if (!item.read)
+            this.markRead.emit(item.id);
+    }
+    _countBadgeClass(tab) {
+        const active = this._filter() === tab;
+        return active
+            ? 'ml-0.5 text-[10px] font-bold tabular-nums'
+            : 'ml-0.5 text-[10px] font-bold tabular-nums text-clx-text-subtle';
+    }
+    _severityColor(severity) {
+        return this._style().severityColors[severity];
+    }
+    _dayLabel(iso) {
+        const date = new Date(iso);
+        const now = new Date();
+        const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+        const diffDays = Math.round((startOf(now) - startOf(date)) / 86_400_000);
+        if (diffDays === 0)
+            return 'Hoy';
+        if (diffDays === 1)
+            return 'Ayer';
+        if (diffDays > 1 && diffDays < 7)
+            return `Hace ${diffDays} días`;
+        return date.toLocaleDateString('es-CO', { day: 'numeric', month: 'short' });
+    }
+    _timeOf(iso) {
+        return new Date(iso).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNotificationComponent, isStandalone: true, selector: "clx-notification", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, ngImport: i0, template: `
+    <div [class]="_wrapClass()">
+      <!-- Filter -->
+      <div class="flex items-center gap-2 px-1 pb-3">
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'all' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'all' ? _color() : 'slate'"
+          (click)="_filter.set('all')">
+          Todas
+          @if (items().length) {
+            <span [class]="_countBadgeClass('all')">{{ items().length }}</span>
+          }
+        </button>
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'unread' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'unread' ? _color() : 'slate'"
+          (click)="_filter.set('unread')">
+          Sin leer
+          @if (_unreadCount() > 0) {
+            <span [class]="_countBadgeClass('unread')">{{ _unreadCount() }}</span>
+          }
+        </button>
+        <div class="flex-1"></div>
+        @if (_unreadCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+            (click)="markAllRead.emit()">
+            Marcar todo leído
+          </button>
+        }
+        @if (_readCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0 text-clx-text-subtle hover:text-red-500"
+            (click)="deleteAllRead.emit()">
+            Eliminar leídas
+          </button>
+        }
+      </div>
+
+      <!-- List -->
+      @if (_groups().length) {
+        <div class="flex flex-col">
+          @for (group of _groups(); track group.label) {
+            <p [class]="_groupLabelClass()">{{ group.label }}</p>
+            @for (item of group.items; track item.id) {
+              <div
+                class="group relative flex items-start gap-3 px-1 rounded-lg cursor-pointer hover:bg-clx-surface-2 {{ _sizeTokens().row }}"
+                role="button"
+                tabindex="0"
+                (click)="_open(item)"
+                (keydown.enter)="_open(item)">
+
+                <span class="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
+
+                <span [class]="_iconWrapClass(item)">
+                  <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" [size]="_sizeTokens().iconSize"></span>
+                </span>
+
+                <div class="flex-1 min-w-0 pl-1.5">
+                  <p class="flex items-baseline gap-1.5 {{ _sizeTokens().title }}" [class]="_titleClass(item)">
+                    @if (!item.read) {
+                      <span [class]="_unreadDotClass()"></span>
+                    }
+                    <span class="truncate">{{ item.title }}</span>
+                  </p>
+                  @if (item.detail) {
+                    <p class="mt-0.5 line-clamp-2 {{ _sizeTokens().detail }}" [class]="_detailClass()">{{ item.detail }}</p>
+                  }
+                </div>
+
+                <div class="flex flex-col items-end gap-1 shrink-0 pl-2">
+                  <span class="text-clx-text-subtle tabular-nums {{ _sizeTokens().time }}">{{ _timeOf(item.createdAt) }}</span>
+                  <button type="button"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity rounded-md p-0.5 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    aria-label="Eliminar notificación"
+                    (click)="$event.stopPropagation(); delete.emit(item.id)">
+                    <span clx-icon name="close" size="xs"></span>
+                  </button>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
+          <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
+          <p class="text-sm font-medium text-clx-text-label">
+            {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
+          </p>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNotificationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-notification',
+                    standalone: true,
+                    imports: [ClxButtonComponent, ClxIconComponent],
+                    template: `
+    <div [class]="_wrapClass()">
+      <!-- Filter -->
+      <div class="flex items-center gap-2 px-1 pb-3">
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'all' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'all' ? _color() : 'slate'"
+          (click)="_filter.set('all')">
+          Todas
+          @if (items().length) {
+            <span [class]="_countBadgeClass('all')">{{ items().length }}</span>
+          }
+        </button>
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'unread' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'unread' ? _color() : 'slate'"
+          (click)="_filter.set('unread')">
+          Sin leer
+          @if (_unreadCount() > 0) {
+            <span [class]="_countBadgeClass('unread')">{{ _unreadCount() }}</span>
+          }
+        </button>
+        <div class="flex-1"></div>
+        @if (_unreadCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+            (click)="markAllRead.emit()">
+            Marcar todo leído
+          </button>
+        }
+        @if (_readCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0 text-clx-text-subtle hover:text-red-500"
+            (click)="deleteAllRead.emit()">
+            Eliminar leídas
+          </button>
+        }
+      </div>
+
+      <!-- List -->
+      @if (_groups().length) {
+        <div class="flex flex-col">
+          @for (group of _groups(); track group.label) {
+            <p [class]="_groupLabelClass()">{{ group.label }}</p>
+            @for (item of group.items; track item.id) {
+              <div
+                class="group relative flex items-start gap-3 px-1 rounded-lg cursor-pointer hover:bg-clx-surface-2 {{ _sizeTokens().row }}"
+                role="button"
+                tabindex="0"
+                (click)="_open(item)"
+                (keydown.enter)="_open(item)">
+
+                <span class="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
+
+                <span [class]="_iconWrapClass(item)">
+                  <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" [size]="_sizeTokens().iconSize"></span>
+                </span>
+
+                <div class="flex-1 min-w-0 pl-1.5">
+                  <p class="flex items-baseline gap-1.5 {{ _sizeTokens().title }}" [class]="_titleClass(item)">
+                    @if (!item.read) {
+                      <span [class]="_unreadDotClass()"></span>
+                    }
+                    <span class="truncate">{{ item.title }}</span>
+                  </p>
+                  @if (item.detail) {
+                    <p class="mt-0.5 line-clamp-2 {{ _sizeTokens().detail }}" [class]="_detailClass()">{{ item.detail }}</p>
+                  }
+                </div>
+
+                <div class="flex flex-col items-end gap-1 shrink-0 pl-2">
+                  <span class="text-clx-text-subtle tabular-nums {{ _sizeTokens().time }}">{{ _timeOf(item.createdAt) }}</span>
+                  <button type="button"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity rounded-md p-0.5 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    aria-label="Eliminar notificación"
+                    (click)="$event.stopPropagation(); delete.emit(item.id)">
+                    <span clx-icon name="close" size="xs"></span>
+                  </button>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
+          <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
+          <p class="text-sm font-medium text-clx-text-label">
+            {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
+          </p>
+        </div>
+      }
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], markRead: [{ type: i0.Output, args: ["markRead"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], delete: [{ type: i0.Output, args: ["delete"] }], deleteAllRead: [{ type: i0.Output, args: ["deleteAllRead"] }] } });
+
 // ─── CDK overlay token (carries the resolved ref into the component) ──────────
 const CLX_ALERT_OPTIONS = new InjectionToken('CLX_ALERT_OPTIONS');
 const CLX_ALERT_RESOLVE = new InjectionToken('CLX_ALERT_RESOLVE');
@@ -12229,9 +12545,14 @@ class ClxPaginationComponent {
     // ── Inputs ─────────────────────────────────────────────────────────────────
     totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Wrapper border color — independent of `color` (the page-button/select accent). Falls back to
+     *  the theme's pagination.borderColor, NOT to `color`/primaryColor — a caller (like clx-table)
+     *  passing its own accent `[color]` must never silently override the border's own themed color. */
+    borderColor = input(undefined, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     bordered = input(undefined, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.paginationStyle().color, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _borderColor = computed(() => this.borderColor() ?? this._themeSvc.paginationStyle().borderColor, ...(ngDevMode ? [{ debugName: "_borderColor" }] : /* istanbul ignore next */ []));
     _shadow = computed(() => this.shadow() ?? this._themeSvc.paginationStyle().shadow, ...(ngDevMode ? [{ debugName: "_shadow" }] : /* istanbul ignore next */ []));
     _bordered = computed(() => this.bordered() ?? this._themeSvc.paginationStyle().bordered, ...(ngDevMode ? [{ debugName: "_bordered" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -12369,8 +12690,7 @@ class ClxPaginationComponent {
         none: '', sm: 'shadow-sm', md: 'shadow-md', lg: 'shadow-lg', xl: 'shadow-xl',
     };
     _wrapClass = computed(() => {
-        const borderColorInput = this._themeSvc.paginationStyle().borderColor;
-        const { color } = parseColorInput(this.color() ? this._color() : borderColorInput);
+        const { color } = parseColorInput(this._borderColor());
         const border = this._bordered() ? `border border-${color}-200` : '';
         const shadow = ClxPaginationComponent._SHADOW_CLASS[this._shadow()];
         return `flex flex-wrap items-center justify-between ${this._cfg().gap} bg-clx-surface rounded-lg ${border} ${shadow} px-4 py-3`.trim();
@@ -12393,7 +12713,7 @@ class ClxPaginationComponent {
         this.pageChange.emit({ page: clamped, pageSize: this.pageSize() });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPaginationComponent, isStandalone: true, selector: "clx-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPaginationComponent, isStandalone: true, selector: "clx-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div [class]="_wrapClass()">
 
       <!-- ── Info: "1 - 5 de 25 registros" ─────────────────────────────────── -->
@@ -12612,7 +12932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
 
 class ClxFilterPanelComponent {
     _themeSvc = inject(ClxThemeService);
@@ -14012,7 +14332,7 @@ class ClxTableComponent {
       </div>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "shadow", "bordered", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "borderColor", "shadow", "bordered", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, decorators: [{
             type: Component,
@@ -15635,7 +15955,7 @@ class ClxWishlistComponent {
       }
 
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "shadow", "bordered", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "borderColor", "shadow", "bordered", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "heading", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWishlistComponent, decorators: [{
             type: Component,
@@ -17061,5 +17381,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map