@taiga-ui/kit 5.21.0 → 5.22.0

package/fesm2022/taiga-ui-kit-components-input-phone-international.mjs

@@ -82,7 +82,7 @@ class TuiInputPhoneInternationalContent {
         this.host.masked.set(maskitoTransform(this.host.value() || tuiGetCallingCode(code, this.host.metadata()), this.host.mask() || MASKITO_DEFAULT_OPTIONS));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputPhoneInternationalContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiInputPhoneInternationalContent, isStandalone: true, selector: "tui-input-phone-international-content", host: { attributes: { "data-tui-version": "5.21.0" } }, viewQueries: [{ propertyName: "list", predicate: TuiOption, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n    appearance=\"textfield\"\n    tabindex=\"-1\"\n    tuiButton\n    tuiChevron\n    type=\"button\"\n    class=\"t-ipi-select\"\n    [attr.data-mode]=\"host.mode()\"\n    [class.t-ipi-select_readonly]=\"host.readOnly()\"\n    [disabled]=\"host.disabled()\"\n    [size]=\"size()\"\n    [tuiAppearanceFocus]=\"host.open()\"\n    (click.prevent)=\"host.interactive() && host.open.set(!host.open())\"\n    (pointerdown.stop)=\"(0)\"\n>\n    <img\n        class=\"t-ipi-flag\"\n        [alt]=\"names()[host.countryIsoCode()]\"\n        [class.t-ipi-flag_small]=\"size() === 's'\"\n        [src]=\"host.countryIsoCode() | tuiFlag\"\n    />\n</button>\n<ng-template #filter>\n    <div class=\"t-ipi-search\">\n        <tui-textfield\n            [iconStart]=\"icons.search\"\n            [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n        >\n            <input\n                autocomplete=\"off\"\n                tuiInput\n                type=\"text\"\n                [ngModel]=\"host.search()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                [placeholder]=\"label()\"\n                [tuiAutoFocus]=\"!ios\"\n                (keydown.arrowDown)=\"list()[0]?.nativeElement?.focus()\"\n                (ngModelChange)=\"host.search.set($event)\"\n            />\n        </tui-textfield>\n    </div>\n</ng-template>\n<ng-container *tuiDropdown>\n    @if (host.countrySearch()) {\n        <ng-container *ngTemplateOutlet=\"filter\" />\n    }\n    <tui-data-list class=\"t-ipi-options\">\n        @for (item of filtered(); track item.iso) {\n            <button\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item.iso)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-ipi-flag\"\n                    [class.t-ipi-flag_small]=\"size() === 's'\"\n                    [src]=\"item.iso | tuiFlag\"\n                />\n                <span tuiTitle>{{ item.name }}</span>\n                <span class=\"t-ipi-code\">{{ item.code }}</span>\n            </button>\n        }\n    </tui-data-list>\n</ng-container>\n", styles: ["tui-input-phone-international-content:where(*[data-tui-version=\"5.21.0\"]){display:contents;border-radius:inherit}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.21.0\"]){inset-inline-start:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.21.0\"])+[tuiLabel][tuiLabel]{padding-inline-start:var(--t-offset)}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.21.0\"]){--t-offset: 4.125rem}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.21.0\"]) .t-ipi-flag{margin:0 .1875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.21.0\"]){--t-offset: 4.875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.21.0\"]) .t-ipi-flag{margin:0 -.1875rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.21.0\"]){--t-offset: 5.25rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.21.0\"]) .t-ipi-flag{margin:0 -.1875rem}[data-tui-version=\"5.21.0\"] .t-ipi-select{position:absolute;inset-inline-start:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[data-tui-version=\"5.21.0\"] .t-ipi-select_readonly{pointer-events:none}[data-tui-version=\"5.21.0\"] .t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}[data-tui-version=\"5.21.0\"] .t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}[data-tui-version=\"5.21.0\"] .t-ipi-code{color:var(--tui-text-secondary)}[data-tui-version=\"5.21.0\"] .t-ipi-search{position:sticky;z-index:1;inset-block-start:0;background:var(--tui-background-elevation-1);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){[data-tui-version=\"5.21.0\"] .t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}[data-tui-version=\"5.21.0\"] tui-dropdown-mobile .t-ipi-search,[data-tui-version=\"5.21.0\"] tui-sheet-dialog .t-ipi-search{background:var(--tui-background-elevation-1)}[data-tui-version=\"5.21.0\"] tui-dropdown-mobile .t-ipi-options:not(:first-child),[data-tui-version=\"5.21.0\"] tui-sheet-dialog .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}[data-tui-version=\"5.21.0\"] tui-sheet-dialog .t-ipi-search{inset-block-start:4.5rem;padding-inline-start:0;padding-inline-end:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiInputPhoneInternationalContent, isStandalone: true, selector: "tui-input-phone-international-content", host: { attributes: { "data-tui-version": "5.22.0" } }, viewQueries: [{ propertyName: "list", predicate: TuiOption, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n    appearance=\"textfield\"\n    tabindex=\"-1\"\n    tuiButton\n    tuiChevron\n    type=\"button\"\n    class=\"t-ipi-select\"\n    [attr.data-mode]=\"host.mode()\"\n    [class.t-ipi-select_readonly]=\"host.readOnly()\"\n    [disabled]=\"host.disabled()\"\n    [size]=\"size()\"\n    [tuiAppearanceFocus]=\"host.open()\"\n    (click.prevent)=\"host.interactive() && host.open.set(!host.open())\"\n    (pointerdown.stop)=\"(0)\"\n>\n    <img\n        class=\"t-ipi-flag\"\n        [alt]=\"names()[host.countryIsoCode()]\"\n        [class.t-ipi-flag_small]=\"size() === 's'\"\n        [src]=\"host.countryIsoCode() | tuiFlag\"\n    />\n</button>\n<ng-template #filter>\n    <div class=\"t-ipi-search\">\n        <tui-textfield\n            [iconStart]=\"icons.search\"\n            [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n        >\n            <input\n                autocomplete=\"off\"\n                tuiInput\n                type=\"text\"\n                [ngModel]=\"host.search()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                [placeholder]=\"label()\"\n                [tuiAutoFocus]=\"!ios\"\n                (keydown.arrowDown)=\"list()[0]?.nativeElement?.focus()\"\n                (ngModelChange)=\"host.search.set($event)\"\n            />\n        </tui-textfield>\n    </div>\n</ng-template>\n<ng-container *tuiDropdown>\n    @if (host.countrySearch()) {\n        <ng-container *ngTemplateOutlet=\"filter\" />\n    }\n    <tui-data-list class=\"t-ipi-options\">\n        @for (item of filtered(); track item.iso) {\n            <button\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item.iso)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-ipi-flag\"\n                    [class.t-ipi-flag_small]=\"size() === 's'\"\n                    [src]=\"item.iso | tuiFlag\"\n                />\n                <span tuiTitle>{{ item.name }}</span>\n                <span class=\"t-ipi-code\">{{ item.code }}</span>\n            </button>\n        }\n    </tui-data-list>\n</ng-container>\n", styles: ["tui-input-phone-international-content:where(*[data-tui-version=\"5.22.0\"]){display:contents;border-radius:inherit}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.22.0\"]){inset-inline-start:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.22.0\"])+[tuiLabel][tuiLabel]{padding-inline-start:var(--t-offset)}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.22.0\"]){--t-offset: 4.125rem}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.22.0\"]) .t-ipi-flag{margin:0 .1875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.22.0\"]){--t-offset: 4.875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.22.0\"]) .t-ipi-flag{margin:0 -.1875rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.22.0\"]){--t-offset: 5.25rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.22.0\"]) .t-ipi-flag{margin:0 -.1875rem}[data-tui-version=\"5.22.0\"] .t-ipi-select{position:absolute;inset-inline-start:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[data-tui-version=\"5.22.0\"] .t-ipi-select_readonly{pointer-events:none}[data-tui-version=\"5.22.0\"] .t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}[data-tui-version=\"5.22.0\"] .t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}[data-tui-version=\"5.22.0\"] .t-ipi-code{color:var(--tui-text-secondary)}[data-tui-version=\"5.22.0\"] .t-ipi-search{position:sticky;z-index:1;inset-block-start:0;background:var(--tui-background-elevation-1);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){[data-tui-version=\"5.22.0\"] .t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}[data-tui-version=\"5.22.0\"] tui-dropdown-mobile .t-ipi-search,[data-tui-version=\"5.22.0\"] tui-sheet-dialog .t-ipi-search{background:var(--tui-background-elevation-1)}[data-tui-version=\"5.22.0\"] tui-dropdown-mobile .t-ipi-options:not(:first-child),[data-tui-version=\"5.22.0\"] tui-sheet-dialog .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}[data-tui-version=\"5.22.0\"] tui-sheet-dialog .t-ipi-search{inset-block-start:4.5rem;padding-inline-start:0;padding-inline-end:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputPhoneInternationalContent, decorators: [{
             type: Component,
@@ -99,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TuiOption,
                         TuiTextfield,
                         TuiTitle,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'data-tui-version': TUI_VERSION }, template: "<button\n    appearance=\"textfield\"\n    tabindex=\"-1\"\n    tuiButton\n    tuiChevron\n    type=\"button\"\n    class=\"t-ipi-select\"\n    [attr.data-mode]=\"host.mode()\"\n    [class.t-ipi-select_readonly]=\"host.readOnly()\"\n    [disabled]=\"host.disabled()\"\n    [size]=\"size()\"\n    [tuiAppearanceFocus]=\"host.open()\"\n    (click.prevent)=\"host.interactive() && host.open.set(!host.open())\"\n    (pointerdown.stop)=\"(0)\"\n>\n    <img\n        class=\"t-ipi-flag\"\n        [alt]=\"names()[host.countryIsoCode()]\"\n        [class.t-ipi-flag_small]=\"size() === 's'\"\n        [src]=\"host.countryIsoCode() | tuiFlag\"\n    />\n</button>\n<ng-template #filter>\n    <div class=\"t-ipi-search\">\n        <tui-textfield\n            [iconStart]=\"icons.search\"\n            [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n        >\n            <input\n                autocomplete=\"off\"\n                tuiInput\n                type=\"text\"\n                [ngModel]=\"host.search()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                [placeholder]=\"label()\"\n                [tuiAutoFocus]=\"!ios\"\n                (keydown.arrowDown)=\"list()[0]?.nativeElement?.focus()\"\n                (ngModelChange)=\"host.search.set($event)\"\n            />\n        </tui-textfield>\n    </div>\n</ng-template>\n<ng-container *tuiDropdown>\n    @if (host.countrySearch()) {\n        <ng-container *ngTemplateOutlet=\"filter\" />\n    }\n    <tui-data-list class=\"t-ipi-options\">\n        @for (item of filtered(); track item.iso) {\n            <button\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item.iso)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-ipi-flag\"\n                    [class.t-ipi-flag_small]=\"size() === 's'\"\n                    [src]=\"item.iso | tuiFlag\"\n                />\n                <span tuiTitle>{{ item.name }}</span>\n                <span class=\"t-ipi-code\">{{ item.code }}</span>\n            </button>\n        }\n    </tui-data-list>\n</ng-container>\n", styles: ["tui-input-phone-international-content:where(*[data-tui-version=\"5.21.0\"]){display:contents;border-radius:inherit}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.21.0\"]){inset-inline-start:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.21.0\"])+[tuiLabel][tuiLabel]{padding-inline-start:var(--t-offset)}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.21.0\"]){--t-offset: 4.125rem}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.21.0\"]) .t-ipi-flag{margin:0 .1875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.21.0\"]){--t-offset: 4.875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.21.0\"]) .t-ipi-flag{margin:0 -.1875rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.21.0\"]){--t-offset: 5.25rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.21.0\"]) .t-ipi-flag{margin:0 -.1875rem}[data-tui-version=\"5.21.0\"] .t-ipi-select{position:absolute;inset-inline-start:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[data-tui-version=\"5.21.0\"] .t-ipi-select_readonly{pointer-events:none}[data-tui-version=\"5.21.0\"] .t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}[data-tui-version=\"5.21.0\"] .t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}[data-tui-version=\"5.21.0\"] .t-ipi-code{color:var(--tui-text-secondary)}[data-tui-version=\"5.21.0\"] .t-ipi-search{position:sticky;z-index:1;inset-block-start:0;background:var(--tui-background-elevation-1);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){[data-tui-version=\"5.21.0\"] .t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}[data-tui-version=\"5.21.0\"] tui-dropdown-mobile .t-ipi-search,[data-tui-version=\"5.21.0\"] tui-sheet-dialog .t-ipi-search{background:var(--tui-background-elevation-1)}[data-tui-version=\"5.21.0\"] tui-dropdown-mobile .t-ipi-options:not(:first-child),[data-tui-version=\"5.21.0\"] tui-sheet-dialog .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}[data-tui-version=\"5.21.0\"] tui-sheet-dialog .t-ipi-search{inset-block-start:4.5rem;padding-inline-start:0;padding-inline-end:0}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'data-tui-version': TUI_VERSION }, template: "<button\n    appearance=\"textfield\"\n    tabindex=\"-1\"\n    tuiButton\n    tuiChevron\n    type=\"button\"\n    class=\"t-ipi-select\"\n    [attr.data-mode]=\"host.mode()\"\n    [class.t-ipi-select_readonly]=\"host.readOnly()\"\n    [disabled]=\"host.disabled()\"\n    [size]=\"size()\"\n    [tuiAppearanceFocus]=\"host.open()\"\n    (click.prevent)=\"host.interactive() && host.open.set(!host.open())\"\n    (pointerdown.stop)=\"(0)\"\n>\n    <img\n        class=\"t-ipi-flag\"\n        [alt]=\"names()[host.countryIsoCode()]\"\n        [class.t-ipi-flag_small]=\"size() === 's'\"\n        [src]=\"host.countryIsoCode() | tuiFlag\"\n    />\n</button>\n<ng-template #filter>\n    <div class=\"t-ipi-search\">\n        <tui-textfield\n            [iconStart]=\"icons.search\"\n            [tuiTextfieldSize]=\"size() === 's' ? 's' : 'm'\"\n        >\n            <input\n                autocomplete=\"off\"\n                tuiInput\n                type=\"text\"\n                [ngModel]=\"host.search()\"\n                [ngModelOptions]=\"{standalone: true}\"\n                [placeholder]=\"label()\"\n                [tuiAutoFocus]=\"!ios\"\n                (keydown.arrowDown)=\"list()[0]?.nativeElement?.focus()\"\n                (ngModelChange)=\"host.search.set($event)\"\n            />\n        </tui-textfield>\n    </div>\n</ng-template>\n<ng-container *tuiDropdown>\n    @if (host.countrySearch()) {\n        <ng-container *ngTemplateOutlet=\"filter\" />\n    }\n    <tui-data-list class=\"t-ipi-options\">\n        @for (item of filtered(); track item.iso) {\n            <button\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item.iso)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-ipi-flag\"\n                    [class.t-ipi-flag_small]=\"size() === 's'\"\n                    [src]=\"item.iso | tuiFlag\"\n                />\n                <span tuiTitle>{{ item.name }}</span>\n                <span class=\"t-ipi-code\">{{ item.code }}</span>\n            </button>\n        }\n    </tui-data-list>\n</ng-container>\n", styles: ["tui-input-phone-international-content:where(*[data-tui-version=\"5.22.0\"]){display:contents;border-radius:inherit}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.22.0\"]){inset-inline-start:var(--t-offset);border-top-left-radius:0;border-bottom-left-radius:0;inline-size:calc(100% - var(--t-offset))}[tuiInputPhoneInternational][tuiInputPhoneInternational]:where(*[data-tui-version=\"5.22.0\"])+[tuiLabel][tuiLabel]{padding-inline-start:var(--t-offset)}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.22.0\"]){--t-offset: 4.125rem}tui-textfield[data-size=s]:where(*[data-tui-version=\"5.22.0\"]) .t-ipi-flag{margin:0 .1875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.22.0\"]){--t-offset: 4.875rem}tui-textfield[data-size=m]:where(*[data-tui-version=\"5.22.0\"]) .t-ipi-flag{margin:0 -.1875rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.22.0\"]){--t-offset: 5.25rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.22.0\"]) .t-ipi-flag{margin:0 -.1875rem}[data-tui-version=\"5.22.0\"] .t-ipi-select{position:absolute;inset-inline-start:0;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}[data-tui-version=\"5.22.0\"] .t-ipi-select_readonly{pointer-events:none}[data-tui-version=\"5.22.0\"] .t-ipi-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:100%}[data-tui-version=\"5.22.0\"] .t-ipi-flag_small{inline-size:1.25rem;block-size:1.25rem}[data-tui-version=\"5.22.0\"] .t-ipi-code{color:var(--tui-text-secondary)}[data-tui-version=\"5.22.0\"] .t-ipi-search{position:sticky;z-index:1;inset-block-start:0;background:var(--tui-background-elevation-1);padding:.375rem .375rem 0}@supports (-webkit-touch-callout: none){[data-tui-version=\"5.22.0\"] .t-ipi-search input:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}[data-tui-version=\"5.22.0\"] tui-dropdown-mobile .t-ipi-search,[data-tui-version=\"5.22.0\"] tui-sheet-dialog .t-ipi-search{background:var(--tui-background-elevation-1)}[data-tui-version=\"5.22.0\"] tui-dropdown-mobile .t-ipi-options:not(:first-child),[data-tui-version=\"5.22.0\"] tui-sheet-dialog .t-ipi-options:not(:first-child){min-block-size:calc(100 * var(--tui-viewport-vh) - 8.75rem)}[data-tui-version=\"5.22.0\"] tui-sheet-dialog .t-ipi-search{inset-block-start:4.5rem;padding-inline-start:0;padding-inline-end:0}\n"] }]
         }] });
 
 const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g;

