codexly-ui 0.12.45 → 0.12.47

package/fesm2022/codexly-ui.mjs

@@ -3,7 +3,7 @@ import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component,
 import { DomSanitizer } from '@angular/platform-browser';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, NgControl, TouchedChangeEvent, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError, filter } from 'rxjs';
 import * as i1 from '@angular/cdk/overlay';
@@ -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' },
@@ -4421,6 +4858,11 @@ class ClxSelectComponent {
     _asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoading" }] : /* istanbul ignore next */ []));
     _asyncQuery = signal('', ...(ngDevMode ? [{ debugName: "_asyncQuery" }] : /* istanbul ignore next */ []));
     _wasTouched = signal(false, ...(ngDevMode ? [{ debugName: "_wasTouched" }] : /* istanbul ignore next */ []));
+    // Mirrors this._ngControl.control.touched reactively — that flag is plain mutable state on the
+    // AbstractControl, not a signal, so a form.markAllAsTouched() call (e.g. from a failed submit)
+    // would never be noticed by a computed() reading it directly. control.events emits a
+    // TouchedChangeEvent for exactly that call, which is what actually drives this.
+    _controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "_controlTouched" }] : /* istanbul ignore next */ []));
     _selectedVals = signal([], ...(ngDevMode ? [{ debugName: "_selectedVals" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cardDisabled = inject(CLX_CARD_DISABLED_CONTEXT, { optional: true });
@@ -4437,6 +4879,18 @@ class ClxSelectComponent {
         this._searchQuery = toSignal(this._searchControl.valueChanges.pipe(startWith(''), map(v => v ?? '')), { initialValue: '' });
         if (this._ngControl)
             this._ngControl.valueAccessor = this;
+        // See _controlTouched's own doc comment — control.touched itself isn't observable, but
+        // control.events (Angular 18+) emits a TouchedChangeEvent whenever markAsTouched/
+        // markAllAsTouched runs, which is exactly the case (a failed form submit) that needs to make
+        // this field's error visible even though the user never opened this dropdown themselves.
+        const control = this._ngControl?.control;
+        if (control) {
+            this._controlTouched.set(control.touched);
+            control.events.subscribe(event => {
+                if (event instanceof TouchedChangeEvent)
+                    this._controlTouched.set(event.touched);
+            });
+        }
         effect(() => {
             const family = this._displayFontFamily();
             if (family)
@@ -4472,7 +4926,12 @@ class ClxSelectComponent {
     _hasValue = computed(() => this._selectedVals().length > 0, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
     _isInvalid = computed(() => {
         this._selectedVals(); // re-evaluate control.invalid (imperatively updated by Angular Forms) on each selection change
-        return this._wasTouched() && (this._ngControl?.control?.invalid ?? false);
+        // Either signal is enough: the user actually opening/closing this dropdown (_wasTouched), or
+        // Angular Forms marking the control touched programmatically (_controlTouched — set by e.g.
+        // form.markAllAsTouched() on a failed submit, which never fires this component's own
+        // _closePanel(), so _wasTouched alone would stay false forever for a field the user never
+        // interacted with before trying to submit).
+        return (this._wasTouched() || this._controlTouched()) && (this._ngControl?.control?.invalid ?? false);
     }, ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
     _selectedOptions = computed(() => {
         const vals = this._selectedVals();
@@ -18218,5 +18677,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