@taiga-ui/addon-commerce 4.52.0-canary.a4e325d → 4.52.0-canary.e10b718

package/components/input-card/index.d.ts

@@ -1,2 +1 @@
 export * from './input-card.component';
-export * from './input-card.options';

package/components/input-card/input-card.component.d.ts

@@ -4,19 +4,13 @@ import * as i1 from "@maskito/angular";
 import * as i2 from "@taiga-ui/core/components/textfield";
 export declare class TuiInputCard implements OnInit {
     private readonly icons;
-    private readonly options;
-    private readonly resolver;
     private readonly control;
     private readonly value;
-    private readonly icon;
     private readonly accessor;
     protected readonly mask: import("@angular/core").WritableSignal<import("@maskito/core").MaskitoOptions | null>;
-    protected readonly image: import("@angular/core").Signal<string | null>;
-    /** @deprecated apparently "off" doesn't disable autocomplete */
-    autocomplete: boolean;
-    readonly binChange: import("rxjs").Observable<string | null>;
-    set iconValue(icon: string | null);
+    protected readonly image: import("@angular/core").Signal<string>;
+    readonly binChange: import("@angular/core").OutputRef<string | null>;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputCard, "input[tuiInputCard]", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "iconValue": { "alias": "icon"; "required": false; }; }, { "binChange": "binChange"; }, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithTextfield; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputCard, "input[tuiInputCard]", never, {}, { "binChange": "binChange"; }, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithTextfield; inputs: {}; outputs: {}; }]>;
 }

package/components/input-card-group/input-card-group.component.d.ts

@@ -1,4 +1,4 @@
-import { type AfterViewInit, EventEmitter, type Signal } from '@angular/core';
+import { EventEmitter, type Signal } from '@angular/core';
 import { TuiControl } from '@taiga-ui/cdk/classes';
 import { type TuiBooleanHandler } from '@taiga-ui/cdk/types';
 import { type TuiDataListHost } from '@taiga-ui/core/components/data-list';
