@taiga-ui/addon-commerce 3.39.1 → 3.40.0

package/bundles/taiga-ui-addon-commerce-components-card.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/addon-commerce/utils'), require('@taiga-ui/core'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-commerce/components/card', ['exports', '@angular/core', '@taiga-ui/addon-commerce/utils', '@taiga-ui/core', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-commerce"] = global["taiga-ui"]["addon-commerce"] || {}, global["taiga-ui"]["addon-commerce"].components = global["taiga-ui"]["addon-commerce"].components || {}, global["taiga-ui"]["addon-commerce"].components.card = {}), global.ng.core, global["taiga-ui"]["addon-commerce"].utils, global.i1, global.ng.common));
-})(this, (function (exports, i0, utils, i1, i2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/addon-commerce/components/input-card'), require('@taiga-ui/core'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-commerce/components/card', ['exports', '@angular/core', '@taiga-ui/addon-commerce/components/input-card', '@taiga-ui/core', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-commerce"] = global["taiga-ui"]["addon-commerce"] || {}, global["taiga-ui"]["addon-commerce"].components = global["taiga-ui"]["addon-commerce"].components || {}, global["taiga-ui"]["addon-commerce"].components.card = {}), global.ng.core, global["taiga-ui"]["addon-commerce"].components["input-card"], global.i1, global.ng.common));
+})(this, (function (exports, i0, inputCard, i1, i2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,9 +26,9 @@
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
-    var icons = Object.assign(Object.assign({}, utils.TUI_PAYMENT_SYSTEM_ICONS), { mir: 'tuiIconMirMono', visa: 'tuiIconVisaMono', electron: 'tuiIconElectronMono' });
     var TuiCardComponent = /** @class */ (function () {
-        function TuiCardComponent() {
+        function TuiCardComponent(options) {
+            this.options = options;
             this.active = false;
             this.brandLogo = '';
             this.cardNumber = '';
@@ -44,14 +44,14 @@
         });
         Object.defineProperty(TuiCardComponent.prototype, "paymentSystemLogo", {
             get: function () {
-                return this.paymentSystem ? icons[this.paymentSystem] : '';
+                return this.paymentSystem ? this.options.icons[this.paymentSystem] : '';
             },
             enumerable: false,
             configurable: true
         });
         return TuiCardComponent;
     }());
-    TuiCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiCardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiCardComponent, deps: [{ token: inputCard.TUI_INPUT_CARD_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiCardComponent, selector: "tui-card", inputs: { active: "active", brandLogo: "brandLogo", cardNumber: "cardNumber", paymentSystem: "paymentSystem", size: "size" }, host: { properties: { "class._active": "this.active", "attr.data-size": "this.size" } }, ngImport: i0__namespace, template: "<div class=\"t-front\">\n    <tui-svg\n        *ngIf=\"hasBrandLogo\"\n        class=\"t-brand-logo\"\n        [src]=\"brandLogo\"\n    ></tui-svg>\n    <span class=\"t-number\">{{ cardNumber }}</span>\n    <tui-svg\n        *ngIf=\"!!paymentSystem\"\n        class=\"t-payment-system-logo\"\n        [src]=\"paymentSystemLogo\"\n    ></tui-svg>\n</div>\n<div class=\"t-back\"></div>\n", styles: [":host{position:relative;display:block;flex-shrink:0;color:var(--tui-base-01);transform-style:preserve-3d;cursor:default;border-radius:var(--tui-radius-xs);background-size:100%}:host[data-size=s]{width:2rem;height:1.5rem}:host[data-size=m]{width:3rem;height:2rem}:host._active{box-shadow:0 0 0 1px var(--tui-base-01)}.t-front{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.t-brand-logo{position:absolute;top:.1875rem;left:.125rem;height:.875rem;width:.875rem}.t-number{position:absolute;right:.25rem;display:flex;justify-content:center;align-items:center}:host[data-size=s] .t-number{top:.125rem;height:.625rem;width:1.1875rem;font-size:.5rem}:host[data-size=m] .t-number{top:.1875rem;height:.875rem;width:1.5rem;font-size:.625rem}.t-payment-system-logo{position:absolute;right:.25rem;bottom:-.5rem;width:2rem;height:2rem;transform:scale(.5);transform-origin:right}.t-back{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px);background-color:var(--tui-base-05);border-radius:var(--tui-radius-xs)}.t-back:after{content:\"\";position:absolute;top:20%;left:0;right:0;height:20%;background-color:var(--tui-base-06)}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiCardComponent, decorators: [{
                 type: i0.Component,
@@ -61,7 +61,12 @@
                         styleUrls: ['./card.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], propDecorators: { active: [{
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [inputCard.TUI_INPUT_CARD_OPTIONS]
+                        }] }];
+        }, propDecorators: { active: [{
                     type: i0.Input
                 }, {
                     type: i0.HostBinding,

package/bundles/taiga-ui-addon-commerce-components-card.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-addon-commerce-components-card.umd.js","sources":["../../../projects/addon-commerce/components/card/card.component.ts","../../../projects/addon-commerce/components/card/card.template.html","../../../projects/addon-commerce/components/card/card.module.ts","../../../projects/addon-commerce/components/card/taiga-ui-addon-commerce-components-card.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';\nimport {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';\nimport {TUI_PAYMENT_SYSTEM_ICONS} from '@taiga-ui/addon-commerce/utils';\nimport {TuiSizeS} from '@taiga-ui/core';\n\nconst icons: Record<TuiPaymentSystem, string> = {\n    ...TUI_PAYMENT_SYSTEM_ICONS,\n    mir: 'tuiIconMirMono',\n    visa: 'tuiIconVisaMono',\n    electron: 'tuiIconElectronMono',\n};\n\n@Component({\n    selector: 'tui-card',\n    templateUrl: './card.template.html',\n    styleUrls: ['./card.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiCardComponent {\n    @Input()\n    @HostBinding('class._active')\n    active = false;\n\n    @Input()\n    brandLogo = '';\n\n    @Input()\n    cardNumber = '';\n\n    @Input()\n    paymentSystem: TuiPaymentSystem | null = null;\n\n    @Input()\n    @HostBinding('attr.data-size')\n    size: TuiSizeS = 'm';\n\n    get hasBrandLogo(): boolean {\n        return !!this.brandLogo && this.size === 'm';\n    }\n\n    get paymentSystemLogo(): string {\n        return this.paymentSystem ? icons[this.paymentSystem] : '';\n    }\n}\n","<div class=\"t-front\">\n    <tui-svg\n        *ngIf=\"hasBrandLogo\"\n        class=\"t-brand-logo\"\n        [src]=\"brandLogo\"\n    ></tui-svg>\n    <span class=\"t-number\">{{ cardNumber }}</span>\n    <tui-svg\n        *ngIf=\"!!paymentSystem\"\n        class=\"t-payment-system-logo\"\n        [src]=\"paymentSystemLogo\"\n    ></tui-svg>\n</div>\n<div class=\"t-back\"></div>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core';\n\nimport {TuiCardComponent} from './card.component';\n\n@NgModule({\n    imports: [CommonModule, TuiSvgModule],\n    declarations: [TuiCardComponent],\n    exports: [TuiCardComponent],\n})\nexport class TuiCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["TUI_PAYMENT_SYSTEM_ICONS","i0","i1","i2","Component","ChangeDetectionStrategy","Input","HostBinding","CommonModule","TuiSvgModule","NgModule"],"mappings":"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"}
+{"version":3,"file":"taiga-ui-addon-commerce-components-card.umd.js","sources":["../../../projects/addon-commerce/components/card/card.component.ts","../../../projects/addon-commerce/components/card/card.template.html","../../../projects/addon-commerce/components/card/card.module.ts","../../../projects/addon-commerce/components/card/taiga-ui-addon-commerce-components-card.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    Inject,\n    Input,\n} from '@angular/core';\nimport {\n    TUI_INPUT_CARD_OPTIONS,\n    TuiInputCardOptions,\n} from '@taiga-ui/addon-commerce/components/input-card';\nimport {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';\nimport {TuiSizeS} from '@taiga-ui/core';\n\n@Component({\n    selector: 'tui-card',\n    templateUrl: './card.template.html',\n    styleUrls: ['./card.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiCardComponent {\n    @Input()\n    @HostBinding('class._active')\n    active = false;\n\n    @Input()\n    brandLogo = '';\n\n    @Input()\n    cardNumber = '';\n\n    @Input()\n    paymentSystem: TuiPaymentSystem | null = null;\n\n    @Input()\n    @HostBinding('attr.data-size')\n    size: TuiSizeS = 'm';\n\n    constructor(\n        @Inject(TUI_INPUT_CARD_OPTIONS) private readonly options: TuiInputCardOptions,\n    ) {}\n\n    get hasBrandLogo(): boolean {\n        return !!this.brandLogo && this.size === 'm';\n    }\n\n    get paymentSystemLogo(): string {\n        return this.paymentSystem ? this.options.icons[this.paymentSystem] : '';\n    }\n}\n","<div class=\"t-front\">\n    <tui-svg\n        *ngIf=\"hasBrandLogo\"\n        class=\"t-brand-logo\"\n        [src]=\"brandLogo\"\n    ></tui-svg>\n    <span class=\"t-number\">{{ cardNumber }}</span>\n    <tui-svg\n        *ngIf=\"!!paymentSystem\"\n        class=\"t-payment-system-logo\"\n        [src]=\"paymentSystemLogo\"\n    ></tui-svg>\n</div>\n<div class=\"t-back\"></div>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core';\n\nimport {TuiCardComponent} from './card.component';\n\n@NgModule({\n    imports: [CommonModule, TuiSvgModule],\n    declarations: [TuiCardComponent],\n    exports: [TuiCardComponent],\n})\nexport class TuiCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i0","TUI_INPUT_CARD_OPTIONS","i1","i2","Component","ChangeDetectionStrategy","Inject","Input","HostBinding","CommonModule","TuiSvgModule","NgModule"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@maskito/kit'), require('@taiga-ui/addon-commerce/components/input-card'), require('@taiga-ui/addon-commerce/constants'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@ng-web-apis/common'), require('@taiga-ui/addon-commerce/tokens'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@maskito/angular'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/addon-commerce/pipes')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-commerce/components/input-card-grouped', ['exports', '@angular/core', '@angular/forms', '@maskito/kit', '@taiga-ui/addon-commerce/components/input-card', '@taiga-ui/addon-commerce/constants', '@taiga-ui/cdk', '@taiga-ui/core', '@ng-web-apis/common', '@taiga-ui/addon-commerce/tokens', 'rxjs', 'rxjs/operators', '@angular/common', '@maskito/angular', '@tinkoff/ng-polymorpheus', '@taiga-ui/addon-commerce/pipes'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-commerce"] = global["taiga-ui"]["addon-commerce"] || {}, global["taiga-ui"]["addon-commerce"].components = global["taiga-ui"]["addon-commerce"].components || {}, global["taiga-ui"]["addon-commerce"].components["input-card-grouped"] = {}), global.ng.core, global.ng.forms, global.kit, global["taiga-ui"]["addon-commerce"].components["input-card"], global["taiga-ui"]["addon-commerce"].constants, global.i3, global.i1, global.common, global["taiga-ui"]["addon-commerce"].tokens, global.rxjs, global.rxjs.operators, global.ng.common, global.i4, global.i6, global["taiga-ui"]["addon-commerce"].pipes));
-})(this, (function (exports, i0, i5, kit, inputCard, constants, i3, i1, common, tokens, i8, operators, i2, i4, i6, i7) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@maskito/kit'), require('@taiga-ui/addon-commerce/components/input-card'), require('@taiga-ui/addon-commerce/constants'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit'), require('@ng-web-apis/common'), require('@taiga-ui/addon-commerce/tokens'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@maskito/angular'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/addon-commerce/pipes')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-commerce/components/input-card-grouped', ['exports', '@angular/core', '@angular/forms', '@maskito/kit', '@taiga-ui/addon-commerce/components/input-card', '@taiga-ui/addon-commerce/constants', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit', '@ng-web-apis/common', '@taiga-ui/addon-commerce/tokens', 'rxjs', 'rxjs/operators', '@angular/common', '@maskito/angular', '@tinkoff/ng-polymorpheus', '@taiga-ui/addon-commerce/pipes'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-commerce"] = global["taiga-ui"]["addon-commerce"] || {}, global["taiga-ui"]["addon-commerce"].components = global["taiga-ui"]["addon-commerce"].components || {}, global["taiga-ui"]["addon-commerce"].components["input-card-grouped"] = {}), global.ng.core, global.ng.forms, global.kit, global["taiga-ui"]["addon-commerce"].components["input-card"], global["taiga-ui"]["addon-commerce"].constants, global.i3, global.i1, global.kit$1, global.common, global["taiga-ui"]["addon-commerce"].tokens, global.rxjs, global.rxjs.operators, global.ng.common, global.i4, global.i6, global["taiga-ui"]["addon-commerce"].pipes));
+})(this, (function (exports, i0, i5, kit, inputCard, constants, i3, i1, kit$1, common, tokens, i8, operators, i2, i4, i6, i7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -386,12 +386,14 @@
     var EXPIRE_COMPLETE_LENGTH = 5; // MM/YY
     var TuiInputCardGroupedComponent = /** @class */ (function (_super) {
         __extends(TuiInputCardGroupedComponent, _super);
-        function TuiInputCardGroupedComponent(control, cdr, el, mode$, cardGroupedTexts$, controller, options) {
+        function TuiInputCardGroupedComponent(control, cdr, el, mode$, cardGroupedTexts$, controller, icons, arrowOptions, options) {
             var _this = _super.call(this, control, cdr, options) || this;
             _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;
@@ -730,14 +732,14 @@
         };
         return TuiInputCardGroupedComponent;
     }(inputCard.AbstractTuiInputCard));
-    TuiInputCardGroupedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputCardGroupedComponent, deps: [{ token: i5.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TUI_MODE }, { token: TUI_INPUT_CARD_GROUPED_TEXTS }, { token: i1.TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: TUI_INPUT_CARD_GROUPED_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiInputCardGroupedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputCardGroupedComponent, deps: [{ token: i5.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TUI_MODE }, { token: TUI_INPUT_CARD_GROUPED_TEXTS }, { token: i1.TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: i1.TUI_COMMON_ICONS }, { token: kit$1.TUI_ARROW_OPTIONS }, { token: TUI_INPUT_CARD_GROUPED_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiInputCardGroupedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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: [
             i3.tuiAsFocusableItemAccessor(TuiInputCardGroupedComponent),
             i3.tuiAsControl(TuiInputCardGroupedComponent),
             i1.tuiAsDataListHost(TuiInputCardGroupedComponent),
             i1.MODE_PROVIDER,
             i1.TEXTFIELD_CONTROLLER_PROVIDER,
-        ], queries: [{ propertyName: "dropdown", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "datalist", first: true, predicate: i1.TuiDataListComponent, descendants: true }], viewQueries: [{ propertyName: "inputCard", first: true, predicate: ["inputCard"], descendants: true }, { propertyName: "cardNumberAutofocusRef", first: true, predicate: ["inputCard"], descendants: true, read: i3.TuiAutoFocusDirective }, { propertyName: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true }, { propertyName: "expireCardAutofocusRef", first: true, predicate: ["inputExpire"], descendants: true, read: i3.TuiAutoFocusDirective }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true }, { propertyName: "cvcCardAutofocusRef", first: true, predicate: ["inputCVC"], descendants: true, read: i3.TuiAutoFocusDirective }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    *ngIf=\"cardGroupedTexts$ | async as texts\"\n    tuiWrapper\n    tuiDropdownLimitWidth=\"fixed\"\n    class=\"t-common-wrapper\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [tuiDropdownManual]=\"open\"\n    [tuiDropdown]=\"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                inputmode=\"numeric\"\n                translate=\"no\"\n                class=\"t-input t-input_card\"\n                [tuiAutoFocus]=\"false\"\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                [maskito]=\"maskCard\"\n                [tuiFocusable]=\"cardFocusable\"\n                [ngModel]=\"formattedCard\"\n                (ngModelChange)=\"onCardChange($event)\"\n                (focus)=\"(0)\"\n            />\n            <span\n                translate=\"no\"\n                aria-hidden=\"true\"\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                placeholder=\"00/00\"\n                automation-id=\"tui-input-card-grouped__expire\"\n                inputmode=\"numeric\"\n                translate=\"no\"\n                class=\"t-input\"\n                [tuiAutoFocus]=\"false\"\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                [maskito]=\"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                inputmode=\"numeric\"\n                translate=\"no\"\n                class=\"t-input\"\n                [tuiAutoFocus]=\"false\"\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                [maskito]=\"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            tuiWrapper\n            appearance=\"icon\"\n            src=\"tuiIconCloseLarge\"\n            class=\"t-icon\"\n            (click)=\"clear()\"\n        ></tui-svg>\n        <tui-svg\n            *ngIf=\"hasDropdown\"\n            tuiWrapper\n            appearance=\"icon\"\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: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:.5rem}.t-collapsed{font:var(--tui-font-text-s);color:var(--tui-text-01);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%;border:solid 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:0 0 0 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-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-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-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-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+.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:translate(100%)}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);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%;border:solid 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-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-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-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-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+.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}.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)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-ghost{visibility:hidden}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i1__namespace.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i1__namespace.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i1__namespace.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i1__namespace.TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])" }, { type: i1__namespace.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i3__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }, { type: i4__namespace.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { type: i5__namespace.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: i3__namespace.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i4__namespace.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { type: i3__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.TuiResizeDirective, selector: "[tuiResize]", outputs: ["tuiResize"] }, { type: i6__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2__namespace.AsyncPipe, "tuiFormatCard": i7__namespace.TuiFormatCardPipe, "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "dropdown", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }, { propertyName: "datalist", first: true, predicate: i1.TuiDataListComponent, descendants: true }], viewQueries: [{ propertyName: "inputCard", first: true, predicate: ["inputCard"], descendants: true }, { propertyName: "cardNumberAutofocusRef", first: true, predicate: ["inputCard"], descendants: true, read: i3.TuiAutoFocusDirective }, { propertyName: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true }, { propertyName: "expireCardAutofocusRef", first: true, predicate: ["inputExpire"], descendants: true, read: i3.TuiAutoFocusDirective }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true }, { propertyName: "cvcCardAutofocusRef", first: true, predicate: ["inputCVC"], descendants: true, read: i3.TuiAutoFocusDirective }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    *ngIf=\"cardGroupedTexts$ | async as texts\"\n    tuiWrapper\n    tuiDropdownLimitWidth=\"fixed\"\n    class=\"t-common-wrapper\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [tuiDropdownManual]=\"open\"\n    [tuiDropdown]=\"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                inputmode=\"numeric\"\n                translate=\"no\"\n                class=\"t-input t-input_card\"\n                [tuiAutoFocus]=\"false\"\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                [maskito]=\"maskCard\"\n                [tuiFocusable]=\"cardFocusable\"\n                [ngModel]=\"formattedCard\"\n                (ngModelChange)=\"onCardChange($event)\"\n                (focus)=\"(0)\"\n            />\n            <span\n                translate=\"no\"\n                aria-hidden=\"true\"\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                placeholder=\"00/00\"\n                automation-id=\"tui-input-card-grouped__expire\"\n                inputmode=\"numeric\"\n                translate=\"no\"\n                class=\"t-input\"\n                [tuiAutoFocus]=\"false\"\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                [maskito]=\"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                inputmode=\"numeric\"\n                translate=\"no\"\n                class=\"t-input\"\n                [tuiAutoFocus]=\"false\"\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                [maskito]=\"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            tuiWrapper\n            appearance=\"icon\"\n            class=\"t-icon\"\n            [src]=\"icons.close\"\n            (click)=\"clear()\"\n        ></tui-svg>\n        <tui-svg\n            *ngIf=\"hasDropdown\"\n            tuiWrapper\n            appearance=\"icon\"\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: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:.5rem;color:#1434cb}.t-collapsed{font:var(--tui-font-text-s);color:var(--tui-text-01);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%;border:solid 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:0 0 0 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:translate(100%)}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);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%;border:solid 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}.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)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-ghost{visibility:hidden}\n"], components: [{ type: i1__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i1__namespace.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i1__namespace.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i1__namespace.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i1__namespace.TuiDropdownPositionDirective, selector: "[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])" }, { type: i1__namespace.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i3__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }, { type: i4__namespace.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { type: i5__namespace.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: i3__namespace.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i4__namespace.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { type: i3__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.TuiResizeDirective, selector: "[tuiResize]", outputs: ["tuiResize"] }, { type: i6__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2__namespace.AsyncPipe, "tuiFormatCard": i7__namespace.TuiFormatCardPipe, "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i3.tuiPure
     ], TuiInputCardGroupedComponent.prototype, "isFocusable", null);
@@ -783,6 +785,12 @@
                         }] }, { type: i1__namespace.TuiTextfieldController, decorators: [{
                             type: i0.Inject,
                             args: [i1.TUI_TEXTFIELD_WATCHED_CONTROLLER]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_COMMON_ICONS]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [kit$1.TUI_ARROW_OPTIONS]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_INPUT_CARD_GROUPED_OPTIONS]