@taiga-ui/addon-commerce 4.65.0 → 5.0.0-rc.0

package/README.md

@@ -16,13 +16,13 @@ consisting of multiple base libraries and several add-ons
 
 Install base packages:
 
-```
+```bash
 npm i @taiga-ui/{cdk,core}
 ```
 
 Install addon-commerce:
 
-```
+```bash
 npm i @taiga-ui/addon-commerce
 ```
 

package/components/index.d.ts

@@ -1,5 +1,3 @@
 export * from '@taiga-ui/addon-commerce/components/input-card';
 export * from '@taiga-ui/addon-commerce/components/input-card-group';
-export * from '@taiga-ui/addon-commerce/components/input-cvc';
-export * from '@taiga-ui/addon-commerce/components/input-expire';
 export * from '@taiga-ui/addon-commerce/components/thumbnail-card';

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

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

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

@@ -1,22 +1,16 @@
 import { type OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@maskito/angular";
-import * as i2 from "@taiga-ui/core/components/textfield";
-export declare class TuiInputCard implements OnInit {
+import * as i2 from "@taiga-ui/core/components/input";
+export declare class TuiInputCardComponent 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 mask: import("@angular/core").WritableSignal<import("@maskito/core").MaskitoOptions>;
+    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 ɵfac: i0.ɵɵFactoryDeclaration<TuiInputCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputCardComponent, "input[tuiInputCard]", never, {}, { "binChange": "binChange"; }, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithInput; inputs: {}; outputs: {}; }]>;
 }

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

