codexly-ui 0.12.29 → 0.12.31

package/fesm2022/codexly-ui.mjs

@@ -637,6 +637,19 @@ class ClxThemeService {
             underlineColor: t?.underlineColor ?? this._config().primaryColor,
         };
     }, ...(ngDevMode ? [{ debugName: "tabsStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxWizardComponent — activeTextColor/underlineColor (horizontal) and
+     *  stepColor (vertical) each fall back to formControls.wizard (then primaryColor) independently
+     *  when unset. Per-instance inputs on clx-wizard still take precedence over this theme-wide
+     *  default. */
+    wizardStyle = computed(() => {
+        const t = this._config().wizard;
+        const fallback = this.formControlColor('wizard');
+        return {
+            activeTextColor: t?.activeTextColor ?? fallback,
+            underlineColor: t?.underlineColor ?? fallback,
+            stepColor: t?.stepColor ?? fallback,
+        };
+    }, ...(ngDevMode ? [{ debugName: "wizardStyle" }] : /* istanbul ignore next */ []));
     /** Resolved style for ClxNotificationComponent — severity colors fall back to built-in
      *  green/amber/sky/red, unreadColor to primaryColor, borderColor to listBorderColor then
      *  primaryColor, radius to the app-wide borderRadius. Per-instance inputs on clx-notification
@@ -9744,8 +9757,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 class ClxWizardComponent {
     _themeSvc = inject(ClxThemeService);
     // ── Inputs ─────────────────────────────────────────────────────────────────
+    /** Legacy single-color override — still the shared fallback for activeTextColor/underlineColor/
+     *  stepColor when none of those is set, same convention as clx-tabs' own clxColor. */
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.formControlColor('wizard'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Horizontal only — active step label/icon color in the clx-tabs indicator. Falls back to
+     *  `color`, then the theme's wizard.activeTextColor (then formControls.wizard/primaryColor). */
+    activeTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeTextColor" }] : /* istanbul ignore next */ []));
+    /** Horizontal only — active step's bottom underline color, independent of activeTextColor.
+     *  Falls back to `color`, then the theme's wizard.underlineColor. */
+    underlineColor = input(undefined, ...(ngDevMode ? [{ debugName: "underlineColor" }] : /* istanbul ignore next */ []));
+    /** Vertical only — completed/active step circle + connector fill color. Falls back to `color`,
+     *  then the theme's wizard.stepColor. */
+    stepColor = input(undefined, ...(ngDevMode ? [{ debugName: "stepColor" }] : /* istanbul ignore next */ []));
+    _style = this._themeSvc.wizardStyle;
+    _activeTextColor = computed(() => this.activeTextColor() ?? this.color() ?? this._style().activeTextColor, ...(ngDevMode ? [{ debugName: "_activeTextColor" }] : /* istanbul ignore next */ []));
+    _underlineColor = computed(() => this.underlineColor() ?? this.color() ?? this._style().underlineColor, ...(ngDevMode ? [{ debugName: "_underlineColor" }] : /* istanbul ignore next */ []));
+    _stepColor = computed(() => this.stepColor() ?? this.color() ?? this._style().stepColor, ...(ngDevMode ? [{ debugName: "_stepColor" }] : /* 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 */ []));
@@ -9780,7 +9808,7 @@ class ClxWizardComponent {
         const step = this._steps[this._currentIndex()];
         return step ? step.isValid() : true;
     }, ...(ngDevMode ? [{ debugName: "_currentStepValid" }] : /* istanbul ignore next */ []));
-    _connectorFillColor = computed(() => resolveColor(this._color()).bg, ...(ngDevMode ? [{ debugName: "_connectorFillColor" }] : /* istanbul ignore next */ []));
+    _connectorFillColor = computed(() => resolveColor(this._stepColor()).bg, ...(ngDevMode ? [{ debugName: "_connectorFillColor" }] : /* istanbul ignore next */ []));
     _currentIndexStr = computed(() => String(this._currentIndex()), ...(ngDevMode ? [{ debugName: "_currentIndexStr" }] : /* istanbul ignore next */ []));
     _tabItems = computed(() => this._steps.map((step, i) => ({
         id: String(i),
@@ -9847,7 +9875,7 @@ class ClxWizardComponent {
     _circleClass(i) {
         const base = 'relative z-10 flex items-center justify-center w-9 h-9 rounded-full transition-colors duration-200 shrink-0 focus:outline-none';
         const status = this._stepStatus(i);
-        const color = this._color();
+        const color = this._stepColor();
         const ptr = !this._isTabDisabled(i) ? 'cursor-pointer' : 'cursor-default';
         const t = resolveColor(color);
         if (status === 'completed')
@@ -9859,14 +9887,15 @@ class ClxWizardComponent {
         return `${base} border-2 border-clx-border text-clx-text-subtle bg-clx-surface ${ptr}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWizardComponent, isStandalone: true, selector: "clx-wizard", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeTextColor: { classPropertyName: "activeTextColor", publicName: "activeTextColor", isSignal: true, isRequired: false, transformFunction: null }, underlineColor: { classPropertyName: "underlineColor", publicName: "underlineColor", isSignal: true, isRequired: false, transformFunction: null }, stepColor: { classPropertyName: "stepColor", publicName: "stepColor", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
     <div [class]="_rootClass()">
 
       <!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
       @if (orientation() === 'horizontal') {
         <clx-tabs
           [tabs]="_tabItems()"
-          [clxColor]="_color()"
+          [activeTextColor]="_activeTextColor()"
+          [underlineColor]="_underlineColor()"
           [activeTab]="_currentIndexStr()"
           (activeTabChange)="_onTabChange($event)"
         />
@@ -9974,7 +10003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       @if (orientation() === 'horizontal') {
         <clx-tabs
           [tabs]="_tabItems()"
-          [clxColor]="_color()"
+          [activeTextColor]="_activeTextColor()"
+          [underlineColor]="_underlineColor()"
           [activeTab]="_currentIndexStr()"
           (activeTabChange)="_onTabChange($event)"
         />
@@ -10072,7 +10102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
     </div>
   `, styles: ["@keyframes clx-wizard-fade-slide{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.clx-wizard-step-enter{animation:clx-wizard-fade-slide .22s cubic-bezier(.4,0,.2,1) both}@keyframes clx-wizard-fill{0%{width:0%}to{width:100%}}.clx-wizard-connector-fill{animation:clx-wizard-fill .3s ease both}clx-step[data-active=false]{display:none}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activeTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTextColor", required: false }] }], underlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineColor", required: false }] }], stepColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepColor", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
                 type: ContentChildren,
                 args: [ClxStepComponent]
             }] } });
@@ -13484,21 +13514,21 @@ class ClxFilterPanelComponent {
                 </clx-radio-group>
               }
 
-              <!-- Range slider — min -->
+              <!-- Range — min/max -->
               @if (field.type === 'range') {
                 @let rv = _getRangeValue(field);
-                <div class="space-y-3">
-                  <clx-slider
-                    [label]="'Mín: ' + (field.unit ?? '') + rv.min"
-                    [activeColor]="_color()"
-                    [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
+                <div class="grid grid-cols-2 gap-2">
+                  <clx-number
+                    [label]="'Mín' + (field.unit ? ' (' + field.unit + ')' : '')"
+                    [color]="_color()"
+                    [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
                     [ngModel]="rv.min"
                     (ngModelChange)="_setRange(field.key, $event, rv.max, field)"
                     size="sm" />
-                  <clx-slider
-                    [label]="'Máx: ' + (field.unit ?? '') + rv.max"
-                    [activeColor]="_color()"
-                    [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
+                  <clx-number
+                    [label]="'Máx' + (field.unit ? ' (' + field.unit + ')' : '')"
+                    [color]="_color()"
+                    [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
                     [ngModel]="rv.max"
                     (ngModelChange)="_setRange(field.key, rv.min, $event, field)"
                     size="sm" />
@@ -13532,14 +13562,14 @@ class ClxFilterPanelComponent {
       </div>
     }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxSliderComponent, selector: "clx-slider", inputs: ["label", "hint", "errorMessage", "activeColor", "size", "min", "max", "step", "showTooltip", "showMinMax", "marks", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "component", type: ClxRadioGroupComponent, selector: "clx-radio-group", inputs: ["color", "variant", "size", "direction", "disabled"] }, { kind: "component", type: ClxRadioComponent, selector: "clx-radio", inputs: ["value", "label", "color", "variant", "size"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFilterPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-filter-panel',
                     standalone: true,
-                    imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxCheckboxComponent, ClxSliderComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
+                    imports: [FormsModule, ClxIconComponent, ClxButtonComponent, ClxCheckboxComponent, ClxNumberComponent, ClxRadioGroupComponent, ClxRadioComponent, ClxSelectComponent],
                     template: `
     <!-- Header -->
     <div [class]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
@@ -13625,21 +13655,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 </clx-radio-group>
               }
 
-              <!-- Range slider — min -->
+              <!-- Range — min/max -->
               @if (field.type === 'range') {
                 @let rv = _getRangeValue(field);
-                <div class="space-y-3">
-                  <clx-slider
-                    [label]="'Mín: ' + (field.unit ?? '') + rv.min"
-                    [activeColor]="_color()"
-                    [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
+                <div class="grid grid-cols-2 gap-2">
+                  <clx-number
+                    [label]="'Mín' + (field.unit ? ' (' + field.unit + ')' : '')"
+                    [color]="_color()"
+                    [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
                     [ngModel]="rv.min"
                     (ngModelChange)="_setRange(field.key, $event, rv.max, field)"
                     size="sm" />
-                  <clx-slider
-                    [label]="'Máx: ' + (field.unit ?? '') + rv.max"
-                    [activeColor]="_color()"
-                    [min]="field.min ?? 0" [max]="field.max ?? 100" [step]="field.step ?? 1"
+                  <clx-number
+                    [label]="'Máx' + (field.unit ? ' (' + field.unit + ')' : '')"
+                    [color]="_color()"
+                    [min]="field.min ?? null" [max]="field.max ?? null" [step]="field.step ?? 1"
                     [ngModel]="rv.max"
                     (ngModelChange)="_setRange(field.key, rv.min, $event, field)"
                     size="sm" />