package/fesm2022/taiga-ui-kit-components-input-pin.mjs

@@ -21,11 +21,11 @@ class TuiInputPinContent {
         this.control = inject(NgControl);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputPinContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiInputPinContent, isStandalone: true, selector: "tui-input-pin-content", host: { attributes: { "aria-hidden": "true", "data-tui-version": "5.21.0" } }, ngImport: i0, template: "@for (_ of '-'.repeat(pin.el.maxLength); track $index) {\n    <label\n        class=\"t-item\"\n        [tuiAppearance]=\"appearance()\"\n        [tuiAppearanceFocus]=\"pin.isFocused($index)\"\n        [tuiAppearanceMode]=\"control.invalid && control.touched ? 'invalid' : null\"\n        (pointerdown.prevent)=\"pin.onClick($index)\"\n    >\n        <span\n            class=\"t-value\"\n            [class.t-value_filled]=\"pin.value()[$index]\"\n            [textContent]=\"pin.value()[$index] || pin.el.placeholder[$index]\"\n        ></span>\n    </label>\n}\n", styles: ["@keyframes blink{50%{opacity:0}}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]){position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;display:flex;gap:inherit;border-radius:inherit}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item{display:flex;flex:1;align-items:center;justify-content:center;border-radius:inherit;pointer-events:auto;cursor:text;margin-inline-start:.25rem}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item:first-child{pointer-events:none;margin:0}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item[data-focus=true] .t-value_filled{background:var(--tui-service-selection-background)}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item[data-focus=true] .t-value_filled:before{display:none}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item[data-focus=true] .t-value:before{content:\"\";block-size:1em;border-inline-start:1px solid var(--tui-text-primary);animation:blink 1s steps(1) infinite}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-value{color:var(--tui-text-secondary)}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-value_filled{color:var(--tui-text-primary)}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"]){position:absolute;inset:0;color:transparent;background:transparent;border:none;outline:none;--t-caret-color: rgba(255, 255, 255, .01);caret-color:var(--t-caret-color)}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])::selection{background:transparent}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])::placeholder{color:transparent!important}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])+.t-content{gap:inherit!important}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])+.t-content [tuiButtonX]{display:none!important}[tuiTheme=dark] input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"]){--t-caret-color: rgba(50, 50, 50, .01)}\n"], dependencies: [{ kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiInputPinContent, isStandalone: true, selector: "tui-input-pin-content", host: { attributes: { "aria-hidden": "true", "data-tui-version": "5.22.0" } }, ngImport: i0, template: "@for (_ of '-'.repeat(pin.el.maxLength); track $index) {\n    <label\n        class=\"t-item\"\n        [tuiAppearance]=\"appearance()\"\n        [tuiAppearanceFocus]=\"pin.isFocused($index)\"\n        [tuiAppearanceMode]=\"control.invalid && control.touched ? 'invalid' : null\"\n        (pointerdown.prevent)=\"pin.onClick($index)\"\n    >\n        <span\n            class=\"t-value\"\n            [class.t-value_filled]=\"pin.value()[$index]\"\n            [textContent]=\"pin.value()[$index] || pin.el.placeholder[$index]\"\n        ></span>\n    </label>\n}\n", styles: ["@keyframes blink{50%{opacity:0}}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]){position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;display:flex;gap:inherit;border-radius:inherit}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item{display:flex;flex:1;align-items:center;justify-content:center;border-radius:inherit;pointer-events:auto;cursor:text;margin-inline-start:.25rem}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item:first-child{pointer-events:none;margin:0}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item[data-focus=true] .t-value_filled{background:var(--tui-service-selection-background)}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item[data-focus=true] .t-value_filled:before{display:none}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item[data-focus=true] .t-value:before{content:\"\";block-size:1em;border-inline-start:1px solid var(--tui-text-primary);animation:blink 1s steps(1) infinite}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-value{color:var(--tui-text-secondary)}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-value_filled{color:var(--tui-text-primary)}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"]){position:absolute;inset:0;color:transparent;background:transparent;border:none;outline:none;--t-caret-color: rgba(255, 255, 255, .01);caret-color:var(--t-caret-color)}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])::selection{background:transparent}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])::placeholder{color:transparent!important}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])+.t-content{gap:inherit!important}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])+.t-content [tuiButtonX]{display:none!important}[tuiTheme=dark] input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"]){--t-caret-color: rgba(50, 50, 50, .01)}\n"], dependencies: [{ kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputPinContent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-input-pin-content', imports: [TuiAppearance], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'aria-hidden': 'true', 'data-tui-version': TUI_VERSION }, template: "@for (_ of '-'.repeat(pin.el.maxLength); track $index) {\n    <label\n        class=\"t-item\"\n        [tuiAppearance]=\"appearance()\"\n        [tuiAppearanceFocus]=\"pin.isFocused($index)\"\n        [tuiAppearanceMode]=\"control.invalid && control.touched ? 'invalid' : null\"\n        (pointerdown.prevent)=\"pin.onClick($index)\"\n    >\n        <span\n            class=\"t-value\"\n            [class.t-value_filled]=\"pin.value()[$index]\"\n            [textContent]=\"pin.value()[$index] || pin.el.placeholder[$index]\"\n        ></span>\n    </label>\n}\n", styles: ["@keyframes blink{50%{opacity:0}}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]){position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;display:flex;gap:inherit;border-radius:inherit}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item{display:flex;flex:1;align-items:center;justify-content:center;border-radius:inherit;pointer-events:auto;cursor:text;margin-inline-start:.25rem}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item:first-child{pointer-events:none;margin:0}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item[data-focus=true] .t-value_filled{background:var(--tui-service-selection-background)}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item[data-focus=true] .t-value_filled:before{display:none}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-item[data-focus=true] .t-value:before{content:\"\";block-size:1em;border-inline-start:1px solid var(--tui-text-primary);animation:blink 1s steps(1) infinite}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-value{color:var(--tui-text-secondary)}tui-input-pin-content:where(*[data-tui-version=\"5.21.0\"]) .t-value_filled{color:var(--tui-text-primary)}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"]){position:absolute;inset:0;color:transparent;background:transparent;border:none;outline:none;--t-caret-color: rgba(255, 255, 255, .01);caret-color:var(--t-caret-color)}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])::selection{background:transparent}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])::placeholder{color:transparent!important}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])+.t-content{gap:inherit!important}input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"])+.t-content [tuiButtonX]{display:none!important}[tuiTheme=dark] input[tuiInputPin]:where(*[data-tui-version=\"5.21.0\"]){--t-caret-color: rgba(50, 50, 50, .01)}\n"] }]
+            args: [{ selector: 'tui-input-pin-content', imports: [TuiAppearance], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'aria-hidden': 'true', 'data-tui-version': TUI_VERSION }, template: "@for (_ of '-'.repeat(pin.el.maxLength); track $index) {\n    <label\n        class=\"t-item\"\n        [tuiAppearance]=\"appearance()\"\n        [tuiAppearanceFocus]=\"pin.isFocused($index)\"\n        [tuiAppearanceMode]=\"control.invalid && control.touched ? 'invalid' : null\"\n        (pointerdown.prevent)=\"pin.onClick($index)\"\n    >\n        <span\n            class=\"t-value\"\n            [class.t-value_filled]=\"pin.value()[$index]\"\n            [textContent]=\"pin.value()[$index] || pin.el.placeholder[$index]\"\n        ></span>\n    </label>\n}\n", styles: ["@keyframes blink{50%{opacity:0}}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]){position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;display:flex;gap:inherit;border-radius:inherit}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item{display:flex;flex:1;align-items:center;justify-content:center;border-radius:inherit;pointer-events:auto;cursor:text;margin-inline-start:.25rem}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item:first-child{pointer-events:none;margin:0}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item[data-focus=true] .t-value_filled{background:var(--tui-service-selection-background)}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item[data-focus=true] .t-value_filled:before{display:none}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-item[data-focus=true] .t-value:before{content:\"\";block-size:1em;border-inline-start:1px solid var(--tui-text-primary);animation:blink 1s steps(1) infinite}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-value{color:var(--tui-text-secondary)}tui-input-pin-content:where(*[data-tui-version=\"5.22.0\"]) .t-value_filled{color:var(--tui-text-primary)}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"]){position:absolute;inset:0;color:transparent;background:transparent;border:none;outline:none;--t-caret-color: rgba(255, 255, 255, .01);caret-color:var(--t-caret-color)}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])::selection{background:transparent}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])::placeholder{color:transparent!important}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])+.t-content{gap:inherit!important}input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"])+.t-content [tuiButtonX]{display:none!important}[tuiTheme=dark] input[tuiInputPin]:where(*[data-tui-version=\"5.22.0\"]){--t-caret-color: rgba(50, 50, 50, .01)}\n"] }]
         }] });
 
 // TODO(v6): rename to TuiInputPinDirective
