codexly-ui 0.11.7 → 0.11.8

package/fesm2022/codexly-ui.mjs

@@ -641,7 +641,9 @@ class ClxThemeService {
                 error: n?.severityColors?.error ?? this._config().dangerColor,
             },
             unreadColor: n?.unreadColor ?? this._config().primaryColor,
+            tabsColor: n?.tabsColor ?? this._config().primaryColor,
             size: n?.size ?? 'md',
+            border: n?.border ?? true,
             borderColor: n?.borderColor ?? this._config().listBorderColor ?? this._config().primaryColor,
             radius: n?.radius ?? this._config().borderRadius,
             titleWeight: n?.titleWeight ?? 600,
@@ -5235,7 +5237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 const SWITCH_SIZE_MAP = {
     xs: { track: 'w-7 h-4', thumb: 'w-3 h-3', translate: 'translate-x-3', label: 'text-xs' },
-    sm: { track: 'w-9 h-5', thumb: 'w-4 h-4', translate: 'translate-x-4', label: 'text-xs' },
+    sm: { track: 'w-9 h-5', thumb: 'w-4 h-4', translate: 'translate-x-4', label: 'text-sm' },
     md: { track: 'w-12 h-6', thumb: 'w-5 h-5', translate: 'translate-x-6', label: 'text-sm' },
     lg: { track: 'w-14 h-7', thumb: 'w-6 h-6', translate: 'translate-x-7', label: 'text-base' },
 };