@@ -7,13 +7,12 @@ import { type PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
 import * as i1 from "@taiga-ui/core/directives/appearance";
 import * as i2 from "@taiga-ui/core/directives/dropdown";
-import * as i3 from "@taiga-ui/core/components/textfield";
 export interface TuiCard {
     card: string;
     cvc: string;
     expire: string;
 }
-export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implements TuiDataListHost<Partial<TuiCard>>, AfterViewInit {
+export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implements TuiDataListHost<Partial<TuiCard>> {
     private readonly inputCard?;
     private readonly inputExpire?;
     private readonly inputCVC?;
@@ -35,6 +34,7 @@ export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implem
     protected readonly maskCard: import("@maskito/core").MaskitoOptions;
     protected readonly maskExpire: Required<import("@maskito/core").MaskitoOptions>;
     protected readonly icons: import("@taiga-ui/core/tokens").TuiCommonIcons;
+    protected readonly textfield: import("@taiga-ui/core/components/textfield").TuiTextfieldOptions;
     protected readonly texts: Signal<import("./input-card-group.providers").TuiCardGroupedTexts | undefined>;
     protected readonly open: import("@angular/core").WritableSignal<boolean>;
     protected readonly $: import("rxjs").Subscription | import("rxjs").Observable<never>;
@@ -53,12 +53,9 @@ export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implem
     cardValidator: TuiBooleanHandler<string>;
     icon: PolymorpheusContent;
     id: string;
-    /** @deprecated apparently "off" doesn't disable autocomplete */
-    autocomplete: boolean;
     readonly binChange: EventEmitter<string | null>;
     set codeLength(length: 3 | 4);
     get bin(): string | null;
-    ngAfterViewInit(): void;
     writeValue(value: TuiCard | null): void;
     /** Public API for manual focus management */
     focusCard(): void;
@@ -91,5 +88,5 @@ export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implem
     private updateProperty;
     private focusInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputCardGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputCardGroup, "tui-input-card-group", never, { "exampleText": { "alias": "exampleText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inputs": { "alias": "inputs"; "required": false; }; "cardValidator": { "alias": "cardValidator"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "id": { "alias": "id"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "codeLength": { "alias": "codeLength"; "required": false; }; }, { "binChange": "binChange"; }, never, ["*"], true, [{ directive: typeof i1.TuiAppearance; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownDirective; inputs: {}; outputs: {}; }, { directive: typeof i3.TuiWithTextfieldDropdown; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithDropdownOpen; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputCardGroup, "tui-input-card-group", never, { "exampleText": { "alias": "exampleText"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "inputs": { "alias": "inputs"; "required": false; }; "cardValidator": { "alias": "cardValidator"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "id": { "alias": "id"; "required": false; }; "codeLength": { "alias": "codeLength"; "required": false; }; }, { "binChange": "binChange"; }, never, ["*"], true, [{ directive: typeof i1.TuiAppearance; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithDropdownOpen; inputs: {}; outputs: {}; }]>;
 }

package/components/input-card-group/input-card-group.options.d.ts

@@ -1,11 +1,10 @@
 import { InjectionToken, type Provider } from '@angular/core';
-import { type TuiInputCardOptions } from '@taiga-ui/addon-commerce/components/input-card';
 import { type TuiBooleanHandler } from '@taiga-ui/cdk/types';
 export interface TuiCardInputs {
     cvc: boolean;
     expire: boolean;
 }
-export interface TuiInputCardGroupOptions extends TuiInputCardOptions {
+export interface TuiInputCardGroupOptions {
     readonly cardValidator: TuiBooleanHandler<string>;
     readonly exampleText: string;
     readonly exampleTextCVC: string;

package/components/input-cvc/input-cvc.directive.d.ts

@@ -4,11 +4,9 @@ import * as i1 from "@maskito/angular";
 import * as i2 from "@taiga-ui/core/components/textfield";
 export declare class TuiInputCVC implements OnChanges {
     private readonly mask;
-    /** @deprecated apparently "off" doesn't disable autocomplete */
-    autocomplete: boolean;
     hidden: boolean;
     length: 3 | 4;
     ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputCVC, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputCVC, "input[tuiInputCVC]", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "length": { "alias": "length"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithTextfield; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputCVC, "input[tuiInputCVC]", never, { "hidden": { "alias": "hidden"; "required": false; }; "length": { "alias": "length"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithTextfield; inputs: {}; outputs: {}; }]>;
 }

package/components/input-expire/input-expire.directive.d.ts

@@ -3,8 +3,6 @@ import * as i1 from "@maskito/angular";
 import * as i2 from "@taiga-ui/core/components/textfield";
 export declare class TuiInputExpire {
     protected readonly mask: import("@angular/core").WritableSignal<import("@maskito/core").MaskitoOptions | null>;
-    /** @deprecated apparently "off" doesn't disable autocomplete */
-    autocomplete: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputExpire, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputExpire, "input[tuiInputExpire]", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithTextfield; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputExpire, "input[tuiInputExpire]", never, {}, {}, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithTextfield; inputs: {}; outputs: {}; }]>;
 }

package/components/thumbnail-card/thumbnail-card.component.d.ts

@@ -1,5 +1,4 @@
 import { type TuiPaymentSystem } from '@taiga-ui/addon-commerce/types';
-import { type TuiBooleanHandler } from '@taiga-ui/cdk/types';
 import { type TuiSizeL, type TuiSizeXS } from '@taiga-ui/core/types';
 import * as i0 from "@angular/core";
 export declare class TuiThumbnailCard {
@@ -8,7 +7,6 @@ export declare class TuiThumbnailCard {
     paymentSystem: TuiPaymentSystem | null;
     iconStart: string;
     iconEnd: string;
-    monoHandler: TuiBooleanHandler<TuiPaymentSystem>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiThumbnailCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiThumbnailCard, "tui-thumbnail-card", never, { "size": { "alias": "size"; "required": false; }; "paymentSystem": { "alias": "paymentSystem"; "required": false; }; "iconStart": { "alias": "iconStart"; "required": false; }; "iconEnd": { "alias": "iconEnd"; "required": false; }; "monoHandler": { "alias": "monoHandler"; "required": false; }; }, {}, never, ["img", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiThumbnailCard, "tui-thumbnail-card", never, { "size": { "alias": "size"; "required": false; }; "paymentSystem": { "alias": "paymentSystem"; "required": false; }; "iconStart": { "alias": "iconStart"; "required": false; }; "iconEnd": { "alias": "iconEnd"; "required": false; }; }, {}, never, ["img", "*"], true, never>;
 }

package/components/thumbnail-card/thumbnail-card.options.d.ts

@@ -1,10 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import { type TuiPaymentSystem } from '@taiga-ui/addon-commerce/types';
-import { type TuiBooleanHandler } from '@taiga-ui/cdk/types';
 import { type TuiSizeL, type TuiSizeXS } from '@taiga-ui/core/types';
 export interface TuiThumbnailCardOptions {
     readonly size: TuiSizeL | TuiSizeXS;
     readonly icons: Record<TuiPaymentSystem, string>;
-    readonly monoHandler: TuiBooleanHandler<TuiPaymentSystem>;
 }
 export declare const TUI_THUMBNAIL_CARD_OPTIONS: InjectionToken<TuiThumbnailCardOptions>;

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

@@ -1,19 +1,20 @@
 import { __decorate } from 'tslib';
-import { DOCUMENT, isPlatformServer, NgIf } from '@angular/common';
+import { DOCUMENT, isPlatformServer } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, PLATFORM_ID, computed, EventEmitter, Input, Output, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i4 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { MaskitoDirective } from '@maskito/angular';
 import { WaResizeObserver } from '@ng-web-apis/resize-observer';
 import { tuiDefaultCardValidator, TUI_MASK_CVC, TUI_MASK_CARD, TUI_MASK_EXPIRE } from '@taiga-ui/addon-commerce/constants';
 import { TuiFormatCardPipe } from '@taiga-ui/addon-commerce/pipes';
 import { TUI_CARD_NUMBER_TEXTS, TUI_CARD_EXPIRY_TEXTS, TUI_CARD_CVC_TEXTS, TUI_PAYMENT_SYSTEM_ICONS } from '@taiga-ui/addon-commerce/tokens';
+import { tuiGetPaymentSystem } from '@taiga-ui/addon-commerce/utils';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
 import { TUI_NON_DIGIT_REGEXP, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
 import { tuiHovered, TuiHoveredService } from '@taiga-ui/cdk/directives/hovered';
-import { TuiLet } from '@taiga-ui/cdk/directives/let';
+import { TuiTransitioned } from '@taiga-ui/cdk/directives/transitioned';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
 import { tuiInjectId } from '@taiga-ui/cdk/services';
 import { TUI_IS_MOBILE, TUI_IS_WEBKIT } from '@taiga-ui/cdk/tokens';
@@ -22,8 +23,7 @@ import { tuiFocusedIn, tuiIsNativeFocused } from '@taiga-ui/cdk/utils/focus';
 import { tuiProvideOptions, tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
 import { tuiAsDataListHost } from '@taiga-ui/core/components/data-list';
 import { TuiIcon, TuiIconPipe } from '@taiga-ui/core/components/icon';
-import * as i3 from '@taiga-ui/core/components/textfield';
-import { TUI_TEXTFIELD_OPTIONS, TuiWithTextfieldDropdown } from '@taiga-ui/core/components/textfield';
+import { TUI_TEXTFIELD_OPTIONS } from '@taiga-ui/core/components/textfield';
 import * as i1 from '@taiga-ui/core/directives/appearance';
 import { tuiAppearanceMode, tuiAppearance, tuiAppearanceState, tuiAppearanceFocus, TuiAppearance } from '@taiga-ui/core/directives/appearance';
 import * as i2 from '@taiga-ui/core/directives/dropdown';
@@ -32,12 +32,10 @@ import { TUI_MEDIA, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
 import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 import { startWith, switchMap, combineLatest, of, map, Subject, EMPTY, timer } from 'rxjs';
-import { TUI_INPUT_CARD_DEFAULT_OPTIONS } from '@taiga-ui/addon-commerce/components/input-card';
 import { WA_WINDOW } from '@ng-web-apis/common';
 import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
 
 const TUI_INPUT_CARD_GROUP_DEFAULT_OPTIONS = {
-    ...TUI_INPUT_CARD_DEFAULT_OPTIONS,
     cardValidator: tuiDefaultCardValidator,
     exampleText: '0000 0000 0000 0000',
     exampleTextCVC: '000',
@@ -60,8 +58,8 @@ const TUI_INPUT_CARD_GROUP_TEXTS = new InjectionToken(ngDevMode ? 'TUI_INPUT_CAR
         const cardNumberTexts = inject(TUI_CARD_NUMBER_TEXTS);
         const expiryTexts = inject(TUI_CARD_EXPIRY_TEXTS);
         const cvcTexts = inject(TUI_CARD_CVC_TEXTS);
-        const { desktopSmall } = inject(TUI_MEDIA);
-        const media = win.matchMedia(`screen and (min-width: ${(desktopSmall - 1) / 16}em)`);
+        const { mobile } = inject(TUI_MEDIA);
+        const media = win.matchMedia(`screen and (min-width: ${(mobile - 1) / 16}em)`);
         return tuiTypedFromEvent(media, 'change').pipe(startWith(null), switchMap(() => combineLatest([
             of(Number(media.matches)),
             cardNumberTexts,
@@ -96,6 +94,7 @@ class TuiInputCardGroup extends TuiControl {
         this.maskCard = TUI_MASK_CARD;
         this.maskExpire = TUI_MASK_EXPIRE;
         this.icons = inject(TUI_COMMON_ICONS);
+        this.textfield = inject(TUI_TEXTFIELD_OPTIONS);
         this.texts = toSignal(inject(TUI_INPUT_CARD_GROUP_TEXTS));
         this.open = tuiDropdownOpen();
         this.$ = this.isWebkit
@@ -118,10 +117,8 @@ class TuiInputCardGroup extends TuiControl {
         this.placeholder = this.options.exampleText;
         this.inputs = this.options.inputs;
         this.cardValidator = this.options.cardValidator;
-        this.icon = this.options.icon;
+        this.icon = '';
         this.id = tuiInjectId();
-        /** @deprecated apparently "off" doesn't disable autocomplete */
-        this.autocomplete = this.options.autocomplete;
         this.binChange = new EventEmitter();
     }
     set codeLength(length) {
@@ -131,10 +128,6 @@ class TuiInputCardGroup extends TuiControl {
     get bin() {
         return this.card.length < 6 ? null : this.card.slice(0, 6);
     }
-    ngAfterViewInit() {
-        // Enabling transitions
-        setTimeout(() => this.el.style.removeProperty('--tui-duration'), 500);
-    }
     writeValue(value) {
         const { bin } = this;
         const { activeElement } = this.doc;
@@ -275,7 +268,7 @@ class TuiInputCardGroup extends TuiControl {
         return this.cardValidator(card) || this.cardPrefilled;
     }
     getPaymentSystem(value) {
-        return this.options.paymentSystemHandler(value);
+        return tuiGetPaymentSystem(value);
     }
     updateBin(oldBin) {
         const { bin } = this;
@@ -295,13 +288,13 @@ class TuiInputCardGroup extends TuiControl {
             this.inputCVC?.nativeElement;
         element?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiInputCardGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: TuiInputCardGroup, isStandalone: true, selector: "tui-input-card-group", inputs: { exampleText: "exampleText", placeholder: "placeholder", inputs: "inputs", cardValidator: "cardValidator", icon: "icon", id: "id", autocomplete: "autocomplete", codeLength: "codeLength" }, outputs: { binChange: "binChange" }, host: { attributes: { "data-size": "l" }, listeners: { "pointerdown": "onPointerDown($event)", "scroll.zoneless": "$event.target.scrollLeft = 0" }, properties: { "style.--tui-duration.s": "0" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputCardGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiInputCardGroup, isStandalone: true, selector: "tui-input-card-group", inputs: { exampleText: "exampleText", placeholder: "placeholder", inputs: "inputs", cardValidator: "cardValidator", icon: "icon", id: "id", codeLength: "codeLength" }, outputs: { binChange: "binChange" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "scroll.zoneless": "$event.target.scrollLeft = 0" }, properties: { "attr.data-size": "textfield.size()" } }, providers: [
             tuiAsDataListHost(TuiInputCardGroup),
             tuiAsControl(TuiInputCardGroup),
             tuiDropdownOptionsProvider({ limitWidth: 'fixed' }),
             TuiHoveredService,
-        ], viewQueries: [{ propertyName: "inputCard", first: true, predicate: ["inputCard"], descendants: true, static: true }, { propertyName: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true, static: true }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiDropdownDirective }, { directive: i3.TuiWithTextfieldDropdown }, { directive: i2.TuiWithDropdownOpen }], ngImport: i0, template: "<div class=\"t-wrapper\">\n    <label\n        *tuiLet=\"value()?.card | tuiFormatCard: cardPrefilled as formattedCard\"\n        (click.zoneless.prevent)=\"(0)\"\n    >\n        <input\n            #inputCard\n            autocomplete=\"cc-number\"\n            automation-id=\"tui-input-card-group__card\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input t-input_card\"\n            [attr.aria-invalid]=\"!cardPrefilled && !(this.card | tuiMapper: cardValidator)\"\n            [attr.id]=\"`${id}_card`\"\n            [class.t-input_filled]=\"card.length\"\n            [class.t-input_inert]=\"cardPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCard\"\n            [ngModel]=\"formattedCard\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cardPrefilled ? '' : placeholder || exampleText\"\n            [readOnly]=\"readOnly()\"\n            [tabIndex]=\"cardFocusable ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCardChange($event)\"\n        />\n        <span\n            aria-hidden=\"true\"\n            translate=\"no\"\n            class=\"t-collapsed\"\n            [attr.data-before]=\"masked\"\n            [class.t-collapsed_enable-mask]=\"cardCollapsed\"\n            (waResizeObserver)=\"onResize()\"\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]=\"getStyle(ghost)\"\n                    [textContent]=\"formattedCard\"\n                ></span>\n            </span>\n        </span>\n        <div\n            class=\"t-label\"\n            [attr.data-label]=\"texts()?.cardNumberText\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            <ng-content />\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_expire\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputExpire\n            autocomplete=\"cc-exp\"\n            automation-id=\"tui-input-card-group__expire\"\n            inputmode=\"numeric\"\n            maxlength=\"5\"\n            name=\"ccexpiryyear\"\n            translate=\"no\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_expire`\"\n            [class.t-input_inert]=\"!expireFocusable\"\n            [class.t-input_prefilled]=\"!inputs.expire\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskExpire\"\n            [ngModel]=\"expire\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"inputs.expire ? '00/00' : '\u2022\u2022/\u2022\u2022'\"\n            [readOnly]=\"readOnly() || !inputs.expire\"\n            [tabIndex]=\"expireFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onExpireChange($event)\"\n        />\n        <div\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.expiryText }}\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_cvc\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCVC\n            autocomplete=\"cc-csc\"\n            automation-id=\"tui-input-card-group__cvc\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_cvc`\"\n            [class.t-input_cvc_hidden]=\"cvcHidden\"\n            [class.t-input_prefilled]=\"cvcPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCVC\"\n            [ngModel]=\"cvc\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n            [readOnly]=\"readOnly() || cvcPrefilled\"\n            [tabIndex]=\"cvcFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCVCChange($event)\"\n        />\n        <div\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.cvcText }}\n        </div>\n    </label>\n</div>\n<div class=\"t-icons\">\n    <div\n        *ngIf=\"content\"\n        class=\"t-icon-outlet\"\n    >\n        <img\n            *polymorpheusOutlet=\"content as src\"\n            alt=\"\"\n            automation-id=\"tui-input-card-group__icon\"\n            class=\"t-card\"\n            [src]=\"src | tuiIcon\"\n        />\n    </div>\n    <tui-icon\n        *ngIf=\"hasCleaner()\"\n        automation-id=\"tui-input-card-group__cleaner\"\n        tuiAppearance=\"icon\"\n        class=\"t-icon\"\n        [icon]=\"icons.close\"\n        (click)=\"clear()\"\n    />\n    <tui-icon\n        *ngIf=\"dropdown._content()\"\n        automation-id=\"tui-input-card-group__dropdown\"\n        tuiAppearance=\"icon\"\n        tuiChevron\n        (click)=\"toggle()\"\n    />\n</div>\n", styles: ["@keyframes outside{0%{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}to{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}}@keyframes inside{0%{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}to{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}}:host{position:relative;display:block;block-size:var(--tui-height-l);inline-size:29.5rem;border-radius:var(--tui-radius-l);overflow:hidden;--t-translate: 6.5625rem}:host :host-context(tui-root._mobile){inline-size:18rem;--t-translate: 4.125rem}:host[tuiAppearance][data-appearance]:has(:-webkit-autofill){background:var(--tui-service-autofill-background)!important}.t-wrapper{position:absolute;inline-size:100%;block-size:100%;transition:opacity 0s var(--tui-duration)}.t-wrapper_cvc,.t-wrapper_expire{opacity:0;pointer-events:none;animation:outside var(--tui-duration) ease-in-out}.t-wrapper_cvc{margin-inline-start:7.1875rem}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-inline-start:4.0625rem}.t-wrapper_active{transition:none;pointer-events:auto;opacity:1;animation:inside var(--tui-duration) ease-in-out forwards}.t-card{inline-size:2rem;block-size:2rem}.t-collapsed{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;padding:1.25rem var(--tui-padding-l) 0;box-sizing:border-box;font:var(--tui-font-text-m);line-height:2.25rem;color:var(--tui-text-primary);white-space:nowrap;pointer-events:none}.t-collapsed:after{content:\"*\";float:left;opacity:0}:host-context([dir=\"rtl\"]) .t-collapsed:after{float:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask:after{opacity:1}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask:after{transition:opacity 0s var(--tui-duration)}.t-collapsed_enable-mask .t-collapsed-wrapper{left:1.375rem}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask .t-collapsed-wrapper{left:unset}.t-collapsed-wrapper{position:absolute;top:0;display:block;inline-size:100%;block-size:100%;overflow:hidden}.t-value{transition-property:transform,clip-path;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;clip-path:inset(0);transform:translate3d(calc(100% * var(--tui-inline)),0,0)}:host-context([dir=\"rtl\"]) .t-value{right:unset;left:100%;transform:translate3d(calc(100% * var(--tui-inline)),0,0)!important}.t-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border:0;margin:0;padding:1.25rem var(--tui-padding-l) 0;outline:none;background:transparent;box-sizing:border-box;font:var(--tui-font-text-m);color:var(--tui-text-primary);direction:ltr}:host-context([dir=\"rtl\"]) .t-input{text-align:end}.t-input::placeholder{color:var(--tui-text-tertiary)}.t-input_prefilled::placeholder{color:var(--tui-text-primary)}.t-input[chrome-autofilled],.t-input:-webkit-autofill{-webkit-text-fill-color:var(--tui-text-primary)!important;caret-color:var(--tui-text-primary)!important;transition:background-color 600000s 0s}.t-input.t-input.t-input_card:not(:-webkit-autofill):not(:focus:placeholder-shown),.t-input.t-input.t-input_card.t-input_filled{caret-color:var(--tui-text-primary);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;left:-60rem;top:-60rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-input_cvc_hidden{-webkit-text-security:disc}.t-icons{position:absolute;right:1rem;display:flex;align-items:center;block-size:100%;gap:.25rem}@supports (inset-inline-end: 0){.t-icons{right:unset;inset-inline-end:1rem}}.t-icon-outlet{display:flex;margin-inline-end:.25rem}.t-icon{cursor:pointer}.t-icon:before{font-size:1rem}.t-label{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;margin:1.125rem 1rem;font:var(--tui-font-text-m);line-height:1.25rem;color:var(--tui-text-secondary)}.t-label:empty:before{content:attr(data-label)}input:-webkit-autofill~.t-label,.t-label_raised{font-size:.83rem;transform:translateY(-.7rem)}:host([data-mode~=\"invalid\"]) input:-webkit-autofill~.t-label,:host([data-mode~=\"invalid\"]) .t-label_raised{color:var(--tui-text-negative)}:host([data-focus=\"true\"]) .t-label{color:var(--tui-text-primary)}.t-ghost{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "pipe", type: TuiFormatCardPipe, name: "tuiFormatCard" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "pipe", type: TuiIconPipe, name: "tuiIcon" }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "inputCard", first: true, predicate: ["inputCard"], descendants: true, static: true }, { propertyName: "inputExpire", first: true, predicate: ["inputExpire"], descendants: true, static: true }, { propertyName: "inputCVC", first: true, predicate: ["inputCVC"], descendants: true, static: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiDropdownDirective }, { directive: i2.TuiWithDropdownOpen }], ngImport: i0, template: "@let formattedCard = value()?.card | tuiFormatCard: cardPrefilled;\n\n<div class=\"t-wrapper\">\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCard\n            autocomplete=\"cc-number\"\n            automation-id=\"tui-input-card-group__card\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input t-input_card\"\n            [attr.aria-invalid]=\"!cardPrefilled && !(this.card | tuiMapper: cardValidator)\"\n            [attr.id]=\"`${id}_card`\"\n            [class.t-input_filled]=\"card.length\"\n            [class.t-input_inert]=\"cardPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCard\"\n            [ngModel]=\"formattedCard\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cardPrefilled ? '' : placeholder || exampleText\"\n            [readOnly]=\"readOnly()\"\n            [tabIndex]=\"cardFocusable ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCardChange($event)\"\n        />\n        <span\n            aria-hidden=\"true\"\n            translate=\"no\"\n            class=\"t-collapsed\"\n            [attr.data-before]=\"masked\"\n            [class.t-collapsed_enable-mask]=\"cardCollapsed\"\n            (waResizeObserver)=\"onResize()\"\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]=\"getStyle(ghost)\"\n                    [textContent]=\"formattedCard\"\n                ></span>\n            </span>\n        </span>\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [attr.data-label]=\"texts()?.cardNumberText\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            <ng-content />\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_expire\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputExpire\n            autocomplete=\"cc-exp\"\n            automation-id=\"tui-input-card-group__expire\"\n            inputmode=\"numeric\"\n            maxlength=\"5\"\n            name=\"ccexpiryyear\"\n            translate=\"no\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_expire`\"\n            [class.t-input_inert]=\"!expireFocusable\"\n            [class.t-input_prefilled]=\"!inputs.expire\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskExpire\"\n            [ngModel]=\"expire\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"inputs.expire ? '00/00' : '\u2022\u2022/\u2022\u2022'\"\n            [readOnly]=\"readOnly() || !inputs.expire\"\n            [tabIndex]=\"expireFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onExpireChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.expiryText }}\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_cvc\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCVC\n            autocomplete=\"cc-csc\"\n            automation-id=\"tui-input-card-group__cvc\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_cvc`\"\n            [class.t-input_cvc_hidden]=\"cvcHidden\"\n            [class.t-input_prefilled]=\"cvcPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCVC\"\n            [ngModel]=\"cvc\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n            [readOnly]=\"readOnly() || cvcPrefilled\"\n            [tabIndex]=\"cvcFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCVCChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.cvcText }}\n        </div>\n    </label>\n</div>\n<div class=\"t-icons\">\n    @if (content) {\n        <div class=\"t-icon-outlet\">\n            <img\n                *polymorpheusOutlet=\"content as src\"\n                alt=\"\"\n                automation-id=\"tui-input-card-group__icon\"\n                class=\"t-card\"\n                [src]=\"src | tuiIcon\"\n            />\n        </div>\n    }\n    @if (hasCleaner()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__cleaner\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [icon]=\"icons.close\"\n            (click)=\"clear()\"\n        />\n    }\n    @if (dropdown._content()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__dropdown\"\n            tuiAppearance=\"icon\"\n            tuiChevron\n            (click)=\"toggle()\"\n        />\n    }\n</div>\n", styles: ["@keyframes outside{0%{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}to{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}}@keyframes inside{0%{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}to{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}}:host{--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label: -.7rem;--t-label-size: .83em;--t-translate: 6.5rem;position:relative;display:block;block-size:var(--t-height);min-inline-size:24rem;border-radius:var(--tui-radius-l);overflow:hidden;font:var(--tui-font-text-ui-m)}:host[data-size=m]{--t-label: -.7em;--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);border-radius:var(--tui-radius-m);font:var(--tui-font-text-ui-s)}:host[data-size=m] .t-card{inline-size:1.5rem;block-size:1.5rem}:host[data-size=m] [tuiChevron]{margin-inline-end:-.875rem;margin-inline-start:.125rem}:host :host-context(tui-root._mobile){min-inline-size:19rem;--t-translate: 4rem}:host[tuiAppearance][data-appearance]:has(:-webkit-autofill){background:var(--tui-service-autofill-background)!important}:host [tuiChevron]{block-size:auto;align-self:stretch;border-inline-end:var(--t-padding) solid transparent;margin-inline-end:-.75rem;box-sizing:content-box;font-size:1rem;cursor:pointer}.t-wrapper{position:absolute;inline-size:100%;block-size:100%;transition:opacity 0s var(--tui-duration)}.t-wrapper_cvc,.t-wrapper_expire{opacity:0;pointer-events:none;animation:outside var(--tui-duration) ease-in-out}.t-wrapper_cvc{margin-inline-start:7rem}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-inline-start:4rem}.t-wrapper_active{transition:none;pointer-events:auto;opacity:1;animation:inside var(--tui-duration) ease-in-out forwards}.t-card{inline-size:2rem;block-size:2rem}.t-collapsed{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;padding:calc(var(--t-height) / 3) var(--t-padding) 0;box-sizing:border-box;line-height:calc(2 * var(--t-height) / 3);color:var(--tui-text-primary);white-space:nowrap;pointer-events:none}.t-collapsed:after{content:\"*\";float:left;opacity:0}:host-context([dir=\"rtl\"]) .t-collapsed:after{float:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask:after{opacity:1}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask:after{transition:opacity 0s var(--tui-duration)}.t-collapsed_enable-mask .t-collapsed-wrapper{left:1.375rem}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask .t-collapsed-wrapper{left:unset}.t-collapsed-wrapper{position:absolute;top:0;display:block;inline-size:100%;block-size:100%;overflow:hidden}.t-value{transition-property:transform,clip-path;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;clip-path:inset(0);transform:translate3d(calc(100% * var(--tui-inline)),0,0)}:host-context([dir=\"rtl\"]) .t-value{right:unset;left:100%;transform:translate3d(calc(100% * var(--tui-inline)),0,0)!important}.t-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border:0;margin:0;padding:calc(var(--t-height) / 3) var(--t-padding) 0;outline:none;background:transparent;box-sizing:border-box;font:inherit;color:var(--tui-text-primary);direction:ltr}:host-context([dir=\"rtl\"]) .t-input{text-align:end}.t-input::placeholder{color:var(--tui-text-tertiary)}.t-input_prefilled::placeholder{color:var(--tui-text-primary)}.t-input[chrome-autofilled],.t-input:-webkit-autofill{-webkit-text-fill-color:var(--tui-text-primary)!important;caret-color:var(--tui-text-primary)!important;transition:background-color 600000s 0s}.t-input.t-input.t-input_card:not(:-webkit-autofill):not(:focus:placeholder-shown),.t-input.t-input.t-input_card.t-input_filled{caret-color:var(--tui-text-primary);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;left:-60rem;top:-60rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-input_cvc_hidden{-webkit-text-security:disc}.t-icons{position:absolute;right:1rem;display:flex;align-items:center;block-size:100%;gap:.25rem}@supports (inset-inline-end: 0){.t-icons{right:unset;inset-inline-end:1rem}}.t-icon-outlet{display:flex;margin-inline-end:.25rem}.t-icon{cursor:pointer}.t-icon:before{font-size:1rem}.t-label{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;margin:0 var(--t-padding);line-height:var(--t-height);color:var(--tui-text-secondary)}.t-label:empty:before{content:attr(data-label)}input:-webkit-autofill~.t-label,.t-label_raised{font-size:var(--t-label-size);transform:translateY(var(--t-label))}:host([data-mode~=\"invalid\"]) input:-webkit-autofill~.t-label,:host([data-mode~=\"invalid\"]) .t-label_raised{color:var(--tui-text-negative)}:host([data-focus=\"true\"]) .t-label{color:var(--tui-text-primary)}.t-ghost{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "pipe", type: TuiFormatCardPipe, name: "tuiFormatCard" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "pipe", type: TuiIconPipe, name: "tuiIcon" }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: TuiTransitioned, selector: "[tuiTransitioned]" }, { kind: "directive", type: WaResizeObserver, selector: "[waResizeObserver]", inputs: ["box"], outputs: ["waResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -309,37 +302,30 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiInputCardGroup.prototype, "getPaymentSystem", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: TuiInputCardGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputCardGroup, decorators: [{
             type: Component,
             args: [{ selector: 'tui-input-card-group', imports: [
                         FormsModule,
                         MaskitoDirective,
-                        NgIf,
                         PolymorpheusOutlet,
                         TuiAppearance,
                         TuiChevron,
                         TuiFormatCardPipe,
                         TuiIcon,
                         TuiIconPipe,
-                        TuiLet,
                         TuiMapperPipe,
+                        TuiTransitioned,
                         WaResizeObserver,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         tuiAsDataListHost(TuiInputCardGroup),
                         tuiAsControl(TuiInputCardGroup),
                         tuiDropdownOptionsProvider({ limitWidth: 'fixed' }),
                         TuiHoveredService,
-                    ], hostDirectives: [
-                        TuiAppearance,
-                        TuiDropdownDirective,
-                        TuiWithTextfieldDropdown,
-                        TuiWithDropdownOpen,
-                    ], host: {
-                        'data-size': 'l',
-                        '[style.--tui-duration.s]': '0',
+                    ], hostDirectives: [TuiAppearance, TuiDropdownDirective, TuiWithDropdownOpen], host: {
+                        '[attr.data-size]': 'textfield.size()',
                         '(pointerdown)': 'onPointerDown($event)',
                         '(scroll.zoneless)': '$event.target.scrollLeft = 0',
-                    }, template: "<div class=\"t-wrapper\">\n    <label\n        *tuiLet=\"value()?.card | tuiFormatCard: cardPrefilled as formattedCard\"\n        (click.zoneless.prevent)=\"(0)\"\n    >\n        <input\n            #inputCard\n            autocomplete=\"cc-number\"\n            automation-id=\"tui-input-card-group__card\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input t-input_card\"\n            [attr.aria-invalid]=\"!cardPrefilled && !(this.card | tuiMapper: cardValidator)\"\n            [attr.id]=\"`${id}_card`\"\n            [class.t-input_filled]=\"card.length\"\n            [class.t-input_inert]=\"cardPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCard\"\n            [ngModel]=\"formattedCard\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cardPrefilled ? '' : placeholder || exampleText\"\n            [readOnly]=\"readOnly()\"\n            [tabIndex]=\"cardFocusable ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCardChange($event)\"\n        />\n        <span\n            aria-hidden=\"true\"\n            translate=\"no\"\n            class=\"t-collapsed\"\n            [attr.data-before]=\"masked\"\n            [class.t-collapsed_enable-mask]=\"cardCollapsed\"\n            (waResizeObserver)=\"onResize()\"\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]=\"getStyle(ghost)\"\n                    [textContent]=\"formattedCard\"\n                ></span>\n            </span>\n        </span>\n        <div\n            class=\"t-label\"\n            [attr.data-label]=\"texts()?.cardNumberText\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            <ng-content />\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_expire\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputExpire\n            autocomplete=\"cc-exp\"\n            automation-id=\"tui-input-card-group__expire\"\n            inputmode=\"numeric\"\n            maxlength=\"5\"\n            name=\"ccexpiryyear\"\n            translate=\"no\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_expire`\"\n            [class.t-input_inert]=\"!expireFocusable\"\n            [class.t-input_prefilled]=\"!inputs.expire\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskExpire\"\n            [ngModel]=\"expire\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"inputs.expire ? '00/00' : '\u2022\u2022/\u2022\u2022'\"\n            [readOnly]=\"readOnly() || !inputs.expire\"\n            [tabIndex]=\"expireFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onExpireChange($event)\"\n        />\n        <div\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.expiryText }}\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_cvc\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCVC\n            autocomplete=\"cc-csc\"\n            automation-id=\"tui-input-card-group__cvc\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_cvc`\"\n            [class.t-input_cvc_hidden]=\"cvcHidden\"\n            [class.t-input_prefilled]=\"cvcPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCVC\"\n            [ngModel]=\"cvc\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n            [readOnly]=\"readOnly() || cvcPrefilled\"\n            [tabIndex]=\"cvcFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCVCChange($event)\"\n        />\n        <div\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.cvcText }}\n        </div>\n    </label>\n</div>\n<div class=\"t-icons\">\n    <div\n        *ngIf=\"content\"\n        class=\"t-icon-outlet\"\n    >\n        <img\n            *polymorpheusOutlet=\"content as src\"\n            alt=\"\"\n            automation-id=\"tui-input-card-group__icon\"\n            class=\"t-card\"\n            [src]=\"src | tuiIcon\"\n        />\n    </div>\n    <tui-icon\n        *ngIf=\"hasCleaner()\"\n        automation-id=\"tui-input-card-group__cleaner\"\n        tuiAppearance=\"icon\"\n        class=\"t-icon\"\n        [icon]=\"icons.close\"\n        (click)=\"clear()\"\n    />\n    <tui-icon\n        *ngIf=\"dropdown._content()\"\n        automation-id=\"tui-input-card-group__dropdown\"\n        tuiAppearance=\"icon\"\n        tuiChevron\n        (click)=\"toggle()\"\n    />\n</div>\n", styles: ["@keyframes outside{0%{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}to{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}}@keyframes inside{0%{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}to{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}}:host{position:relative;display:block;block-size:var(--tui-height-l);inline-size:29.5rem;border-radius:var(--tui-radius-l);overflow:hidden;--t-translate: 6.5625rem}:host :host-context(tui-root._mobile){inline-size:18rem;--t-translate: 4.125rem}:host[tuiAppearance][data-appearance]:has(:-webkit-autofill){background:var(--tui-service-autofill-background)!important}.t-wrapper{position:absolute;inline-size:100%;block-size:100%;transition:opacity 0s var(--tui-duration)}.t-wrapper_cvc,.t-wrapper_expire{opacity:0;pointer-events:none;animation:outside var(--tui-duration) ease-in-out}.t-wrapper_cvc{margin-inline-start:7.1875rem}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-inline-start:4.0625rem}.t-wrapper_active{transition:none;pointer-events:auto;opacity:1;animation:inside var(--tui-duration) ease-in-out forwards}.t-card{inline-size:2rem;block-size:2rem}.t-collapsed{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;padding:1.25rem var(--tui-padding-l) 0;box-sizing:border-box;font:var(--tui-font-text-m);line-height:2.25rem;color:var(--tui-text-primary);white-space:nowrap;pointer-events:none}.t-collapsed:after{content:\"*\";float:left;opacity:0}:host-context([dir=\"rtl\"]) .t-collapsed:after{float:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask:after{opacity:1}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask:after{transition:opacity 0s var(--tui-duration)}.t-collapsed_enable-mask .t-collapsed-wrapper{left:1.375rem}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask .t-collapsed-wrapper{left:unset}.t-collapsed-wrapper{position:absolute;top:0;display:block;inline-size:100%;block-size:100%;overflow:hidden}.t-value{transition-property:transform,clip-path;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;clip-path:inset(0);transform:translate3d(calc(100% * var(--tui-inline)),0,0)}:host-context([dir=\"rtl\"]) .t-value{right:unset;left:100%;transform:translate3d(calc(100% * var(--tui-inline)),0,0)!important}.t-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border:0;margin:0;padding:1.25rem var(--tui-padding-l) 0;outline:none;background:transparent;box-sizing:border-box;font:var(--tui-font-text-m);color:var(--tui-text-primary);direction:ltr}:host-context([dir=\"rtl\"]) .t-input{text-align:end}.t-input::placeholder{color:var(--tui-text-tertiary)}.t-input_prefilled::placeholder{color:var(--tui-text-primary)}.t-input[chrome-autofilled],.t-input:-webkit-autofill{-webkit-text-fill-color:var(--tui-text-primary)!important;caret-color:var(--tui-text-primary)!important;transition:background-color 600000s 0s}.t-input.t-input.t-input_card:not(:-webkit-autofill):not(:focus:placeholder-shown),.t-input.t-input.t-input_card.t-input_filled{caret-color:var(--tui-text-primary);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;left:-60rem;top:-60rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-input_cvc_hidden{-webkit-text-security:disc}.t-icons{position:absolute;right:1rem;display:flex;align-items:center;block-size:100%;gap:.25rem}@supports (inset-inline-end: 0){.t-icons{right:unset;inset-inline-end:1rem}}.t-icon-outlet{display:flex;margin-inline-end:.25rem}.t-icon{cursor:pointer}.t-icon:before{font-size:1rem}.t-label{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;margin:1.125rem 1rem;font:var(--tui-font-text-m);line-height:1.25rem;color:var(--tui-text-secondary)}.t-label:empty:before{content:attr(data-label)}input:-webkit-autofill~.t-label,.t-label_raised{font-size:.83rem;transform:translateY(-.7rem)}:host([data-mode~=\"invalid\"]) input:-webkit-autofill~.t-label,:host([data-mode~=\"invalid\"]) .t-label_raised{color:var(--tui-text-negative)}:host([data-focus=\"true\"]) .t-label{color:var(--tui-text-primary)}.t-ghost{visibility:hidden}\n"] }]
+                    }, template: "@let formattedCard = value()?.card | tuiFormatCard: cardPrefilled;\n\n<div class=\"t-wrapper\">\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCard\n            autocomplete=\"cc-number\"\n            automation-id=\"tui-input-card-group__card\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input t-input_card\"\n            [attr.aria-invalid]=\"!cardPrefilled && !(this.card | tuiMapper: cardValidator)\"\n            [attr.id]=\"`${id}_card`\"\n            [class.t-input_filled]=\"card.length\"\n            [class.t-input_inert]=\"cardPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCard\"\n            [ngModel]=\"formattedCard\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cardPrefilled ? '' : placeholder || exampleText\"\n            [readOnly]=\"readOnly()\"\n            [tabIndex]=\"cardFocusable ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCardChange($event)\"\n        />\n        <span\n            aria-hidden=\"true\"\n            translate=\"no\"\n            class=\"t-collapsed\"\n            [attr.data-before]=\"masked\"\n            [class.t-collapsed_enable-mask]=\"cardCollapsed\"\n            (waResizeObserver)=\"onResize()\"\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]=\"getStyle(ghost)\"\n                    [textContent]=\"formattedCard\"\n                ></span>\n            </span>\n        </span>\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [attr.data-label]=\"texts()?.cardNumberText\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            <ng-content />\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_expire\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputExpire\n            autocomplete=\"cc-exp\"\n            automation-id=\"tui-input-card-group__expire\"\n            inputmode=\"numeric\"\n            maxlength=\"5\"\n            name=\"ccexpiryyear\"\n            translate=\"no\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_expire`\"\n            [class.t-input_inert]=\"!expireFocusable\"\n            [class.t-input_prefilled]=\"!inputs.expire\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskExpire\"\n            [ngModel]=\"expire\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"inputs.expire ? '00/00' : '\u2022\u2022/\u2022\u2022'\"\n            [readOnly]=\"readOnly() || !inputs.expire\"\n            [tabIndex]=\"expireFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onExpireChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.expiryText }}\n        </div>\n    </label>\n</div>\n<div\n    class=\"t-wrapper t-wrapper_cvc\"\n    [class.t-wrapper_active]=\"cardCollapsed\"\n>\n    <label (click.zoneless.prevent)=\"(0)\">\n        <input\n            #inputCVC\n            autocomplete=\"cc-csc\"\n            automation-id=\"tui-input-card-group__cvc\"\n            inputmode=\"numeric\"\n            translate=\"no\"\n            type=\"text\"\n            class=\"t-input\"\n            [attr.id]=\"`${id}_cvc`\"\n            [class.t-input_cvc_hidden]=\"cvcHidden\"\n            [class.t-input_prefilled]=\"cvcPrefilled\"\n            [disabled]=\"disabled()\"\n            [maskito]=\"maskCVC\"\n            [ngModel]=\"cvc\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [placeholder]=\"cvcPrefilled ? '\u2022\u2022\u2022' : exampleTextCVC\"\n            [readOnly]=\"readOnly() || cvcPrefilled\"\n            [tabIndex]=\"cvcFocusable || (isMobile && isWebkit) ? 0 : -1\"\n            (focus)=\"(0)\"\n            (ngModelChange)=\"onCVCChange($event)\"\n        />\n        <div\n            tuiTransitioned\n            class=\"t-label\"\n            [class.t-label_raised]=\"labelRaised()\"\n        >\n            {{ texts()?.cvcText }}\n        </div>\n    </label>\n</div>\n<div class=\"t-icons\">\n    @if (content) {\n        <div class=\"t-icon-outlet\">\n            <img\n                *polymorpheusOutlet=\"content as src\"\n                alt=\"\"\n                automation-id=\"tui-input-card-group__icon\"\n                class=\"t-card\"\n                [src]=\"src | tuiIcon\"\n            />\n        </div>\n    }\n    @if (hasCleaner()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__cleaner\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [icon]=\"icons.close\"\n            (click)=\"clear()\"\n        />\n    }\n    @if (dropdown._content()) {\n        <tui-icon\n            automation-id=\"tui-input-card-group__dropdown\"\n            tuiAppearance=\"icon\"\n            tuiChevron\n            (click)=\"toggle()\"\n        />\n    }\n</div>\n", styles: ["@keyframes outside{0%{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}to{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}}@keyframes inside{0%{transform:translate3d(calc(100% * var(--tui-inline)),0,0)}to{transform:translate3d(calc(var(--t-translate) * var(--tui-inline)),0,0)}}:host{--t-height: var(--tui-height-l);--t-padding: var(--tui-padding-l);--t-label: -.7rem;--t-label-size: .83em;--t-translate: 6.5rem;position:relative;display:block;block-size:var(--t-height);min-inline-size:24rem;border-radius:var(--tui-radius-l);overflow:hidden;font:var(--tui-font-text-ui-m)}:host[data-size=m]{--t-label: -.7em;--t-height: var(--tui-height-m);--t-padding: var(--tui-padding-m);border-radius:var(--tui-radius-m);font:var(--tui-font-text-ui-s)}:host[data-size=m] .t-card{inline-size:1.5rem;block-size:1.5rem}:host[data-size=m] [tuiChevron]{margin-inline-end:-.875rem;margin-inline-start:.125rem}:host :host-context(tui-root._mobile){min-inline-size:19rem;--t-translate: 4rem}:host[tuiAppearance][data-appearance]:has(:-webkit-autofill){background:var(--tui-service-autofill-background)!important}:host [tuiChevron]{block-size:auto;align-self:stretch;border-inline-end:var(--t-padding) solid transparent;margin-inline-end:-.75rem;box-sizing:content-box;font-size:1rem;cursor:pointer}.t-wrapper{position:absolute;inline-size:100%;block-size:100%;transition:opacity 0s var(--tui-duration)}.t-wrapper_cvc,.t-wrapper_expire{opacity:0;pointer-events:none;animation:outside var(--tui-duration) ease-in-out}.t-wrapper_cvc{margin-inline-start:7rem}:host-context(tui-root._mobile) .t-wrapper_cvc{margin-inline-start:4rem}.t-wrapper_active{transition:none;pointer-events:auto;opacity:1;animation:inside var(--tui-duration) ease-in-out forwards}.t-card{inline-size:2rem;block-size:2rem}.t-collapsed{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;padding:calc(var(--t-height) / 3) var(--t-padding) 0;box-sizing:border-box;line-height:calc(2 * var(--t-height) / 3);color:var(--tui-text-primary);white-space:nowrap;pointer-events:none}.t-collapsed:after{content:\"*\";float:left;opacity:0}:host-context([dir=\"rtl\"]) .t-collapsed:after{float:none}.t-collapsed_enable-mask:before{content:attr(data-before)}.t-collapsed_enable-mask:after{opacity:1}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask:after{transition:opacity 0s var(--tui-duration)}.t-collapsed_enable-mask .t-collapsed-wrapper{left:1.375rem}:host-context([dir=\"rtl\"]) .t-collapsed_enable-mask .t-collapsed-wrapper{left:unset}.t-collapsed-wrapper{position:absolute;top:0;display:block;inline-size:100%;block-size:100%;overflow:hidden}.t-value{transition-property:transform,clip-path;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;bottom:0;right:100%;display:block;clip-path:inset(0);transform:translate3d(calc(100% * var(--tui-inline)),0,0)}:host-context([dir=\"rtl\"]) .t-value{right:unset;left:100%;transform:translate3d(calc(100% * var(--tui-inline)),0,0)!important}.t-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border:0;margin:0;padding:calc(var(--t-height) / 3) var(--t-padding) 0;outline:none;background:transparent;box-sizing:border-box;font:inherit;color:var(--tui-text-primary);direction:ltr}:host-context([dir=\"rtl\"]) .t-input{text-align:end}.t-input::placeholder{color:var(--tui-text-tertiary)}.t-input_prefilled::placeholder{color:var(--tui-text-primary)}.t-input[chrome-autofilled],.t-input:-webkit-autofill{-webkit-text-fill-color:var(--tui-text-primary)!important;caret-color:var(--tui-text-primary)!important;transition:background-color 600000s 0s}.t-input.t-input.t-input_card:not(:-webkit-autofill):not(:focus:placeholder-shown),.t-input.t-input.t-input_card.t-input_filled{caret-color:var(--tui-text-primary);color:transparent!important;-webkit-text-fill-color:transparent!important}.t-input.t-input.t-input_card::-webkit-credit-card-auto-fill-button{content:none!important;position:absolute;left:-60rem;top:-60rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input_inert{pointer-events:none}.t-input_cvc_hidden{-webkit-text-security:disc}.t-icons{position:absolute;right:1rem;display:flex;align-items:center;block-size:100%;gap:.25rem}@supports (inset-inline-end: 0){.t-icons{right:unset;inset-inline-end:1rem}}.t-icon-outlet{display:flex;margin-inline-end:.25rem}.t-icon{cursor:pointer}.t-icon:before{font-size:1rem}.t-label{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;margin:0 var(--t-padding);line-height:var(--t-height);color:var(--tui-text-secondary)}.t-label:empty:before{content:attr(data-label)}input:-webkit-autofill~.t-label,.t-label_raised{font-size:var(--t-label-size);transform:translateY(var(--t-label))}:host([data-mode~=\"invalid\"]) input:-webkit-autofill~.t-label,:host([data-mode~=\"invalid\"]) .t-label_raised{color:var(--tui-text-negative)}:host([data-focus=\"true\"]) .t-label{color:var(--tui-text-primary)}.t-ghost{visibility:hidden}\n"] }]
         }], propDecorators: { inputCard: [{
                 type: ViewChild,
                 args: ['inputCard', { static: true }]
@@ -361,8 +347,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 type: Input
             }], id: [{
                 type: Input
-            }], autocomplete: [{
-                type: Input
             }], binChange: [{
                 type: Output
             }], codeLength: [{