codexly-ui 0.12.28 → 0.12.30

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]
             }] } });
@@ -13403,20 +13433,22 @@ class ClxFilterPanelComponent {
     <!-- Header -->
     <div [class]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
       <div class="flex items-center gap-2">
-        @if (collapsible()) {
-          <span clx-icon [name]="panelCollapsed() ? 'expand_more' : 'expand_less'" size="sm" class="text-clx-text-subtle"></span>
-        }
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
           <span [class]="_badgeCls()">{{ _activeCount() }}</span>
         }
       </div>
-      @if (_activeCount() > 0 && !panelCollapsed()) {
-        <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="$event.stopPropagation(); _reset()">
-          Limpiar
-        </button>
-      }
+      <div class="flex items-center gap-1">
+        @if (_activeCount() > 0 && !panelCollapsed()) {
+          <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="$event.stopPropagation(); _reset()">
+            Limpiar
+          </button>
+        }
+        @if (collapsible()) {
+          <span clx-icon [name]="panelCollapsed() ? 'expand_more' : 'expand_less'" size="sm" class="text-clx-text-subtle"></span>
+        }
+      </div>
     </div>
 
     <!-- Fields -->
@@ -13542,20 +13574,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <!-- Header -->
     <div [class]="_headerClass()" (click)="collapsible() ? _togglePanel() : null">
       <div class="flex items-center gap-2">
-        @if (collapsible()) {
-          <span clx-icon [name]="panelCollapsed() ? 'expand_more' : 'expand_less'" size="sm" class="text-clx-text-subtle"></span>
-        }
         <span clx-icon name="filter_list" size="sm" class="text-clx-text-subtle"></span>
         <span class="text-sm font-semibold text-clx-text-label">Filtros</span>
         @if (_activeCount() > 0) {
           <span [class]="_badgeCls()">{{ _activeCount() }}</span>
         }
       </div>
-      @if (_activeCount() > 0 && !panelCollapsed()) {
-        <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="$event.stopPropagation(); _reset()">
-          Limpiar
-        </button>
-      }
+      <div class="flex items-center gap-1">
+        @if (_activeCount() > 0 && !panelCollapsed()) {
+          <button clx-button type="button" variant="ghost" color="slate" size="sm" (click)="$event.stopPropagation(); _reset()">
+            Limpiar
+          </button>
+        }
+        @if (collapsible()) {
+          <span clx-icon [name]="panelCollapsed() ? 'expand_more' : 'expand_less'" size="sm" class="text-clx-text-subtle"></span>
+        }
+      </div>
     </div>
 
     <!-- Fields -->