codexly-ui 0.1.15 → 0.1.17

package/fesm2022/codexly-ui.mjs

@@ -5471,6 +5471,7 @@ class ClxAlertComponent {
     _resolve = inject(CLX_ALERT_RESOLVE);
     _animate = inject(ClxAnimateService);
     _el = inject((ElementRef));
+    _themeSvc = inject(ClxThemeService);
     _zone;
     constructor() {
         const zone = inject(NgZone, { optional: true });
@@ -5478,17 +5479,36 @@ class ClxAlertComponent {
     }
     // ─── Resolved options ─────────────────────────────────────────────────────
     get _type() { return this._opts.type ?? 'info'; }
+    get _isConfirm() { return this._type === 'confirm'; }
     _icon = signal(ALERT_ICON_MAP[this._type], ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
-    _iconBg = signal(ALERT_ICON_BG_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
-    _iconColor = signal(ALERT_ICON_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
-    _progressColor = signal(ALERT_PROGRESS_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _title = signal(this._opts.title ?? '', ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
     _message = signal(this._opts.message ?? '', ...(ngDevMode ? [{ debugName: "_message" }] : /* istanbul ignore next */ []));
     _showCancel = signal(this._opts.showCancelButton ?? this._opts.type === 'confirm', ...(ngDevMode ? [{ debugName: "_showCancel" }] : /* istanbul ignore next */ []));
+    _iconBg = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_BG_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bgSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconBg" }] : /* istanbul ignore next */ []));
+    _iconColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_ICON_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).textSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _progressColor = computed(() => {
+        if (!this._isConfirm)
+            return ALERT_PROGRESS_COLOR_MAP[this._type];
+        return resolveColor(this._themeSvc.config().primaryColor).bg;
+    }, ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _confirmText = signal(this._opts.confirmButton?.text ?? 'Aceptar', ...(ngDevMode ? [{ debugName: "_confirmText" }] : /* istanbul ignore next */ []));
-    _confirmColor = signal(this._opts.confirmButton?.color ?? ALERT_CONFIRM_COLOR_MAP[this._type], ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
+    _confirmColor = computed(() => {
+        if (this._opts.confirmButton?.color)
+            return this._opts.confirmButton.color;
+        if (this._isConfirm)
+            return this._themeSvc.config().primaryColor;
+        return ALERT_CONFIRM_COLOR_MAP[this._type];
+    }, ...(ngDevMode ? [{ debugName: "_confirmColor" }] : /* istanbul ignore next */ []));
     _cancelText = signal(this._opts.cancelButton?.text ?? 'Cancelar', ...(ngDevMode ? [{ debugName: "_cancelText" }] : /* istanbul ignore next */ []));
-    _cancelColor = signal(this._opts.cancelButton?.color ?? 'slate', ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
+    _cancelColor = computed(() => this._opts.cancelButton?.color ?? this._themeSvc.config().secondaryColor, ...(ngDevMode ? [{ debugName: "_cancelColor" }] : /* istanbul ignore next */ []));
     _cancelVariant = signal(this._opts.cancelButton?.variant ?? 'ghost', ...(ngDevMode ? [{ debugName: "_cancelVariant" }] : /* istanbul ignore next */ []));
     // ─── Timer state ─────────────────────────────────────────────────────────
     _timerTotal = signal(this._opts.timer ?? 0, ...(ngDevMode ? [{ debugName: "_timerTotal" }] : /* istanbul ignore next */ []));
@@ -12042,10 +12062,9 @@ class ClxMenuItemComponent {
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
-    _idleIconCls = computed(() => NAV_ITEM_IDLE, ...(ngDevMode ? [{ debugName: "_idleIconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
         const hover = resolveColor(this._resolvedColor()).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${hover}`;
+        return `${NAV_ITEM_BASE} ${this._geom()} ${hover}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
@@ -12065,10 +12084,10 @@ class ClxMenuItemComponent {
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : _idleIconCls()"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -12078,10 +12097,10 @@ class ClxMenuItemComponent {
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : _idleIconCls()"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </button>
     }
@@ -12103,10 +12122,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : _idleIconCls()"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </a>
     } @else {
@@ -12116,10 +12135,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : _idleIconCls()"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
         }
       </button>
     }
@@ -12169,7 +12188,7 @@ class ClxMenuComponent {
                 return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
         }
-        return `${base} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
+        return `${base} ${t.hoverBgMuted}`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
@@ -12192,7 +12211,7 @@ class ClxMenuComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -12212,7 +12231,7 @@ class ClxMenuComponent {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -12255,7 +12274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"
@@ -12275,7 +12294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
-          <span class="flex-1 text-left truncate">{{ label() }}</span>
+          <span class="flex-1 text-left truncate" [class]="active() ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
           <span
             clx-icon
             name="expand_more"