@@ -58,7 +58,7 @@ class TuiInputPinComponent {
         return (this.focused() && (this.selectionStart() ?? this.el.selectionStart) === index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputPinComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiInputPinComponent, isStandalone: true, selector: "input[tuiInputPin]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.21.0", "inputmode": "numeric", "maxlength": "4", "spellcheck": "false" }, listeners: { "pointerdown.prevent": "onClick(0)", "selectionchange": "onSelection()" } }, providers: [tuiAsTextfieldContent(() => TuiInputPinContent)], hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiTextfieldContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiInputPinComponent, isStandalone: true, selector: "input[tuiInputPin]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.22.0", "inputmode": "numeric", "maxlength": "4", "spellcheck": "false" }, listeners: { "pointerdown.prevent": "onClick(0)", "selectionchange": "onSelection()" } }, providers: [tuiAsTextfieldContent(() => TuiInputPinContent)], hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiTextfieldContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputPinComponent, decorators: [{
             type: Directive,

package/fesm2022/taiga-ui-kit-components-input-slider.mjs

@@ -16,11 +16,11 @@ import { fromEvent, tap, filter, switchMap } from 'rxjs';
 
 class Styles {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-input-slider-5.21.0"], ngImport: i0, template: '', isInline: true, styles: ["tui-textfield:where(*[data-tui-version=\"5.21.0\"]) [tuiInputSlider]~.t-content [tuiButtonX]{display:none!important}tui-textfield:where(*[data-tui-version=\"5.21.0\"]) [tuiInputSlider]~[tuiSlider]:disabled{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-input-slider-5.22.0"], ngImport: i0, template: '', isInline: true, styles: ["tui-textfield:where(*[data-tui-version=\"5.22.0\"]) [tuiInputSlider]~.t-content [tuiButtonX]{display:none!important}tui-textfield:where(*[data-tui-version=\"5.22.0\"]) [tuiInputSlider]~[tuiSlider]:disabled{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, decorators: [{
             type: Component,
-            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-input-slider-${TUI_VERSION}`, styles: ["tui-textfield:where(*[data-tui-version=\"5.21.0\"]) [tuiInputSlider]~.t-content [tuiButtonX]{display:none!important}tui-textfield:where(*[data-tui-version=\"5.21.0\"]) [tuiInputSlider]~[tuiSlider]:disabled{display:none}\n"] }]
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-input-slider-${TUI_VERSION}`, styles: ["tui-textfield:where(*[data-tui-version=\"5.22.0\"]) [tuiInputSlider]~.t-content [tuiButtonX]{display:none!important}tui-textfield:where(*[data-tui-version=\"5.22.0\"]) [tuiInputSlider]~[tuiSlider]:disabled{display:none}\n"] }]
         }] });
 class TuiInputSliderDirective {
     constructor() {

package/fesm2022/taiga-ui-kit-components-input-time.mjs

@@ -191,7 +191,7 @@ class TuiInputTimeContent {
                 (change)="setValue($any($event.target).value)"
             />
         }
-    `, isInline: true, styles: ["tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.21.0\"])~.t-content input[type=time]{position:absolute;inset-inline-end:0;inset-inline-start:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0;pointer-events:auto}tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.21.0\"])~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.22.0\"])~.t-content input[type=time]{position:absolute;inset-inline-end:0;inset-inline-start:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0;pointer-events:auto}tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.22.0\"])~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputTimeContent, decorators: [{
             type: Component,
@@ -205,7 +205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 (change)="setValue($any($event.target).value)"
             />
         }
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.21.0\"])~.t-content input[type=time]{position:absolute;inset-inline-end:0;inset-inline-start:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0;pointer-events:auto}tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.21.0\"])~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"] }]
+    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.22.0\"])~.t-content input[type=time]{position:absolute;inset-inline-end:0;inset-inline-start:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0;pointer-events:auto}tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.22.0\"])~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"] }]
         }] });
 
 class TuiNativeTimePicker {
@@ -240,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 // TODO(v6): rename to TuiInputTimeDirective
 class TuiInputTimeComponent extends TuiNativeTimePicker {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiInputTimeComponent, isStandalone: true, selector: "input[tuiInputTime][type=\"time\"]", host: { attributes: { "data-tui-version": "5.21.0" } }, providers: [tuiAsTextfieldContent(() => TuiInputTimeContent)], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithNativePicker }, { directive: i1$1.TuiTextfieldContent }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiInputTimeComponent, isStandalone: true, selector: "input[tuiInputTime][type=\"time\"]", host: { attributes: { "data-tui-version": "5.22.0" } }, providers: [tuiAsTextfieldContent(() => TuiInputTimeContent)], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithNativePicker }, { directive: i1$1.TuiTextfieldContent }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiInputTimeComponent, decorators: [{
             type: Directive,

package/fesm2022/taiga-ui-kit-components-like.mjs

@@ -33,7 +33,7 @@ class TuiLike {
                 provide: TUI_ICON_END,
                 useFactory: () => inject(TUI_LIKE_OPTIONS).icons.checked,
             },
-        ], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiIcons, inputs: ["iconStart", "uncheckedIcon", "iconEnd", "checkedIcon"] }], ngImport: i0, template: '', isInline: true, styles: ["[tuiLike]:where(*[data-tui-version=\"5.21.0\"]){inline-size:1em;block-size:1em;font-size:var(--tui-height-m);border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):before,[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;font-size:1.25rem;transition-property:transform,opacity}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):after{opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):checked:before{opacity:0}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike]:where(*[data-tui-version=\"5.21.0\"])[data-size=s]{font-size:var(--tui-height-s)}[tuiLike]:where(*[data-tui-version=\"5.21.0\"])[data-size=s]:before,[tuiLike]:where(*[data-tui-version=\"5.21.0\"])[data-size=s]:after{font-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], hostDirectives: [{ directive: i1.TuiWithAppearance }, { directive: i2.TuiIcons, inputs: ["iconStart", "uncheckedIcon", "iconEnd", "checkedIcon"] }], ngImport: i0, template: '', isInline: true, styles: ["[tuiLike]:where(*[data-tui-version=\"5.22.0\"]){inline-size:1em;block-size:1em;font-size:var(--tui-height-m);border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):before,[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;font-size:1.25rem;transition-property:transform,opacity}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):after{opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):checked:before{opacity:0}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike]:where(*[data-tui-version=\"5.22.0\"])[data-size=s]{font-size:var(--tui-height-s)}[tuiLike]:where(*[data-tui-version=\"5.22.0\"])[data-size=s]:before,[tuiLike]:where(*[data-tui-version=\"5.22.0\"])[data-size=s]:after{font-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiLike, decorators: [{
             type: Component,
@@ -58,7 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         '[attr.data-mode]': '""',
                         '[attr.data-size]': 'size()',
                         '[style.--t-icon-color]': 'color()',
-                    }, styles: ["[tuiLike]:where(*[data-tui-version=\"5.21.0\"]){inline-size:1em;block-size:1em;font-size:var(--tui-height-m);border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):before,[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;font-size:1.25rem;transition-property:transform,opacity}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):after{opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):checked:before{opacity:0}[tuiLike]:where(*[data-tui-version=\"5.21.0\"]):checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike]:where(*[data-tui-version=\"5.21.0\"])[data-size=s]{font-size:var(--tui-height-s)}[tuiLike]:where(*[data-tui-version=\"5.21.0\"])[data-size=s]:before,[tuiLike]:where(*[data-tui-version=\"5.21.0\"])[data-size=s]:after{font-size:1rem}\n"] }]
+                    }, styles: ["[tuiLike]:where(*[data-tui-version=\"5.22.0\"]){inline-size:1em;block-size:1em;font-size:var(--tui-height-m);border-radius:100%;cursor:pointer;margin:0;flex-shrink:0}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):before,[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;font-size:1.25rem;transition-property:transform,opacity}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):after{opacity:0;color:var(--t-icon-color, inherit);transform:scale(0)}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):checked:before{opacity:0}[tuiLike]:where(*[data-tui-version=\"5.22.0\"]):checked:after{opacity:1;transform:scale(1);transition-timing-function:cubic-bezier(.2,.6,.5,1.8),ease-in-out}[tuiLike]:where(*[data-tui-version=\"5.22.0\"])[data-size=s]{font-size:var(--tui-height-s)}[tuiLike]:where(*[data-tui-version=\"5.22.0\"])[data-size=s]:before,[tuiLike]:where(*[data-tui-version=\"5.22.0\"])[data-size=s]:after{font-size:1rem}\n"] }]
         }] });
 
 /**

package/fesm2022/taiga-ui-kit-components-message.mjs

@@ -7,11 +7,11 @@ import { TUI_APPEARANCE_OPTIONS, TuiWithAppearance } from '@taiga-ui/core/direct
 
 class Styles {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-message-5.21.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiMessage]:where(*[data-tui-version=\"5.21.0\"]){display:inline-flex;padding:.5rem .625rem;min-block-size:2.25rem;block-size:auto;box-sizing:border-box;inline-size:fit-content;isolation:isolate;white-space:nowrap;text-align:start;font:var(--tui-typography-ui-m);border-radius:var(--tui-radius-l)}[tuiMessage]:where(*[data-tui-version=\"5.21.0\"])>[tuiLink]{color:inherit!important;text-decoration:underline solid!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-message-5.22.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiMessage]:where(*[data-tui-version=\"5.22.0\"]){display:inline-flex;padding:.5rem .625rem;min-block-size:2.25rem;block-size:auto;box-sizing:border-box;inline-size:fit-content;isolation:isolate;white-space:nowrap;text-align:start;font:var(--tui-typography-ui-m);border-radius:var(--tui-radius-l)}[tuiMessage]:where(*[data-tui-version=\"5.22.0\"])>[tuiLink]{color:inherit!important;text-decoration:underline solid!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, decorators: [{
             type: Component,
-            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-message-${TUI_VERSION}`, styles: ["[tuiMessage]:where(*[data-tui-version=\"5.21.0\"]){display:inline-flex;padding:.5rem .625rem;min-block-size:2.25rem;block-size:auto;box-sizing:border-box;inline-size:fit-content;isolation:isolate;white-space:nowrap;text-align:start;font:var(--tui-typography-ui-m);border-radius:var(--tui-radius-l)}[tuiMessage]:where(*[data-tui-version=\"5.21.0\"])>[tuiLink]{color:inherit!important;text-decoration:underline solid!important}\n"] }]
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-message-${TUI_VERSION}`, styles: ["[tuiMessage]:where(*[data-tui-version=\"5.22.0\"]){display:inline-flex;padding:.5rem .625rem;min-block-size:2.25rem;block-size:auto;box-sizing:border-box;inline-size:fit-content;isolation:isolate;white-space:nowrap;text-align:start;font:var(--tui-typography-ui-m);border-radius:var(--tui-radius-l)}[tuiMessage]:where(*[data-tui-version=\"5.22.0\"])>[tuiLink]{color:inherit!important;text-decoration:underline solid!important}\n"] }]
         }] });
 class TuiMessage {
     constructor() {

package/fesm2022/taiga-ui-kit-components-meter.mjs

@@ -0,0 +1,54 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive } from '@angular/core';
+import { TUI_VERSION } from '@taiga-ui/cdk/constants';
+import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
+
+class Styles {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-meter-5.22.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiMeter]:where(*[data-tui-version=\"5.22.0\"]){--t-min: attr(min type(<number>), 0);--t-max: attr(max type(<number>), 1);--t-low: attr(low type(<number>), var(--t-min));--t-high: attr(high type(<number>), var(--t-max));--t-optimum: attr(optimum type(<number>), calc(var(--t-max) - var(--t-min) / 2));--t-value: attr(value type(<number>), 0);--t-a: calc((var(--t-low) - var(--t-min)) / (var(--t-max) - var(--t-min)));--t-b: calc((var(--t-high) - var(--t-min)) / (var(--t-max) - var(--t-min)));--t-c: calc((var(--t-optimum) - var(--t-min)) / (var(--t-max) - var(--t-min)));--t-1: min(var(--t-a), var(--t-b), var(--t-c));--t-2: min(max(var(--t-a), var(--t-b)), max(var(--t-b), var(--t-c)), max(var(--t-a), var(--t-c)));--t-3: max(var(--t-a), var(--t-b), var(--t-c));--t-dir: clamp(-1, (var(--t-high) - var(--t-optimum)) * 9999, 1);--t-center: calc((var(--t-1) + var(--t-3)) / 2);--t-delta: calc(var(--t-3) - var(--t-1));--t-start: calc(var(--t-center) - (var(--t-delta) * var(--t-dir) / 2));--t-end: calc(var(--t-center) + (var(--t-delta) * var(--t-dir) / 2));--t-good: calc(100% * (((var(--t-start)) - .5) * var(--t-dir) + .5));--t-mid: calc(100% * (((var(--t-2)) - .5) * var(--t-dir) + .5));--t-bad: calc(100% * (((var(--t-end)) - .5) * var(--t-dir) + .5));position:relative;margin:0;block-size:1rem;inline-size:100%;border-radius:1rem;background:linear-gradient(calc(90deg * var(--t-dir)),var(--tui-status-positive) var(--t-good),var(--tui-status-warning) var(--t-mid),var(--tui-status-negative) var(--t-bad));transform:scaleX(var(--tui-inline));mask-clip:no-clip;-webkit-mask-image:radial-gradient(circle at calc(.5rem + (100% - 1rem) * (var(--t-value) - var(--t-min)) / (var(--t-max) - var(--t-min))) .5rem,black calc(.5rem - .5px),transparent .5rem,transparent .75rem,black calc(.75rem + .5px));mask-image:radial-gradient(circle at calc(.5rem + (100% - 1rem) * (var(--t-value) - var(--t-min)) / (var(--t-max) - var(--t-min))) .5rem,black calc(.5rem - .5px),transparent .5rem,transparent .75rem,black calc(.75rem + .5px))}[tuiMeter]:where(*[data-tui-version=\"5.22.0\"])::-webkit-meter-inner-element{display:none}[tuiMeter]:where(*[data-tui-version=\"5.22.0\"])::-moz-meter-bar{background:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, decorators: [{
+            type: Component,
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-meter-${TUI_VERSION}`, styles: ["[tuiMeter]:where(*[data-tui-version=\"5.22.0\"]){--t-min: attr(min type(<number>), 0);--t-max: attr(max type(<number>), 1);--t-low: attr(low type(<number>), var(--t-min));--t-high: attr(high type(<number>), var(--t-max));--t-optimum: attr(optimum type(<number>), calc(var(--t-max) - var(--t-min) / 2));--t-value: attr(value type(<number>), 0);--t-a: calc((var(--t-low) - var(--t-min)) / (var(--t-max) - var(--t-min)));--t-b: calc((var(--t-high) - var(--t-min)) / (var(--t-max) - var(--t-min)));--t-c: calc((var(--t-optimum) - var(--t-min)) / (var(--t-max) - var(--t-min)));--t-1: min(var(--t-a), var(--t-b), var(--t-c));--t-2: min(max(var(--t-a), var(--t-b)), max(var(--t-b), var(--t-c)), max(var(--t-a), var(--t-c)));--t-3: max(var(--t-a), var(--t-b), var(--t-c));--t-dir: clamp(-1, (var(--t-high) - var(--t-optimum)) * 9999, 1);--t-center: calc((var(--t-1) + var(--t-3)) / 2);--t-delta: calc(var(--t-3) - var(--t-1));--t-start: calc(var(--t-center) - (var(--t-delta) * var(--t-dir) / 2));--t-end: calc(var(--t-center) + (var(--t-delta) * var(--t-dir) / 2));--t-good: calc(100% * (((var(--t-start)) - .5) * var(--t-dir) + .5));--t-mid: calc(100% * (((var(--t-2)) - .5) * var(--t-dir) + .5));--t-bad: calc(100% * (((var(--t-end)) - .5) * var(--t-dir) + .5));position:relative;margin:0;block-size:1rem;inline-size:100%;border-radius:1rem;background:linear-gradient(calc(90deg * var(--t-dir)),var(--tui-status-positive) var(--t-good),var(--tui-status-warning) var(--t-mid),var(--tui-status-negative) var(--t-bad));transform:scaleX(var(--tui-inline));mask-clip:no-clip;-webkit-mask-image:radial-gradient(circle at calc(.5rem + (100% - 1rem) * (var(--t-value) - var(--t-min)) / (var(--t-max) - var(--t-min))) .5rem,black calc(.5rem - .5px),transparent .5rem,transparent .75rem,black calc(.75rem + .5px));mask-image:radial-gradient(circle at calc(.5rem + (100% - 1rem) * (var(--t-value) - var(--t-min)) / (var(--t-max) - var(--t-min))) .5rem,black calc(.5rem - .5px),transparent .5rem,transparent .75rem,black calc(.75rem + .5px))}[tuiMeter]:where(*[data-tui-version=\"5.22.0\"])::-webkit-meter-inner-element{display:none}[tuiMeter]:where(*[data-tui-version=\"5.22.0\"])::-moz-meter-bar{background:none}\n"] }]
+        }] });
+class TuiMeter {
+    constructor() {
+        this.nothing = tuiWithStyles(Styles);
+        this.min = input('0');
+        this.max = input('1');
+        this.low = input('0');
+        this.high = input('1');
+        this.optimum = input('0.5');
+        this.value = input('0');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiMeter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiMeter, isStandalone: true, selector: "meter[tuiMeter]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "low", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "high", isSignal: true, isRequired: false, transformFunction: null }, optimum: { classPropertyName: "optimum", publicName: "optimum", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.22.0" }, properties: { "attr.high": "high()", "attr.low": "low()", "attr.max": "max()", "attr.min": "min()", "attr.optimum": "optimum()", "attr.value": "value()", "style.--t-high": "high()", "style.--t-low": "low()", "style.--t-max": "max()", "style.--t-min": "min()", "style.--t-optimum": "optimum()", "style.--t-value": "value()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiMeter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'meter[tuiMeter]',
+                    host: {
+                        'data-tui-version': TUI_VERSION,
+                        '[attr.high]': 'high()',
+                        '[attr.low]': 'low()',
+                        '[attr.max]': 'max()',
+                        '[attr.min]': 'min()',
+                        '[attr.optimum]': 'optimum()',
+                        '[attr.value]': 'value()',
+                        '[style.--t-high]': 'high()',
+                        '[style.--t-low]': 'low()',
+                        '[style.--t-max]': 'max()',
+                        '[style.--t-min]': 'min()',
+                        '[style.--t-optimum]': 'optimum()',
+                        '[style.--t-value]': 'value()',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TuiMeter };
+//# sourceMappingURL=taiga-ui-kit-components-meter.mjs.map

package/fesm2022/taiga-ui-kit-components-meter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-kit-components-meter.mjs","sources":["../../../projects/kit/components/meter/meter.directive.ts","../../../projects/kit/components/meter/taiga-ui-kit-components-meter.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    Directive,\n    input,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {TUI_VERSION} from '@taiga-ui/cdk/constants';\nimport {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';\n\n@Component({\n    template: '',\n    styles: `\n        [data-tui-version='${TUI_VERSION}'] {\n            @import '@taiga-ui/styles/components/meter.less';\n        }\n    `,\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    exportAs: `tui-meter-${TUI_VERSION}`,\n})\nclass Styles {}\n\n@Directive({\n    selector: 'meter[tuiMeter]',\n    host: {\n        'data-tui-version': TUI_VERSION,\n        '[attr.high]': 'high()',\n        '[attr.low]': 'low()',\n        '[attr.max]': 'max()',\n        '[attr.min]': 'min()',\n        '[attr.optimum]': 'optimum()',\n        '[attr.value]': 'value()',\n        '[style.--t-high]': 'high()',\n        '[style.--t-low]': 'low()',\n        '[style.--t-max]': 'max()',\n        '[style.--t-min]': 'min()',\n        '[style.--t-optimum]': 'optimum()',\n        '[style.--t-value]': 'value()',\n    },\n})\nexport class TuiMeter {\n    protected readonly nothing = tuiWithStyles(Styles);\n\n    public readonly min = input('0');\n    public readonly max = input('1');\n    public readonly low = input('0');\n    public readonly high = input('1');\n    public readonly optimum = input('0.5');\n    public readonly value = input('0');\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-kit-components-pin.mjs

@@ -6,11 +6,11 @@ import { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
 
 class Styles {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-pin-5.21.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiPin]:where(*[data-tui-version=\"5.21.0\"]){--t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);--t-size: calc(2rem * var(--t-scale));transition-property:min-inline-size,grid-template-columns,block-size,border,margin,font;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:grid;isolation:isolate;align-items:center;grid-template-rows:100%;grid-template-columns:var(--t-size) 1fr;min-inline-size:var(--t-size);max-inline-size:calc(11.25rem * var(--t-scale));block-size:var(--t-size);text-align:center;border-radius:100rem;font:var(--tui-typography-ui-xs);font-weight:700;box-sizing:border-box;color:var(--tui-text-primary-on-accent-2);background:var(--tui-background-accent-2);box-shadow:0 0 0 calc(.125rem * var(--t-scale)) var(--tui-background-elevation-1);border:0 solid var(--tui-background-accent-2);transform:translate(calc(var(--tui-inline) * -50%),-50%)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):empty{--t-size: calc(.75rem * var(--t-scale))}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):empty:before{display:none}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has([tuiPin]){border-color:currentColor;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>*,[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):before,[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):after{transition-duration:inherit!important}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>img{max-block-size:100%;box-sizing:border-box;border-radius:100%;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>tui-icon:not([tuiBadge]){transition-property:inline-size,font-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1.25rem;block-size:100%;inline-size:100%;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>tui-icon:not([tuiBadge]):before{transition-property:font-size;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiPin]{color:inherit;border:.125rem solid;font:inherit;background:none;transform:none;box-shadow:none;grid-template-columns:100% 0fr}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiBadge]{transition-property:inset;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:absolute;inset-block-start:-.25rem;inset-inline-end:-.25rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle]{transition-property:opacity,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:static;font:var(--tui-typography-ui-xs);font-weight:700;color:var(--tui-text-primary);margin-inline:.5rem .75rem;gap:.125rem;white-space:nowrap}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle]:before{transition-property:mask-position;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset:-1px 0;z-index:-1;inset-inline-end:-1px;background:var(--tui-background-elevation-1);border-radius:100rem;-webkit-mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));-webkit-mask-position:calc(var(--tui-inline) * var(--t-size) / 2);mask-position:calc(var(--tui-inline) * var(--t-size) / 2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle] [tuiSubtitle]{display:flex;align-items:center;gap:.125rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle] [tuiSubtitle] tui-icon:not([tuiBadge]){font-size:.75rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked){--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked) tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked):before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked):after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open{--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open:before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open:after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):before{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;z-index:-1;inset-block:50% calc(-.625rem * var(--t-scale));inset-inline:50% calc(-.25rem * var(--t-scale));box-sizing:border-box;border-width:calc(2.2rem * var(--t-scale)) calc(1.875rem * var(--t-scale));border-style:solid;border-color:inherit;opacity:0;transform:scale(.57) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));transform-origin:top var(--tui-inline-start);pointer-events:none;-webkit-mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):after{transition-property:inset-block-start,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;border:.1875rem solid currentColor;border-color:inherit;border-radius:100%;box-sizing:border-box;box-shadow:inherit;transform:translate(calc(var(--tui-inline) * -50%),-50%);opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-pin-5.22.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiPin]:where(*[data-tui-version=\"5.22.0\"]){--t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);--t-size: calc(2rem * var(--t-scale));transition-property:min-inline-size,grid-template-columns,block-size,border,margin,font;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:grid;isolation:isolate;align-items:center;grid-template-rows:100%;grid-template-columns:var(--t-size) 1fr;min-inline-size:var(--t-size);max-inline-size:calc(11.25rem * var(--t-scale));block-size:var(--t-size);text-align:center;border-radius:100rem;font:var(--tui-typography-ui-xs);font-weight:700;box-sizing:border-box;color:var(--tui-text-primary-on-accent-2);background:var(--tui-background-accent-2);box-shadow:0 0 0 calc(.125rem * var(--t-scale)) var(--tui-background-elevation-1);border:0 solid var(--tui-background-accent-2);transform:translate(calc(var(--tui-inline) * -50%),-50%)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):empty{--t-size: calc(.75rem * var(--t-scale))}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):empty:before{display:none}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has([tuiPin]){border-color:currentColor;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>*,[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):before,[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):after{transition-duration:inherit!important}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>img{max-block-size:100%;box-sizing:border-box;border-radius:100%;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>tui-icon:not([tuiBadge]){transition-property:inline-size,font-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1.25rem;block-size:100%;inline-size:100%;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>tui-icon:not([tuiBadge]):before{transition-property:font-size;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiPin]{color:inherit;border:.125rem solid;font:inherit;background:none;transform:none;box-shadow:none;grid-template-columns:100% 0fr}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiBadge]{transition-property:inset;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:absolute;inset-block-start:-.25rem;inset-inline-end:-.25rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle]{transition-property:opacity,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:static;font:var(--tui-typography-ui-xs);font-weight:700;color:var(--tui-text-primary);margin-inline:.5rem .75rem;gap:.125rem;white-space:nowrap}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle]:before{transition-property:mask-position;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset:-1px 0;z-index:-1;inset-inline-end:-1px;background:var(--tui-background-elevation-1);border-radius:100rem;-webkit-mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));-webkit-mask-position:calc(var(--tui-inline) * var(--t-size) / 2);mask-position:calc(var(--tui-inline) * var(--t-size) / 2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle] [tuiSubtitle]{display:flex;align-items:center;gap:.125rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle] [tuiSubtitle] tui-icon:not([tuiBadge]){font-size:.75rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked){--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked) tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked):before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked):after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open{--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open:before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open:after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):before{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;z-index:-1;inset-block:50% calc(-.625rem * var(--t-scale));inset-inline:50% calc(-.25rem * var(--t-scale));box-sizing:border-box;border-width:calc(2.2rem * var(--t-scale)) calc(1.875rem * var(--t-scale));border-style:solid;border-color:inherit;opacity:0;transform:scale(.57) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));transform-origin:top var(--tui-inline-start);pointer-events:none;-webkit-mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):after{transition-property:inset-block-start,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;border:.1875rem solid currentColor;border-color:inherit;border-radius:100%;box-sizing:border-box;box-shadow:inherit;transform:translate(calc(var(--tui-inline) * -50%),-50%);opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: Styles, decorators: [{
             type: Component,
-            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-pin-${TUI_VERSION}`, styles: ["[tuiPin]:where(*[data-tui-version=\"5.21.0\"]){--t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);--t-size: calc(2rem * var(--t-scale));transition-property:min-inline-size,grid-template-columns,block-size,border,margin,font;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:grid;isolation:isolate;align-items:center;grid-template-rows:100%;grid-template-columns:var(--t-size) 1fr;min-inline-size:var(--t-size);max-inline-size:calc(11.25rem * var(--t-scale));block-size:var(--t-size);text-align:center;border-radius:100rem;font:var(--tui-typography-ui-xs);font-weight:700;box-sizing:border-box;color:var(--tui-text-primary-on-accent-2);background:var(--tui-background-accent-2);box-shadow:0 0 0 calc(.125rem * var(--t-scale)) var(--tui-background-elevation-1);border:0 solid var(--tui-background-accent-2);transform:translate(calc(var(--tui-inline) * -50%),-50%)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):empty{--t-size: calc(.75rem * var(--t-scale))}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):empty:before{display:none}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has([tuiPin]){border-color:currentColor;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>*,[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):before,[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):after{transition-duration:inherit!important}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>img{max-block-size:100%;box-sizing:border-box;border-radius:100%;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>tui-icon:not([tuiBadge]){transition-property:inline-size,font-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1.25rem;block-size:100%;inline-size:100%;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>tui-icon:not([tuiBadge]):before{transition-property:font-size;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiPin]{color:inherit;border:.125rem solid;font:inherit;background:none;transform:none;box-shadow:none;grid-template-columns:100% 0fr}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiBadge]{transition-property:inset;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:absolute;inset-block-start:-.25rem;inset-inline-end:-.25rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle]{transition-property:opacity,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:static;font:var(--tui-typography-ui-xs);font-weight:700;color:var(--tui-text-primary);margin-inline:.5rem .75rem;gap:.125rem;white-space:nowrap}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle]:before{transition-property:mask-position;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset:-1px 0;z-index:-1;inset-inline-end:-1px;background:var(--tui-background-elevation-1);border-radius:100rem;-webkit-mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));-webkit-mask-position:calc(var(--tui-inline) * var(--t-size) / 2);mask-position:calc(var(--tui-inline) * var(--t-size) / 2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle] [tuiSubtitle]{display:flex;align-items:center;gap:.125rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])>[tuiTitle] [tuiSubtitle] tui-icon:not([tuiBadge]){font-size:.75rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked){--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked) tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked)>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked):before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):has(:checked):after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open{--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open:before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"])._open:after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):before{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;z-index:-1;inset-block:50% calc(-.625rem * var(--t-scale));inset-inline:50% calc(-.25rem * var(--t-scale));box-sizing:border-box;border-width:calc(2.2rem * var(--t-scale)) calc(1.875rem * var(--t-scale));border-style:solid;border-color:inherit;opacity:0;transform:scale(.57) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));transform-origin:top var(--tui-inline-start);pointer-events:none;-webkit-mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}[tuiPin]:where(*[data-tui-version=\"5.21.0\"]):after{transition-property:inset-block-start,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;border:.1875rem solid currentColor;border-color:inherit;border-radius:100%;box-sizing:border-box;box-shadow:inherit;transform:translate(calc(var(--tui-inline) * -50%),-50%);opacity:0}\n"] }]
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-pin-${TUI_VERSION}`, styles: ["[tuiPin]:where(*[data-tui-version=\"5.22.0\"]){--t-scale: calc(1 + (var(--tui-font-scale) - 1) / 2);--t-size: calc(2rem * var(--t-scale));transition-property:min-inline-size,grid-template-columns,block-size,border,margin,font;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:grid;isolation:isolate;align-items:center;grid-template-rows:100%;grid-template-columns:var(--t-size) 1fr;min-inline-size:var(--t-size);max-inline-size:calc(11.25rem * var(--t-scale));block-size:var(--t-size);text-align:center;border-radius:100rem;font:var(--tui-typography-ui-xs);font-weight:700;box-sizing:border-box;color:var(--tui-text-primary-on-accent-2);background:var(--tui-background-accent-2);box-shadow:0 0 0 calc(.125rem * var(--t-scale)) var(--tui-background-elevation-1);border:0 solid var(--tui-background-accent-2);transform:translate(calc(var(--tui-inline) * -50%),-50%)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):empty{--t-size: calc(.75rem * var(--t-scale))}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):empty:before{display:none}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has([tuiPin]){border-color:currentColor;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>*,[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):before,[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):after{transition-duration:inherit!important}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>input{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;-webkit-appearance:none;appearance:none;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>img{max-block-size:100%;box-sizing:border-box;border-radius:100%;background:var(--tui-background-elevation-1)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>tui-icon:not([tuiBadge]){transition-property:inline-size,font-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1.25rem;block-size:100%;inline-size:100%;border-radius:100%}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>tui-icon:not([tuiBadge]):before{transition-property:font-size;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiPin]{color:inherit;border:.125rem solid;font:inherit;background:none;transform:none;box-shadow:none;grid-template-columns:100% 0fr}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiBadge]{transition-property:inset;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:absolute;inset-block-start:-.25rem;inset-inline-end:-.25rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle]{transition-property:opacity,margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:static;font:var(--tui-typography-ui-xs);font-weight:700;color:var(--tui-text-primary);margin-inline:.5rem .75rem;gap:.125rem;white-space:nowrap}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle]:before{transition-property:mask-position;transition-duration:inherit;transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset:-1px 0;z-index:-1;inset-inline-end:-1px;background:var(--tui-background-elevation-1);border-radius:100rem;-webkit-mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));mask-image:radial-gradient(circle closest-corner at var(--tui-inline-start) center,transparent calc(100% - 1px),black calc(100% - .5px));-webkit-mask-position:calc(var(--tui-inline) * var(--t-size) / 2);mask-position:calc(var(--tui-inline) * var(--t-size) / 2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle] [tuiSubtitle]{display:flex;align-items:center;gap:.125rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])>[tuiTitle] [tuiSubtitle] tui-icon:not([tuiBadge]){font-size:.75rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked){--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked) tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked)>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked):before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):has(:checked):after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open{--t-size: calc(3.5rem * var(--t-scale));font:var(--tui-typography-body-l);font-weight:700;grid-template-columns:var(--t-size) 0fr;margin-block-start:-2.75rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>img{padding:.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open tui-icon:not([tuiBadge]){font-size:2.125rem}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>[tuiPin]{border-color:transparent}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>[tuiBadge]{inset-block-start:0;inset-inline-end:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open>[tuiTitle]{pointer-events:none;opacity:0;margin:0}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open:before{transform:scale(.99) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"])._open:after{inset-block-start:calc(4.5rem * var(--t-scale));opacity:1}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):before{transition-property:transform,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;z-index:-1;inset-block:50% calc(-.625rem * var(--t-scale));inset-inline:50% calc(-.25rem * var(--t-scale));box-sizing:border-box;border-width:calc(2.2rem * var(--t-scale)) calc(1.875rem * var(--t-scale));border-style:solid;border-color:inherit;opacity:0;transform:scale(.57) translate(calc(var(--tui-inline) * -1 * calc(1.875rem * var(--t-scale))),calc(-1 * calc(1.875rem * var(--t-scale))));transform-origin:top var(--tui-inline-start);pointer-events:none;-webkit-mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg width=\"60\" height=\"66\" viewBox=\"0 0 60 66\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z\" /></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}[tuiPin]:where(*[data-tui-version=\"5.22.0\"]):after{transition-property:inset-block-start,opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);content:\"\";position:absolute;inset-block-start:50%;inset-inline-start:50%;border:.1875rem solid currentColor;border-color:inherit;border-radius:100%;box-sizing:border-box;box-shadow:inherit;transform:translate(calc(var(--tui-inline) * -50%),-50%);opacity:0}\n"] }]
         }] });
 class TuiPin {
     constructor() {
@@ -18,7 +18,7 @@ class TuiPin {
         this.open = input('', { alias: 'tuiPin' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiPin, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiPin, isStandalone: true, selector: "[tuiPin]", inputs: { open: { classPropertyName: "open", publicName: "tuiPin", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.21.0", "tuiPin": "" }, properties: { "class._open": "open()" } }, providers: [tuiBadgeOptionsProvider({ appearance: 'primary', size: 's' })], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiPin, isStandalone: true, selector: "[tuiPin]", inputs: { open: { classPropertyName: "open", publicName: "tuiPin", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.22.0", "tuiPin": "" }, properties: { "class._open": "open()" } }, providers: [tuiBadgeOptionsProvider({ appearance: 'primary', size: 's' })], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiPin, decorators: [{
             type: Directive,

package/fesm2022/taiga-ui-kit-components-pincode.mjs

@@ -1,8 +1,8 @@
 import { TuiLabel } from '@taiga-ui/core/components/label';
 import * as i2 from '@taiga-ui/core/components/textfield';
-import { tuiAsTextfieldContent, TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
+import { TuiTextfieldComponent, tuiAsTextfieldContent, TuiTextfieldContent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, input, output, computed, effect, Directive } from '@angular/core';
+import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, signal, input, output, effect, Directive } from '@angular/core';
 import * as i1 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
 import { maskitoCaretGuard } from '@maskito/kit';
@@ -38,8 +38,11 @@ const ANIMATION = {
 class TuiPincodeComponent extends TuiControl {
     constructor() {
         super(...arguments);
+        this.textfield = inject(TuiTextfieldComponent);
         this.phase = 0;
         this.bounced = false;
+        // TODO(v6): use only `this.textfield.invalid()`
+        this.manualInvalid = computed(() => this.textfield.invalid() ?? (this.field() ? null : this.pseudoInvalid()));
         this.el = tuiInjectElement();
         this.paste = signal(false);
         this.focused = tuiFocusedIn(this.el);
@@ -53,14 +56,14 @@ class TuiPincodeComponent extends TuiControl {
         this.confirmed = output();
         this.finished = output();
         this.state = computed(() => {
-            if (tuiIsPresent(this.pseudoInvalid())) {
-                return this.pseudoInvalid() ? 'invalid' : 'success';
+            if (tuiIsPresent(this.manualInvalid())) {
+                return this.manualInvalid() ? 'invalid' : 'success';
             }
             return this.value().length === this.maxLength() ? 'pending' : null;
         });
         this.effect = effect(() => {
             this.bounced = false;
-            this.phase = tuiIsPresent(this.pseudoInvalid()) ? this.value().length : 0;
+            this.phase = tuiIsPresent(this.manualInvalid()) ? this.value().length : 0;
         });
     }
     onAnimationStart({ animationName }) {

package/fesm2022/taiga-ui-kit-components-pincode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-pincode.mjs","sources":["../../../projects/kit/components/pincode/pincode-content.component.ts","../../../projects/kit/components/pincode/pincode-content.template.html","../../../projects/kit/components/pincode/pincode.component.ts","../../../projects/kit/components/pincode/pincode.ts","../../../projects/kit/components/pincode/taiga-ui-kit-components-pincode.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport {TuiPincodeComponent} from './pincode.component';\n\n@Component({\n    selector: 'tui-pincode-content',\n    templateUrl: './pincode-content.template.html',\n    styleUrl: './pincode.style.less',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        'aria-hidden': 'true',\n        '[style.--t-length]': 'pincode.maxLength()',\n        '(animationend)': 'pincode.onAnimationEnd($event)',\n        '(animationstart)': 'pincode.onAnimationStart($event)',\n    },\n})\nexport class TuiPincodeContent {\n    protected readonly pincode = inject(TuiPincodeComponent);\n}\n","@for (_ of '-'.repeat(pincode.maxLength()); track $index) {\n    <span\n        class=\"t-item\"\n        [class.t-item_filled]=\"pincode.value()[$index]\"\n        [class.t-item_focus]=\"pincode.isFocused($index)\"\n        [style.--t-index]=\"$index\"\n        (pointerdown.prevent)=\"pincode.el.focus()\"\n    >\n        <span class=\"t-dot t-dot_placeholder\"></span>\n        <span class=\"t-dot t-dot_value\"></span>\n        <span class=\"t-value\">{{ pincode.el.type === 'password' ? '' : pincode.value()[$index] }}</span>\n    </span>\n}\n","import {computed, Directive, effect, input, output, signal} from '@angular/core';\nimport {MaskitoDirective} from '@maskito/angular';\nimport {maskitoCaretGuard} from '@maskito/kit';\nimport {TuiControl} from '@taiga-ui/cdk/classes';\nimport {tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiFocusedIn} from '@taiga-ui/cdk/utils/focus';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiAsTextfieldContent,\n    TuiTextfieldContent,\n} from '@taiga-ui/core/components/textfield';\nimport {tuiMaskito} from '@taiga-ui/kit/utils';\n\nimport {TuiPincodeContent} from './pincode-content.component';\n\nconst ANIMATION = {\n    confirmed: 'tuiPincodeDotIn',\n    collapsed: 'tuiPincodeDotCollapseScale',\n    rejected: 'tuiPincodeScale',\n} as const;\n\n@Directive({\n    selector: 'input[tuiPincode]',\n    providers: [\n        tuiAsTextfieldContent(() => TuiPincodeContent),\n        tuiFallbackValueProvider(''),\n    ],\n    hostDirectives: [MaskitoDirective, TuiTextfieldContent],\n    host: {\n        autocomplete: 'one-time-code',\n        inputmode: 'numeric',\n        spellcheck: 'false',\n        '[attr.data-state]': 'state()',\n        '[class._paste]': 'paste()',\n        '[maxLength]': 'maxLength()',\n        '[value]': 'value()',\n        '(input)': 'onInput($event.target.value)',\n    },\n})\nexport class TuiPincodeComponent extends TuiControl<string> {\n    private phase = 0;\n    private bounced = false;\n\n    public readonly el = tuiInjectElement<HTMLInputElement>();\n    public readonly paste = signal(false);\n    public readonly focused = tuiFocusedIn(this.el);\n\n    protected readonly maskito = tuiMaskito({\n        mask: /^\\d+$/,\n        overwriteMode: 'replace',\n        plugins: [maskitoCaretGuard((value) => [value.length, value.length])],\n        postprocessors: [(newState, initial) => (this.state() ? initial : newState)],\n    });\n\n    public readonly maxLength = input(4);\n    public readonly confirmed = output();\n    public readonly finished = output();\n\n    protected readonly state = computed<'invalid' | 'pending' | 'success' | null>(() => {\n        if (tuiIsPresent(this.pseudoInvalid())) {\n            return this.pseudoInvalid() ? 'invalid' : 'success';\n        }\n\n        return this.value().length === this.maxLength() ? 'pending' : null;\n    });\n\n    protected readonly effect = effect(() => {\n        this.bounced = false;\n        this.phase = tuiIsPresent(this.pseudoInvalid()) ? this.value().length : 0;\n    });\n\n    public onAnimationStart({animationName}: AnimationEvent): void {\n        if (animationName === ANIMATION.confirmed && !this.bounced) {\n            this.bounced = true;\n            this.confirmed.emit();\n        }\n    }\n\n    public onAnimationEnd({animationName}: AnimationEvent): void {\n        const isCollapse = animationName === ANIMATION.collapsed;\n        const isReject = animationName === ANIMATION.rejected;\n\n        if ((!isReject && !isCollapse) || --this.phase) {\n            return;\n        }\n\n        if (isReject) {\n            this.onChange('');\n        }\n\n        this.finished.emit();\n    }\n\n    public isFocused(index: number): boolean {\n        return (\n            this.focused() &&\n            index === Math.min(this.value().length, this.maxLength() - 1)\n        );\n    }\n\n    protected onInput(value: string): void {\n        this.paste.set(!this.value().length && value.length === this.maxLength());\n        this.onChange(value);\n    }\n}\n","import {TuiLabel} from '@taiga-ui/core/components/label';\nimport {\n    TuiTextfieldComponent,\n    TuiTextfieldOptionsDirective,\n} from '@taiga-ui/core/components/textfield';\n\nimport {TuiPincodeComponent} from './pincode.component';\n\nexport const TuiPincode = [\n    TuiPincodeComponent,\n    TuiLabel,\n    TuiTextfieldComponent,\n    TuiTextfieldOptionsDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-kit-components-pincode.mjs","sources":["../../../projects/kit/components/pincode/pincode-content.component.ts","../../../projects/kit/components/pincode/pincode-content.template.html","../../../projects/kit/components/pincode/pincode.component.ts","../../../projects/kit/components/pincode/pincode.ts","../../../projects/kit/components/pincode/taiga-ui-kit-components-pincode.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport {TuiPincodeComponent} from './pincode.component';\n\n@Component({\n    selector: 'tui-pincode-content',\n    templateUrl: './pincode-content.template.html',\n    styleUrl: './pincode.style.less',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        'aria-hidden': 'true',\n        '[style.--t-length]': 'pincode.maxLength()',\n        '(animationend)': 'pincode.onAnimationEnd($event)',\n        '(animationstart)': 'pincode.onAnimationStart($event)',\n    },\n})\nexport class TuiPincodeContent {\n    protected readonly pincode = inject(TuiPincodeComponent);\n}\n","@for (_ of '-'.repeat(pincode.maxLength()); track $index) {\n    <span\n        class=\"t-item\"\n        [class.t-item_filled]=\"pincode.value()[$index]\"\n        [class.t-item_focus]=\"pincode.isFocused($index)\"\n        [style.--t-index]=\"$index\"\n        (pointerdown.prevent)=\"pincode.el.focus()\"\n    >\n        <span class=\"t-dot t-dot_placeholder\"></span>\n        <span class=\"t-dot t-dot_value\"></span>\n        <span class=\"t-value\">{{ pincode.el.type === 'password' ? '' : pincode.value()[$index] }}</span>\n    </span>\n}\n","import {computed, Directive, effect, inject, input, output, signal} from '@angular/core';\nimport {MaskitoDirective} from '@maskito/angular';\nimport {maskitoCaretGuard} from '@maskito/kit';\nimport {TuiControl} from '@taiga-ui/cdk/classes';\nimport {tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiFocusedIn} from '@taiga-ui/cdk/utils/focus';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiAsTextfieldContent,\n    TuiTextfieldComponent,\n    TuiTextfieldContent,\n} from '@taiga-ui/core/components/textfield';\nimport {tuiMaskito} from '@taiga-ui/kit/utils';\n\nimport {TuiPincodeContent} from './pincode-content.component';\n\nconst ANIMATION = {\n    confirmed: 'tuiPincodeDotIn',\n    collapsed: 'tuiPincodeDotCollapseScale',\n    rejected: 'tuiPincodeScale',\n} as const;\n\n@Directive({\n    selector: 'input[tuiPincode]',\n    providers: [\n        tuiAsTextfieldContent(() => TuiPincodeContent),\n        tuiFallbackValueProvider(''),\n    ],\n    hostDirectives: [MaskitoDirective, TuiTextfieldContent],\n    host: {\n        autocomplete: 'one-time-code',\n        inputmode: 'numeric',\n        spellcheck: 'false',\n        '[attr.data-state]': 'state()',\n        '[class._paste]': 'paste()',\n        '[maxLength]': 'maxLength()',\n        '[value]': 'value()',\n        '(input)': 'onInput($event.target.value)',\n    },\n})\nexport class TuiPincodeComponent extends TuiControl<string> {\n    private readonly textfield = inject(TuiTextfieldComponent);\n    private phase = 0;\n    private bounced = false;\n\n    // TODO(v6): use only `this.textfield.invalid()`\n    private readonly manualInvalid = computed(\n        () => this.textfield.invalid() ?? (this.field() ? null : this.pseudoInvalid()),\n    );\n\n    public readonly el = tuiInjectElement<HTMLInputElement>();\n    public readonly paste = signal(false);\n    public readonly focused = tuiFocusedIn(this.el);\n\n    protected readonly maskito = tuiMaskito({\n        mask: /^\\d+$/,\n        overwriteMode: 'replace',\n        plugins: [maskitoCaretGuard((value) => [value.length, value.length])],\n        postprocessors: [(newState, initial) => (this.state() ? initial : newState)],\n    });\n\n    public readonly maxLength = input(4);\n    public readonly confirmed = output();\n    public readonly finished = output();\n\n    protected readonly state = computed<'invalid' | 'pending' | 'success' | null>(() => {\n        if (tuiIsPresent(this.manualInvalid())) {\n            return this.manualInvalid() ? 'invalid' : 'success';\n        }\n\n        return this.value().length === this.maxLength() ? 'pending' : null;\n    });\n\n    protected readonly effect = effect(() => {\n        this.bounced = false;\n        this.phase = tuiIsPresent(this.manualInvalid()) ? this.value().length : 0;\n    });\n\n    public onAnimationStart({animationName}: AnimationEvent): void {\n        if (animationName === ANIMATION.confirmed && !this.bounced) {\n            this.bounced = true;\n            this.confirmed.emit();\n        }\n    }\n\n    public onAnimationEnd({animationName}: AnimationEvent): void {\n        const isCollapse = animationName === ANIMATION.collapsed;\n        const isReject = animationName === ANIMATION.rejected;\n\n        if ((!isReject && !isCollapse) || --this.phase) {\n            return;\n        }\n\n        if (isReject) {\n            this.onChange('');\n        }\n\n        this.finished.emit();\n    }\n\n    public isFocused(index: number): boolean {\n        return (\n            this.focused() &&\n            index === Math.min(this.value().length, this.maxLength() - 1)\n        );\n    }\n\n    protected onInput(value: string): void {\n        this.paste.set(!this.value().length && value.length === this.maxLength());\n        this.onChange(value);\n    }\n}\n","import {TuiLabel} from '@taiga-ui/core/components/label';\nimport {\n    TuiTextfieldComponent,\n    TuiTextfieldOptionsDirective,\n} from '@taiga-ui/core/components/textfield';\n\nimport {TuiPincodeComponent} from './pincode.component';\n\nexport const TuiPincode = [\n    TuiPincodeComponent,\n    TuiLabel,\n    TuiTextfieldComponent,\n    TuiTextfieldOptionsDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-kit-components-preview.mjs

@@ -45,11 +45,11 @@ class TuiPreviewDialog {
         this.context = injectContext();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiPreviewDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiPreviewDialog, isStandalone: true, selector: "tui-preview-dialog", host: { attributes: { "data-tui-version": "5.21.0" }, listeners: { "document:keydown.esc.prevent": "context.$implicit.complete()" } }, hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiPreviewDialog, isStandalone: true, selector: "tui-preview-dialog", host: { attributes: { "data-tui-version": "5.22.0" }, listeners: { "document:keydown.esc.prevent": "context.$implicit.complete()" } }, hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: `
         <ng-container *polymorpheusOutlet="context.content as text; context: context">
             {{ text }}
         </ng-container>
-    `, isInline: true, styles: ["tui-preview-dialog:where(*[data-tui-version=\"5.21.0\"]){inline-size:100%;block-size:100%;overflow:hidden}tui-preview-dialog:where(*[data-tui-version=\"5.21.0\"]).tui-enter,tui-preview-dialog:where(*[data-tui-version=\"5.21.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"]){background:#686868f5;color:#fff}@media(hover:hover)and (pointer:fine){[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){background:#9f9f9fdb}}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"])[data-state=hover]{background:#9f9f9fdb}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:#9f9f9fbf}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"])[data-state=active]{background:#9f9f9fbf}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["tui-preview-dialog:where(*[data-tui-version=\"5.22.0\"]){inline-size:100%;block-size:100%;overflow:hidden}tui-preview-dialog:where(*[data-tui-version=\"5.22.0\"]).tui-enter,tui-preview-dialog:where(*[data-tui-version=\"5.22.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"]){background:#686868f5;color:#fff}@media(hover:hover)and (pointer:fine){[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){background:#9f9f9fdb}}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"])[data-state=hover]{background:#9f9f9fdb}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:#9f9f9fbf}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"])[data-state=active]{background:#9f9f9fbf}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiPreviewDialog, decorators: [{
             type: Component,
@@ -60,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
     `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated], host: {
                         'data-tui-version': TUI_VERSION,
                         '(document:keydown.esc.prevent)': 'context.$implicit.complete()',
-                    }, styles: ["tui-preview-dialog:where(*[data-tui-version=\"5.21.0\"]){inline-size:100%;block-size:100%;overflow:hidden}tui-preview-dialog:where(*[data-tui-version=\"5.21.0\"]).tui-enter,tui-preview-dialog:where(*[data-tui-version=\"5.21.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"]){background:#686868f5;color:#fff}@media(hover:hover)and (pointer:fine){[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){background:#9f9f9fdb}}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"])[data-state=hover]{background:#9f9f9fdb}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:#9f9f9fbf}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.21.0\"])[data-state=active]{background:#9f9f9fbf}\n"] }]
+                    }, styles: ["tui-preview-dialog:where(*[data-tui-version=\"5.22.0\"]){inline-size:100%;block-size:100%;overflow:hidden}tui-preview-dialog:where(*[data-tui-version=\"5.22.0\"]).tui-enter,tui-preview-dialog:where(*[data-tui-version=\"5.22.0\"]).tui-leave{animation-name:tuiFade,tuiSlide}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"]){background:#686868f5;color:#fff}@media(hover:hover)and (pointer:fine){[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){background:#9f9f9fdb}}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"])[data-state=hover]{background:#9f9f9fdb}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:#9f9f9fbf}[tuiAppearance][data-appearance=preview-action]:where(*[data-tui-version=\"5.22.0\"])[data-state=active]{background:#9f9f9fbf}\n"] }]
         }] });
 
 class TuiPreviewDialogService extends TuiModalService {