codexly-ui 0.12.46 → 0.13.0

package/fesm2022/codexly-ui.mjs

@@ -3484,6 +3484,443 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], suffixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixText", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
 
+/** Luhn checksum + brand detection are pure functions, reusable outside the component (e.g. a
+ *  parent FormGroup wiring its own cross-field validator) — kept separate from the component
+ *  class itself, same reasoning as any other framework-agnostic utility in this library. */
+const ClxCardValidators = {
+    luhn(digits) {
+        if (!/^\d+$/.test(digits))
+            return false;
+        let sum = 0;
+        let shouldDouble = false;
+        for (let i = digits.length - 1; i >= 0; i--) {
+            let d = Number(digits[i]);
+            if (shouldDouble) {
+                d *= 2;
+                if (d > 9)
+                    d -= 9;
+            }
+            sum += d;
+            shouldDouble = !shouldDouble;
+        }
+        return digits.length > 0 && sum % 10 === 0;
+    },
+};
+/** Prefix rules ordered so the most specific range is checked before its broader superset would
+ *  otherwise misclassify it (none overlap here, but future additions should preserve this). */
+function detectClxCardBrand(digits) {
+    if (/^4/.test(digits))
+        return 'visa';
+    if (/^5[1-5]/.test(digits) || /^2(2[2-9]|[3-6]\d|7[01]|720)/.test(digits))
+        return 'mastercard';
+    if (/^3[47]/.test(digits))
+        return 'amex';
+    return 'unknown';
+}
+
+const CLX_CARD_BRAND_LABEL = {
+    visa: 'VISA',
+    mastercard: 'MASTERCARD',
+    amex: 'AMEX',
+    unknown: '',
+};
+let _clxCardNumberInputIdCounter = 0;
+/** Plain text input for a card's PAN — groups digits into 4-digit blocks as the customer types,
+ *  detects the brand (Visa/Mastercard/Amex) by BIN prefix purely to show its label (no network
+ *  call, no lookup), and exposes a Luhn-valid boolean so a consuming FormGroup can wire its own
+ *  validator without importing anything beyond ClxCardValidators. Knows nothing about any payment
+ *  provider — it is a generic card-number field, reusable by any app that ever needs one. */
+class ClxCardNumberInputComponent {
+    _themeSvc = inject(ClxThemeService);
+    // ── Inputs ───────────────────────────────────────────────────────────────
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('0000 0000 0000 0000', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('cardNumber'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* 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 */ []));
+    /** Initial value for standalone use (without FormControl) — raw digits, no spaces. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disabled state for standalone use (without FormControl) */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Emits the detected brand every time it changes — a consuming form can show its own brand
+     *  logo elsewhere in the page without re-deriving the detection itself. */
+    brandChange = output();
+    // ── Internal state ───────────────────────────────────────────────────────
+    _inputId = `clx-card-number-input-${++_clxCardNumberInputIdCounter}`;
+    /** Raw digits only (no spaces) — this is the value handed to the FormControl / ControlValueAccessor. */
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cvaConnected = false;
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _valueEffect = effect(() => {
+        const v = this.value();
+        if (!this._cvaConnected)
+            untracked(() => this._value.set(v));
+    }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
+    _brandEffect = effect(() => this.brandChange.emit(this._brand()), ...(ngDevMode ? [{ debugName: "_brandEffect" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    // ── Computed ─────────────────────────────────────────────────────────────
+    _brand = computed(() => detectClxCardBrand(this._value()), ...(ngDevMode ? [{ debugName: "_brand" }] : /* istanbul ignore next */ []));
+    _brandLabel = computed(() => CLX_CARD_BRAND_LABEL[this._brand()], ...(ngDevMode ? [{ debugName: "_brandLabel" }] : /* istanbul ignore next */ []));
+    /** Digits grouped into 4-character blocks for display only — the underlying FormControl value
+     *  (see writeValue/_handleInput) never contains the spaces. */
+    _displayValue = computed(() => this._value().replace(/(.{4})/g, '$1 ').trim(), ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    _sizeConfig = computed(() => INPUT_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
+    _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* 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 */ []));
+    _wrapperClass = computed(() => 'relative', ...(ngDevMode ? [{ debugName: "_wrapperClass" }] : /* istanbul ignore next */ []));
+    _inputClass = computed(() => {
+        const size = this._sizeConfig();
+        const statusCfg = this._statusCfg();
+        const pl = size.padDefaultL;
+        const pr = size.padRight;
+        const base = `w-full ${resolveRadius(this._themeSvc.config().borderRadius)} border ${size.input} ${pl} ${pr} outline-none transition-[border-color,box-shadow] duration-200 tracking-wider`;
+        if (this._disabled()) {
+            return `${base} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed ${CLX_TEXT_DISABLED} ${CLX_PLACEHOLDER}`;
+        }
+        const ring = this.status() !== 'default' ? statusCfg.ring : resolveColor(this._color()).focusDirect;
+        return `${base} ${CLX_BG_SURFACE} ${statusCfg.border} ${ring} ${CLX_TEXT_INPUT} ${CLX_PLACEHOLDER}`;
+    }, ...(ngDevMode ? [{ debugName: "_inputClass" }] : /* istanbul ignore next */ []));
+    _suffixIconWrapCls = computed(() => {
+        const size = this._sizeConfig();
+        return `absolute ${size.iconRight} top-1/2 -translate-y-1/2 pointer-events-none ${CLX_TEXT_IDLE} flex items-center`;
+    }, ...(ngDevMode ? [{ debugName: "_suffixIconWrapCls" }] : /* istanbul ignore next */ []));
+    _brandLabelClass = computed(() => {
+        const size = this._sizeConfig();
+        return `absolute ${size.iconRight} top-1/2 -translate-y-1/2 pointer-events-none ${CLX_TEXT_IDLE} text-xs font-semibold tracking-wide`;
+    }, ...(ngDevMode ? [{ debugName: "_brandLabelClass" }] : /* istanbul ignore next */ []));
+    _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
+    // ── CVA ──────────────────────────────────────────────────────────────────
+    writeValue(val) {
+        this._cvaConnected = true;
+        this._value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this._cvaDisabled.set(disabled);
+    }
+    // ── Handlers ─────────────────────────────────────────────────────────────
+    _handleInput(event) {
+        const digits = event.target.value.replace(/\D/g, '').slice(0, 19);
+        this._value.set(digits);
+        this._onChange(digits);
+    }
+    _handleBlur() {
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardNumberInputComponent, isStandalone: true, selector: "clx-card-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { brandChange: "brandChange" }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ClxCardNumberInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="_inputId" [class]="_labelClass()">{{ label() }}</label>
+    }
+
+    <div [class]="_wrapperClass()">
+      <input
+        [id]="_inputId"
+        type="text"
+        inputmode="numeric"
+        [placeholder]="placeholder()"
+        [disabled]="_disabled()"
+        [value]="_displayValue()"
+        [class]="_inputClass()"
+        (input)="_handleInput($event)"
+        (blur)="_handleBlur()"
+      />
+
+      @if (status() !== 'default') {
+        <div [class]="_suffixIconWrapCls()" [style.color]="_statusCfg().iconColor">
+          <span clx-icon [name]="_statusCfg().iconName" [size]="_sizeConfig().iconSize"></span>
+        </div>
+      } @else if (_brand() !== 'unknown') {
+        <span [class]="_brandLabelClass()">{{ _brandLabel() }}</span>
+      } @else {
+        <div [class]="_suffixIconWrapCls()">
+          <span clx-icon name="credit_card" [size]="_sizeConfig().iconSize"></span>
+        </div>
+      }
+    </div>
+
+    @if (statusMessage() && status() !== 'default') {
+      <p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardNumberInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-card-number-input',
+                    standalone: true,
+                    imports: [ClxIconComponent],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClxCardNumberInputComponent),
+                            multi: true,
+                        },
+                    ],
+                    template: `
+    @if (label()) {
+      <label [for]="_inputId" [class]="_labelClass()">{{ label() }}</label>
+    }
+
+    <div [class]="_wrapperClass()">
+      <input
+        [id]="_inputId"
+        type="text"
+        inputmode="numeric"
+        [placeholder]="placeholder()"
+        [disabled]="_disabled()"
+        [value]="_displayValue()"
+        [class]="_inputClass()"
+        (input)="_handleInput($event)"
+        (blur)="_handleBlur()"
+      />
+
+      @if (status() !== 'default') {
+        <div [class]="_suffixIconWrapCls()" [style.color]="_statusCfg().iconColor">
+          <span clx-icon [name]="_statusCfg().iconName" [size]="_sizeConfig().iconSize"></span>
+        </div>
+      } @else if (_brand() !== 'unknown') {
+        <span [class]="_brandLabelClass()">{{ _brandLabel() }}</span>
+      } @else {
+        <div [class]="_suffixIconWrapCls()">
+          <span clx-icon name="credit_card" [size]="_sizeConfig().iconSize"></span>
+        </div>
+      }
+    </div>
+
+    @if (statusMessage() && status() !== 'default') {
+      <p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex flex-col gap-1.5',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], brandChange: [{ type: i0.Output, args: ["brandChange"] }] } });
+
+let _clxCardExpiryInputIdCounter = 0;
+/** Plain text input for a card's expiry date in MM/YY form — auto-inserts the "/" as the customer
+ *  types and exposes the raw "MMYY" digits (no slash) as the FormControl value, same convention
+ *  Wompi's own tokenization endpoint expects for exp_month/exp_year split apart. Knows nothing
+ *  about any payment provider — a generic expiry field, reusable by any app that ever needs one. */
+class ClxCardExpiryInputComponent {
+    _themeSvc = inject(ClxThemeService);
+    // ── Inputs ───────────────────────────────────────────────────────────────
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('MM/AA', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.formControlColor('cardExpiry'), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* 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 */ []));
+    /** Initial value for standalone use (without FormControl) — raw "MMYY" digits, no slash. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disabled state for standalone use (without FormControl) */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // ── Internal state ───────────────────────────────────────────────────────
+    _inputId = `clx-card-expiry-input-${++_clxCardExpiryInputIdCounter}`;
+    /** Raw "MMYY" digits (max 4, no slash) — this is the value handed to the FormControl. */
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cvaConnected = false;
+    _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
+    _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _valueEffect = effect(() => {
+        const v = this.value();
+        if (!this._cvaConnected)
+            untracked(() => this._value.set(v));
+    }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    // ── Computed ─────────────────────────────────────────────────────────────
+    /** "MMYY" -> "MM/YY" for display only — the underlying FormControl value never has the slash. */
+    _displayValue = computed(() => {
+        const v = this._value();
+        return v.length > 2 ? `${v.slice(0, 2)}/${v.slice(2)}` : v;
+    }, ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    _sizeConfig = computed(() => INPUT_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
+    _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* 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 */ []));
+    _wrapperClass = computed(() => 'relative', ...(ngDevMode ? [{ debugName: "_wrapperClass" }] : /* istanbul ignore next */ []));
+    _inputClass = computed(() => {
+        const size = this._sizeConfig();
+        const statusCfg = this._statusCfg();
+        const pl = size.padDefaultL;
+        const hasSuffix = this.status() !== 'default';
+        const pr = hasSuffix ? size.padRight : size.padDefaultR;
+        const base = `w-full ${resolveRadius(this._themeSvc.config().borderRadius)} border ${size.input} ${pl} ${pr} outline-none transition-[border-color,box-shadow] duration-200`;
+        if (this._disabled()) {
+            return `${base} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} cursor-not-allowed ${CLX_TEXT_DISABLED} ${CLX_PLACEHOLDER}`;
+        }
+        const ring = this.status() !== 'default' ? statusCfg.ring : resolveColor(this._color()).focusDirect;
+        return `${base} ${CLX_BG_SURFACE} ${statusCfg.border} ${ring} ${CLX_TEXT_INPUT} ${CLX_PLACEHOLDER}`;
+    }, ...(ngDevMode ? [{ debugName: "_inputClass" }] : /* istanbul ignore next */ []));
+    _suffixIconWrapCls = computed(() => {
+        const size = this._sizeConfig();
+        return `absolute ${size.iconRight} top-1/2 -translate-y-1/2 pointer-events-none flex items-center`;
+    }, ...(ngDevMode ? [{ debugName: "_suffixIconWrapCls" }] : /* istanbul ignore next */ []));
+    _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
+    // ── CVA ──────────────────────────────────────────────────────────────────
+    writeValue(val) {
+        this._cvaConnected = true;
+        this._value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this._cvaDisabled.set(disabled);
+    }
+    // ── Handlers ─────────────────────────────────────────────────────────────
+    _handleInput(event) {
+        const digits = event.target.value.replace(/\D/g, '').slice(0, 4);
+        this._value.set(digits);
+        this._onChange(digits);
+    }
+    _handleBlur() {
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardExpiryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardExpiryInputComponent, isStandalone: true, selector: "clx-card-expiry-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ClxCardExpiryInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="_inputId" [class]="_labelClass()">{{ label() }}</label>
+    }
+
+    <div [class]="_wrapperClass()">
+      <input
+        [id]="_inputId"
+        type="text"
+        inputmode="numeric"
+        autocomplete="cc-exp"
+        [placeholder]="placeholder()"
+        [disabled]="_disabled()"
+        [value]="_displayValue()"
+        [class]="_inputClass()"
+        (input)="_handleInput($event)"
+        (blur)="_handleBlur()"
+      />
+
+      @if (status() !== 'default') {
+        <div [class]="_suffixIconWrapCls()" [style.color]="_statusCfg().iconColor">
+          <span clx-icon [name]="_statusCfg().iconName" [size]="_sizeConfig().iconSize"></span>
+        </div>
+      }
+    </div>
+
+    @if (statusMessage() && status() !== 'default') {
+      <p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardExpiryInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-card-expiry-input',
+                    standalone: true,
+                    imports: [ClxIconComponent],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClxCardExpiryInputComponent),
+                            multi: true,
+                        },
+                    ],
+                    template: `
+    @if (label()) {
+      <label [for]="_inputId" [class]="_labelClass()">{{ label() }}</label>
+    }
+
+    <div [class]="_wrapperClass()">
+      <input
+        [id]="_inputId"
+        type="text"
+        inputmode="numeric"
+        autocomplete="cc-exp"
+        [placeholder]="placeholder()"
+        [disabled]="_disabled()"
+        [value]="_displayValue()"
+        [class]="_inputClass()"
+        (input)="_handleInput($event)"
+        (blur)="_handleBlur()"
+      />
+
+      @if (status() !== 'default') {
+        <div [class]="_suffixIconWrapCls()" [style.color]="_statusCfg().iconColor">
+          <span clx-icon [name]="_statusCfg().iconName" [size]="_sizeConfig().iconSize"></span>
+        </div>
+      }
+    </div>
+
+    @if (statusMessage() && status() !== 'default') {
+      <p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex flex-col gap-1.5',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/** True when MM/YY (2-digit year) refers to a month that has already fully elapsed relative to
+ *  the system's current date — the expiry month itself is still valid through its last day. */
+function isClxCardExpired(month, twoDigitYear) {
+    const m = Number(month);
+    const y = Number(twoDigitYear);
+    if (!Number.isInteger(m) || m < 1 || m > 12 || !Number.isInteger(y))
+        return true;
+    const now = new Date();
+    const currentYear = now.getFullYear() % 100;
+    const currentMonth = now.getMonth() + 1;
+    if (y < currentYear)
+        return true;
+    if (y === currentYear && m < currentMonth)
+        return true;
+    return false;
+}
+
 const OTP_SIZE_MAP = {
     xs: { box: 'w-8  h-8  text-sm', text: 'text-sm', gap: 'gap-1.5' },
     sm: { box: 'w-10 h-10 text-base', text: 'text-base', gap: 'gap-2' },
@@ -10009,6 +10446,16 @@ 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 */ []));
     // ── Outputs ────────────────────────────────────────────────────────────────
     stepChange = output();
     finish = output();
@@ -10021,12 +10468,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()));
@@ -10117,7 +10572,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 } }, outputs: { stepChange: "stepChange", finish: "finish" }, queries: [{ propertyName: "_stepQuery", predicate: ClxStepComponent }], ngImport: i0, template: `
     <div [class]="_rootClass()">
 
       <!-- ══ HORIZONTAL: clx-tabs indicator ═══════════════════════════════ -->
@@ -10332,7 +10787,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 }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], finish: [{ type: i0.Output, args: ["finish"] }], _stepQuery: [{
                 type: ContentChildren,
                 args: [ClxStepComponent]
             }] } });
@@ -18240,5 +18695,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map