codexly-ui 0.12.33 → 0.12.35

package/fesm2022/codexly-ui.mjs

@@ -664,7 +664,13 @@ class ClxThemeService {
                 error: n?.severityColors?.error ?? this._config().dangerColor,
             },
             unreadColor: n?.unreadColor ?? this._config().primaryColor,
-            tabsColor: n?.tabsColor ?? this._config().primaryColor,
+            // Falls back to the general "Pestañas" theme (tabs.activeTextColor/underlineColor) before
+            // primaryColor — the notification panel's own Todas/Sin leer tabs are still clx-tabs under
+            // the hood, so they should read the same theming a host already configured for every other
+            // clx-tabs instance, unless notification.tabsColor/activeTextColor/underlineColor override
+            // it specifically.
+            tabsColor: n?.tabsColor ?? this.tabsStyle().activeTextColor,
+            tabsUnderlineColor: n?.tabsUnderlineColor ?? this.tabsStyle().underlineColor,
             size: n?.size ?? 'md',
             border: n?.border ?? true,
             borderColor: n?.borderColor ?? this._config().listBorderColor ?? this._config().primaryColor,
@@ -11460,9 +11466,14 @@ class ClxNotificationComponent {
      *  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. */
+    /** clx-tabs (Todas/Sin leer/...) active tab text/icon color + "Marcar todo leído" link accent —
+     *  falls back to the theme's notification.tabsColor (which itself falls back to the general
+     *  "Pestañas" theme's tabs.activeTextColor, then primaryColor) when unset. */
     tabsColor = input(undefined, ...(ngDevMode ? [{ debugName: "tabsColor" }] : /* istanbul ignore next */ []));
+    /** clx-tabs underline color, independent of tabsColor — falls back to the theme's
+     *  notification.tabsUnderlineColor (which itself falls back to tabs.underlineColor, then
+     *  primaryColor) when unset. */
+    tabsUnderlineColor = input(undefined, ...(ngDevMode ? [{ debugName: "tabsUnderlineColor" }] : /* 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 */ []));
@@ -11477,6 +11488,7 @@ class ClxNotificationComponent {
     _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 */ []));
+    _tabsUnderlineColor = computed(() => this.tabsUnderlineColor() ?? this._style().tabsUnderlineColor, ...(ngDevMode ? [{ debugName: "_tabsUnderlineColor" }] : /* 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 ─────────────────────────────────────────────────────────────
@@ -11574,7 +11586,7 @@ 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 }, 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: `
+    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 }, tabsUnderlineColor: { classPropertyName: "tabsUnderlineColor", publicName: "tabsUnderlineColor", 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"
@@ -11621,7 +11633,8 @@ class ClxNotificationComponent {
 
         <!-- Tabs -->
         <div class="px-4">
-          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_tabsColor()" />
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter"
+            [activeTextColor]="_tabsColor()" [underlineColor]="_tabsUnderlineColor()" />
         </div>
 
         <!-- List -->
@@ -11735,7 +11748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
         <!-- Tabs -->
         <div class="px-4">
-          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_tabsColor()" />
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter"
+            [activeTextColor]="_tabsColor()" [underlineColor]="_tabsUnderlineColor()" />
         </div>
 
         <!-- List -->
@@ -11799,7 +11813,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 }] }], 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"] }] } });
+        }], 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 }] }], tabsUnderlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsUnderlineColor", 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');
@@ -13428,7 +13442,7 @@ class ClxFilterPanelComponent {
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
-          <span clx-badge variant="solid" [color]="_color()" size="xs">{{ _activeCount() }}</span>
+          <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _activeCount() }}</span>
         }
       </div>
       <div class="flex items-center gap-1">
@@ -13457,7 +13471,7 @@ class ClxFilterPanelComponent {
             <span>{{ field.label }}</span>
             <div class="flex items-center gap-1.5">
               @if (_hasValue(field.key)) {
-                <span clx-badge variant="solid" [color]="_color()" size="xs">{{ _valueLabel(field) }}</span>
+                <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _valueLabel(field) }}</span>
               }
               <span clx-icon
                     [name]="_isCollapsed(field.key) ? 'expand_more' : 'expand_less'"
@@ -13569,7 +13583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
-          <span clx-badge variant="solid" [color]="_color()" size="xs">{{ _activeCount() }}</span>
+          <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _activeCount() }}</span>
         }
       </div>
       <div class="flex items-center gap-1">
@@ -13598,7 +13612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <span>{{ field.label }}</span>
             <div class="flex items-center gap-1.5">
               @if (_hasValue(field.key)) {
-                <span clx-badge variant="solid" [color]="_color()" size="xs">{{ _valueLabel(field) }}</span>
+                <span clx-badge variant="solid" [color]="_color()" size="sm">{{ _valueLabel(field) }}</span>
               }
               <span clx-icon
                     [name]="_isCollapsed(field.key) ? 'expand_more' : 'expand_less'"