@@ -0,0 +1,7 @@
+import { TuiLabel } from '@taiga-ui/core/components/label';
+import { TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
+import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
+import { TuiInputCardComponent } from './input-card.component';
+import { TuiInputCVCDirective } from './input-cvc.directive';
+import { TuiInputExpireDirective } from './input-expire.directive';
+export declare const TuiInputCard: readonly [typeof TuiInputCardComponent, typeof TuiInputCVCDirective, typeof TuiInputExpireDirective, typeof TuiLabel, typeof TuiTextfieldComponent, typeof TuiTextfieldOptionsDirective, typeof TuiDropdownContent];

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@maskito/angular";
+import * as i2 from "@taiga-ui/core/components/input";
+export declare class TuiInputCVCDirective {
+    protected readonly mask: import("@angular/core").Signal<import("@maskito/core").MaskitoOptions>;
+    readonly hidden: import("@angular/core").InputSignal<boolean>;
+    readonly length: import("@angular/core").InputSignal<3 | 4>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputCVCDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputCVCDirective, "input[tuiInputCVC]", never, { "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithInput; inputs: {}; outputs: {}; }]>;
+}

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@maskito/angular";
+import * as i2 from "@taiga-ui/core/components/input";
+export declare class TuiInputExpireDirective {
+    protected readonly mask: import("@angular/core").WritableSignal<import("@maskito/core").MaskitoOptions>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputExpireDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputExpireDirective, "input[tuiInputExpire]", never, {}, {}, never, never, true, [{ directive: typeof i1.MaskitoDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithInput; inputs: {}; outputs: {}; }]>;
+}

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

@@ -1,34 +1,37 @@
-import { type AfterViewInit, EventEmitter, type Signal } from '@angular/core';
+import { 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';
-import { TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
+import { TuiDropdownDirective } from '@taiga-ui/core/portals/dropdown';
 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 i2 from "@taiga-ui/core/portals/dropdown";
 import * as i3 from "./input-card-group.directive";
 export interface TuiCard {
     card: string;
     cvc: string;
     expire: string;
 }
-export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implements TuiDataListHost<Partial<TuiCard>>, AfterViewInit {
-    private readonly inputCard?;
-    private readonly inputExpire?;
-    private readonly inputCVC?;
+export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implements TuiDataListHost<Partial<TuiCard>> {
+    private readonly inputCard;
+    private readonly inputExpire;
+    private readonly inputCVC;
     private readonly doc;
     private readonly isServer;
     private readonly focus$;
-    private expirePrefilled;
+    private readonly expirePrefilled;
     private readonly paymentSystems;
     private readonly options;
     private readonly el;
     private readonly hover;
     private readonly focusedIn;
-    protected exampleTextCVC: string;
-    protected cvcHidden: boolean;
-    protected maskCVC: import("@maskito/core").MaskitoOptions;
+    protected readonly cvcMask: Signal<import("@maskito/core").MaskitoOptions>;
+    protected readonly cvcHidden: boolean;
+    protected readonly cvcPlaceholder: Signal<string>;
+    protected readonly cvcPrefilled: Signal<boolean>;
+    protected readonly cardPrefilled: Signal<boolean>;
+    protected readonly focusable: Signal<boolean>;
+    protected readonly expireFocusable: Signal<boolean>;
     protected readonly isMobile: boolean;
     protected readonly isWebkit: boolean;
     protected readonly dropdown: TuiDropdownDirective;
@@ -36,61 +39,44 @@ export declare class TuiInputCardGroup extends TuiControl<TuiCard | null> implem
     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 texts: Signal<import("./input-card-group.providers").TuiCardGroupedTexts>;
+    protected readonly open: import("@angular/core").ModelSignal<boolean>;
     protected readonly $: import("rxjs").Subscription | import("rxjs").Observable<never>;
+    protected readonly card: Signal<string>;
+    protected readonly expire: Signal<string>;
+    protected readonly cvc: Signal<string>;
     protected readonly m: Signal<string | readonly string[] | null>;
-    protected readonly appearance: import("@angular/core").WritableSignal<string>;
+    protected readonly appearance: Signal<string>;
     protected readonly state: Signal<unknown>;
     protected readonly focus: Signal<boolean | null>;
     protected readonly labelRaised: Signal<boolean>;
-    protected readonly hasCleaner: Signal<boolean>;
-    /**
-     * @deprecated use 'placeholder' instead
-     */
-    exampleText: string;
-    placeholder: string;
-    inputs: import("./input-card-group.options").TuiCardInputs;
-    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;
+    protected readonly hasCleaner: Signal<boolean | "">;
+    protected readonly bin: Signal<string | null>;
+    protected readonly content: Signal<PolymorpheusContent>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly inputs: import("@angular/core").InputSignal<import("./input-card-group.options").TuiCardInputs>;
+    readonly cardValidator: import("@angular/core").InputSignal<import("@taiga-ui/cdk/types").TuiBooleanHandler<string>>;
+    readonly icon: import("@angular/core").InputSignal<PolymorpheusContent>;
+    readonly id: import("@angular/core").InputSignal<string>;
+    readonly codeLength: import("@angular/core").InputSignal<3 | 4 | undefined>;
+    readonly binChange: import("@angular/core").OutputEmitterRef<string | null>;
     writeValue(value: TuiCard | null): void;
-    /** Public API for manual focus management */
     focusCard(): void;
     focusExpire(): void;
     focusCVC(): void;
     handleOption(option: Partial<TuiCard> | null): void;
     clear(): void;
-    onResize(): void;
-    protected get content(): PolymorpheusContent;
-    protected get card(): string;
-    protected get expire(): string;
-    protected get cvc(): string;
     protected get cardCollapsed(): boolean;
-    protected get tailLength(): number;
-    protected get cardPrefilled(): boolean;
-    protected get cvcPrefilled(): boolean;
-    protected get cardFocusable(): boolean;
-    protected get expireFocusable(): boolean;
-    protected get cvcFocusable(): boolean;
-    protected get masked(): string;
+    protected onResize(): void;
     protected onCardChange(card: string): void;
     protected onExpireChange(expire: string): void;
     protected onCVCChange(cvc: string): void;
     protected getStyle({ offsetWidth }: HTMLSpanElement): string;
     protected onPointerDown(event: MouseEvent): void;
     protected toggle(): void;
-    private isFocusable;
-    private getPaymentSystem;
     private updateBin;
     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 i2.TuiWithDropdownOpen; inputs: {}; outputs: {}; }, { directive: typeof i3.TuiInputCardGroupDirective; inputs: { "compact": "compact"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputCardGroup, "tui-input-card-group", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputs": { "alias": "inputs"; "required": false; "isSignal": true; }; "cardValidator": { "alias": "cardValidator"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "codeLength": { "alias": "codeLength"; "required": false; "isSignal": true; }; }, { "binChange": "binChange"; }, never, ["*"], true, [{ directive: typeof i1.TuiAppearance; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiWithDropdownOpen; inputs: {}; outputs: {}; }, { directive: typeof i3.TuiInputCardGroupDirective; inputs: { "compact": "compact"; }; outputs: {}; }]>;
 }

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

@@ -1,10 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class TuiInputCardGroupDirective {
-    private readonly c$;
-    private readonly m$;
-    readonly compact$: import("rxjs").Observable<boolean>;
-    readonly compact: import("@angular/core").Signal<boolean>;
-    set compactSetter(compact: boolean);
+    protected readonly breakpoint: import("@angular/core").Signal<"desktopLarge" | "desktopSmall" | "mobile">;
+    readonly compact: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputCardGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputCardGroupDirective, never, never, { "compactSetter": { "alias": "compact"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiInputCardGroupDirective, never, never, { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,17 +1,14 @@
-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;
+    readonly placeholder: string;
+    readonly cvcPlaceholder: string;
     readonly cvcHidden: boolean;
     readonly inputs: TuiCardInputs;
 }
 export declare const TUI_INPUT_CARD_GROUP_DEFAULT_OPTIONS: TuiInputCardGroupOptions;
-export declare const TUI_INPUT_CARD_GROUP_OPTIONS: InjectionToken<TuiInputCardGroupOptions>;
-export declare function tuiInputCardGroupOptionsProvider(options: Partial<TuiInputCardGroupOptions>): Provider;
+export declare const TUI_INPUT_CARD_GROUP_OPTIONS: import("@angular/core").InjectionToken<TuiInputCardGroupOptions>, tuiInputCardGroupOptionsProvider: (item: Partial<TuiInputCardGroupOptions> | (() => Partial<TuiInputCardGroupOptions>)) => import("@angular/core").FactoryProvider;

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

@@ -1,12 +1,11 @@
-import { InjectionToken } from '@angular/core';
-import { type Observable } from 'rxjs';
+import { InjectionToken, type Signal } from '@angular/core';
 export interface TuiCardGroupedTexts {
     readonly cardNumberText: string;
     readonly cvcText: string;
     readonly expiryText: string;
 }
-export declare const TUI_INPUT_CARD_GROUP_TEXTS: InjectionToken<Observable<TuiCardGroupedTexts>>;
+export declare const TUI_INPUT_CARD_GROUP_TEXTS: InjectionToken<Signal<TuiCardGroupedTexts>>;
 export declare const TUI_INPUT_CARD_GROUP_TEXTS_PROVIDER: {
-    provide: InjectionToken<Observable<TuiCardGroupedTexts>>;
-    useFactory: () => Observable<TuiCardGroupedTexts>;
+    provide: InjectionToken<Signal<TuiCardGroupedTexts>>;
+    useFactory: () => Signal<TuiCardGroupedTexts>;
 };

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

@@ -1,14 +1,11 @@
 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 {
     protected readonly options: import("./thumbnail-card.options").TuiThumbnailCardOptions;
-    size: TuiSizeL | TuiSizeXS;
-    paymentSystem: TuiPaymentSystem | null;
-    iconStart: string;
-    iconEnd: string;
-    monoHandler: TuiBooleanHandler<TuiPaymentSystem>;
+    readonly size: import("@angular/core").InputSignal<"m" | "l" | "s" | "xs">;
+    readonly paymentSystem: import("@angular/core").InputSignal<TuiPaymentSystem | null>;
+    readonly iconStart: import("@angular/core").InputSignal<string>;
+    readonly iconEnd: import("@angular/core").InputSignal<string>;
     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; "isSignal": true; }; "paymentSystem": { "alias": "paymentSystem"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; }, {}, 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>;