@taiga-ui/addon-commerce 3.58.0 → 3.59.0-canary.1c24449

package/fesm2020/taiga-ui-addon-commerce-components-input-card-grouped.mjs

@@ -0,0 +1,441 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, ChangeDetectorRef, ElementRef, TemplateRef, Component, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, Input, Output, ContentChild, HostListener, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NgControl, FormsModule } from '@angular/forms';
+import { maskitoDateOptionsGenerator } from '@maskito/kit';
+import { TUI_INPUT_CARD_DEFAULT_OPTIONS, AbstractTuiInputCard } from '@taiga-ui/addon-commerce/components/input-card';
+import { tuiDefaultCardValidator, TUI_CARD_MASK } from '@taiga-ui/addon-commerce/constants';
+import * as i4 from '@taiga-ui/cdk';
+import { tuiCreateToken, tuiProvideOptions, tuiCreateTokenFromFactory, tuiTypedFromEvent, tuiIsNativeFocusedIn, tuiIsElement, tuiIsInput, tuiIsNativeFocused, tuiAsFocusableItemAccessor, tuiAsControl, TuiAutoFocusDirective, tuiPure, TuiFocusableModule, TuiActiveZoneModule, TuiMapperPipeModule, TuiPreventDefaultModule, TuiLetModule, TuiResizeModule, TuiAutoFocusModule } from '@taiga-ui/cdk';
+import * as i5 from '@taiga-ui/core';
+import { TUI_MEDIA, TUI_DIGIT_REGEXP, TUI_NON_DIGIT_REGEXP, TUI_MODE, TUI_TEXTFIELD_WATCHED_CONTROLLER, TUI_COMMON_ICONS, tuiAsDataListHost, MODE_PROVIDER, TEXTFIELD_CONTROLLER_PROVIDER, TuiDataListDirective, TuiDataListComponent, TuiSvgModule, TuiWrapperModule, TuiDropdownModule } from '@taiga-ui/core';
+import { TUI_ARROW_OPTIONS } from '@taiga-ui/kit';
+import { WINDOW } from '@ng-web-apis/common';
+import { TUI_CARD_NUMBER_TEXTS, TUI_CARD_EXPIRY_TEXTS, TUI_CARD_CVC_TEXTS } from '@taiga-ui/addon-commerce/tokens';
+import * as i8 from 'rxjs';
+import { combineLatest, of } from 'rxjs';
+import { startWith, switchMap, map } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@maskito/angular';
+import { MaskitoModule } from '@maskito/angular';
+import * as i6 from '@tinkoff/ng-polymorpheus';
+import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import * as i7 from '@taiga-ui/addon-commerce/pipes';
+import { TuiFormatCardModule } from '@taiga-ui/addon-commerce/pipes';
+
+const TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS = {
+    ...TUI_INPUT_CARD_DEFAULT_OPTIONS,
+    cardValidator: tuiDefaultCardValidator,
+    exampleText: `0000 0000 0000 0000`,
+    exampleTextCVC: `000`,
+};
+const TUI_INPUT_CARD_GROUPED_OPTIONS = tuiCreateToken(TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS);
+function tuiInputCardGroupedOptionsProvider(options) {
+    return tuiProvideOptions(TUI_INPUT_CARD_GROUPED_OPTIONS, options, TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS);
+}
+
+/**
+ * InputCardGrouped texts
+ */
+const TUI_INPUT_CARD_GROUPED_TEXTS = tuiCreateTokenFromFactory(() => {
+    const win = inject(WINDOW);
+    const cardNumberTexts = inject(TUI_CARD_NUMBER_TEXTS);
+    const expiryTexts = inject(TUI_CARD_EXPIRY_TEXTS);
+    const cvcTexts = inject(TUI_CARD_CVC_TEXTS);
+    const { desktopSmall } = inject(TUI_MEDIA);
+    const media = win.matchMedia(`screen and (min-width: ${(desktopSmall - 1) / 16}em)`);
+    return tuiTypedFromEvent(media, `change`).pipe(startWith(null), switchMap(() => combineLatest([
+        of(Number(media.matches)),
+        cardNumberTexts,
+        expiryTexts,
+        cvcTexts,
+    ])), map(([index, cardNumber, expiry, cvcTexts]) => ({
+        cardNumberText: cardNumber[index],
+        expiryText: expiry[index],
+        cvcText: cvcTexts[index],
+    })));
+});
+
+const EXPIRE_COMPLETE_LENGTH = 5; // MM/YY
+class TuiInputCardGroupedComponent extends AbstractTuiInputCard {
+    set codeLength(length) {
+        this.exampleTextCVC = '0'.repeat(length);
+        this.maskCVC = {
+            mask: new Array(length).fill(TUI_DIGIT_REGEXP),
+        };
+    }
+    constructor(control, cdr, el, mode$, cardGroupedTexts$, controller, icons, arrowOptions, options) {
+        super(control, cdr, options);
+        this.el = el;
+        this.mode$ = mode$;
+        this.cardGroupedTexts$ = cardGroupedTexts$;
+        this.controller = controller;
+        this.icons = icons;
+        this.arrowOptions = arrowOptions;
+        this.expireInert = false;
+        this.exampleText = this.options.exampleText;
+        this.cardValidator = this.options.cardValidator;
+        this.autofilledChange = new EventEmitter();
+        this.exampleTextCVC = this.options.exampleTextCVC;
+        this.maskCVC = {
+            mask: new Array(3).fill(TUI_DIGIT_REGEXP),
+        };
+        this.maskCard = {
+            mask: TUI_CARD_MASK,
+        };
+        this.maskExpire = maskitoDateOptionsGenerator({
+            mode: 'mm/yy',
+            separator: '/',
+        });
+        this.open = false;
+    }
+    get nativeFocusableElement() {
+        return this.inputCard?.nativeElement ?? null;
+    }
+    get focused() {
+        return this.open || tuiIsNativeFocusedIn(this.el.nativeElement);
+    }
+    get appearance() {
+        return this.controller.appearance;
+    }
+    get card() {
+        return this.value?.card || '';
+    }
+    get expire() {
+        return this.value?.expire || '';
+    }
+    get cvc() {
+        return this.value?.cvc || '';
+    }
+    get hasCleaner() {
+        return !!this.value?.card?.trim() && !this.readOnly && !this.computedDisabled;
+    }
+    get hasDropdown() {
+        return !!this.dropdown;
+    }
+    get placeholderRaised() {
+        return (this.computedFocused && !this.readOnly) || this.hasCardNumber;
+    }
+    get hasCardNumber() {
+        return !!this.value?.card?.trim();
+    }
+    get idCard() {
+        return `${this.id}_card`;
+    }
+    get idExpire() {
+        return `${this.id}_expire`;
+    }
+    get idCVC() {
+        return `${this.id}_cvc`;
+    }
+    get isCardCollapsed() {
+        return this.isFocusable(this.card) && !this.cardFocused;
+    }
+    get autocompleteExpire() {
+        return this.autocompleteEnabled ? 'cc-exp' : 'off';
+    }
+    get autocompleteCVC() {
+        return this.autocompleteEnabled ? 'cc-csc' : 'off';
+    }
+    get tailLength() {
+        return this.hasExtraSpace ? 5 : 4;
+    }
+    // Safari expiration date autofill workaround
+    get name() {
+        return this.autocompleteEnabled ? 'ccexpiryyear' : null;
+    }
+    get cardPrefilled() {
+        return !!this.card.match(TUI_NON_DIGIT_REGEXP);
+    }
+    get cvcPrefilled() {
+        return !!this.cvc.match(TUI_NON_DIGIT_REGEXP);
+    }
+    get cardFocusable() {
+        return this.focusable && !this.cardPrefilled;
+    }
+    get expireFocusable() {
+        return this.isFocusable(this.card) && !this.expireInert;
+    }
+    get cvcFocusable() {
+        return this.isFocusable(this.card);
+    }
+    get masked() {
+        return this.cardPrefilled ? `*${this.card.slice(-4)}` : '*';
+    }
+    get expireSelectionStart() {
+        return this.inputExpire?.nativeElement.selectionStart || 0;
+    }
+    onEsc() {
+        this.open = false;
+    }
+    onArrow(element, step) {
+        this.open = this.hasDropdown;
+        this.cdr.detectChanges();
+        this.datalist?.onKeyDownArrow(element, step);
+    }
+    handleOption(option) {
+        const { card = '', expire = '', cvc = '' } = option;
+        const { bin } = this;
+        const element = (!expire && this.inputExpire?.nativeElement) || this.inputCVC?.nativeElement;
+        this.value = { card, expire, cvc };
+        this.updateBin(bin);
+        this.open = false;
+        this.expireInert = !!expire;
+        element?.focus();
+    }
+    onCardChange(card) {
+        const { value, bin } = this;
+        const parsed = card.split(' ').join('');
+        if (value && value.card === parsed) {
+            return;
+        }
+        this.updateProperty(parsed, 'card');
+        this.updateBin(bin);
+        if (this.cardValidator(this.card) && !this.expire && this.inputExpire) {
+            this.focusExpire();
+        }
+    }
+    onExpireChange(expire) {
+        this.updateProperty(expire, 'expire');
+        if (expire.length === EXPIRE_COMPLETE_LENGTH &&
+            this.expireSelectionStart >= EXPIRE_COMPLETE_LENGTH) {
+            this.focusCVC();
+        }
+    }
+    onCVCChange(cvc) {
+        this.updateProperty(cvc, 'cvc');
+    }
+    transform({ offsetWidth }) {
+        return this.isCardCollapsed ? `translate3d(${offsetWidth}px, 0, 0)` : '';
+    }
+    onActiveZoneChange(active) {
+        this.updateFocused(active);
+        this.open = active && this.open;
+    }
+    onMouseDown(event) {
+        if (tuiIsElement(event.target) && tuiIsInput(event.target)) {
+            return;
+        }
+        event.preventDefault();
+        this.focusInput();
+    }
+    onScroll({ currentTarget }) {
+        if (tuiIsElement(currentTarget)) {
+            currentTarget.scrollLeft = 0;
+        }
+    }
+    clear() {
+        this.expireInert = false;
+        this.value = null;
+        this.focusCard();
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    writeValue(value) {
+        const { bin } = this;
+        super.writeValue(value);
+        this.updateBin(bin);
+        this.expireInert = !!this.expire && this.cardPrefilled;
+    }
+    /** Public API for manual focus management */
+    focusCard() {
+        this.cardNumberAutofocusRef?.focus();
+    }
+    focusExpire() {
+        this.expireCardAutofocusRef?.focus();
+    }
+    focusCVC() {
+        this.cvcCardAutofocusRef?.focus();
+    }
+    get cardFocused() {
+        return !!this.inputCard && tuiIsNativeFocused(this.inputCard.nativeElement);
+    }
+    get hasExtraSpace() {
+        return this.card.length % 4 > 0;
+    }
+    isFocusable(card) {
+        return this.focusable && (this.cardValidator(card) || this.cardPrefilled);
+    }
+    updateBin(oldBin) {
+        const { bin } = this;
+        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.value = newValue.expire || newValue.cvc || newValue.card ? newValue : null;
+    }
+    focusInput() {
+        const element = (this.cardFocusable && this.inputCard?.nativeElement) ||
+            (this.expireFocusable && this.inputExpire?.nativeElement) ||
+            this.inputCVC?.nativeElement;
+        element?.focus();
+    }
+}
+TuiInputCardGroupedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiInputCardGroupedComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: ElementRef }, { token: TUI_MODE }, { token: TUI_INPUT_CARD_GROUPED_TEXTS }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: TUI_COMMON_ICONS }, { token: TUI_ARROW_OPTIONS }, { token: TUI_INPUT_CARD_GROUPED_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+TuiInputCardGroupedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiInputCardGroupedComponent, selector: "tui-input-card-grouped", inputs: { exampleText: "exampleText", cardValidator: "cardValidator", codeLength: "codeLength" }, outputs: { autofilledChange: "autofilledChange" }, host: { attributes: { "data-size": "l" }, listeners: { "$.data-mode.attr": "mode$", "keydown.esc": "onEsc()", "keydown.arrowDown.prevent": "onArrow($event.target,1)", "keydown.arrowUp.prevent": "onArrow($event.target,-1)" } }, providers: [
+        tuiAsFocusableItemAccessor(TuiInputCardGroupedComponent),
+        tuiAsControl(TuiInputCardGroupedComponent),
+        tuiAsDataListHost(TuiInputCardGroupedComponent),
+        MODE_PROVIDER,
+        TEXTFIELD_CONTROLLER_PROVIDER,
+    ], queries: [{ propertyName: "dropdown", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }, { propertyName: "datalist", first: true, predicate: TuiDataListComponent, descendants: true }], viewQueries: [{ propertyName: "inputCard", first: true, predicate: ["inputCard"], descendants: true }, { propertyName: "cardNumberAutofocusRef", first: true, predicate: ["inputCard"], descendants: true, read: TuiAutoFocusDirective }, { propertyName: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true }, { propertyName: "expireCardAutofocusRef", first: true, predicate: ["inputExpire"], descendants: true, read: TuiAutoFocusDirective }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true }, { propertyName: "cvcCardAutofocusRef", first: true, predicate: ["inputCVC"], descendants: true, read: TuiAutoFocusDirective }], usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"cardGroupedTexts$ | async as texts\"\n    tuiDropdownLimitWidth=\"fixed\"\n    tuiWrapper\n    class=\"t-common-wrapper\"\n    [appearance]=\"appearance\"\n    [disabled]=\"computedDisabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    [tuiDropdown]=\"dropdown || ''\"\n    [tuiDropdownManual]=\"open\"\n    (mousedown)=\"onMouseDown($event)\"\n    (scroll)=\"onScroll($event)\"\n    (tuiActiveZoneChange)=\"onActiveZoneChange($event)\"\n>\n    <div class=\"t-wrapper\">\n        <label\n            *tuiLet=\"value?.card | tuiFormatCard: cardPrefilled as formattedCard\"\n            tuiPreventDefault=\"click\"\n        >\n            <input\n                #inputCard\n                automation-id=\"tui-input-card-grouped__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]=\"idCard\"\n                [autocomplete]=\"autocompleteCard\"\n                [class.t-input_hidden]=\"!card.length && focused\"\n                [class.t-input_inert]=\"cardPrefilled\"\n                [disabled]=\"computedDisabled\"\n                [maskito]=\"maskCard\"\n                [ngModel]=\"formattedCard\"\n                [placeholder]=\"cardPrefilled ? '' : exampleText\"\n                [readOnly]=\"readOnly\"\n                [tuiAutoFocus]=\"false\"\n                [tuiFocusable]=\"cardFocusable\"\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]=\"masked\"\n                [class.t-collapsed_enable-mask]=\"isCardCollapsed\"\n                (tuiResize)=\"(0)\"\n            >\n                <span\n                    #ghost\n                    class=\"t-ghost\"\n                    [textContent]=\"formattedCard.slice(-tailLength)\"\n                ></span>\n\n                <span class=\"t-collapsed-wrapper\">\n                    <span\n                        class=\"t-value\"\n                        [style.transform]=\"transform(ghost)\"\n                    >\n                        {{ formattedCard }}\n                    </span>\n                </span>\n            </span>\n            <span\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                {{ texts.cardNumberText }}\n            </span>\n        </label>\n    </div>\n    <div\n        class=\"t-wrapper t-wrapper_expire\"\n        [class.t-wrapper_active]=\"isCardCollapsed\"\n    >\n        <label tuiPreventDefault=\"click\">\n            <input\n                #inputExpire\n                automation-id=\"tui-input-card-grouped__expire\"\n                inputmode=\"numeric\"\n                placeholder=\"00/00\"\n                translate=\"no\"\n                class=\"t-input\"\n                [attr.id]=\"idExpire\"\n                [attr.name]=\"name\"\n                [autocomplete]=\"autocompleteExpire\"\n                [class.t-input_inert]=\"!expireFocusable\"\n                [disabled]=\"computedDisabled\"\n                [maskito]=\"maskExpire\"\n                [ngModel]=\"expire\"\n                [readOnly]=\"readOnly\"\n                [tuiAutoFocus]=\"false\"\n                [tuiFocusable]=\"expireFocusable\"\n                (focus)=\"(0)\"\n                (ngModelChange)=\"onExpireChange($event)\"\n            />\n            <span\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                {{ texts.expiryText }}\n            </span>\n        </label>\n    </div>\n    <div\n        class=\"t-wrapper t-wrapper_cvc\"\n        [class.t-wrapper_active]=\"isCardCollapsed\"\n    >\n        <label tuiPreventDefault=\"click\">\n            <input\n                #inputCVC\n                automation-id=\"tui-input-card-grouped__cvc\"\n                inputmode=\"numeric\"\n                translate=\"no\"\n                type=\"text\"\n                class=\"t-input\"\n                [attr.id]=\"idCVC\"\n                [autocomplete]=\"autocompleteCVC\"\n                [class.t-input_prefilled]=\"cvcPrefilled\"\n                [disabled]=\"computedDisabled\"\n                [maskito]=\"maskCVC\"\n                [ngModel]=\"cvc\"\n                [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n                [readOnly]=\"readOnly || cvcPrefilled\"\n                [tuiAutoFocus]=\"false\"\n                [tuiFocusable]=\"cvcFocusable\"\n                (focus)=\"(0)\"\n                (ngModelChange)=\"onCVCChange($event)\"\n            />\n            <span\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                {{ texts.cvcText }}\n            </span>\n        </label>\n    </div>\n    <div class=\"t-icons\">\n        <div\n            *ngIf=\"icon\"\n            class=\"t-icon-outlet\"\n        >\n            <tui-svg\n                *polymorpheusOutlet=\"icon as text\"\n                automation-id=\"tui-input-card-grouped__icon\"\n                class=\"t-card\"\n                [src]=\"text\"\n            ></tui-svg>\n        </div>\n        <tui-svg\n            *ngIf=\"hasCleaner\"\n            appearance=\"icon\"\n            automation-id=\"tui-input-card-grouped__cleaner\"\n            tuiWrapper\n            class=\"t-icon\"\n            [src]=\"icons.close\"\n            (click)=\"clear()\"\n        ></tui-svg>\n        <tui-svg\n            *ngIf=\"hasDropdown\"\n            appearance=\"icon\"\n            automation-id=\"tui-input-card-grouped__dropdown\"\n            tuiWrapper\n            class=\"t-icon\"\n            [class.t-icon_rotated]=\"open\"\n            [src]=\"arrowOptions.iconLarge\"\n            (click)=\"toggle()\"\n        ></tui-svg>\n    </div>\n</div>\n", styles: [":host{display:block;height:var(--tui-height-l);width:29.5rem;border-radius:var(--tui-radius-m)}:host[data-mode=onDark]{--tui-autofill: var(--tui-autofill-night)}:host :host-context(tui-root._mobile){width:18rem}.t-outline{height:100%;width:100%}.t-common-wrapper{position:relative;height:100%;width:100%;overflow:hidden}.t-wrapper{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;width:100%;height:100%}.t-wrapper_cvc{margin-left:7.1875rem;transform:translate3d(100%,0,0)}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-left:4.0625rem}.t-wrapper_expire{transform:translate3d(100%,0,0)}.t-wrapper_active{transform:translate3d(6.5625rem,0,0)}:host-context(tui-root._mobile) .t-wrapper_active{transform:translate3d(4.125rem,0,0)}.t-card{width:2rem;height:2rem;margin-right:.5rem;color:#1434cb}.t-collapsed{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none;border:0;padding-left:1rem;line-height:2.25rem;pointer-events:none}.t-collapsed:-webkit-autofill,.t-collapsed:-webkit-autofill:hover,.t-collapsed:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-collapsed:-webkit-autofill,.t-collapsed:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-collapsed::-webkit-caps-lock-indicator,.t-collapsed::-webkit-contacts-auto-fill-button,.t-collapsed::-webkit-credit-card-auto-fill-button,.t-collapsed::-webkit-credentials-auto-fill-button,.t-collapsed::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-collapsed::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-collapsed::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-collapsed::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-collapsed::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-collapsed::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-collapsed:-webkit-autofill,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-collapsed:-webkit-autofill:hover,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-collapsed:-webkit-autofill:focus,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-collapsed::placeholder,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-collapsed :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-collapsed :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-collapsed :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-collapsed :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-collapsed :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-collapsed :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield._disabled),.t-collapsed :host-context(tui-textarea._disabled),.t-collapsed :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-collapsed:-webkit-autofill+.t-content .t-placeholder,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-collapsed:-webkit-autofill+.t-content .t-placeholder,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-collapsed,.t-collapsed :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask .t-collapsed-wrapper{left:1.375rem}.t-collapsed-wrapper{position:absolute;top:0;display:block;width:100%;height:100%;overflow:hidden}.t-value{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;transform:translate3d(100%,0,0)}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border:0;padding:0 1rem}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-input::placeholder,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-textarea._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-input::placeholder{color:var(--tui-text-03);opacity:1}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}.t-input.t-input.t-input_card:not(.t-input_hidden),:host[data-mode=onDark] .t-input.t-input.t-input_card:not(.t-input_hidden),.t-input.t-input.t-input_card:not(.t-input_hidden)::placeholder,:host[data-mode=onDark] .t-input.t-input.t-input_card:not(.t-input_hidden)::placeholder,.t-input.t-input.t-input_card:not(.t-input_hidden):-webkit-autofill,:host[data-mode=onDark] .t-input.t-input.t-input_card:not(.t-input_hidden):-webkit-autofill{caret-color:var(--tui-base-09);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button,:host[data-mode=onDark] .t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-icons{position:absolute;right:.75rem;display:flex;align-items:center;height:100%}.t-icon-outlet{display:flex}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-icon,:host._disabled .t-icon{pointer-events:none}.t-icon_rotated{transform:rotate(180deg)}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);margin:1.125rem 1rem;line-height:1.25rem}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}.t-ghost{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "directive", type: i4.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { kind: "component", type: i5.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i5.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i4.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { kind: "directive", type: i5.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i5.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i5.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { kind: "directive", type: i5.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { kind: "directive", type: i5.TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])" }, { kind: "directive", type: i4.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }, { kind: "directive", type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i4.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i4.TuiResizeDirective, selector: "[tuiResize]", outputs: ["tuiResize"] }, { kind: "directive", type: i4.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TuiMapperPipe, name: "tuiMapper" }, { kind: "pipe", type: i7.TuiFormatCardPipe, name: "tuiFormatCard" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    tuiPure
+], TuiInputCardGroupedComponent.prototype, "isFocusable", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiInputCardGroupedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-input-card-grouped', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        tuiAsFocusableItemAccessor(TuiInputCardGroupedComponent),
+                        tuiAsControl(TuiInputCardGroupedComponent),
+                        tuiAsDataListHost(TuiInputCardGroupedComponent),
+                        MODE_PROVIDER,
+                        TEXTFIELD_CONTROLLER_PROVIDER,
+                    ], host: {
+                        '($.data-mode.attr)': 'mode$',
+                        'data-size': 'l',
+                    }, template: "<div\n    *ngIf=\"cardGroupedTexts$ | async as texts\"\n    tuiDropdownLimitWidth=\"fixed\"\n    tuiWrapper\n    class=\"t-common-wrapper\"\n    [appearance]=\"appearance\"\n    [disabled]=\"computedDisabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    [tuiDropdown]=\"dropdown || ''\"\n    [tuiDropdownManual]=\"open\"\n    (mousedown)=\"onMouseDown($event)\"\n    (scroll)=\"onScroll($event)\"\n    (tuiActiveZoneChange)=\"onActiveZoneChange($event)\"\n>\n    <div class=\"t-wrapper\">\n        <label\n            *tuiLet=\"value?.card | tuiFormatCard: cardPrefilled as formattedCard\"\n            tuiPreventDefault=\"click\"\n        >\n            <input\n                #inputCard\n                automation-id=\"tui-input-card-grouped__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]=\"idCard\"\n                [autocomplete]=\"autocompleteCard\"\n                [class.t-input_hidden]=\"!card.length && focused\"\n                [class.t-input_inert]=\"cardPrefilled\"\n                [disabled]=\"computedDisabled\"\n                [maskito]=\"maskCard\"\n                [ngModel]=\"formattedCard\"\n                [placeholder]=\"cardPrefilled ? '' : exampleText\"\n                [readOnly]=\"readOnly\"\n                [tuiAutoFocus]=\"false\"\n                [tuiFocusable]=\"cardFocusable\"\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]=\"masked\"\n                [class.t-collapsed_enable-mask]=\"isCardCollapsed\"\n                (tuiResize)=\"(0)\"\n            >\n                <span\n                    #ghost\n                    class=\"t-ghost\"\n                    [textContent]=\"formattedCard.slice(-tailLength)\"\n                ></span>\n\n                <span class=\"t-collapsed-wrapper\">\n                    <span\n                        class=\"t-value\"\n                        [style.transform]=\"transform(ghost)\"\n                    >\n                        {{ formattedCard }}\n                    </span>\n                </span>\n            </span>\n            <span\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                {{ texts.cardNumberText }}\n            </span>\n        </label>\n    </div>\n    <div\n        class=\"t-wrapper t-wrapper_expire\"\n        [class.t-wrapper_active]=\"isCardCollapsed\"\n    >\n        <label tuiPreventDefault=\"click\">\n            <input\n                #inputExpire\n                automation-id=\"tui-input-card-grouped__expire\"\n                inputmode=\"numeric\"\n                placeholder=\"00/00\"\n                translate=\"no\"\n                class=\"t-input\"\n                [attr.id]=\"idExpire\"\n                [attr.name]=\"name\"\n                [autocomplete]=\"autocompleteExpire\"\n                [class.t-input_inert]=\"!expireFocusable\"\n                [disabled]=\"computedDisabled\"\n                [maskito]=\"maskExpire\"\n                [ngModel]=\"expire\"\n                [readOnly]=\"readOnly\"\n                [tuiAutoFocus]=\"false\"\n                [tuiFocusable]=\"expireFocusable\"\n                (focus)=\"(0)\"\n                (ngModelChange)=\"onExpireChange($event)\"\n            />\n            <span\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                {{ texts.expiryText }}\n            </span>\n        </label>\n    </div>\n    <div\n        class=\"t-wrapper t-wrapper_cvc\"\n        [class.t-wrapper_active]=\"isCardCollapsed\"\n    >\n        <label tuiPreventDefault=\"click\">\n            <input\n                #inputCVC\n                automation-id=\"tui-input-card-grouped__cvc\"\n                inputmode=\"numeric\"\n                translate=\"no\"\n                type=\"text\"\n                class=\"t-input\"\n                [attr.id]=\"idCVC\"\n                [autocomplete]=\"autocompleteCVC\"\n                [class.t-input_prefilled]=\"cvcPrefilled\"\n                [disabled]=\"computedDisabled\"\n                [maskito]=\"maskCVC\"\n                [ngModel]=\"cvc\"\n                [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n                [readOnly]=\"readOnly || cvcPrefilled\"\n                [tuiAutoFocus]=\"false\"\n                [tuiFocusable]=\"cvcFocusable\"\n                (focus)=\"(0)\"\n                (ngModelChange)=\"onCVCChange($event)\"\n            />\n            <span\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                {{ texts.cvcText }}\n            </span>\n        </label>\n    </div>\n    <div class=\"t-icons\">\n        <div\n            *ngIf=\"icon\"\n            class=\"t-icon-outlet\"\n        >\n            <tui-svg\n                *polymorpheusOutlet=\"icon as text\"\n                automation-id=\"tui-input-card-grouped__icon\"\n                class=\"t-card\"\n                [src]=\"text\"\n            ></tui-svg>\n        </div>\n        <tui-svg\n            *ngIf=\"hasCleaner\"\n            appearance=\"icon\"\n            automation-id=\"tui-input-card-grouped__cleaner\"\n            tuiWrapper\n            class=\"t-icon\"\n            [src]=\"icons.close\"\n            (click)=\"clear()\"\n        ></tui-svg>\n        <tui-svg\n            *ngIf=\"hasDropdown\"\n            appearance=\"icon\"\n            automation-id=\"tui-input-card-grouped__dropdown\"\n            tuiWrapper\n            class=\"t-icon\"\n            [class.t-icon_rotated]=\"open\"\n            [src]=\"arrowOptions.iconLarge\"\n            (click)=\"toggle()\"\n        ></tui-svg>\n    </div>\n</div>\n", styles: [":host{display:block;height:var(--tui-height-l);width:29.5rem;border-radius:var(--tui-radius-m)}:host[data-mode=onDark]{--tui-autofill: var(--tui-autofill-night)}:host :host-context(tui-root._mobile){width:18rem}.t-outline{height:100%;width:100%}.t-common-wrapper{position:relative;height:100%;width:100%;overflow:hidden}.t-wrapper{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;width:100%;height:100%}.t-wrapper_cvc{margin-left:7.1875rem;transform:translate3d(100%,0,0)}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-left:4.0625rem}.t-wrapper_expire{transform:translate3d(100%,0,0)}.t-wrapper_active{transform:translate3d(6.5625rem,0,0)}:host-context(tui-root._mobile) .t-wrapper_active{transform:translate3d(4.125rem,0,0)}.t-card{width:2rem;height:2rem;margin-right:.5rem;color:#1434cb}.t-collapsed{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none;border:0;padding-left:1rem;line-height:2.25rem;pointer-events:none}.t-collapsed:-webkit-autofill,.t-collapsed:-webkit-autofill:hover,.t-collapsed:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-collapsed:-webkit-autofill,.t-collapsed:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-collapsed::-webkit-caps-lock-indicator,.t-collapsed::-webkit-contacts-auto-fill-button,.t-collapsed::-webkit-credit-card-auto-fill-button,.t-collapsed::-webkit-credentials-auto-fill-button,.t-collapsed::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-collapsed::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-collapsed::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-collapsed::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-collapsed::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-collapsed::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-collapsed:-webkit-autofill,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-collapsed:-webkit-autofill:hover,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-collapsed:-webkit-autofill:focus,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-collapsed::placeholder,.t-collapsed :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-collapsed :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-collapsed :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-collapsed :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-collapsed :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-collapsed :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-collapsed :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield._disabled),.t-collapsed :host-context(tui-textarea._disabled),.t-collapsed :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-collapsed:-webkit-autofill+.t-content .t-placeholder,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-collapsed,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-collapsed:-webkit-autofill+.t-content .t-placeholder,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-collapsed,.t-collapsed :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask .t-collapsed-wrapper{left:1.375rem}.t-collapsed-wrapper{position:absolute;top:0;display:block;width:100%;height:100%;overflow:hidden}.t-value{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;transform:translate3d(100%,0,0)}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border:0;padding:0 1rem}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:hover,[tuiWrapper][data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}[tuiWrapper][data-mode=onDark] .t-input::placeholder,.t-input :host-context([tuiWrapper][data-mode=\"onDark\"])::placeholder{color:var(--tui-text-03-night)}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-textarea._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-top:1rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em;-webkit-user-select:none}.t-input::placeholder{color:var(--tui-text-03);opacity:1}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}.t-input.t-input.t-input_card:not(.t-input_hidden),:host[data-mode=onDark] .t-input.t-input.t-input_card:not(.t-input_hidden),.t-input.t-input.t-input_card:not(.t-input_hidden)::placeholder,:host[data-mode=onDark] .t-input.t-input.t-input_card:not(.t-input_hidden)::placeholder,.t-input.t-input.t-input_card:not(.t-input_hidden):-webkit-autofill,:host[data-mode=onDark] .t-input.t-input.t-input_card:not(.t-input_hidden):-webkit-autofill{caret-color:var(--tui-base-09);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button,:host[data-mode=onDark] .t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-icons{position:absolute;right:.75rem;display:flex;align-items:center;height:100%}.t-icon-outlet{display:flex}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-icon,:host._disabled .t-icon{pointer-events:none}.t-icon_rotated{transform:rotate(180deg)}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);margin:1.125rem 1rem;line-height:1.25rem}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}.t-ghost{visibility:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NgControl]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_MODE]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_INPUT_CARD_GROUPED_TEXTS]
+                }] }, { type: i5.TuiTextfieldController, decorators: [{
+                    type: Inject,
+                    args: [TUI_TEXTFIELD_WATCHED_CONTROLLER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_COMMON_ICONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_ARROW_OPTIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_INPUT_CARD_GROUPED_OPTIONS]
+                }] }]; }, propDecorators: { inputCard: [{
+                type: ViewChild,
+                args: ['inputCard']
+            }], cardNumberAutofocusRef: [{
+                type: ViewChild,
+                args: ['inputCard', { read: TuiAutoFocusDirective }]
+            }], inputExpire: [{
+                type: ViewChild,
+                args: ['inputExpire']
+            }], expireCardAutofocusRef: [{
+                type: ViewChild,
+                args: ['inputExpire', { read: TuiAutoFocusDirective }]
+            }], inputCVC: [{
+                type: ViewChild,
+                args: ['inputCVC']
+            }], cvcCardAutofocusRef: [{
+                type: ViewChild,
+                args: ['inputCVC', { read: TuiAutoFocusDirective }]
+            }], exampleText: [{
+                type: Input
+            }], cardValidator: [{
+                type: Input
+            }], codeLength: [{
+                type: Input
+            }], autofilledChange: [{
+                type: Output
+            }], dropdown: [{
+                type: ContentChild,
+                args: [TuiDataListDirective, { read: TemplateRef }]
+            }], datalist: [{
+                type: ContentChild,
+                args: [TuiDataListComponent]
+            }], onEsc: [{
+                type: HostListener,
+                args: ['keydown.esc']
+            }], onArrow: [{
+                type: HostListener,
+                args: ['keydown.arrowDown.prevent', ['$event.target', '1']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowUp.prevent', ['$event.target', '-1']]
+            }], isFocusable: [] } });
+
+class TuiInputCardGroupedModule {
+}
+TuiInputCardGroupedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiInputCardGroupedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiInputCardGroupedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TuiInputCardGroupedModule, declarations: [TuiInputCardGroupedComponent], imports: [CommonModule,
+        FormsModule,
+        MaskitoModule,
+        TuiFocusableModule,
+        TuiSvgModule,
+        TuiWrapperModule,
+        TuiActiveZoneModule,
+        TuiMapperPipeModule,
+        TuiDropdownModule,
+        TuiPreventDefaultModule,
+        PolymorpheusModule,
+        TuiLetModule,
+        TuiResizeModule,
+        TuiFormatCardModule,
+        TuiAutoFocusModule], exports: [TuiInputCardGroupedComponent] });
+TuiInputCardGroupedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiInputCardGroupedModule, imports: [CommonModule,
+        FormsModule,
+        MaskitoModule,
+        TuiFocusableModule,
+        TuiSvgModule,
+        TuiWrapperModule,
+        TuiActiveZoneModule,
+        TuiMapperPipeModule,
+        TuiDropdownModule,
+        TuiPreventDefaultModule,
+        PolymorpheusModule,
+        TuiLetModule,
+        TuiResizeModule,
+        TuiFormatCardModule,
+        TuiAutoFocusModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiInputCardGroupedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MaskitoModule,
+                        TuiFocusableModule,
+                        TuiSvgModule,
+                        TuiWrapperModule,
+                        TuiActiveZoneModule,
+                        TuiMapperPipeModule,
+                        TuiDropdownModule,
+                        TuiPreventDefaultModule,
+                        PolymorpheusModule,
+                        TuiLetModule,
+                        TuiResizeModule,
+                        TuiFormatCardModule,
+                        TuiAutoFocusModule,
+                    ],
+                    declarations: [TuiInputCardGroupedComponent],
+                    exports: [TuiInputCardGroupedComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS, TUI_INPUT_CARD_GROUPED_OPTIONS, TUI_INPUT_CARD_GROUPED_TEXTS, TuiInputCardGroupedComponent, TuiInputCardGroupedModule, tuiInputCardGroupedOptionsProvider };
+//# sourceMappingURL=taiga-ui-addon-commerce-components-input-card-grouped.mjs.map