codexly-ui 0.10.91 → 0.10.92

package/fesm2022/codexly-ui.mjs

@@ -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 */ []));
@@ -2879,7 +2886,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 +3213,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 +3492,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 +3764,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 +4136,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 +4659,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 +4810,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 +4894,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 +4998,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 +5132,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 +5487,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 +6166,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 +6823,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 +7242,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 +7548,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 +8613,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 +9444,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 */ []));