@taiga-ui/addon-commerce 2.55.0 → 3.0.0-rc.0

package/fesm2015/taiga-ui-addon-commerce-components-input-card-grouped.js

@@ -1,27 +1,36 @@
-import { __decorate, __param } from 'tslib';
-import { InjectionToken, inject, EventEmitter, Optional, Self, Inject, ChangeDetectorRef, ElementRef, ViewChild, Input, Output, ContentChild, TemplateRef, HostListener, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, EventEmitter, ChangeDetectorRef, ElementRef, forwardRef, TemplateRef, Component, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, Input, Output, ContentChild, HostListener, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
 import { NgControl, FormsModule } from '@angular/forms';
 import { tuiDefaultCardValidator, TUI_CARD_MASK } from '@taiga-ui/addon-commerce/constants';
-import { tuiCreateAutoCorrectedExpirePipe, getPaymentSystem } from '@taiga-ui/addon-commerce/utils';
-import { typedFromEvent, AbstractTuiNullableControl, isNativeFocusedIn, tuiAssertIsHTMLElement, isNativeFocused, tuiDefaultProp, tuiRequiredSetter, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiHoveredModule, TuiActiveZoneModule, TuiInputModeModule, TuiMapperPipeModule, TuiPreventDefaultModule, TuiLetModule } from '@taiga-ui/cdk';
-import { TUI_DIGIT_REGEXP, TUI_NON_DIGIT_REGEXP, TUI_MODE, TUI_TEXTFIELD_APPEARANCE, TuiDataListDirective, TuiDataListComponent, MODE_PROVIDER, TUI_DATA_LIST_HOST, TuiSvgModule, TuiWrapperModule, TuiDropdownModule } from '@taiga-ui/core';
-import { combineLatest, of, Observable } from 'rxjs';
+import { tuiCreateAutoCorrectedExpirePipe, tuiGetPaymentSystem } from '@taiga-ui/addon-commerce/utils';
+import * as i3 from '@taiga-ui/cdk';
+import { typedFromEvent, AbstractTuiNullableControl, tuiIsNativeFocusedIn, tuiAssertIsElement, tuiIsNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, tuiRequiredSetter, tuiPure, TuiFocusableModule, TuiActiveZoneModule, TuiInputModeModule, TuiMapperPipeModule, TuiPreventDefaultModule, TuiLetModule } from '@taiga-ui/cdk';
+import * as i1 from '@taiga-ui/core';
+import { TUI_DIGIT_REGEXP, TUI_NON_DIGIT_REGEXP, TUI_MODE, TUI_TEXTFIELD_APPEARANCE, MODE_PROVIDER, TUI_DATA_LIST_HOST, TuiDataListDirective, TuiDataListComponent, TuiSvgModule, TuiWrapperModule, TuiDropdownModule } from '@taiga-ui/core';
 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 { TUI_MEDIA } from '@taiga-ui/core/tokens';
+import * as i8 from 'rxjs';
+import { combineLatest, of } from 'rxjs';
 import { startWith, switchMap, map } from 'rxjs/operators';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { TuiFormatCardModule } from '@taiga-ui/addon-commerce/pipes';
-import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import * as i5 from 'angular2-text-mask';
 import { TextMaskModule } from 'angular2-text-mask';
+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_TEXTS = new InjectionToken('InputCardGrouped texts', {
+const TUI_INPUT_CARD_GROUPED_TEXTS = new InjectionToken(`InputCardGrouped texts`, {
     factory: () => inputGroupedTextsFactory(inject(WINDOW), inject(TUI_CARD_NUMBER_TEXTS), inject(TUI_CARD_EXPIRY_TEXTS), inject(TUI_CARD_CVC_TEXTS), inject(TUI_MEDIA)),
 });
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function inputGroupedTextsFactory(windowRef, cardNumberTexts, expiryTexts, cvcTexts, { desktopSmall }) {
     const media = windowRef.matchMedia(`screen and (min-width: ${(desktopSmall - 1) / 16}em)`);
-    return typedFromEvent(media, 'change').pipe(startWith(null), switchMap(() => combineLatest([
+    return typedFromEvent(media, `change`).pipe(startWith(null), switchMap(() => combineLatest([
         of(Number(media.matches)),
         cardNumberTexts,
         expiryTexts,
@@ -33,21 +42,20 @@ function inputGroupedTextsFactory(windowRef, cardNumberTexts, expiryTexts, cvcTe
     })));
 }
 
-var TuiInputCardGroupedComponent_1;
 const STUB = {
-    card: '',
-    expire: '',
-    cvc: '',
+    card: ``,
+    expire: ``,
+    cvc: ``,
 };
 const ICONS = {
-    ["mir" /* Mir */]: 'tuiIconMir',
-    ["visa" /* Visa */]: 'tuiIconVisa',
-    ["electron" /* Electron */]: 'tuiIconElectron',
-    ["mastercard" /* Mastercard */]: 'tuiIconMastercard',
-    ["maestro" /* Maestro */]: 'tuiIconMaestro',
+    mir: `tuiIconMir`,
+    visa: `tuiIconVisa`,
+    electron: `tuiIconElectron`,
+    mastercard: `tuiIconMastercard`,
+    maestro: `tuiIconMaestro`,
 };
 // @dynamic
-let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInputCardGroupedComponent extends AbstractTuiNullableControl {
+class TuiInputCardGroupedComponent extends AbstractTuiNullableControl {
     constructor(control, changeDetectorRef, elementRef, mode$, cardGroupedTexts$, appearance) {
         super(control, changeDetectorRef);
         this.elementRef = elementRef;
@@ -56,13 +64,13 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         this.appearance = appearance;
         this.expireInert = false;
         this.autocompleteEnabled = false;
-        this.cardSrc = null; // TODO: 3.0 will be deleted `null` in v3.0
-        this.exampleText = '0000 0000 0000 0000';
+        this.cardSrc = ``;
+        this.exampleText = `0000 0000 0000 0000`;
         this.cardValidator = tuiDefaultCardValidator;
         this.autofilledChange = new EventEmitter();
         this.binChange = new EventEmitter();
-        this.dropdown = '';
-        this.exampleTextCVC = '000';
+        this.dropdown = ``;
+        this.exampleTextCVC = `000`;
         this.maskCVC = {
             mask: new Array(3).fill(TUI_DIGIT_REGEXP),
             guide: false,
@@ -76,7 +84,7 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
             mask: [
                 TUI_DIGIT_REGEXP,
                 TUI_DIGIT_REGEXP,
-                '/',
+                `/`,
                 TUI_DIGIT_REGEXP,
                 TUI_DIGIT_REGEXP,
             ],
@@ -86,7 +94,7 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         this.open = false;
     }
     set codeLength(length) {
-        this.exampleTextCVC = '0'.repeat(length);
+        this.exampleTextCVC = `0`.repeat(length);
         this.maskCVC = {
             mask: new Array(length).fill(TUI_DIGIT_REGEXP),
             guide: false,
@@ -96,19 +104,19 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         return this.inputCard ? this.inputCard.nativeElement : null;
     }
     get focused() {
-        return this.open || isNativeFocusedIn(this.elementRef.nativeElement);
+        return this.open || tuiIsNativeFocusedIn(this.elementRef.nativeElement);
     }
     get card() {
-        var _a, _b;
-        return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.card) !== null && _b !== void 0 ? _b : '';
+        var _a;
+        return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.card) || ``;
     }
     get expire() {
-        var _a, _b;
-        return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.expire) !== null && _b !== void 0 ? _b : '';
+        var _a;
+        return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.expire) || ``;
     }
     get cvc() {
-        var _a, _b;
-        return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.cvc) !== null && _b !== void 0 ? _b : '';
+        var _a;
+        return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.cvc) || ``;
     }
     get hasCleaner() {
         var _a, _b;
@@ -122,8 +130,7 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         return paymentSystem && ICONS[paymentSystem];
     }
     get icon() {
-        var _a;
-        return (_a = this.cardSrc) !== null && _a !== void 0 ? _a : this.defaultIcon;
+        return this.cardSrc || this.defaultIcon;
     }
     get bin() {
         return !this.value || this.value.card.length < 6
@@ -166,7 +173,7 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
     }
     // Safari expiration date autofill workaround
     get name() {
-        return this.autocompleteEnabled ? 'ccexpiryyear' : null;
+        return this.autocompleteEnabled ? `ccexpiryyear` : null;
     }
     get cardPrefilled() {
         return !!this.card.match(TUI_NON_DIGIT_REGEXP);
@@ -184,7 +191,7 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         return this.isFocusable(this.card);
     }
     get masked() {
-        return this.cardPrefilled ? `*${this.card.slice(-4)}` : '*';
+        return this.cardPrefilled ? `*${this.card.slice(-4)}` : `*`;
     }
     onEsc() {
         this.open = false;
@@ -197,7 +204,7 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
     }
     handleOption(option) {
         var _a, _b;
-        const { card = '', expire = '', cvc = '' } = option;
+        const { card = ``, expire = ``, cvc = `` } = option;
         const { bin } = this;
         const element = (!expire && ((_a = this.inputExpire) === null || _a === void 0 ? void 0 : _a.nativeElement)) || ((_b = this.inputCVC) === null || _b === void 0 ? void 0 : _b.nativeElement);
         this.updateValue({ card, expire, cvc });
@@ -208,11 +215,11 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
     }
     onCardChange(card) {
         const { value, bin } = this;
-        const parsed = card.split(' ').join('');
+        const parsed = card.split(` `).join(``);
         if (value && value.card === parsed) {
             return;
         }
-        this.updateProperty(parsed, 'card');
+        this.updateProperty(parsed, `card`);
         this.updateBin(bin);
         if (this.cardValidator(this.card) && !this.expire && this.inputExpire) {
             this.focusExpire();
@@ -227,35 +234,32 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         if (parseInt(expire.slice(0, 2), 10) > 12) {
             expire = `12${expire.slice(2)}`;
         }
-        if (expire.slice(0, 2) === '00') {
+        if (expire.slice(0, 2) === `00`) {
             expire = `01${expire.slice(2)}`;
         }
         this.inputExpire.nativeElement.value = expire;
-        this.updateProperty(expire, 'expire');
+        this.updateProperty(expire, `expire`);
         if (expire.length === 5) {
             this.focusCVC();
         }
     }
     onCVCChange(cvc) {
-        this.updateProperty(cvc, 'cvc');
+        this.updateProperty(cvc, `cvc`);
     }
     onActiveZoneChange(active) {
         this.updateFocused(active);
         this.open = active && this.open;
     }
-    onHovered(hovered) {
-        this.updateHovered(hovered);
-    }
     onMouseDown(event) {
-        tuiAssertIsHTMLElement(event.target);
-        if (event.target.matches('input')) {
+        tuiAssertIsElement(event.target);
+        if (event.target.matches(`input`)) {
             return;
         }
         event.preventDefault();
         this.focusInput();
     }
     onScroll({ currentTarget }) {
-        tuiAssertIsHTMLElement(currentTarget);
+        tuiAssertIsElement(currentTarget);
         currentTarget.scrollLeft = 0;
     }
     clear() {
@@ -285,10 +289,10 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
         (_a = this.inputCVC) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
     }
     get cardFocused() {
-        return !!this.inputCard && isNativeFocused(this.inputCard.nativeElement);
+        return !!this.inputCard && tuiIsNativeFocused(this.inputCard.nativeElement);
     }
     get paymentSystem() {
-        return this.value && getPaymentSystem(this.value.card);
+        return this.value && tuiGetPaymentSystem(this.value.card);
     }
     isFocusable(card) {
         return this.focusable && (this.cardValidator(card) || this.cardPrefilled);
@@ -317,113 +321,150 @@ let TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = class TuiInp
     focusInput() {
         var _a, _b, _c;
         const element = (this.cardFocusable && ((_a = this.inputCard) === null || _a === void 0 ? void 0 : _a.nativeElement)) ||
-            (this.expireFocusable && ((_b = this.inputExpire) === null || _b === void 0 ? void 0 : _b.nativeElement)) || ((_c = this.inputCVC) === null || _c === void 0 ? void 0 : _c.nativeElement);
+            (this.expireFocusable && ((_b = this.inputExpire) === null || _b === void 0 ? void 0 : _b.nativeElement)) ||
+            ((_c = this.inputCVC) === null || _c === void 0 ? void 0 : _c.nativeElement);
         element === null || element === void 0 ? void 0 : element.focus();
     }
-};
-TuiInputCardGroupedComponent.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_INPUT_CARD_GROUPED_TEXTS,] }] },
-    { type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] }
-];
-__decorate([
-    ViewChild('inputCard')
-], TuiInputCardGroupedComponent.prototype, "inputCard", void 0);
-__decorate([
-    ViewChild('inputExpire')
-], TuiInputCardGroupedComponent.prototype, "inputExpire", void 0);
-__decorate([
-    ViewChild('inputCVC')
-], TuiInputCardGroupedComponent.prototype, "inputCVC", void 0);
+}
+TuiInputCardGroupedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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_APPEARANCE }], target: i0.ɵɵFactoryTarget.Component });
+TuiInputCardGroupedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputCardGroupedComponent, selector: "tui-input-card-grouped", inputs: { autocompleteEnabled: "autocompleteEnabled", cardSrc: "cardSrc", exampleText: "exampleText", cardValidator: "cardValidator", codeLength: "codeLength" }, outputs: { autofilledChange: "autofilledChange", binChange: "binChange" }, 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: [
+        MODE_PROVIDER,
+        {
+            provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
+            useExisting: forwardRef(() => TuiInputCardGroupedComponent),
+        },
+        {
+            provide: TUI_DATA_LIST_HOST,
+            useExisting: forwardRef(() => TuiInputCardGroupedComponent),
+        },
+    ], 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: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"cardGroupedTexts$ | async as texts\"\n    tuiWrapper\n    class=\"t-common-wrapper\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [tuiDropdown]=\"open\"\n    [tuiDropdownContent]=\"dropdown || ''\"\n    (tuiActiveZoneChange)=\"onActiveZoneChange($event)\"\n    (scroll)=\"onScroll($event)\"\n    (mousedown)=\"onMouseDown($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                type=\"text\"\n                automation-id=\"tui-input-card-grouped__card\"\n                tuiInputMode=\"numeric\"\n                class=\"t-input t-input_card\"\n                [class.t-input_inert]=\"cardPrefilled\"\n                [class.t-input_hidden]=\"!card.length && focused\"\n                [attr.id]=\"idCard\"\n                [attr.aria-invalid]=\"!cardPrefilled && !(this.card | tuiMapper: cardValidator)\"\n                [placeholder]=\"cardPrefilled ? '' : exampleText\"\n                [autocomplete]=\"autocompleteCard\"\n                [disabled]=\"computedDisabled\"\n                [readOnly]=\"readOnly\"\n                [textMask]=\"maskCard\"\n                [tuiFocusable]=\"cardFocusable\"\n                [ngModel]=\"formattedCard\"\n                (ngModelChange)=\"onCardChange($event)\"\n                (focus)=\"(0)\"\n            />\n            <span\n                aria-hidden=\"true\"\n                class=\"t-collapsed\"\n                [attr.data-before]=\"masked\"\n                [class.t-collapsed_enable-mask]=\"isCardCollapsed\"\n            >\n                <span class=\"t-collapsed-wrapper\">\n                    <span\n                        class=\"t-value\"\n                        [class.t-value_collapsed]=\"isCardCollapsed\"\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                type=\"text\"\n                placeholder=\"00/00\"\n                automation-id=\"tui-input-card-grouped__expire\"\n                tuiInputMode=\"numeric\"\n                class=\"t-input\"\n                [class.t-input_inert]=\"!expireFocusable\"\n                [attr.id]=\"idExpire\"\n                [attr.name]=\"name\"\n                [autocomplete]=\"autocompleteExpire\"\n                [disabled]=\"computedDisabled\"\n                [readOnly]=\"readOnly\"\n                [tuiFocusable]=\"expireFocusable\"\n                [textMask]=\"maskExpire\"\n                [ngModel]=\"expire\"\n                (ngModelChange)=\"onExpireChange($event)\"\n                (focus)=\"(0)\"\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                type=\"text\"\n                automation-id=\"tui-input-card-grouped__cvc\"\n                tuiInputMode=\"numeric\"\n                class=\"t-input\"\n                [class.t-input_prefilled]=\"cvcPrefilled\"\n                [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n                [attr.id]=\"idCVC\"\n                [disabled]=\"computedDisabled\"\n                [readOnly]=\"readOnly || cvcPrefilled\"\n                [autocomplete]=\"autocompleteCVC\"\n                [textMask]=\"maskCVC\"\n                [tuiFocusable]=\"cvcFocusable\"\n                [ngModel]=\"cvc\"\n                (ngModelChange)=\"onCVCChange($event)\"\n                (focus)=\"(0)\"\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            src=\"tuiIconCloseLarge\"\n            class=\"t-icon\"\n            (click)=\"clear()\"\n        ></tui-svg>\n        <tui-svg\n            *ngIf=\"hasDropdown\"\n            src=\"tuiIconChevronDownLarge\"\n            class=\"t-icon\"\n            [class.t-icon_rotated]=\"open\"\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:.3s;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:translate(100%)}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-left:4.0625rem}.t-wrapper_expire{transform:translate(100%)}.t-wrapper_active{transform:translate(6.5625rem)}:host-context(tui-root._mobile) .t-wrapper_active{transform:translate(4.125rem)}.t-card{width:2rem;height:2rem;margin-right:.625rem}.t-collapsed{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin: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%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 0 0 0;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width: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{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}:host[data-mode=onDark] .t-collapsed:-webkit-autofill,.t-collapsed :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill,.t-collapsed :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill,:host[data-mode=onDark] .t-collapsed:-webkit-autofill:hover,.t-collapsed :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill:hover,.t-collapsed :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill:hover,:host[data-mode=onDark] .t-collapsed:-webkit-autofill:focus,.t-collapsed :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill:focus,.t-collapsed :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill:focus{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}: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-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}: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-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-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+.content .placeholder,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .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:1.125rem}:host[data-size=m]:not(._label-outside) .t-collapsed:-webkit-autofill+.content .placeholder,.t-collapsed :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .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:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;transform:translate(100%)}.t-value_collapsed{transform:translate(4ch)}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin: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%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 0 0 0;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width: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:.3s;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{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}:host[data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill,.t-input :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill,:host[data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill:hover,.t-input :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill:hover,:host[data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill:focus,.t-input :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill:focus{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}: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-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}: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-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-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+.content .placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .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:1.125rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.content .placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .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::-ms-input-placeholder{color:var(--tui-text-03)}.t-input::placeholder{color:var(--tui-text-03)}:host[data-mode=onDark] .t-input::-ms-input-placeholder{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}.t-input_card:not(.t-input_hidden),.t-input_card:not(.t-input_hidden)::placeholder,.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_card::-webkit-credit-card-auto-fill-button{pointer-events:none;background-color:transparent!important;-webkit-mask-image: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-property:all;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.t-icon:hover{color:var(--tui-text-02)}:host._readonly .t-icon,:host._disabled .t-icon{pointer-events:none}:host[data-mode=onDark] .t-icon{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-icon:hover{color:var(--tui-text-01-night)}.t-icon_rotated{transform:rotate(180deg)}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);margin:1.125rem 1rem;line-height:1.25rem}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);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[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused):hover .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-size:.9375rem}: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)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size=l][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size=m][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size=l][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}\n"], components: [{ type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"] }, { type: i3.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]" }, { type: i3.TuiInputModeDirective, selector: "input[tuiInputMode]", inputs: ["tuiInputMode"] }, { 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]" }, { type: i5.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i3.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe, "tuiFormatCard": i7.TuiFormatCardPipe, "tuiMapper": i3.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputCardGroupedComponent.prototype, "autocompleteEnabled", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputCardGroupedComponent.prototype, "cardSrc", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputCardGroupedComponent.prototype, "exampleText", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputCardGroupedComponent.prototype, "cardValidator", void 0);
 __decorate([
-    Input(),
     tuiRequiredSetter()
 ], TuiInputCardGroupedComponent.prototype, "codeLength", null);
-__decorate([
-    Output()
-], TuiInputCardGroupedComponent.prototype, "autofilledChange", void 0);
-__decorate([
-    Output()
-], TuiInputCardGroupedComponent.prototype, "binChange", void 0);
-__decorate([
-    ContentChild(TuiDataListDirective, { read: TemplateRef })
-], TuiInputCardGroupedComponent.prototype, "dropdown", void 0);
-__decorate([
-    ContentChild(TuiDataListComponent)
-], TuiInputCardGroupedComponent.prototype, "datalist", void 0);
-__decorate([
-    HostListener('keydown.esc')
-], TuiInputCardGroupedComponent.prototype, "onEsc", null);
-__decorate([
-    HostListener('keydown.arrowDown.prevent', ['$event.target', '1']),
-    HostListener('keydown.arrowUp.prevent', ['$event.target', '-1'])
-], TuiInputCardGroupedComponent.prototype, "onArrow", null);
 __decorate([
     tuiPure
 ], TuiInputCardGroupedComponent.prototype, "isFocusable", null);
-TuiInputCardGroupedComponent = TuiInputCardGroupedComponent_1 = __decorate([
-    Component({
-        selector: 'tui-input-card-grouped',
-        template: "<tui-wrapper\n    *ngIf=\"cardGroupedTexts$ | async as texts\"\n    class=\"t-common-wrapper\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [invalid]=\"computedInvalid\"\n    [tuiDropdown]=\"open\"\n    [tuiDropdownContent]=\"dropdown || ''\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (tuiActiveZoneChange)=\"onActiveZoneChange($event)\"\n    (scroll)=\"onScroll($event)\"\n    (mousedown)=\"onMouseDown($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                type=\"text\"\n                automation-id=\"tui-input-card-grouped__card\"\n                tuiInputMode=\"numeric\"\n                class=\"t-input t-input_card\"\n                [class.t-input_inert]=\"cardPrefilled\"\n                [class.t-input_hidden]=\"!card.length && focused\"\n                [attr.id]=\"idCard\"\n                [attr.aria-invalid]=\"!cardPrefilled && !(this.card | tuiMapper: cardValidator)\"\n                [placeholder]=\"cardPrefilled ? '' : exampleText\"\n                [autocomplete]=\"autocompleteCard\"\n                [disabled]=\"computedDisabled\"\n                [readOnly]=\"readOnly\"\n                [textMask]=\"maskCard\"\n                [tuiFocusable]=\"cardFocusable\"\n                [ngModel]=\"formattedCard\"\n                (ngModelChange)=\"onCardChange($event)\"\n                (focus)=\"(0)\"\n            />\n            <span\n                aria-hidden=\"true\"\n                class=\"t-collapsed\"\n                [attr.data-before]=\"masked\"\n                [class.t-collapsed_enable-mask]=\"isCardCollapsed\"\n            >\n                <span class=\"t-collapsed-wrapper\">\n                    <span\n                        class=\"t-value\"\n                        [class.t-value_collapsed]=\"isCardCollapsed\"\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                type=\"text\"\n                placeholder=\"00/00\"\n                automation-id=\"tui-input-card-grouped__expire\"\n                tuiInputMode=\"numeric\"\n                class=\"t-input\"\n                [class.t-input_inert]=\"!expireFocusable\"\n                [attr.id]=\"idExpire\"\n                [attr.name]=\"name\"\n                [autocomplete]=\"autocompleteExpire\"\n                [disabled]=\"computedDisabled\"\n                [readOnly]=\"readOnly\"\n                [tuiFocusable]=\"expireFocusable\"\n                [textMask]=\"maskExpire\"\n                [ngModel]=\"expire\"\n                (ngModelChange)=\"onExpireChange($event)\"\n                (focus)=\"(0)\"\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                type=\"text\"\n                automation-id=\"tui-input-card-grouped__cvc\"\n                tuiInputMode=\"numeric\"\n                class=\"t-input\"\n                [class.t-input_prefilled]=\"cvcPrefilled\"\n                [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n                [attr.id]=\"idCVC\"\n                [disabled]=\"computedDisabled\"\n                [readOnly]=\"readOnly || cvcPrefilled\"\n                [autocomplete]=\"autocompleteCVC\"\n                [textMask]=\"maskCVC\"\n                [tuiFocusable]=\"cvcFocusable\"\n                [ngModel]=\"cvc\"\n                (ngModelChange)=\"onCVCChange($event)\"\n                (focus)=\"(0)\"\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            polymorpheus-outlet\n            class=\"t-icon-outlet\"\n            [content]=\"icon\"\n        >\n            <ng-template let-icon>\n                <tui-svg\n                    automation-id=\"tui-input-card-grouped__icon\"\n                    class=\"t-card\"\n                    [src]=\"icon\"\n                ></tui-svg>\n            </ng-template>\n        </div>\n        <tui-svg\n            *ngIf=\"hasCleaner\"\n            src=\"tuiIconCloseLarge\"\n            class=\"t-icon\"\n            (click)=\"clear()\"\n        ></tui-svg>\n        <tui-svg\n            *ngIf=\"hasDropdown\"\n            src=\"tuiIconChevronDownLarge\"\n            class=\"t-icon\"\n            [class.t-icon_rotated]=\"open\"\n            (click)=\"toggle()\"\n        ></tui-svg>\n    </div>\n</tui-wrapper>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            MODE_PROVIDER,
-            {
-                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
-                useExisting: forwardRef(() => TuiInputCardGroupedComponent_1),
-            },
-            {
-                provide: TUI_DATA_LIST_HOST,
-                useExisting: forwardRef(() => TuiInputCardGroupedComponent_1),
-            },
-        ],
-        host: {
-            '($.data-mode.attr)': 'mode$',
-            'data-size': 'l',
-        },
-        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,300ms);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:.625rem}.t-collapsed{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0 0 0 1rem;margin:0;border-radius:inherit;background:0 0;font-size:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-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%;padding:0 var(--tui-padding-m);border:0;border-width:0 var(--border-end,0) 0 var(--border-start,0);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;line-height:2.25rem;pointer-events:none}.t-collapsed:-webkit-autofill,.t-collapsed:-webkit-autofill:focus,.t-collapsed:-webkit-autofill:hover{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 :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill,.t-collapsed :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:focus,.t-collapsed :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:hover,.t-collapsed :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill,.t-collapsed :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill:focus,.t-collapsed :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill:hover,:host[data-mode=onDark] .t-collapsed:-webkit-autofill,:host[data-mode=onDark] .t-collapsed:-webkit-autofill:focus,:host[data-mode=onDark] .t-collapsed:-webkit-autofill:hover{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}.t-collapsed :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),.t-collapsed :host-context(tui-text-area[data-size='s']):not(tui-text-area),:host[data-size='s'] .t-collapsed{padding:0 var(--tui-padding-s)}.t-collapsed :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),.t-collapsed :host-context(tui-text-area[data-size='l']):not(tui-text-area),:host[data-size='l'] .t-collapsed{padding:0 var(--tui-padding-l)}.t-collapsed :host-context(tui-primitive-textfield._disabled),.t-collapsed :host-context(tui-text-area._disabled),:host._disabled .t-collapsed{pointer-events:none}.t-collapsed :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='l']:not(._label-outside) .t-collapsed{padding-top:1.25rem}.t-collapsed :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='l']:not(._label-outside) .t-collapsed:-webkit-autofill+.content .placeholder{font-size:.8156rem;transform:translateY(-.625rem)}.t-collapsed :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='m']:not(._label-outside) .t-collapsed{padding-top:1.125rem}.t-collapsed :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='m']:not(._label-outside) .t-collapsed:-webkit-autofill+.content .placeholder{font-size:.69rem;transform:translateY(-.5rem)}.t-collapsed :host-context(tui-primitive-textfield._hidden),:host._hidden input.t-collapsed{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,300ms);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;transform:translate3d(100%,0,0)}.t-value_collapsed{transform:translate3d(4ch,0,0)}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0 1rem;margin:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-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%;padding:0 var(--tui-padding-m);border:0;border-width:0 var(--border-end,0) 0 var(--border-start,0);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,300ms);transition-timing-function:ease-in-out}.t-input:-webkit-autofill,.t-input:-webkit-autofill:focus,.t-input:-webkit-autofill:hover{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 :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill,.t-input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:focus,.t-input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:hover,.t-input :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill,.t-input :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill:focus,.t-input :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill:hover,:host[data-mode=onDark] .t-input:-webkit-autofill,:host[data-mode=onDark] .t-input:-webkit-autofill:focus,:host[data-mode=onDark] .t-input:-webkit-autofill:hover{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}.t-input :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size='s']):not(tui-text-area),:host[data-size='s'] .t-input{padding:0 var(--tui-padding-s)}.t-input :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size='l']):not(tui-text-area),:host[data-size='l'] .t-input{padding:0 var(--tui-padding-l)}.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-text-area._disabled),:host._disabled .t-input{pointer-events:none}.t-input :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='l']:not(._label-outside) .t-input{padding-top:1.25rem}.t-input :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='l']:not(._label-outside) .t-input:-webkit-autofill+.content .placeholder{font-size:.8156rem;transform:translateY(-.625rem)}.t-input :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='m']:not(._label-outside) .t-input{padding-top:1.125rem}.t-input :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='m']:not(._label-outside) .t-input:-webkit-autofill+.content .placeholder{font-size:.69rem;transform:translateY(-.5rem)}.t-input :host-context(tui-primitive-textfield._hidden),:host._hidden input.t-input{opacity:0;text-indent:-10em;-webkit-user-select:none}.t-input::-ms-input-placeholder{color:var(--tui-text-03)}.t-input::placeholder{color:var(--tui-text-03)}:host[data-mode=onDark] .t-input::-ms-input-placeholder{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}.t-input_card:not(.t-input_hidden),.t-input_card:not(.t-input_hidden):-webkit-autofill,.t-input_card:not(.t-input_hidden)::placeholder{caret-color:var(--tui-base-09);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input_card::-webkit-credit-card-auto-fill-button{pointer-events:none;background-color:transparent!important;-webkit-mask-image: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:inherit}.t-icon{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.t-icon:hover{color:var(--tui-text-02)}:host._disabled .t-icon,:host._readonly .t-icon{pointer-events:none}:host[data-mode=onDark] .t-icon{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-icon:hover{color:var(--tui-text-01-night)}.t-icon_rotated{transform:rotate(180deg)}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);margin:1.125rem 1rem;line-height:1.25rem}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size='m'] .t-placeholder_raised{font:var(--tui-font-text-xs);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[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size='l']._focused._label-outside .t-placeholder,:host[data-size='m']._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size='l'] .t-placeholder{font-size:.9375rem}:host[data-size='l'] .t-placeholder_raised{font-size:.8156rem}:host[data-size='l']._focused:not(._label-outside) .t-placeholder,:host[data-size='m']._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size='l'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size='l'][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens:none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}"]
-    }),
-    __param(0, Optional()),
-    __param(0, Self()),
-    __param(0, Inject(NgControl)),
-    __param(1, Inject(ChangeDetectorRef)),
-    __param(2, Inject(ElementRef)),
-    __param(3, Inject(TUI_MODE)),
-    __param(4, Inject(TUI_INPUT_CARD_GROUPED_TEXTS)),
-    __param(5, Inject(TUI_TEXTFIELD_APPEARANCE))
-], TuiInputCardGroupedComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCardGroupedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-input-card-grouped`,
+                    templateUrl: `./input-card-grouped.template.html`,
+                    styleUrls: [`./input-card-grouped.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        MODE_PROVIDER,
+                        {
+                            provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
+                            useExisting: forwardRef(() => TuiInputCardGroupedComponent),
+                        },
+                        {
+                            provide: TUI_DATA_LIST_HOST,
+                            useExisting: forwardRef(() => TuiInputCardGroupedComponent),
+                        },
+                    ],
+                    host: {
+                        '($.data-mode.attr)': `mode$`,
+                        'data-size': `l`,
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i4.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: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_TEXTFIELD_APPEARANCE]
+                }] }]; }, propDecorators: { inputCard: [{
+                type: ViewChild,
+                args: [`inputCard`]
+            }], inputExpire: [{
+                type: ViewChild,
+                args: [`inputExpire`]
+            }], inputCVC: [{
+                type: ViewChild,
+                args: [`inputCVC`]
+            }], autocompleteEnabled: [{
+                type: Input
+            }], cardSrc: [{
+                type: Input
+            }], exampleText: [{
+                type: Input
+            }], cardValidator: [{
+                type: Input
+            }], codeLength: [{
+                type: Input
+            }], autofilledChange: [{
+                type: Output
+            }], binChange: [{
+                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: [] } });
 
