@taiga-ui/addon-commerce/fesm2022/taiga-ui-addon-commerce-components-input-card-group.mjs

Extension package for Taiga UI related to commerce, payment systems, currencies etc.

import { DOCUMENT, isPlatformServer } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, Directive, InjectionToken, computed, viewChild, PLATFORM_ID, signal, output, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i4 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { MaskitoDirective } from '@maskito/angular';
import { WA_IS_MOBILE, WA_IS_WEBKIT } from '@ng-web-apis/platform';
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
import { tuiDefaultCardValidator, TUI_MASK_CVC, TUI_MASK_CARD, TUI_MASK_EXPIRE } from '@taiga-ui/addon-commerce/constants';
import { TuiFormatCardPipe } from '@taiga-ui/addon-commerce/pipes/format-card';
import { TUI_CARD_NUMBER_TEXTS, TUI_CARD_EXPIRY_TEXTS, TUI_CARD_CVC_TEXTS, TUI_PAYMENT_SYSTEM_ICONS } from '@taiga-ui/addon-commerce/tokens';
import { tuiGetPaymentSystem } from '@taiga-ui/addon-commerce/utils';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { TUI_NON_DIGIT_REGEXP, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
import { tuiHovered, TuiHoveredService } from '@taiga-ui/cdk/directives/hovered';
import { TuiTransitioned } from '@taiga-ui/cdk/directives/transitioned';
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
import { tuiInjectElement, tuiIsElement, tuiIsInput } from '@taiga-ui/cdk/utils/dom';
import { tuiFocusedIn, tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
import { tuiGenerateId } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAsDataListHost } from '@taiga-ui/core/components/data-list';
import { TuiIcon, TuiIconPipe } from '@taiga-ui/core/components/icon';
import { TUI_TEXTFIELD_OPTIONS } from '@taiga-ui/core/components/textfield';
import * as i1 from '@taiga-ui/core/directives/appearance';
import { tuiAppearanceMode, tuiAppearance, tuiAppearanceState, tuiAppearanceFocus, TuiAppearance } from '@taiga-ui/core/directives/appearance';
import * as i2 from '@taiga-ui/core/portals/dropdown';
import { TuiDropdownDirective, TuiDropdownOpen, tuiDropdownOptionsProvider, TuiWithDropdownOpen } from '@taiga-ui/core/portals/dropdown';
import { TUI_BREAKPOINT, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
import { TUI_DATE_TEXTS } from '@taiga-ui/kit/tokens';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { Subject, EMPTY, switchMap, timer } from 'rxjs';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';

class TuiInputCardGroupDirective {
    constructor() {
        this.breakpoint = inject(TUI_BREAKPOINT);
        this.compact = input(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCardGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputCardGroupDirective, isStandalone: true, inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._compact": "compact() || breakpoint() === 'mobile'" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCardGroupDirective, decorators: [{
            type: Directive,
            args: [{ host: { '[class._compact]': "compact() || breakpoint() === 'mobile'" } }]
        }] });

const TUI_INPUT_CARD_GROUP_DEFAULT_OPTIONS = {
    cardValidator: tuiDefaultCardValidator,
    placeholder: '0000 0000 0000 0000',
    cvcPlaceholder: '000',
    cvcHidden: true,
    inputs: { cvc: true, expire: true },
};
const [TUI_INPUT_CARD_GROUP_OPTIONS, tuiInputCardGroupOptionsProvider] = tuiCreateOptions(TUI_INPUT_CARD_GROUP_DEFAULT_OPTIONS);

const TUI_INPUT_CARD_GROUP_TEXTS = new InjectionToken(ngDevMode ? 'TUI_INPUT_CARD_GROUP_TEXTS' : '');
const TUI_INPUT_CARD_GROUP_TEXTS_PROVIDER = {
    provide: TUI_INPUT_CARD_GROUP_TEXTS,
    useFactory: () => {
        const cardGroupTexts = inject(TUI_INPUT_CARD_GROUP_TEXTS, {
            skipSelf: true,
            optional: true,
        });
        const breakpoint = inject(TUI_BREAKPOINT);
        const directive = inject(TuiInputCardGroupDirective);
        const compact = computed(() => directive.compact() || breakpoint() === 'mobile');
        const cardNumber = inject(TUI_CARD_NUMBER_TEXTS);
        const expiry = inject(TUI_CARD_EXPIRY_TEXTS);
        const cvcTexts = inject(TUI_CARD_CVC_TEXTS);
        return computed(() => cardGroupTexts?.() ?? {
            cardNumberText: cardNumber()[Number(!compact())] ?? '',
            expiryText: expiry()[Number(!compact())] ?? '',
            cvcText: cvcTexts()[Number(!compact())] ?? '',
        });
    },
};

class TuiInputCardGroup extends TuiControl {
    constructor() {
        super(...arguments);
        this.inputCard = viewChild('inputCard');
        this.inputExpire = viewChild('inputExpire');
        this.inputCVC = viewChild('inputCVC');
        this.doc = inject(DOCUMENT);
        this.isServer = isPlatformServer(inject(PLATFORM_ID));
        this.focus$ = new Subject();
        this.expirePrefilled = signal(false);
        this.paymentSystems = inject(TUI_PAYMENT_SYSTEM_ICONS);
        this.options = inject(TUI_INPUT_CARD_GROUP_OPTIONS);
        this.el = tuiInjectElement();
        this.hover = tuiHovered();
        this.focusedIn = tuiFocusedIn(this.el);
        this.cvcMask = computed(() => TUI_MASK_CVC(this.codeLength() ?? 3));
        this.cvcHidden = this.options.cvcHidden;
        this.dateTexts = inject(TUI_DATE_TEXTS);
        this.expirePlaceholder = computed(() => this.dateTexts()['dd/mm/yyyy']?.slice(3, 8).replaceAll('.', '/') ?? '00/00');
        this.cvcPlaceholder = computed((length = this.codeLength()) => length ? '0'.repeat(length) : this.options.cvcPlaceholder);
        this.cvcPrefilled = computed(() => !this.inputs().cvc || !!this.cvc().match(TUI_NON_DIGIT_REGEXP));
        this.cardPrefilled = computed(() => !!this.card().match(TUI_NON_DIGIT_REGEXP));
        this.focusable = computed(() => this.cardValidator()(this.card()) || this.cardPrefilled());
        this.expireFocusable = computed(() => this.focusable() && !this.expirePrefilled());
        this.isMobile = inject(WA_IS_MOBILE);
        this.isWebkit = inject(WA_IS_WEBKIT);
        this.dropdown = inject(TuiDropdownDirective);
        this.maskCard = TUI_MASK_CARD;
        this.maskExpire = TUI_MASK_EXPIRE;
        this.icons = inject(TUI_COMMON_ICONS);
        this.textfield = inject(TUI_TEXTFIELD_OPTIONS);
        this.texts = inject(TUI_INPUT_CARD_GROUP_TEXTS);
        this.open = inject(TuiDropdownOpen).open;
        this.$ = this.isWebkit
            ? this.focus$
                .pipe(switchMap(() => timer(100)), takeUntilDestroyed())
                .subscribe(() => (this.expire() ? this.focusCVC() : this.focusExpire()))
            : EMPTY;
        this.card = computed(() => this.value()?.card || '');
        this.expire = computed(() => this.value()?.expire || '');
        this.cvc = computed(() => this.value()?.cvc || '');
        this.m = tuiAppearanceMode(this.mode);
        this.appearance = tuiAppearance(inject(TUI_TEXTFIELD_OPTIONS).appearance);
        this.state = tuiAppearanceState(
        // eslint-disable-next-line no-nested-ternary
        computed(() => (this.disabled() ? 'disabled' : this.hover() ? 'hover' : null)));
        this.focus = tuiAppearanceFocus(computed(() => this.open() || this.focusedIn()));
        this.labelRaised = computed(() => (this.focus() && !this.readOnly()) || !!this.card());
        this.hasCleaner = computed(() => this.textfield.cleaner() && this.card() && this.interactive());
        this.bin = computed(() => this.card().length < 6 ? null : this.card().slice(0, 6));
        this.content = computed((system = tuiGetPaymentSystem(this.card())) => this.icon() || (system && this.paymentSystems[system]));
        this.placeholder = input(this.options.placeholder);
        this.inputs = input(this.options.inputs);
        this.cardValidator = input(this.options.cardValidator);
        this.icon = input('');
        this.id = input(tuiGenerateId());
        this.codeLength = input();
        this.binChange = output();
    }
    writeValue(value) {
        const bin = this.bin();
        const { activeElement } = this.doc;
        super.writeValue(value);
        this.updateBin(bin);
        this.expirePrefilled.set(!!this.expire() && this.cardPrefilled());
        // Programmatic setting of expire input value breaks autofill in Chrome
        const inputExpire = this.inputExpire();
        if (!inputExpire ||
            this.isMobile ||
            this.isWebkit ||
            this.isServer ||
            inputExpire.nativeElement.value === this.expire()) {
            return;
        }
        inputExpire.nativeElement.focus({ preventScroll: true });
        inputExpire.nativeElement.select();
        this.doc.execCommand('insertText', false, this.expire());
        inputExpire.nativeElement.blur();
        activeElement?.focus({ preventScroll: true });
    }
    focusCard() {
        this.inputCard()?.nativeElement.focus({ preventScroll: true });
    }
    focusExpire() {
        if (this.inputs().expire) {
            this.inputExpire()?.nativeElement.focus({ preventScroll: true });
        }
        else {
            this.inputCVC()?.nativeElement.focus({ preventScroll: true });
        }
    }
    focusCVC() {
        this.inputCVC()?.nativeElement.focus({ preventScroll: true });
    }
    handleOption(option) {
        const { card = '', expire = '', cvc = '' } = option || {};
        const bin = this.bin();
        const element = (!card && this.inputCard()?.nativeElement) ||
            (!expire && this.inputExpire()?.nativeElement) ||
            this.inputCVC()?.nativeElement;
        this.onChange({ card, expire, cvc });
        this.updateBin(bin);
        this.open.set(false);
        this.expirePrefilled.set(!!expire);
        element?.focus();
    }
    clear() {
        this.expirePrefilled.set(false);
        [this.inputCVC(), this.inputExpire(), this.inputCard()].forEach((e) => {
            e?.nativeElement.focus();
            e?.nativeElement.select();
            e?.nativeElement.ownerDocument.execCommand('delete');
        });
        this.onChange(null);
    }
    get cardCollapsed() {
        return this.focusable() && !tuiIsFocused(this.inputCard()?.nativeElement);
    }
    onResize() {
        this.cdr.detectChanges();
    }
    onCardChange(card) {
        const bin = this.bin();
        const parsed = card.split(CHAR_NO_BREAK_SPACE).join('');
        if (this.card() === parsed) {
            return;
        }
        this.updateProperty(parsed, 'card');
        this.updateBin(bin);
        if (this.cardValidator()(this.card()) && !this.expire() && this.inputExpire()) {
            this.focusExpire();
            // Safari autofill focus jerk workaround
            this.focus$.next();
        }
    }
    onExpireChange(expire) {
        this.updateProperty(expire, 'expire');
        // MM/YY
        if (Number(this.inputExpire()?.nativeElement.selectionStart) === 5) {
            this.focusCVC();
        }
    }
    onCVCChange(cvc) {
        this.updateProperty(cvc, 'cvc');
    }
    getStyle({ offsetWidth }) {
        return this.cardCollapsed
            ? `transform: translate3d(calc(${offsetWidth}px * var(--tui-inline)), 0, 0); clip-path: inset(0 0 0 calc(100% - ${offsetWidth}px));`
            : '';
    }
    onPointerDown(event) {
        if (tuiIsElement(event.target) && tuiIsInput(event.target)) {
            return;
        }
        event.preventDefault();
        this.focusInput();
    }
    toggle() {
        this.open.update((open) => !open);
    }
    updateBin(oldBin) {
        const bin = this.bin();
        if (bin !== oldBin && !this.cardPrefilled()) {
            this.binChange.emit(bin);
        }
    }
    updateProperty(value, propName) {
        const { card = '', expire = '', cvc = '' } = this.value() || {};
        const newValue = { card, expire, cvc };
        newValue[propName] = value;
        this.onChange(newValue.expire || newValue.cvc || newValue.card ? newValue : null);
    }
    focusInput() {
        const element = (!this.cardPrefilled() && this.inputCard()?.nativeElement) ||
            (this.expireFocusable() && this.inputExpire()?.nativeElement) ||
            this.inputCVC()?.nativeElement;
        element?.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCardGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputCardGroup, isStandalone: true, selector: "tui-input-card-group", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, cardValidator: { classPropertyName: "cardValidator", publicName: "cardValidator", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, codeLength: { classPropertyName: "codeLength", publicName: "codeLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { binChange: "binChange" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "scroll.zoneless": "$event.target.scrollLeft = 0", "tuiActiveZoneChange": "onTouched()" }, properties: { "attr.data-size": "textfield.size()" } }, providers: [
            tuiAsDataListHost(TuiInputCardGroup),
            tuiAsControl(TuiInputCardGroup),
            tuiDropdownOptionsProvider({ limitWidth: 'fixed' }),
            TuiHoveredService,
            TUI_INPUT_CARD_GROUP_TEXTS_PROVIDER,
        ], viewQueries: [{ propertyName: "inputCard", first: true, predicate: ["inputCard"], descendants: true, isSignal: true }, { propertyName: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true, isSignal: true }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiDropdownDirective }, { directive: i2.TuiWithDropdownOpen }, { directive: TuiInputCardGroupDirective, inputs: ["compact", "compact"] }], ngImport: i0, template: "@let formattedCard = card() | tuiFormatCard: cardPrefilled();\n\n<div class=\"t-wrapper\">\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCard\n            autocomplete=\"cc-number\"\n            automation-id=\"tui-input-card-group__card\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input t-input_card\"\n            [attr.aria-invalid]=\"!cardPrefilled() && !(this.card() | tuiMapper: cardValidator())\"\n            [attr.id]=\"`${id()}_card`\"\n            [attr.role]=\"dropdown.content() ? 'combobox' : null\"\n            [class.t-input_filled]=\"card().length\"\n            [class.t-input_inert]=\"cardPrefilled()\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCard\"\n            [ngModel]=\"formattedCard\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cardPrefilled() ? '' : placeholder()\"\n            [readOnly]=\"readOnly()\"\n            [tabIndex]=\"cardPrefilled() ? -1 : 0\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCardChange($event)\"\n        />\n        <span\n            aria-hidden=\"true\"\n            translate=\"no\"\n            class=\"t-collapsed\"\n            [attr.data-before]=\"cardPrefilled() ? card().slice(-4) : ''\"\n            [class.t-collapsed_enable-mask]=\"cardCollapsed\"\n            (waResizeObserver)=\"onResize()\"\n        >\n            <span\n                #ghost\n                class=\"t-ghost\"\n                [textContent]=\"formattedCard.slice(card().length % 4 > 0 ? -5 : -4)\"\n            ></span>\n\n            <span class=\"t-collapsed-wrapper\">\n                <span\n                    class=\"t-value\"\n                    [style]=\"getStyle(ghost)\"\n                    [textContent]=\"formattedCard\"\n                ></span>\n            </span>\n        </span>\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [attr.data-label]=\"texts().cardNumberText\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            <ng-content />\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_expire\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputExpire\n            autocomplete=\"cc-exp\"\n            automation-id=\"tui-input-card-group__expire\"\n            inputmode=\"numeric\"\n            maxlength=\"5\"\n            name=\"ccexpiryyear\"\n            translate=\"no\"\n            class=\"t-input\"\n            [attr.id]=\"`${id()}_expire`\"\n            [class.t-input_inert]=\"!expireFocusable()\"\n            [class.t-input_prefilled]=\"!inputs().expire\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskExpire\"\n            [ngModel]=\"expire()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"inputs().expire ? expirePlaceholder() : '\u2022\u2022/\u2022\u2022'\"\n            [readOnly]=\"readOnly() || !inputs().expire\"\n            [tabIndex]=\"expireFocusable() || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onExpireChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts().expiryText }}\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_cvc\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCVC\n            autocomplete=\"cc-csc\"\n            automation-id=\"tui-input-card-group__cvc\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input\"\n            [attr.id]=\"`${id()}_cvc`\"\n            [class.t-input_cvc_hidden]=\"cvcHidden\"\n            [class.t-input_prefilled]=\"cvcPrefilled()\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"cvcMask()\"\n            [ngModel]=\"cvc()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cvcPrefilled() ? '\u2022\u2022\u2022' : cvcPlaceholder()\"\n            [readOnly]=\"readOnly() || cvcPrefilled()\"\n            [tabIndex]=\"focusable() || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCVCChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts().cvcText }}\n        </div>\n    </label>\n</div>\n<div class=\"t-icons\">\n    @if (content()) {\n        <div class=\"t-icon-outlet\">\n            <img\n                *polymorpheusOutlet=\"content() as src\"\n                alt=\"\"\n                automation-id=\"tui-input-card-group__icon\"\n                class=\"t-card\"\n                [src]=\"src | tuiIcon\"\n            />\n        </div>\n    }\n    @if (hasCleaner()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__cleaner\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [icon]=\"icons.close\"\n            (click)=\"clear()\"\n        />\n    }\n    @if (dropdown.content()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__dropdown\"\n            tuiAppearance=\"icon\"\n            tuiChevron\n            class=\"t-icon\"\n            (click)=\"toggle()\"\n        />\n    }\n</div>\n", styles: ["@keyframes outside{0%{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}to{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}}@keyframes inside{0%{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}to{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}}:host{--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label: -.7rem;--t-label-size: .83em;--t-translate: 6.5rem;--t-collapsed-offset: 1.4375rem;position:relative;display:block;block-size:var(--t-height);min-inline-size:24rem;border-radius:var(--tui-radius-l);overflow:hidden;font:var(--tui-typography-ui-m);isolation:isolate}:host[data-size=m]{--t-label: -.7em;--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-collapsed-offset: 1.125rem;border-radius:var(--tui-radius-m);font:var(--tui-typography-ui-s)}:host[data-size=m] .t-card{inline-size:1.5rem;block-size:1.5rem}:host[data-size=m] [tuiChevron]{margin-inline-end:-.875rem;margin-inline-start:.125rem}:host._compact{min-inline-size:19rem;--t-translate: 4rem}:host[tuiAppearance][data-appearance]:has(:-webkit-autofill,[chrome-autofilled]){background:var(--tui-service-autofill-background)!important}:host [tuiChevron]{block-size:auto;align-self:stretch;border-inline-end:var(--t-padding) solid transparent;margin-inline-end:-.75rem;box-sizing:content-box;font-size:1rem;cursor:pointer}.t-wrapper{position:absolute;z-index:1;inline-size:100%;block-size:var(--t-height);transition:opacity 0s var(--tui-duration)}.t-wrapper_cvc,.t-wrapper_expire{opacity:0;pointer-events:none;animation:outside var(--tui-duration) ease-in-out}.t-wrapper_cvc{margin-inline-start:7rem}:host._compact .t-wrapper_cvc{margin-inline-start:4rem}.t-wrapper_active{transition:none;pointer-events:auto;opacity:1;animation:inside var(--tui-duration) ease-in-out forwards}.t-card{inline-size:2rem;block-size:2rem}:host:has(.t-label[data-label=\"\"]:empty) .t-input,:host:has(.t-label[data-label=\"\"]:empty) .t-collapsed,:host:has(.t-label:not([data-label]):empty) .t-input,:host:has(.t-label:not([data-label]):empty) .t-collapsed{padding-block-start:0;line-height:var(--t-height)}.t-collapsed{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;padding:calc(var(--t-height) / 3) var(--t-padding) 0;box-sizing:border-box;line-height:calc(2 * var(--t-height) / 3);color:var(--tui-text-primary);white-space:nowrap;pointer-events:none}.t-collapsed:after{content:\"*\";float:left;opacity:0}:host-context([dir=\"rtl\"]) .t-collapsed:after{float:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask:after{opacity:1}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask:after{transition:opacity 0s var(--tui-duration)}.t-collapsed_enable-mask .t-collapsed-wrapper{inset-inline-start:var(--t-collapsed-offset)}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask .t-collapsed-wrapper{inset-inline-start:unset}.t-collapsed-wrapper{position:absolute;display:block;inset-block-start:0;inline-size:100%;block-size:100%;overflow:hidden}.t-value{transition-property:transform,clip-path;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;display:block;inset-block:auto 0;inset-inline:auto 100%;clip-path:inset(0);transform:translate3d(calc(100% * var(--tui-inline)),0,0)}:host-context([dir=\"rtl\"]) .t-value{transform:translate3d(calc(100% * var(--tui-inline)),0,0)!important}.t-input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;z-index:1;border:0;margin:0;padding:calc(var(--t-height) / 3) var(--t-padding) 0;outline:none;background:transparent;box-sizing:border-box;font:inherit;color:var(--tui-text-primary);direction:ltr}:host-context([dir=\"rtl\"]) .t-input{text-align:end}.t-input::placeholder{color:var(--tui-text-secondary)}.t-input_prefilled::placeholder{color:var(--tui-text-primary)}.t-input[chrome-autofilled],.t-input:-webkit-autofill{-webkit-text-fill-color:var(--tui-text-primary)!important;caret-color:var(--tui-text-primary)!important;transition:background-color 600000s 0s}.t-input.t-input.t-input_card:not(:-webkit-autofill,[chrome-autofilled]):not(:focus:placeholder-shown),.t-input.t-input.t-input_card.t-input_filled{caret-color:var(--tui-text-primary);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;inset:-60rem 0 0 -60rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-input_cvc_hidden{-webkit-text-security:disc}.t-icons{position:absolute;z-index:1;display:flex;inset-inline-end:1rem;align-items:center;block-size:var(--t-height);gap:.25rem;pointer-events:none}.t-icon-outlet{display:flex;margin-inline-end:.25rem}.t-icon{cursor:pointer;pointer-events:auto}.t-icon:before{font-size:1rem}.t-label{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;max-inline-size:6.5rem;margin:0 var(--t-padding);line-height:var(--t-height);color:var(--tui-text-secondary)}.t-label:empty:before{content:attr(data-label)}.t-label:not([data-label]):empty{display:none}input[chrome-autofilled]~.t-label,input:-webkit-autofill~.t-label,.t-label_raised{font-size:var(--t-label-size);transform:translateY(var(--t-label))}:host([data-mode~=\"invalid\"]) input[chrome-autofilled]~.t-label,:host([data-mode~=\"invalid\"]) input:-webkit-autofill~.t-label,:host([data-mode~=\"invalid\"]) .t-label_raised{color:var(--tui-text-negative)}:host([data-focus=\"true\"]) .t-label{color:var(--tui-text-primary)}.t-ghost{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "pipe", type: TuiFormatCardPipe, name: "tuiFormatCard" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "pipe", type: TuiIconPipe, name: "tuiIcon" }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: TuiTransitioned, selector: "[tuiTransitioned]" }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["waResizeBox"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCardGroup, decorators: [{
            type: Component,
            args: [{ selector: 'tui-input-card-group', imports: [
                        FormsModule,
                        MaskitoDirective,
                        PolymorpheusOutlet,
                        TuiAppearance,
                        TuiChevron,
                        TuiFormatCardPipe,
                        TuiIcon,
                        TuiIconPipe,
                        TuiMapperPipe,
                        TuiTransitioned,
                        WaResizeObserver,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        tuiAsDataListHost(TuiInputCardGroup),
                        tuiAsControl(TuiInputCardGroup),
                        tuiDropdownOptionsProvider({ limitWidth: 'fixed' }),
                        TuiHoveredService,
                        TUI_INPUT_CARD_GROUP_TEXTS_PROVIDER,
                    ], hostDirectives: [
                        TuiAppearance,
                        TuiDropdownDirective,
                        TuiWithDropdownOpen,
                        { directive: TuiInputCardGroupDirective, inputs: ['compact'] },
                    ], host: {
                        '[attr.data-size]': 'textfield.size()',
                        '(pointerdown)': 'onPointerDown($event)',
                        '(scroll.zoneless)': '$event.target.scrollLeft = 0',
                        '(tuiActiveZoneChange)': 'onTouched()',
                    }, template: "@let formattedCard = card() | tuiFormatCard: cardPrefilled();\n\n<div class=\"t-wrapper\">\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCard\n            autocomplete=\"cc-number\"\n            automation-id=\"tui-input-card-group__card\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input t-input_card\"\n            [attr.aria-invalid]=\"!cardPrefilled() && !(this.card() | tuiMapper: cardValidator())\"\n            [attr.id]=\"`${id()}_card`\"\n            [attr.role]=\"dropdown.content() ? 'combobox' : null\"\n            [class.t-input_filled]=\"card().length\"\n            [class.t-input_inert]=\"cardPrefilled()\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCard\"\n            [ngModel]=\"formattedCard\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cardPrefilled() ? '' : placeholder()\"\n            [readOnly]=\"readOnly()\"\n            [tabIndex]=\"cardPrefilled() ? -1 : 0\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCardChange($event)\"\n        />\n        <span\n            aria-hidden=\"true\"\n            translate=\"no\"\n            class=\"t-collapsed\"\n            [attr.data-before]=\"cardPrefilled() ? card().slice(-4) : ''\"\n            [class.t-collapsed_enable-mask]=\"cardCollapsed\"\n            (waResizeObserver)=\"onResize()\"\n        >\n            <span\n                #ghost\n                class=\"t-ghost\"\n                [textContent]=\"formattedCard.slice(card().length % 4 > 0 ? -5 : -4)\"\n            ></span>\n\n            <span class=\"t-collapsed-wrapper\">\n                <span\n                    class=\"t-value\"\n                    [style]=\"getStyle(ghost)\"\n                    [textContent]=\"formattedCard\"\n                ></span>\n            </span>\n        </span>\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [attr.data-label]=\"texts().cardNumberText\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            <ng-content />\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_expire\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputExpire\n            autocomplete=\"cc-exp\"\n            automation-id=\"tui-input-card-group__expire\"\n            inputmode=\"numeric\"\n            maxlength=\"5\"\n            name=\"ccexpiryyear\"\n            translate=\"no\"\n            class=\"t-input\"\n            [attr.id]=\"`${id()}_expire`\"\n            [class.t-input_inert]=\"!expireFocusable()\"\n            [class.t-input_prefilled]=\"!inputs().expire\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskExpire\"\n            [ngModel]=\"expire()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"inputs().expire ? expirePlaceholder() : '\u2022\u2022/\u2022\u2022'\"\n            [readOnly]=\"readOnly() || !inputs().expire\"\n            [tabIndex]=\"expireFocusable() || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onExpireChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts().expiryText }}\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_cvc\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCVC\n            autocomplete=\"cc-csc\"\n            automation-id=\"tui-input-card-group__cvc\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input\"\n            [attr.id]=\"`${id()}_cvc`\"\n            [class.t-input_cvc_hidden]=\"cvcHidden\"\n            [class.t-input_prefilled]=\"cvcPrefilled()\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"cvcMask()\"\n            [ngModel]=\"cvc()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cvcPrefilled() ? '\u2022\u2022\u2022' : cvcPlaceholder()\"\n            [readOnly]=\"readOnly() || cvcPrefilled()\"\n            [tabIndex]=\"focusable() || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCVCChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts().cvcText }}\n        </div>\n    </label>\n</div>\n<div class=\"t-icons\">\n    @if (content()) {\n        <div class=\"t-icon-outlet\">\n            <img\n                *polymorpheusOutlet=\"content() as src\"\n                alt=\"\"\n                automation-id=\"tui-input-card-group__icon\"\n                class=\"t-card\"\n                [src]=\"src | tuiIcon\"\n            />\n        </div>\n    }\n    @if (hasCleaner()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__cleaner\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [icon]=\"icons.close\"\n            (click)=\"clear()\"\n        />\n    }\n    @if (dropdown.content()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__dropdown\"\n            tuiAppearance=\"icon\"\n            tuiChevron\n            class=\"t-icon\"\n            (click)=\"toggle()\"\n        />\n    }\n</div>\n", styles: ["@keyframes outside{0%{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}to{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}}@keyframes inside{0%{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}to{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}}:host{--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label: -.7rem;--t-label-size: .83em;--t-translate: 6.5rem;--t-collapsed-offset: 1.4375rem;position:relative;display:block;block-size:var(--t-height);min-inline-size:24rem;border-radius:var(--tui-radius-l);overflow:hidden;font:var(--tui-typography-ui-m);isolation:isolate}:host[data-size=m]{--t-label: -.7em;--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);--t-collapsed-offset: 1.125rem;border-radius:var(--tui-radius-m);font:var(--tui-typography-ui-s)}:host[data-size=m] .t-card{inline-size:1.5rem;block-size:1.5rem}:host[data-size=m] [tuiChevron]{margin-inline-end:-.875rem;margin-inline-start:.125rem}:host._compact{min-inline-size:19rem;--t-translate: 4rem}:host[tuiAppearance][data-appearance]:has(:-webkit-autofill,[chrome-autofilled]){background:var(--tui-service-autofill-background)!important}:host [tuiChevron]{block-size:auto;align-self:stretch;border-inline-end:var(--t-padding) solid transparent;margin-inline-end:-.75rem;box-sizing:content-box;font-size:1rem;cursor:pointer}.t-wrapper{position:absolute;z-index:1;inline-size:100%;block-size:var(--t-height);transition:opacity 0s var(--tui-duration)}.t-wrapper_cvc,.t-wrapper_expire{opacity:0;pointer-events:none;animation:outside var(--tui-duration) ease-in-out}.t-wrapper_cvc{margin-inline-start:7rem}:host._compact .t-wrapper_cvc{margin-inline-start:4rem}.t-wrapper_active{transition:none;pointer-events:auto;opacity:1;animation:inside var(--tui-duration) ease-in-out forwards}.t-card{inline-size:2rem;block-size:2rem}:host:has(.t-label[data-label=\"\"]:empty) .t-input,:host:has(.t-label[data-label=\"\"]:empty) .t-collapsed,:host:has(.t-label:not([data-label]):empty) .t-input,:host:has(.t-label:not([data-label]):empty) .t-collapsed{padding-block-start:0;line-height:var(--t-height)}.t-collapsed{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;padding:calc(var(--t-height) / 3) var(--t-padding) 0;box-sizing:border-box;line-height:calc(2 * var(--t-height) / 3);color:var(--tui-text-primary);white-space:nowrap;pointer-events:none}.t-collapsed:after{content:\"*\";float:left;opacity:0}:host-context([dir=\"rtl\"]) .t-collapsed:after{float:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask:after{opacity:1}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask:after{transition:opacity 0s var(--tui-duration)}.t-collapsed_enable-mask .t-collapsed-wrapper{inset-inline-start:var(--t-collapsed-offset)}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask .t-collapsed-wrapper{inset-inline-start:unset}.t-collapsed-wrapper{position:absolute;display:block;inset-block-start:0;inline-size:100%;block-size:100%;overflow:hidden}.t-value{transition-property:transform,clip-path;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;display:block;inset-block:auto 0;inset-inline:auto 100%;clip-path:inset(0);transform:translate3d(calc(100% * var(--tui-inline)),0,0)}:host-context([dir=\"rtl\"]) .t-value{transform:translate3d(calc(100% * var(--tui-inline)),0,0)!important}.t-input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;z-index:1;border:0;margin:0;padding:calc(var(--t-height) / 3) var(--t-padding) 0;outline:none;background:transparent;box-sizing:border-box;font:inherit;color:var(--tui-text-primary);direction:ltr}:host-context([dir=\"rtl\"]) .t-input{text-align:end}.t-input::placeholder{color:var(--tui-text-secondary)}.t-input_prefilled::placeholder{color:var(--tui-text-primary)}.t-input[chrome-autofilled],.t-input:-webkit-autofill{-webkit-text-fill-color:var(--tui-text-primary)!important;caret-color:var(--tui-text-primary)!important;transition:background-color 600000s 0s}.t-input.t-input.t-input_card:not(:-webkit-autofill,[chrome-autofilled]):not(:focus:placeholder-shown),.t-input.t-input.t-input_card.t-input_filled{caret-color:var(--tui-text-primary);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;inset:-60rem 0 0 -60rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-input_cvc_hidden{-webkit-text-security:disc}.t-icons{position:absolute;z-index:1;display:flex;inset-inline-end:1rem;align-items:center;block-size:var(--t-height);gap:.25rem;pointer-events:none}.t-icon-outlet{display:flex;margin-inline-end:.25rem}.t-icon{cursor:pointer;pointer-events:auto}.t-icon:before{font-size:1rem}.t-label{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;max-inline-size:6.5rem;margin:0 var(--t-padding);line-height:var(--t-height);color:var(--tui-text-secondary)}.t-label:empty:before{content:attr(data-label)}.t-label:not([data-label]):empty{display:none}input[chrome-autofilled]~.t-label,input:-webkit-autofill~.t-label,.t-label_raised{font-size:var(--t-label-size);transform:translateY(var(--t-label))}:host([data-mode~=\"invalid\"]) input[chrome-autofilled]~.t-label,:host([data-mode~=\"invalid\"]) input:-webkit-autofill~.t-label,:host([data-mode~=\"invalid\"]) .t-label_raised{color:var(--tui-text-negative)}:host([data-focus=\"true\"]) .t-label{color:var(--tui-text-primary)}.t-ghost{visibility:hidden}\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { TUI_INPUT_CARD_GROUP_DEFAULT_OPTIONS, TUI_INPUT_CARD_GROUP_OPTIONS, TUI_INPUT_CARD_GROUP_TEXTS, TUI_INPUT_CARD_GROUP_TEXTS_PROVIDER, TuiInputCardGroup, TuiInputCardGroupDirective, tuiInputCardGroupOptionsProvider };
//# sourceMappingURL=taiga-ui-addon-commerce-components-input-card-group.mjs.map