codexly-ui 0.12.47 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/codexly-ui.mjs +20 -2
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/codexly-ui.d.ts +25 -14
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -10446,6 +10446,16 @@ class ClxWizardComponent {
|
|
|
10446
10446
|
prevLabel = input('Anterior', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
|
|
10447
10447
|
nextLabel = input('Siguiente', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
|
|
10448
10448
|
finishLabel = input('Finalizar', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
|
|
10449
|
+
/** Which step to land on when the wizard first renders — for restoring an in-progress flow (e.g.
|
|
10450
|
+
* a saved draft, or state re-hydrated after an external redirect) rather than always starting
|
|
10451
|
+
* fresh at step 0. Applied once, in ngAfterContentInit, and clamped to a valid index; deliberately
|
|
10452
|
+
* bypasses the `linear` guard that goTo()/next() enforce for user-driven navigation — that guard
|
|
10453
|
+
* exists to stop a customer from skipping ahead of steps they haven't filled in yet, which doesn't
|
|
10454
|
+
* apply here: the caller is asserting those earlier steps are ALREADY valid (e.g. their own
|
|
10455
|
+
* signals were just re-prefilled from a backend order), not trying to skip past them. Consumers
|
|
10456
|
+
* are responsible for that guarantee — this input trusts it rather than re-validating each
|
|
10457
|
+
* skipped step, since isValid() reflects the CURRENT signal state, which the caller controls. */
|
|
10458
|
+
initialStep = input(undefined, ...(ngDevMode ? [{ debugName: "initialStep" }] : /* istanbul ignore next */ []));
|
|
10449
10459
|
// ── Outputs ────────────────────────────────────────────────────────────────
|
|
10450
10460
|
stepChange = output();
|
|
10451
10461
|
finish = output();
|
|
@@ -10458,12 +10468,20 @@ class ClxWizardComponent {
|
|
|
10458
10468
|
// ── Lifecycle ──────────────────────────────────────────────────────────────
|
|
10459
10469
|
ngAfterContentInit() {
|
|
10460
10470
|
this._steps = this._stepQuery.toArray();
|
|
10471
|
+
this._applyInitialStep();
|
|
10461
10472
|
this._syncActiveAttrs();
|
|
10462
10473
|
this._stepQuery.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
10463
10474
|
this._steps = this._stepQuery.toArray();
|
|
10464
10475
|
this._syncActiveAttrs();
|
|
10465
10476
|
});
|
|
10466
10477
|
}
|
|
10478
|
+
_applyInitialStep() {
|
|
10479
|
+
const requested = this.initialStep();
|
|
10480
|
+
if (requested == null)
|
|
10481
|
+
return;
|
|
10482
|
+
const clamped = Math.min(Math.max(requested, 0), this._lastIndex());
|
|
10483
|
+
this._currentIndex.set(clamped);
|
|
10484
|
+
}
|
|
10467
10485
|
_syncActiveAttrs() {
|
|
10468
10486
|
this._steps.forEach((step, i) => {
|
|
10469
10487
|
step.nativeEl.setAttribute('data-active', String(i === this._currentIndex()));
|
|
@@ -10554,7 +10572,7 @@ class ClxWizardComponent {
|
|
|
10554
10572
|
return `${base} border-2 border-clx-border text-clx-text-subtle bg-clx-surface ${ptr}`;
|
|
10555
10573
|
}
|
|
10556
10574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10557
|
-
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: `
|
|
10575
|
+
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 } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
|
|
10558
10576
|
<div [class]="_rootClass()">
|
|
10559
10577
|
|
|
10560
10578
|
<!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
|
|
@@ -10769,7 +10787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
|
|
|
10769
10787
|
</div>
|
|
10770
10788
|
</div>
|
|
10771
10789
|
`, 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"] }]
|
|
10772
|
-
}], 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: [{
|
|
10790
|
+
}], 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 }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
|
|
10773
10791
|
type: ContentChildren,
|
|
10774
10792
|
args: [ClxStepComponent]
|
|
10775
10793
|
}] } });
|