codexly-ui 0.12.47 → 0.13.1

package/fesm2022/codexly-ui.mjs

@@ -10446,6 +10446,23 @@ class ClxWizardComponent {
     prevLabel = input('Anterior', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
     nextLabel = input('Siguiente', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     finishLabel = input('Finalizar', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
+    /** Which step to land on when the wizard first renders — for restoring an in-progress flow (e.g.
+     *  a saved draft, or state re-hydrated after an external redirect) rather than always starting
+     *  fresh at step 0. Applied once, in ngAfterContentInit, and clamped to a valid index; deliberately
+     *  bypasses the `linear` guard that goTo()/next() enforce for user-driven navigation — that guard
+     *  exists to stop a customer from skipping ahead of steps they haven't filled in yet, which doesn't
+     *  apply here: the caller is asserting those earlier steps are ALREADY valid (e.g. their own
+     *  signals were just re-prefilled from a backend order), not trying to skip past them. Consumers
+     *  are responsible for that guarantee — this input trusts it rather than re-validating each
+     *  skipped step, since isValid() reflects the CURRENT signal state, which the caller controls. */
+    initialStep = input(undefined, ...(ngDevMode ? [{ debugName: "initialStep" }] : /* istanbul ignore next */ []));
+    /** Hides the built-in "Finalizar" button on the LAST step only (every other step's own "Siguiente"
+     *  button is unaffected) — for a caller that needs its own custom action there instead (e.g. a
+     *  payment gateway's own branded button rendered inside that step's own projected content, which
+     *  must trigger the exact same submit logic the wizard's own (finish) output would have, so the
+     *  step's own isValid still gates whether that custom button is meaningful to show/enable — this
+     *  input only removes the wizard's OWN redundant generic button, nothing about validation). */
+    hideFinishButton = input(false, ...(ngDevMode ? [{ debugName: "hideFinishButton" }] : /* istanbul ignore next */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     stepChange = output();
     finish = output();
@@ -10458,12 +10475,20 @@ class ClxWizardComponent {
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     ngAfterContentInit() {
         this._steps = this._stepQuery.toArray();
+        this._applyInitialStep();
         this._syncActiveAttrs();
         this._stepQuery.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this._steps = this._stepQuery.toArray();
             this._syncActiveAttrs();
         });
     }
+    _applyInitialStep() {
+        const requested = this.initialStep();
+        if (requested == null)
+            return;
+        const clamped = Math.min(Math.max(requested, 0), this._lastIndex());
+        this._currentIndex.set(clamped);
+    }
     _syncActiveAttrs() {
         this._steps.forEach((step, i) => {
             step.nativeEl.setAttribute('data-active', String(i === this._currentIndex()));
@@ -10554,7 +10579,7 @@ 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 }, 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: `
+    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 }, initialStep: { classPropertyName: "initialStep", publicName: "initialStep", isSignal: true, isRequired: false, transformFunction: null }, hideFinishButton: { classPropertyName: "hideFinishButton", publicName: "hideFinishButton", 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 ═══════════════════════════════ -->
@@ -10643,7 +10668,7 @@ class ClxWizardComponent {
               [disabled]="!_currentStepValid()"
               (click)="next()"
             >{{ nextLabel() }}</button>
-          } @else {
+          } @else if (!hideFinishButton()) {
             <button
               clx-button
               type="button"
@@ -10752,7 +10777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               [disabled]="!_currentStepValid()"
               (click)="next()"
             >{{ nextLabel() }}</button>
-          } @else {
+          } @else if (!hideFinishButton()) {
             <button
               clx-button
               type="button"
@@ -10769,7 +10794,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 }] }], 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: [{
+        }], 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 }] }], initialStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStep", required: false }] }], hideFinishButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFinishButton", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
                 type: ContentChildren,
                 args: [ClxStepComponent]
             }] } });