-let TuiInputCardGroupedModule = class TuiInputCardGroupedModule {
-};
-TuiInputCardGroupedModule = __decorate([
-    NgModule({
-        imports: [
+class TuiInputCardGroupedModule {
+}
+TuiInputCardGroupedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCardGroupedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiInputCardGroupedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCardGroupedModule, declarations: [TuiInputCardGroupedComponent], imports: [CommonModule,
+        FormsModule,
+        TextMaskModule,
+        TuiFocusableModule,
+        TuiSvgModule,
+        TuiWrapperModule,
+        TuiActiveZoneModule,
+        TuiInputModeModule,
+        TuiMapperPipeModule,
+        TuiDropdownModule,
+        TuiPreventDefaultModule,
+        PolymorpheusModule,
+        TuiLetModule,
+        TuiFormatCardModule], exports: [TuiInputCardGroupedComponent] });
+TuiInputCardGroupedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCardGroupedModule, imports: [[
             CommonModule,
             FormsModule,
             TextMaskModule,
             TuiFocusableModule,
             TuiSvgModule,
             TuiWrapperModule,
-            TuiHoveredModule,
             TuiActiveZoneModule,
             TuiInputModeModule,
             TuiMapperPipeModule,
@@ -432,11 +473,30 @@ TuiInputCardGroupedModule = __decorate([
             PolymorpheusModule,
             TuiLetModule,
             TuiFormatCardModule,
-        ],
-        declarations: [TuiInputCardGroupedComponent],
-        exports: [TuiInputCardGroupedComponent],
-    })
-], TuiInputCardGroupedModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCardGroupedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        TextMaskModule,
+                        TuiFocusableModule,
+                        TuiSvgModule,
+                        TuiWrapperModule,
+                        TuiActiveZoneModule,
+                        TuiInputModeModule,
+                        TuiMapperPipeModule,
+                        TuiDropdownModule,
+                        TuiPreventDefaultModule,
+                        PolymorpheusModule,
+                        TuiLetModule,
+                        TuiFormatCardModule,
+                    ],
+                    declarations: [TuiInputCardGroupedComponent],
+                    exports: [TuiInputCardGroupedComponent],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.