codexly-ui 0.19.7 → 0.19.9

package/fesm2022/codexly-ui.mjs

@@ -690,6 +690,7 @@ class ClxThemeService {
     /** Resolved border color for ClxCardComponent (outlined/elevated variants) — falls back to
      *  primaryColor when unset. Per-instance `[color]` input on clx-card still takes precedence. */
     cardBorderColor = computed(() => this._config().cardBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardBorderColor" }] : /* istanbul ignore next */ []));
+    cardIconColor = computed(() => this._config().cardIconColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardIconColor" }] : /* istanbul ignore next */ []));
     /** Resolved divider/border color for ClxListComponent — falls back to primaryColor when unset.
      *  Per-instance `[color]` input on clx-list still takes precedence. */
     listBorderColor = computed(() => this._config().listBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "listBorderColor" }] : /* istanbul ignore next */ []));
@@ -1624,6 +1625,11 @@ class ClxCardComponent {
     /** Optional secondary line under headerTitle. */
     headerSubtitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.cardBorderColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Header icon badge: explicit [color] → theme cardIconColor → primaryColor (same fallback chain
+     *  as clx-collapse / the form controls). */
+    _iconColor = computed(() => this.color() ?? this._themeSvc.cardIconColor(), ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _iconWrapCls = computed(() => `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${resolveColor(this._iconColor()).bgMuted}`, ...(ngDevMode ? [{ debugName: "_iconWrapCls" }] : /* istanbul ignore next */ []));
+    _iconCls = computed(() => resolveColor(this._iconColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _titleClass = computed(() => `text-sm font-[${this._themeSvc.cardTitleStyle().weight}] text-clx-text-label leading-tight truncate`, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _headerActionsSlot = contentChild(ClxCardHeaderActionsDirective, ...(ngDevMode ? [{ debugName: "_headerActionsSlot" }] : /* istanbul ignore next */ []));
@@ -1679,8 +1685,8 @@ class ClxCardComponent {
       <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <div class="flex items-center gap-3 min-w-0">
           @if (icon()) {
-            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
-              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            <div [class]="_iconWrapCls()">
+              <span clx-icon [name]="icon()!" size="sm" [class]="_iconCls()"></span>
             </div>
           }
           <div class="flex flex-col min-w-0">
@@ -1731,8 +1737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <div class="flex items-center gap-3 min-w-0">
           @if (icon()) {
-            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
-              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            <div [class]="_iconWrapCls()">
+              <span clx-icon [name]="icon()!" size="sm" [class]="_iconCls()"></span>
             </div>
           }
           <div class="flex flex-col min-w-0">
@@ -1822,7 +1828,9 @@ class ClxCollapseComponent {
     dividerThickness = input(2, ...(ngDevMode ? [{ debugName: "dividerThickness" }] : /* istanbul ignore next */ []));
     /** Two-way bindable: [(expanded)]="..." */
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Explicit [color] → theme collapseColor → primaryColor (same fallback chain as clx-input's
+     *  formControls.input). */
+    _color = computed(() => this.color() ?? this._themeSvc.config().collapseColor ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => COLLAPSE_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => {
@@ -11852,6 +11860,8 @@ class ClxProfileComponent {
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     menuItems = input([], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     signOutLabel = input('Cerrar sesión', ...(ngDevMode ? [{ debugName: "signOutLabel" }] : /* istanbul ignore next */ []));
+    /** Small line under the sign-out item — e.g. the app version. Hidden when empty. */
+    footerText = input('', ...(ngDevMode ? [{ debugName: "footerText" }] : /* istanbul ignore next */ []));
     // ── Outputs ─────────────────────────────────────────────────────────────────
     menuAction = output();
     signOut = output();
@@ -11901,7 +11911,7 @@ class ClxProfileComponent {
         this._close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProfileComponent, isStandalone: true, selector: "clx-profile", inputs: { firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, lastName: { classPropertyName: "lastName", publicName: "lastName", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, signOutLabel: { classPropertyName: "signOutLabel", publicName: "signOutLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuAction: "menuAction", signOut: "signOut" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProfileComponent, isStandalone: true, selector: "clx-profile", inputs: { firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, lastName: { classPropertyName: "lastName", publicName: "lastName", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, signOutLabel: { classPropertyName: "signOutLabel", publicName: "signOutLabel", isSignal: true, isRequired: false, transformFunction: null }, footerText: { classPropertyName: "footerText", publicName: "footerText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuAction: "menuAction", signOut: "signOut" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
     <!-- ── Trigger ─────────────────────────────────────────────────────────── -->
     <button
       #origin="cdkOverlayOrigin"
@@ -11968,6 +11978,13 @@ class ClxProfileComponent {
             (itemClick)="_onSignOut()" />
         </div>
 
+        <!-- App version / build — small, below sign out -->
+        @if (footerText()) {
+          <div class="border-t border-clx-border-soft px-4 py-2 text-center text-[11px] text-clx-text-subtle select-text">
+            {{ footerText() }}
+          </div>
+        }
+
       </div>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxAvatarComponent, selector: "clx-avatar", inputs: ["src", "initials", "iconName", "color", "size", "shape", "alt"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxMenuItemComponent, selector: "clx-menu-item", inputs: ["label", "icon", "active", "style", "nested", "collapsed", "routerLink", "routerLinkActiveOptions"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -12045,6 +12062,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             (itemClick)="_onSignOut()" />
         </div>
 
+        <!-- App version / build — small, below sign out -->
+        @if (footerText()) {
+          <div class="border-t border-clx-border-soft px-4 py-2 text-center text-[11px] text-clx-text-subtle select-text">
+            {{ footerText() }}
+          </div>
+        }
+
       </div>
     </ng-template>
   `,
@@ -12052,7 +12076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative inline-flex items-center' },
                 }]
-        }], propDecorators: { firstName: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstName", required: false }] }], lastName: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastName", required: false }] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], signOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "signOutLabel", required: false }] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], signOut: [{ type: i0.Output, args: ["signOut"] }] } });
+        }], propDecorators: { firstName: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstName", required: false }] }], lastName: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastName", required: false }] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], signOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "signOutLabel", required: false }] }], footerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerText", required: false }] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], signOut: [{ type: i0.Output, args: ["signOut"] }] } });
 
 const DRAWER_SIZE_MAP = {
     sm: 'w-[320px]',