@@ -11365,27 +11367,39 @@ const NOTIFICATION_SEVERITY_ICON = {
 class ClxNotificationComponent {
     _themeSvc = inject(ClxThemeService);
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Optional third tab that filters items by ClxNotificationItem.category — e.g.
      *  `{ id: 'orders', label: 'Órdenes' }`. Omit for just Todas/Sin leer. */
     categoryTab = input(undefined, ...(ngDevMode ? [{ debugName: "categoryTab" }] : /* istanbul ignore next */ []));
-    // ── Trigger button overrides — the bell is a real clx-button under the hood, so any of its
-    // own look-and-feel inputs can be pinned here without needing a separate trigger component. ──
-    triggerVariant = input('ghost', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
-    triggerSize = input('md', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
-    triggerIcon = input('notifications', ...(ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
+    // ── Bell button — a real clx-button under the hood, so its own look-and-feel can be pinned
+    // per instance without needing a separate trigger component. Each falls back to the
+    // notification theme block, then a sensible built-in default. ──────────────────────────────
+    buttonColor = input(undefined, ...(ngDevMode ? [{ debugName: "buttonColor" }] : /* istanbul ignore next */ []));
+    buttonVariant = input('ghost', ...(ngDevMode ? [{ debugName: "buttonVariant" }] : /* istanbul ignore next */ []));
+    buttonSize = input('md', ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
+    buttonIcon = input('notifications', ...(ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []));
     /** Unread-count badge color — falls back to the theme's notification.unreadColor (then
-     *  primaryColor) when unset, same precedence as every other per-instance override in this
-     *  library (instance input > theme block > primaryColor). */
+     *  primaryColor) when unset. */
     badgeColor = input(undefined, ...(ngDevMode ? [{ debugName: "badgeColor" }] : /* istanbul ignore next */ []));
+    // ── Panel accents — independent from the bell button's own color. ──────────────────────────
+    /** clx-tabs (Todas/Sin leer/...) + "Marcar todo leído" link accent — falls back to the theme's
+     *  notification.tabsColor (then primaryColor) when unset. */
+    tabsColor = input(undefined, ...(ngDevMode ? [{ debugName: "tabsColor" }] : /* istanbul ignore next */ []));
+    /** Whether the floating panel shows its outer border — falls back to the theme's
+     *  notification.border (then true) when unset. */
+    border = input(undefined, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    /** Panel wrapper border color — falls back to the theme's notification.borderColor when unset. */
+    borderColor = input(undefined, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
     itemClick = output();
     markRead = output();
     markAllRead = output();
     delete = output();
     deleteAllRead = output();
     _style = this._themeSvc.notificationStyle;
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _buttonColor = computed(() => this.buttonColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_buttonColor" }] : /* istanbul ignore next */ []));
     _badgeColor = computed(() => this.badgeColor() ?? this._style().unreadColor, ...(ngDevMode ? [{ debugName: "_badgeColor" }] : /* istanbul ignore next */ []));
+    _tabsColor = computed(() => this.tabsColor() ?? this._style().tabsColor, ...(ngDevMode ? [{ debugName: "_tabsColor" }] : /* istanbul ignore next */ []));
+    _border = computed(() => this.border() ?? this._style().border, ...(ngDevMode ? [{ debugName: "_border" }] : /* istanbul ignore next */ []));
+    _borderColor = computed(() => this.borderColor() ?? this._style().borderColor, ...(ngDevMode ? [{ debugName: "_borderColor" }] : /* istanbul ignore next */ []));
     // ── CDK Overlay ─────────────────────────────────────────────────────────────
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
@@ -11395,7 +11409,10 @@ class ClxNotificationComponent {
     ];
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     _filter = signal('all', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
-    _panelClass = computed(() => `w-96 bg-clx-surface shadow-xl border border-clx-border-soft overflow-hidden mt-2 flex flex-col ${resolveContainerRadius(this._style().radius)}`, ...(ngDevMode ? [{ debugName: "_panelClass" }] : /* istanbul ignore next */ []));
+    _panelClass = computed(() => {
+        const borderCls = this._border() ? `border ${resolveColor(this._borderColor()).borderLight}` : 'border border-transparent';
+        return `w-96 bg-clx-surface shadow-xl ${borderCls} overflow-hidden mt-2 flex flex-col ${resolveContainerRadius(this._style().radius)}`;
+    }, ...(ngDevMode ? [{ debugName: "_panelClass" }] : /* 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 */ []));
     _tabs = computed(() => {
@@ -11433,7 +11450,6 @@ class ClxNotificationComponent {
         const w = this._style().groupLabelWeight;
         return `px-2 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 */ []));
@@ -11479,17 +11495,17 @@ class ClxNotificationComponent {
         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 }, categoryTab: { classPropertyName: "categoryTab", publicName: "categoryTab", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
+    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 }, categoryTab: { classPropertyName: "categoryTab", publicName: "categoryTab", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, tabsColor: { classPropertyName: "tabsColor", publicName: "tabsColor", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
     <!-- Trigger -->
     <button clx-button
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
       type="button"
-      [variant]="triggerVariant()"
-      [color]="_color()"
-      [size]="triggerSize()"
+      [variant]="buttonVariant()"
+      [color]="_buttonColor()"
+      [size]="buttonSize()"
       shape="circle"
-      [icon]="triggerIcon()"
+      [icon]="buttonIcon()"
       [iconOnly]="true"
       [badge]="_unreadCount() > 0 ? (_unreadCount() > 9 ? '9+' : _unreadCount()) : undefined"
       [badgeColor]="_badgeColor()"
@@ -11514,7 +11530,7 @@ class ClxNotificationComponent {
           <p class="text-base font-semibold text-clx-text-label">Notificaciones</p>
           <div class="flex items-center gap-3">
             @if (_unreadCount() > 0) {
-              <button clx-button type="button" variant="ghost" [color]="_color()" size="xs"
+              <button clx-button type="button" variant="ghost" [color]="_tabsColor()" size="xs"
                 (click)="markAllRead.emit()">
                 Marcar todo leído
               </button>
@@ -11526,7 +11542,7 @@ class ClxNotificationComponent {
 
         <!-- Tabs -->
         <div class="px-4">
-          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_color()" />
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_tabsColor()" />
         </div>
 
         <!-- List -->
@@ -11599,11 +11615,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
       type="button"
-      [variant]="triggerVariant()"
-      [color]="_color()"
-      [size]="triggerSize()"
+      [variant]="buttonVariant()"
+      [color]="_buttonColor()"
+      [size]="buttonSize()"
       shape="circle"
-      [icon]="triggerIcon()"
+      [icon]="buttonIcon()"
       [iconOnly]="true"
       [badge]="_unreadCount() > 0 ? (_unreadCount() > 9 ? '9+' : _unreadCount()) : undefined"
       [badgeColor]="_badgeColor()"
@@ -11628,7 +11644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <p class="text-base font-semibold text-clx-text-label">Notificaciones</p>
           <div class="flex items-center gap-3">
             @if (_unreadCount() > 0) {
-              <button clx-button type="button" variant="ghost" [color]="_color()" size="xs"
+              <button clx-button type="button" variant="ghost" [color]="_tabsColor()" size="xs"
                 (click)="markAllRead.emit()">
                 Marcar todo leído
               </button>
@@ -11640,7 +11656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
         <!-- Tabs -->
         <div class="px-4">
-          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_color()" />
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_tabsColor()" />
         </div>
 
         <!-- List -->
@@ -11704,7 +11720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative inline-flex items-center' },
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], categoryTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTab", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", 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"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], categoryTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTab", required: false }] }], buttonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonColor", required: false }] }], buttonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonVariant", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], buttonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIcon", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], tabsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsColor", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", 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');