codexly-ui 0.11.3 → 0.11.5

package/fesm2022/codexly-ui.mjs

@@ -11369,6 +11369,11 @@ class ClxNotificationComponent {
     /** 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 */ []));
     itemClick = output();
     markRead = output();
     markAllRead = output();
@@ -11385,10 +11390,6 @@ class ClxNotificationComponent {
     ];
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
     _filter = signal('all', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
-    _ringClass = computed(() => {
-        const t = resolveColor(this._color());
-        return `focus-visible:${t.ringBase}`;
-    }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* 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 */ []));
     _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 */ []));
@@ -11473,20 +11474,25 @@ 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 } }, 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 }, 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 } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
     <!-- Trigger -->
-    <button
+    <button clx-button
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
       type="button"
+      [variant]="triggerVariant()"
+      [color]="_color()"
+      [size]="triggerSize()"
+      shape="circle"
+      [icon]="triggerIcon()"
+      [iconOnly]="true"
       aria-label="Notificaciones"
-      class="relative flex items-center justify-center w-9 h-9 rounded-full text-clx-text-muted hover:bg-clx-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer"
-      [class]="_ringClass()"
+      class="relative"
       (click)="_toggle()">
-      <span clx-icon name="notifications" size="sm"></span>
       @if (_unreadCount() > 0) {
-        <span clx-badge [color]="_style().unreadColor" variant="solid" size="xs" shape="circle"
-          class="absolute -top-0.5 -right-0.5">{{ _unreadCount() > 9 ? '9+' : _unreadCount() }}</span>
+        <span clx-badge [color]="_style().unreadColor" variant="solid" size="xs" shape="circle" [positioned]="true">
+          {{ _unreadCount() > 9 ? '9+' : _unreadCount() }}
+        </span>
       }
     </button>
 
@@ -11507,7 +11513,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 type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+              <button clx-button type="button" variant="ghost" [color]="_color()" size="xs"
                 (click)="markAllRead.emit()">
                 Marcar todo leído
               </button>
@@ -11554,12 +11560,11 @@ class ClxNotificationComponent {
                     <p class="mt-1 text-xs text-clx-text-subtle tabular-nums">{{ _timeOf(item.createdAt) }}</p>
                   </div>
 
-                  <button type="button"
-                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0 rounded-md p-1 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                  <button clx-button type="button" variant="ghost" color="red" shape="circle" size="xs"
+                    icon="close" [iconOnly]="true"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0"
                     aria-label="Eliminar notificación"
-                    (click)="$event.stopPropagation(); delete.emit(item.id)">
-                    <span clx-icon name="close" size="xs"></span>
-                  </button>
+                    (click)="$event.stopPropagation(); delete.emit(item.id)"></button>
                 </div>
               }
             }
@@ -11589,18 +11594,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [OverlayModule, ClxIconComponent, ClxBadgeComponent, ClxButtonComponent, ClxPageEmptyComponent, ClxTabsComponent],
                     template: `
     <!-- Trigger -->
-    <button
+    <button clx-button
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
       type="button"
+      [variant]="triggerVariant()"
+      [color]="_color()"
+      [size]="triggerSize()"
+      shape="circle"
+      [icon]="triggerIcon()"
+      [iconOnly]="true"
       aria-label="Notificaciones"
-      class="relative flex items-center justify-center w-9 h-9 rounded-full text-clx-text-muted hover:bg-clx-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer"
-      [class]="_ringClass()"
+      class="relative"
       (click)="_toggle()">
-      <span clx-icon name="notifications" size="sm"></span>
       @if (_unreadCount() > 0) {
-        <span clx-badge [color]="_style().unreadColor" variant="solid" size="xs" shape="circle"
-          class="absolute -top-0.5 -right-0.5">{{ _unreadCount() > 9 ? '9+' : _unreadCount() }}</span>
+        <span clx-badge [color]="_style().unreadColor" variant="solid" size="xs" shape="circle" [positioned]="true">
+          {{ _unreadCount() > 9 ? '9+' : _unreadCount() }}
+        </span>
       }
     </button>
 
@@ -11621,7 +11631,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 type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+              <button clx-button type="button" variant="ghost" [color]="_color()" size="xs"
                 (click)="markAllRead.emit()">
                 Marcar todo leído
               </button>
@@ -11668,12 +11678,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     <p class="mt-1 text-xs text-clx-text-subtle tabular-nums">{{ _timeOf(item.createdAt) }}</p>
                   </div>
 
-                  <button type="button"
-                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0 rounded-md p-1 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                  <button clx-button type="button" variant="ghost" color="red" shape="circle" size="xs"
+                    icon="close" [iconOnly]="true"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0"
                     aria-label="Eliminar notificación"
-                    (click)="$event.stopPropagation(); delete.emit(item.id)">
-                    <span clx-icon name="close" size="xs"></span>
-                  </button>
+                    (click)="$event.stopPropagation(); delete.emit(item.id)"></button>
                 </div>
               }
             }
@@ -11698,7 +11707,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 }] }], 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 }] }], 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 }] }], 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');