codexly-ui 0.10.91 → 0.10.93

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, ViewChildren, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, model, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, ViewChildren, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, contentChildren, ContentChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -571,6 +571,13 @@ class ClxThemeService {
             weight: override?.weight ?? defaultWeight,
         };
     }
+    /** Resolved accent color for a single form control zone (see ClxFormControlsTheme) — falls
+     *  back to primaryColor when that control has no override of its own. Every form component
+     *  (clx-input, clx-select, clx-checkbox, ...) calls this instead of reading primaryColor
+     *  directly, so each can be pinned to a different accent independently. */
+    formControlColor(key) {
+        return this._config().formControls?.[key] ?? this._config().primaryColor;
+    }
     /** Resolved style for ClxPageHeaderComponent's title — falls back to the default
      *  text-clx-text-label color (no override) / 2xl / 600 */
     pageHeaderTitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderTitle, '2xl', 600), ...(ngDevMode ? [{ debugName: "pageHeaderTitleStyle" }] : /* istanbul ignore next */ []));
@@ -1587,6 +1594,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _headerActionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderActionsDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
+const COLLAPSE_SIZE_MAP = {
+    sm: { header: 'px-3 py-2.5', label: 'text-sm', icon: 'xs', chevron: 'xs' },
+    md: { header: 'px-4 py-3', label: 'text-sm', icon: 'sm', chevron: 'sm' },
+    lg: { header: 'px-5 py-4', label: 'text-base', icon: 'md', chevron: 'md' },
+};
+
+// ── Text ──────────────────────────────────────────────────────────────────────
+const CLX_TEXT_LABEL = 'text-clx-text-label'; // field labels
+const CLX_TEXT_HINT = 'text-clx-text-subtle'; // hints, helper text
+const CLX_TEXT_DISABLED = 'text-clx-text-subtle'; // disabled text
+const CLX_TEXT_INPUT = 'text-clx-text-label'; // active input text
+const CLX_TEXT_TITLE = 'text-clx-text-label'; // page/section titles
+const CLX_TEXT_SUBTITLE = 'text-clx-text-subtle'; // secondary descriptions
+const CLX_TEXT_IDLE = 'text-clx-text-subtle'; // nav idle, placeholders
+const CLX_TEXT_BODY = 'text-clx-text-muted'; // body / message text
+const CLX_TEXT_HEADING = 'text-clx-text-label'; // modal/alert headings
+const CLX_TEXT_OPTION = 'text-clx-text-label'; // dropdown options
+// ── Borders ───────────────────────────────────────────────────────────────────
+const CLX_BORDER_DEFAULT = 'border-clx-border'; // default input/card border
+const CLX_BORDER_MEDIUM = 'border-clx-border'; // separator, dividers
+// ── Backgrounds ───────────────────────────────────────────────────────────────
+const CLX_BG_SURFACE = 'bg-clx-surface'; // input/dropdown background
+const CLX_BG_DISABLED = 'bg-clx-surface-2'; // disabled input/textarea
+const CLX_BG_SECTION = 'bg-clx-surface-2'; // card/modal header+footer
+const CLX_BG_ICON_WRAP = 'bg-clx-surface-3'; // empty-state icon wrapper
+const CLX_BG_ADDON = 'bg-clx-surface-3'; // prefix/suffix text addon
+// ── Placeholder ───────────────────────────────────────────────────────────────
+// Fixed color independent of --clx-text-subtle — see _theme.css for why.
+const CLX_PLACEHOLDER = 'placeholder:text-clx-placeholder';
+// ── Disabled borders ──────────────────────────────────────────────────────────
+const CLX_BORDER_DISABLED = 'border-clx-border';
+// ── Addon (prefix/suffix text) ────────────────────────────────────────────────
+const CLX_ADDON_BORDER = 'border-clx-border';
+const CLX_ADDON_TEXT = 'text-clx-text-muted';
+// ── Option states ─────────────────────────────────────────────────────────────
+const CLX_OPTION_DISABLED = 'text-clx-text-faint'; // disabled dropdown option
+
+class ClxCollapseComponent {
+    _themeSvc = inject(ClxThemeService);
+    // ── Inputs ─────────────────────────────────────────────────────────────────
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Adds a top border so a standalone collapse (not nested inside a card body) reads as its
+     *  own bordered block — leave false when stacking several inside one clx-card, where the
+     *  parent already handles separation between sections. */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* 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 */ []));
+    _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(() => {
+        if (this.disabled())
+            return CLX_TEXT_DISABLED;
+        return resolveColor(this._color()).textSubtle;
+    }, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
+    _chevronCls = computed(() => {
+        const base = 'shrink-0 transition-transform duration-300';
+        return this.disabled() ? `${base} ${CLX_TEXT_DISABLED}` : `${base} text-clx-text-subtle`;
+    }, ...(ngDevMode ? [{ debugName: "_chevronCls" }] : /* istanbul ignore next */ []));
+    _labelClass = computed(() => {
+        const s = this._sizeConfig();
+        const color = this.disabled() ? CLX_TEXT_DISABLED : CLX_TEXT_LABEL;
+        return `${s.label} font-semibold ${color}`;
+    }, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+    _headerClass = computed(() => {
+        const s = this._sizeConfig();
+        const border = this.bordered() ? 'border border-clx-border rounded-lg' : '';
+        const cursor = this.disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
+        const hover = this.disabled() ? '' : resolveColor(this._color()).hoverBgMuted;
+        return `w-full flex items-center gap-2.5 ${s.header} ${border} ${hover} transition-colors duration-200 outline-none select-none`;
+    }, ...(ngDevMode ? [{ debugName: "_headerClass" }] : /* istanbul ignore next */ []));
+    _bodyClass = computed(() => {
+        const s = this._sizeConfig();
+        return `${s.header} pt-0`;
+    }, ...(ngDevMode ? [{ debugName: "_bodyClass" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled())
+            return;
+        this.expanded.update(v => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCollapseComponent, isStandalone: true, selector: "clx-collapse", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "flex flex-col w-full" }, ngImport: i0, template: `
+    <button type="button" [class]="_headerClass()" [disabled]="disabled()"
+      [attr.aria-expanded]="expanded()" (click)="toggle()">
+      @if (icon()) {
+        <span clx-icon [name]="icon()!" [size]="_sizeConfig().icon" [class]="_iconCls()"></span>
+      }
+      <span class="flex-1 text-left truncate" [class]="_labelClass()">{{ label() }}</span>
+      <span clx-icon name="expand_more" [size]="_sizeConfig().chevron"
+        [class]="_chevronCls()"
+        [style.transform]="expanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+      </span>
+    </button>
+
+    <div class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+      [style.grid-template-rows]="expanded() ? '1fr' : '0fr'">
+      <div class="overflow-hidden">
+        <div [class]="_bodyClass()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCollapseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-collapse',
+                    standalone: true,
+                    imports: [ClxIconComponent],
+                    template: `
+    <button type="button" [class]="_headerClass()" [disabled]="disabled()"
+      [attr.aria-expanded]="expanded()" (click)="toggle()">
+      @if (icon()) {
+        <span clx-icon [name]="icon()!" [size]="_sizeConfig().icon" [class]="_iconCls()"></span>
+      }
+      <span class="flex-1 text-left truncate" [class]="_labelClass()">{{ label() }}</span>
+      <span clx-icon name="expand_more" [size]="_sizeConfig().chevron"
+        [class]="_chevronCls()"
+        [style.transform]="expanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+      </span>
+    </button>
+
+    <div class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+      [style.grid-template-rows]="expanded() ? '1fr' : '0fr'">
+      <div class="overflow-hidden">
+        <div [class]="_bodyClass()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex flex-col w-full' },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────
 const LIST_VARIANT_SHAPE = {
@@ -1987,37 +2136,6 @@ const STEPPER_SIZE_MAP = {
     lg: { circle: 'w-11 h-11', iconSize: 'md', label: 'text-sm', desc: 'text-xs', connector: 'h-1' },
 };
 
-// ── Text ──────────────────────────────────────────────────────────────────────
-const CLX_TEXT_LABEL = 'text-clx-text-label'; // field labels
-const CLX_TEXT_HINT = 'text-clx-text-subtle'; // hints, helper text
-const CLX_TEXT_DISABLED = 'text-clx-text-subtle'; // disabled text
-const CLX_TEXT_INPUT = 'text-clx-text-label'; // active input text
-const CLX_TEXT_TITLE = 'text-clx-text-label'; // page/section titles
-const CLX_TEXT_SUBTITLE = 'text-clx-text-subtle'; // secondary descriptions
-const CLX_TEXT_IDLE = 'text-clx-text-subtle'; // nav idle, placeholders
-const CLX_TEXT_BODY = 'text-clx-text-muted'; // body / message text
-const CLX_TEXT_HEADING = 'text-clx-text-label'; // modal/alert headings
-const CLX_TEXT_OPTION = 'text-clx-text-label'; // dropdown options
-// ── Borders ───────────────────────────────────────────────────────────────────
-const CLX_BORDER_DEFAULT = 'border-clx-border'; // default input/card border
-const CLX_BORDER_MEDIUM = 'border-clx-border'; // separator, dividers
-// ── Backgrounds ───────────────────────────────────────────────────────────────
-const CLX_BG_SURFACE = 'bg-clx-surface'; // input/dropdown background
-const CLX_BG_DISABLED = 'bg-clx-surface-2'; // disabled input/textarea
-const CLX_BG_SECTION = 'bg-clx-surface-2'; // card/modal header+footer
-const CLX_BG_ICON_WRAP = 'bg-clx-surface-3'; // empty-state icon wrapper
-const CLX_BG_ADDON = 'bg-clx-surface-3'; // prefix/suffix text addon
-// ── Placeholder ───────────────────────────────────────────────────────────────
-// Fixed color independent of --clx-text-subtle — see _theme.css for why.
-const CLX_PLACEHOLDER = 'placeholder:text-clx-placeholder';
-// ── Disabled borders ──────────────────────────────────────────────────────────
-const CLX_BORDER_DISABLED = 'border-clx-border';
-// ── Addon (prefix/suffix text) ────────────────────────────────────────────────
-const CLX_ADDON_BORDER = 'border-clx-border';
-const CLX_ADDON_TEXT = 'text-clx-text-muted';
-// ── Option states ─────────────────────────────────────────────────────────────
-const CLX_OPTION_DISABLED = 'text-clx-text-faint'; // disabled dropdown option
-
 class ClxStepperComponent {
     _themeSvc = inject(ClxThemeService);
     steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
@@ -2879,7 +2997,7 @@ class ClxInputComponent {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('input'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
     suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
@@ -3206,7 +3324,7 @@ class ClxOtpComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Autofocus the first box on init */
     autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('otp'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => OTP_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* istanbul ignore next */ []));
@@ -3485,7 +3603,7 @@ class ClxTextareaComponent {
     _onChange = () => { };
     _onTouched = () => { };
     // ── Computed shortcuts ───────────────────────────────────────────────────
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('textarea'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _sizeCfg = computed(() => TEXTAREA_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeCfg" }] : /* istanbul ignore next */ []));
     _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* istanbul ignore next */ []));
     // ── Classes ──────────────────────────────────────────────────────────────
@@ -3757,7 +3875,7 @@ class ClxNumberComponent {
     _isAtMax = computed(() => this.max() !== null && this._value() >= this.max(), ...(ngDevMode ? [{ debugName: "_isAtMax" }] : /* istanbul ignore next */ []));
     // ── Computed classes ─────────────────────────────────────────────────────
     _themeSvc = inject(ClxThemeService);
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('number'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => NUMBER_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
@@ -4129,7 +4247,7 @@ class ClxSelectComponent {
     // ── DI ─────────────────────────────────────────────────────────────────────
     _themeSvc = inject(ClxThemeService);
     _ngControl = inject(NgControl, { optional: true, self: true });
-    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
+    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.formControlColor('select'), ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     _el = inject((ElementRef));
     _sso = inject(ScrollStrategyOptions);
     _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
@@ -4652,7 +4770,7 @@ const CHECKBOX_SIZE_MAP = {
 class ClxCheckboxComponent {
     _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('checkbox'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
@@ -4803,7 +4921,7 @@ const CLX_RADIO_GROUP = new InjectionToken('CLX_RADIO_GROUP');
 class ClxRadioGroupComponent {
     _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this._themeSvc.formControlColor('radio'), ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
@@ -4887,7 +5005,7 @@ class ClxRadioComponent {
     _themeSvc = inject(ClxThemeService);
     _checked = computed(() => this._group ? this._group._value() === this.value() : false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
     _isDisabled = computed(() => this._group?.isDisabled() ?? false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._group?.resolvedColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._group?.resolvedColor() ?? this._themeSvc.formControlColor('radio'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _variant = computed(() => this.variant() ?? this._group?.variant() ?? 'solid', ...(ngDevMode ? [{ debugName: "_variant" }] : /* istanbul ignore next */ []));
     _size = computed(() => this.size() ?? this._group?.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => RADIO_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
@@ -4991,7 +5109,7 @@ const SWITCH_SIZE_MAP = {
 class ClxSwitchComponent {
     _themeSvc = inject(ClxThemeService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('switch'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -5125,7 +5243,7 @@ class ClxSliderComponent {
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input('Valor fuera de rango', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
-    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
+    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.formControlColor('slider'), ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
@@ -5480,7 +5598,7 @@ class ClxUploadComponent {
     /** Max file size in bytes. 0 = no limit. */
     maxFileSize = input(0, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('upload'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -6159,7 +6277,7 @@ class ClxColorPickerComponent {
     format = input('hex', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
-    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
+    _activeColor = computed(() => this.activeColor() ?? this._themeSvc.formControlColor('colorpicker'), ...(ngDevMode ? [{ debugName: "_activeColor" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     errorMessage = input('Este campo es requerido', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -6816,7 +6934,7 @@ class ClxDatepickerComponent {
         this._isOpen();
         return this._el.nativeElement.getBoundingClientRect().width;
     }, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('datepicker'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
     _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
@@ -7235,7 +7353,7 @@ class ClxTimepickerComponent {
         this._isOpen();
         return this._el.nativeElement.getBoundingClientRect().width;
     }, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('timepicker'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _labelClass = computed(() => `${this._sizeConfig().label} ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
     _hintClass = computed(() => `${this._sizeConfig().hint} ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
     _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
@@ -7541,7 +7659,7 @@ class ClxDateRangePickerComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Selecciona un rango', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('dateRangePicker'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -8606,7 +8724,7 @@ class ClxEditorComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Escribe aquí...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('editor'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _editorSize = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_editorSize" }] : /* istanbul ignore next */ []));
     status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -9437,7 +9555,7 @@ class ClxWizardComponent {
     _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('wizard'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     linear = input(true, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
     prevLabel = input('Anterior', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
@@ -16725,5 +16843,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map