@taiga-ui/legacy 4.52.0-canary.24b31eb → 4.52.0-canary.2fa3dd5

package/fesm2022/taiga-ui-legacy-components-dialog.mjs

@@ -1,20 +1,20 @@
-import { AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Directive, assertInInjectionContext, INJECTOR } from '@angular/core';
+import { inject, computed, ChangeDetectionStrategy, Component, Injectable, input, Directive, assertInInjectionContext, INJECTOR } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TUI_TRUE_HANDLER } from '@taiga-ui/cdk/constants';
 import * as i1 from '@taiga-ui/cdk/directives/animated';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
 import { TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
 import { TuiButton } from '@taiga-ui/core/components/button';
-import { TuiDialogCloseService, TUI_DIALOGS_CLOSE, TUI_DIALOGS } from '@taiga-ui/core/components/dialog';
+import { TuiDialogCloseService, TUI_DIALOGS_CLOSE } from '@taiga-ui/core/components/dialog';
 import { TuiBreakpointService } from '@taiga-ui/core/services';
 import { TUI_CLOSE_WORD, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
 import { injectContext, PolymorpheusOutlet, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
 import { of, isObservable, Subject, map, merge, switchMap, exhaustMap, take, filter } from 'rxjs';
-import { TuiPopoverDirective } from '@taiga-ui/cdk/directives/popover';
-import { TuiPopoverService, tuiAsPopover } from '@taiga-ui/cdk/services';
-import { tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
+import * as i1$1 from '@taiga-ui/cdk/portals';
+import { tuiAsPortal, TuiPortalDirective } from '@taiga-ui/cdk/portals';
+import { TuiModalService } from '@taiga-ui/core/components/modal';
+import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 
 const REQUIRED_ERROR = new Error('Required dialog was dismissed');
 function toObservable(valueOrStream) {
@@ -24,7 +24,7 @@ class TuiDialogComponent {
     constructor() {
         this.close$ = new Subject();
         this.context = injectContext();
-        this.closeWord$ = inject(TUI_CLOSE_WORD);
+        this.closeWord = inject(TUI_CLOSE_WORD);
         this.icons = inject(TUI_COMMON_ICONS);
         this.from = computed(() => this.size === 'fullscreen' || this.size === 'page' || this.isMobile()
             ? 'translateY(100vh)'
@@ -51,16 +51,16 @@ class TuiDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDialogComponent, isStandalone: true, selector: "tui-dialog-legacy", host: { properties: { "attr.data-appearance": "context.appearance", "attr.data-size": "size", "class._centered": "header", "style.--tui-from": "from()" } }, providers: [TuiDialogCloseService], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "@if (header) {\n    <header class=\"t-header\">\n        <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n            {{ text }}\n        </ng-container>\n    </header>\n}\n<div class=\"t-content\">\n    <h2\n        class=\"t-heading\"\n        [class.t-heading_closable]=\"context.closable && !header\"\n        [id]=\"context.id\"\n        [textContent]=\"context.label\"\n    ></h2>\n    <section>\n        <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n            <div [innerHTML]=\"text\"></div>\n            @if (context.closable || context.dismissible) {\n                <div class=\"t-buttons\">\n                    <button\n                        size=\"m\"\n                        tuiAutoFocus\n                        tuiButton\n                        type=\"button\"\n                        (click)=\"context.$implicit.complete()\"\n                    >\n                        {{ context.data?.button || 'OK' }}\n                    </button>\n                </div>\n            }\n        </ng-container>\n    </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n    <button\n        automation-id=\"tui-dialog__close\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-close\"\n        [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n        [iconStart]=\"icons.close\"\n        [size]=\"isMobile() ? 'xs' : 's'\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"close$.next()\"\n        (mousedown.prevent.zoneless)=\"(0)\"\n    >\n        {{ closeWord$ | async }}\n    </button>\n}\n", styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);flex-direction:column;box-sizing:border-box;margin:2.5rem;border-radius:1.5rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:var(--tui-shadow-popup)}:host[data-size=auto]{inline-size:auto}:host[data-size=s]{inline-size:25rem}:host[data-size=s] .t-content{padding:1.5rem}:host[data-size=s] .t-heading{font:var(--tui-font-heading-5)}:host[data-size=m]{inline-size:37.5rem}:host[data-size=l]{inline-size:50rem}:host[data-size=fullscreen],:host[data-size=page]{min-inline-size:100vw;min-block-size:100%;border-radius:0;border:none;background:var(--tui-background-elevation-1);box-shadow:0 4rem var(--tui-background-elevation-1)}:host[data-size=fullscreen] .t-content,:host[data-size=page] .t-content{padding:3rem calc(50vw - 22.5rem)}:host[data-size=fullscreen] .t-heading,:host[data-size=page] .t-heading{font:var(--tui-font-heading-3)}:host._centered{text-align:center}:host :host-context(tui-root._mobile)[data-size]{min-inline-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;border:none;margin:auto 0 0;background:var(--tui-background-elevation-1);padding-block-end:env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size] .t-content{padding:1rem}:host :host-context(tui-root._mobile)[data-size] .t-heading{font:var(--tui-font-heading-5)}:host :host-context(tui-root._mobile)[data-size=fullscreen],:host :host-context(tui-root._mobile)[data-size=page]{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size=fullscreen] .t-close,:host :host-context(tui-root._mobile)[data-size=page] .t-close{top:max(1rem,env(safe-area-inset-top))}:host[data-size=page] .t-content,:host-context(tui-root._mobile) :host[data-size=page] .t-content{padding:0}.t-heading{margin:0 0 .5rem;overflow-wrap:break-word;font:var(--tui-font-heading-4)}.t-heading_closable{padding-inline-end:2rem}.t-heading:empty{display:none}.t-header{display:flex;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}:host[data-size=fullscreen] :host-context(tui-root._mobile) .t-header{flex:1}.t-content{border-radius:inherit;padding:1.75rem;background:var(--tui-background-elevation-1)}.t-content:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.t-content>section{border-radius:inherit}.t-filler{flex-grow:1}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:1rem;right:1rem}@supports (inset-inline-end: 0){.t-close{right:unset;inset-inline-end:1rem}}.t-buttons{margin-block-start:1.25rem;text-align:end}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDialogComponent, isStandalone: true, selector: "tui-dialog-legacy", host: { properties: { "attr.data-appearance": "context.appearance", "attr.data-size": "size", "class._centered": "header", "style.--tui-from": "from()" } }, providers: [TuiDialogCloseService], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "@if (header) {\n    <header class=\"t-header\">\n        <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n            {{ text }}\n        </ng-container>\n    </header>\n}\n<div class=\"t-content\">\n    <h2\n        class=\"t-heading\"\n        [class.t-heading_closable]=\"context.closable && !header\"\n        [id]=\"context.id\"\n        [textContent]=\"context.label\"\n    ></h2>\n    <section>\n        <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n            <div [innerHTML]=\"text\"></div>\n            @if (context.closable || context.dismissible) {\n                <div class=\"t-buttons\">\n                    <button\n                        size=\"m\"\n                        tuiAutoFocus\n                        tuiButton\n                        type=\"button\"\n                        (click)=\"context.$implicit.complete()\"\n                    >\n                        {{ context.data?.button || 'OK' }}\n                    </button>\n                </div>\n            }\n        </ng-container>\n    </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n    <button\n        automation-id=\"tui-dialog__close\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-close\"\n        [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n        [iconStart]=\"icons.close\"\n        [size]=\"isMobile() ? 'xs' : 's'\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"close$.next()\"\n        (mousedown.prevent.zoneless)=\"(0)\"\n    >\n        {{ closeWord() }}\n    </button>\n}\n", styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);flex-direction:column;box-sizing:border-box;margin:2.5rem;border-radius:1.5rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:var(--tui-shadow-popup)}:host[data-size=auto]{inline-size:auto}:host[data-size=s]{inline-size:25rem}:host[data-size=s] .t-content{padding:1.5rem}:host[data-size=s] .t-heading{font:var(--tui-font-heading-5)}:host[data-size=m]{inline-size:37.5rem}:host[data-size=l]{inline-size:50rem}:host[data-size=fullscreen],:host[data-size=page]{min-inline-size:100vw;min-block-size:100%;border-radius:0;border:none;background:var(--tui-background-elevation-1);box-shadow:0 4rem var(--tui-background-elevation-1)}:host[data-size=fullscreen] .t-content,:host[data-size=page] .t-content{padding:3rem calc(50vw - 22.5rem)}:host[data-size=fullscreen] .t-heading,:host[data-size=page] .t-heading{font:var(--tui-font-heading-3)}:host._centered{text-align:center}:host :host-context(tui-root._mobile)[data-size]{min-inline-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;border:none;margin:auto 0 0;background:var(--tui-background-elevation-1);padding-block-end:env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size] .t-content{padding:1rem}:host :host-context(tui-root._mobile)[data-size] .t-heading{font:var(--tui-font-heading-5)}:host :host-context(tui-root._mobile)[data-size=fullscreen],:host :host-context(tui-root._mobile)[data-size=page]{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size=fullscreen] .t-close,:host :host-context(tui-root._mobile)[data-size=page] .t-close{top:max(1rem,env(safe-area-inset-top))}:host[data-size=page] .t-content,:host-context(tui-root._mobile) :host[data-size=page] .t-content{padding:0}.t-heading{margin:0 0 .5rem;overflow-wrap:break-word;font:var(--tui-font-heading-4)}.t-heading_closable{padding-inline-end:2rem}.t-heading:empty{display:none}.t-header{display:flex;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}:host[data-size=fullscreen] :host-context(tui-root._mobile) .t-header{flex:1}.t-content{border-radius:inherit;padding:1.75rem;background:var(--tui-background-elevation-1)}.t-content:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.t-content>section{border-radius:inherit}.t-filler{flex-grow:1}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:1rem;right:1rem}@supports (inset-inline-end: 0){.t-close{right:unset;inset-inline-end:1rem}}.t-buttons{margin-block-start:1.25rem;text-align:end}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-dialog-legacy', imports: [AsyncPipe, PolymorpheusOutlet, TuiAutoFocus, TuiButton], changeDetection: ChangeDetectionStrategy.Default, providers: [TuiDialogCloseService], hostDirectives: [TuiAnimated], host: {
+            args: [{ selector: 'tui-dialog-legacy', imports: [PolymorpheusOutlet, TuiAutoFocus, TuiButton], changeDetection: ChangeDetectionStrategy.Default, providers: [TuiDialogCloseService], hostDirectives: [TuiAnimated], host: {
                         '[attr.data-appearance]': 'context.appearance',
                         '[attr.data-size]': 'size',
                         '[class._centered]': 'header',
                         '[style.--tui-from]': 'from()',
-                    }, template: "@if (header) {\n    <header class=\"t-header\">\n        <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n            {{ text }}\n        </ng-container>\n    </header>\n}\n<div class=\"t-content\">\n    <h2\n        class=\"t-heading\"\n        [class.t-heading_closable]=\"context.closable && !header\"\n        [id]=\"context.id\"\n        [textContent]=\"context.label\"\n    ></h2>\n    <section>\n        <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n            <div [innerHTML]=\"text\"></div>\n            @if (context.closable || context.dismissible) {\n                <div class=\"t-buttons\">\n                    <button\n                        size=\"m\"\n                        tuiAutoFocus\n                        tuiButton\n                        type=\"button\"\n                        (click)=\"context.$implicit.complete()\"\n                    >\n                        {{ context.data?.button || 'OK' }}\n                    </button>\n                </div>\n            }\n        </ng-container>\n    </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n    <button\n        automation-id=\"tui-dialog__close\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-close\"\n        [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n        [iconStart]=\"icons.close\"\n        [size]=\"isMobile() ? 'xs' : 's'\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"close$.next()\"\n        (mousedown.prevent.zoneless)=\"(0)\"\n    >\n        {{ closeWord$ | async }}\n    </button>\n}\n", styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);flex-direction:column;box-sizing:border-box;margin:2.5rem;border-radius:1.5rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:var(--tui-shadow-popup)}:host[data-size=auto]{inline-size:auto}:host[data-size=s]{inline-size:25rem}:host[data-size=s] .t-content{padding:1.5rem}:host[data-size=s] .t-heading{font:var(--tui-font-heading-5)}:host[data-size=m]{inline-size:37.5rem}:host[data-size=l]{inline-size:50rem}:host[data-size=fullscreen],:host[data-size=page]{min-inline-size:100vw;min-block-size:100%;border-radius:0;border:none;background:var(--tui-background-elevation-1);box-shadow:0 4rem var(--tui-background-elevation-1)}:host[data-size=fullscreen] .t-content,:host[data-size=page] .t-content{padding:3rem calc(50vw - 22.5rem)}:host[data-size=fullscreen] .t-heading,:host[data-size=page] .t-heading{font:var(--tui-font-heading-3)}:host._centered{text-align:center}:host :host-context(tui-root._mobile)[data-size]{min-inline-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;border:none;margin:auto 0 0;background:var(--tui-background-elevation-1);padding-block-end:env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size] .t-content{padding:1rem}:host :host-context(tui-root._mobile)[data-size] .t-heading{font:var(--tui-font-heading-5)}:host :host-context(tui-root._mobile)[data-size=fullscreen],:host :host-context(tui-root._mobile)[data-size=page]{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size=fullscreen] .t-close,:host :host-context(tui-root._mobile)[data-size=page] .t-close{top:max(1rem,env(safe-area-inset-top))}:host[data-size=page] .t-content,:host-context(tui-root._mobile) :host[data-size=page] .t-content{padding:0}.t-heading{margin:0 0 .5rem;overflow-wrap:break-word;font:var(--tui-font-heading-4)}.t-heading_closable{padding-inline-end:2rem}.t-heading:empty{display:none}.t-header{display:flex;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}:host[data-size=fullscreen] :host-context(tui-root._mobile) .t-header{flex:1}.t-content{border-radius:inherit;padding:1.75rem;background:var(--tui-background-elevation-1)}.t-content:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.t-content>section{border-radius:inherit}.t-filler{flex-grow:1}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:1rem;right:1rem}@supports (inset-inline-end: 0){.t-close{right:unset;inset-inline-end:1rem}}.t-buttons{margin-block-start:1.25rem;text-align:end}\n"] }]
+                    }, template: "@if (header) {\n    <header class=\"t-header\">\n        <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n            {{ text }}\n        </ng-container>\n    </header>\n}\n<div class=\"t-content\">\n    <h2\n        class=\"t-heading\"\n        [class.t-heading_closable]=\"context.closable && !header\"\n        [id]=\"context.id\"\n        [textContent]=\"context.label\"\n    ></h2>\n    <section>\n        <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n            <div [innerHTML]=\"text\"></div>\n            @if (context.closable || context.dismissible) {\n                <div class=\"t-buttons\">\n                    <button\n                        size=\"m\"\n                        tuiAutoFocus\n                        tuiButton\n                        type=\"button\"\n                        (click)=\"context.$implicit.complete()\"\n                    >\n                        {{ context.data?.button || 'OK' }}\n                    </button>\n                </div>\n            }\n        </ng-container>\n    </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n    <button\n        automation-id=\"tui-dialog__close\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-close\"\n        [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n        [iconStart]=\"icons.close\"\n        [size]=\"isMobile() ? 'xs' : 's'\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"close$.next()\"\n        (mousedown.prevent.zoneless)=\"(0)\"\n    >\n        {{ closeWord() }}\n    </button>\n}\n", styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);flex-direction:column;box-sizing:border-box;margin:2.5rem;border-radius:1.5rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit;pointer-events:none;box-shadow:var(--tui-shadow-popup)}:host[data-size=auto]{inline-size:auto}:host[data-size=s]{inline-size:25rem}:host[data-size=s] .t-content{padding:1.5rem}:host[data-size=s] .t-heading{font:var(--tui-font-heading-5)}:host[data-size=m]{inline-size:37.5rem}:host[data-size=l]{inline-size:50rem}:host[data-size=fullscreen],:host[data-size=page]{min-inline-size:100vw;min-block-size:100%;border-radius:0;border:none;background:var(--tui-background-elevation-1);box-shadow:0 4rem var(--tui-background-elevation-1)}:host[data-size=fullscreen] .t-content,:host[data-size=page] .t-content{padding:3rem calc(50vw - 22.5rem)}:host[data-size=fullscreen] .t-heading,:host[data-size=page] .t-heading{font:var(--tui-font-heading-3)}:host._centered{text-align:center}:host :host-context(tui-root._mobile)[data-size]{min-inline-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;border:none;margin:auto 0 0;background:var(--tui-background-elevation-1);padding-block-end:env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size] .t-content{padding:1rem}:host :host-context(tui-root._mobile)[data-size] .t-heading{font:var(--tui-font-heading-5)}:host :host-context(tui-root._mobile)[data-size=fullscreen],:host :host-context(tui-root._mobile)[data-size=page]{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host :host-context(tui-root._mobile)[data-size=fullscreen] .t-close,:host :host-context(tui-root._mobile)[data-size=page] .t-close{top:max(1rem,env(safe-area-inset-top))}:host[data-size=page] .t-content,:host-context(tui-root._mobile) :host[data-size=page] .t-content{padding:0}.t-heading{margin:0 0 .5rem;overflow-wrap:break-word;font:var(--tui-font-heading-4)}.t-heading_closable{padding-inline-end:2rem}.t-heading:empty{display:none}.t-header{display:flex;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}:host[data-size=fullscreen] :host-context(tui-root._mobile) .t-header{flex:1}.t-content{border-radius:inherit;padding:1.75rem;background:var(--tui-background-elevation-1)}.t-content:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.t-content>section{border-radius:inherit}.t-filler{flex-grow:1}.t-close{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:1rem;right:1rem}@supports (inset-inline-end: 0){.t-close{right:unset;inset-inline-end:1rem}}.t-buttons{margin-block-start:1.25rem;text-align:end}\n"] }]
         }], ctorParameters: () => [] });
 
 const TUI_DIALOG_DEFAULT_OPTIONS = {
@@ -76,37 +76,43 @@ const TUI_DIALOG_DEFAULT_OPTIONS = {
 /**
  * Default parameters for dialog component
  */
-const TUI_DIALOG_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_DIALOG_OPTIONS' : '', {
-    factory: () => TUI_DIALOG_DEFAULT_OPTIONS,
-});
-function tuiDialogOptionsProvider(options) {
-    return tuiProvideOptions(TUI_DIALOG_OPTIONS, options, TUI_DIALOG_DEFAULT_OPTIONS);
-}
+const [TUI_DIALOG_OPTIONS, tuiDialogOptionsProvider] = tuiCreateOptions(TUI_DIALOG_DEFAULT_OPTIONS);
 
-class TuiDialogService extends TuiPopoverService {
+class TuiDialogService extends TuiModalService {
+    constructor() {
+        super(...arguments);
+        this.options = inject(TUI_DIALOG_OPTIONS);
+        this.content = TuiDialogComponent;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialogService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialogService, providedIn: 'root', useFactory: () => new TuiDialogService(TUI_DIALOGS, TuiDialogComponent, inject(TUI_DIALOG_OPTIONS)) }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialogService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
-                    useFactory: () => new TuiDialogService(TUI_DIALOGS, TuiDialogComponent, inject(TUI_DIALOG_OPTIONS)),
                 }]
         }] });
 
-class TuiDialog extends TuiPopoverDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialog, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDialog, isStandalone: true, selector: "ng-template[tuiDialog]", inputs: { options: ["tuiDialogOptions", "options"], open: ["tuiDialog", "open"] }, outputs: { openChange: "tuiDialogChange" }, providers: [tuiAsPopover(TuiDialogService)], usesInheritance: true, ngImport: i0 }); }
+class TuiDialog {
+    constructor() {
+        this.tuiDialogOptions = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiDialog, isStandalone: true, selector: "ng-template[tuiDialog]", inputs: { tuiDialogOptions: { classPropertyName: "tuiDialogOptions", publicName: "tuiDialogOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsPortal(TuiDialogService)], hostDirectives: [{ directive: i1$1.TuiPortalDirective, inputs: ["options", "tuiDialogOptions", "open", "tuiDialog"], outputs: ["openChange", "tuiDialogChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDialog, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'ng-template[tuiDialog]',
-                    inputs: ['options: tuiDialogOptions', 'open: tuiDialog'],
-                    outputs: ['openChange: tuiDialogChange'],
-                    providers: [tuiAsPopover(TuiDialogService)],
+                    providers: [tuiAsPortal(TuiDialogService)],
+                    hostDirectives: [
+                        {
+                            directive: TuiPortalDirective,
+                            inputs: ['options: tuiDialogOptions', 'open: tuiDialog'],
+                            outputs: ['openChange: tuiDialogChange'],
+                        },
+                    ],
                 }]
         }] });
 

package/fesm2022/taiga-ui-legacy-components-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-legacy-components-dialog.mjs","sources":["../../../projects/legacy/components/dialog/dialog.component.ts","../../../projects/legacy/components/dialog/dialog.template.html","../../../projects/legacy/components/dialog/dialog.tokens.ts","../../../projects/legacy/components/dialog/dialog.service.ts","../../../projects/legacy/components/dialog/dialog.directive.ts","../../../projects/legacy/components/dialog/dialog.factory.ts","../../../projects/legacy/components/dialog/taiga-ui-legacy-components-dialog.ts"],"sourcesContent":["import {AsyncPipe} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';\nimport {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';\nimport {TUI_TRUE_HANDLER} from '@taiga-ui/cdk/constants';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {TuiAutoFocus} from '@taiga-ui/cdk/directives/auto-focus';\nimport {type TuiPopover} from '@taiga-ui/cdk/services';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TUI_DIALOGS_CLOSE, TuiDialogCloseService} from '@taiga-ui/core/components/dialog';\nimport {TuiBreakpointService} from '@taiga-ui/core/services';\nimport {TUI_CLOSE_WORD, TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';\nimport {\n    injectContext,\n    type PolymorpheusContent,\n    PolymorpheusOutlet,\n} from '@taiga-ui/polymorpheus';\nimport {\n    exhaustMap,\n    filter,\n    isObservable,\n    map,\n    merge,\n    type Observable,\n    of,\n    Subject,\n    switchMap,\n    take,\n} from 'rxjs';\n\nimport {type TuiDialogOptions, type TuiDialogSize} from './dialog.interfaces';\n\nconst REQUIRED_ERROR = new Error('Required dialog was dismissed');\n\nfunction toObservable<T>(valueOrStream: Observable<T> | T): Observable<T> {\n    return isObservable(valueOrStream) ? valueOrStream : of(valueOrStream);\n}\n\n@Component({\n    selector: 'tui-dialog-legacy',\n    imports: [AsyncPipe, PolymorpheusOutlet, TuiAutoFocus, TuiButton],\n    templateUrl: './dialog.template.html',\n    styleUrls: ['./dialog.style.less'],\n    // So we don't force OnPush on dialog content\n    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection\n    changeDetection: ChangeDetectionStrategy.Default,\n    providers: [TuiDialogCloseService],\n    hostDirectives: [TuiAnimated],\n    host: {\n        '[attr.data-appearance]': 'context.appearance',\n        '[attr.data-size]': 'size',\n        '[class._centered]': 'header',\n        '[style.--tui-from]': 'from()',\n    },\n})\nexport class TuiDialogComponent<O, I> {\n    protected readonly close$ = new Subject<void>();\n    protected readonly context = injectContext<TuiPopover<TuiDialogOptions<I>, O>>();\n    protected readonly closeWord$ = inject(TUI_CLOSE_WORD);\n    protected readonly icons = inject(TUI_COMMON_ICONS);\n    protected readonly from = computed(() =>\n        this.size === 'fullscreen' || this.size === 'page' || this.isMobile()\n            ? 'translateY(100vh)'\n            : 'translateY(2.5rem)',\n    );\n\n    protected readonly isMobile = toSignal(\n        inject(TuiBreakpointService).pipe(map((breakpoint) => breakpoint === 'mobile')),\n    );\n\n    constructor() {\n        merge(\n            this.close$.pipe(switchMap(() => toObservable(this.context.closable))),\n            inject(TuiDialogCloseService).pipe(\n                exhaustMap(() => toObservable(this.context.dismissible).pipe(take(1))),\n            ),\n            inject(TUI_DIALOGS_CLOSE).pipe(map(TUI_TRUE_HANDLER)),\n        )\n            .pipe(filter(Boolean), takeUntilDestroyed())\n            .subscribe(() => {\n                this.close();\n            });\n    }\n\n    protected get size(): TuiDialogSize {\n        return this.context.size;\n    }\n\n    protected get header(): PolymorpheusContent<TuiPopover<TuiDialogOptions<I>, O>> {\n        return this.context.header;\n    }\n\n    private close(): void {\n        if (this.context.required) {\n            this.context.$implicit.error(REQUIRED_ERROR);\n        } else {\n            this.context.$implicit.complete();\n        }\n    }\n}\n","@if (header) {\n    <header class=\"t-header\">\n        <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n            {{ text }}\n        </ng-container>\n    </header>\n}\n<div class=\"t-content\">\n    <h2\n        class=\"t-heading\"\n        [class.t-heading_closable]=\"context.closable && !header\"\n        [id]=\"context.id\"\n        [textContent]=\"context.label\"\n    ></h2>\n    <section>\n        <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n            <div [innerHTML]=\"text\"></div>\n            @if (context.closable || context.dismissible) {\n                <div class=\"t-buttons\">\n                    <button\n                        size=\"m\"\n                        tuiAutoFocus\n                        tuiButton\n                        type=\"button\"\n                        (click)=\"context.$implicit.complete()\"\n                    >\n                        {{ context.data?.button || 'OK' }}\n                    </button>\n                </div>\n            }\n        </ng-container>\n    </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n    <button\n        automation-id=\"tui-dialog__close\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-close\"\n        [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n        [iconStart]=\"icons.close\"\n        [size]=\"isMobile() ? 'xs' : 's'\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"close$.next()\"\n        (mousedown.prevent.zoneless)=\"(0)\"\n    >\n        {{ closeWord$ | async }}\n    </button>\n}\n","import {InjectionToken, type Provider} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\n\nimport {type TuiDialogOptions} from './dialog.interfaces';\n\nexport const TUI_DIALOG_DEFAULT_OPTIONS: TuiDialogOptions<void> = {\n    appearance: '',\n    size: 'm',\n    required: false,\n    closable: true,\n    dismissible: true,\n    label: '',\n    header: '',\n    data: undefined,\n};\n\n/**\n * Default parameters for dialog component\n */\nexport const TUI_DIALOG_OPTIONS = new InjectionToken(\n    ngDevMode ? 'TUI_DIALOG_OPTIONS' : '',\n    {\n        factory: () => TUI_DIALOG_DEFAULT_OPTIONS,\n    },\n);\n\nexport function tuiDialogOptionsProvider(\n    options: Partial<TuiDialogOptions<unknown>>,\n): Provider {\n    return tuiProvideOptions(TUI_DIALOG_OPTIONS, options, TUI_DIALOG_DEFAULT_OPTIONS);\n}\n","import {inject, Injectable} from '@angular/core';\nimport {TuiPopoverService} from '@taiga-ui/cdk/services';\nimport {TUI_DIALOGS} from '@taiga-ui/core/components/dialog';\n\nimport {TuiDialogComponent} from './dialog.component';\nimport {type TuiDialogOptions} from './dialog.interfaces';\nimport {TUI_DIALOG_OPTIONS} from './dialog.tokens';\n\n@Injectable({\n    providedIn: 'root',\n    useFactory: () =>\n        new TuiDialogService(TUI_DIALOGS, TuiDialogComponent, inject(TUI_DIALOG_OPTIONS)),\n})\nexport class TuiDialogService extends TuiPopoverService<TuiDialogOptions<any>> {}\n","import {Directive} from '@angular/core';\nimport {TuiPopoverDirective} from '@taiga-ui/cdk/directives/popover';\nimport {tuiAsPopover} from '@taiga-ui/cdk/services';\n\nimport {type TuiDialogOptions} from './dialog.interfaces';\nimport {TuiDialogService} from './dialog.service';\n\n@Directive({\n    standalone: true,\n    selector: 'ng-template[tuiDialog]',\n    inputs: ['options: tuiDialogOptions', 'open: tuiDialog'],\n    outputs: ['openChange: tuiDialogChange'],\n    providers: [tuiAsPopover(TuiDialogService)],\n})\nexport class TuiDialog<T> extends TuiPopoverDirective<TuiDialogOptions<T>> {}\n","import {assertInInjectionContext, inject, INJECTOR, type Injector} from '@angular/core';\nimport {PolymorpheusComponent} from '@taiga-ui/polymorpheus';\nimport {type Observable} from 'rxjs';\n\nimport {type TuiDialogContext, type TuiDialogOptions} from './dialog.interfaces';\nimport {TuiDialogService} from './dialog.service';\n\ntype SingleUnionOrNever<T, U = T> = [T] extends [never]\n    ? never\n    : T extends U\n      ? [U] extends [T]\n          ? T\n          : never\n      : never;\n\ntype ReplaceAny<T> = 0 extends T & 1 ? void : T;\n\ntype ContextKeys<T> = {\n    [K in keyof T]: ReplaceAny<T[K]> extends TuiDialogContext<any, any> | null\n        ? K\n        : never;\n}[keyof T];\n\ntype AssertNotMultipleContexts<T, K extends keyof T> = [K] extends [never]\n    ? new (...args: any[]) => T\n    : [SingleUnionOrNever<K>] extends [never]\n      ? 'Component has multiple context. Cannot determine the type...'\n      : new (...args: any[]) => T;\n\ntype ExtractDialogData<T, K extends keyof T = ContextKeys<T>> = [K] extends [never]\n    ? void\n    : [SingleUnionOrNever<K>] extends [never]\n      ? never\n      : T[K] extends TuiDialogContext<any, infer D> | null\n        ? D\n        : void;\n\ntype ExtractDialogResult<T, K extends keyof T = ContextKeys<T>> = [K] extends [never]\n    ? void\n    : [SingleUnionOrNever<K>] extends [never]\n      ? never\n      : T[K] extends TuiDialogContext<infer R, any> | null\n        ? R\n        : void;\n\ntype Options<T> = Omit<TuiDialogOptions<T>, 'data'> & {injector: Injector};\n\nexport function tuiDialog<\n    T,\n    K extends ContextKeys<T>,\n    D extends ExtractDialogData<T, K>,\n    R extends ExtractDialogResult<T, K>,\n>(\n    component: AssertNotMultipleContexts<T, K>,\n    {injector, ...options}: Partial<Options<D>> = {},\n): (data: D) => Observable<R> {\n    if (!injector) {\n        assertInInjectionContext(tuiDialog);\n        injector = inject(INJECTOR);\n    }\n\n    const dialogService = injector.get(TuiDialogService);\n\n    return (data) =>\n        dialogService.open(\n            new PolymorpheusComponent(component as new () => T, injector),\n            {\n                ...options,\n                data,\n            },\n        );\n}\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-legacy-components-dialog.mjs","sources":["../../../projects/legacy/components/dialog/dialog.component.ts","../../../projects/legacy/components/dialog/dialog.template.html","../../../projects/legacy/components/dialog/dialog.tokens.ts","../../../projects/legacy/components/dialog/dialog.service.ts","../../../projects/legacy/components/dialog/dialog.directive.ts","../../../projects/legacy/components/dialog/dialog.factory.ts","../../../projects/legacy/components/dialog/taiga-ui-legacy-components-dialog.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';\nimport {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';\nimport {TUI_TRUE_HANDLER} from '@taiga-ui/cdk/constants';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {TuiAutoFocus} from '@taiga-ui/cdk/directives/auto-focus';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TUI_DIALOGS_CLOSE, TuiDialogCloseService} from '@taiga-ui/core/components/dialog';\nimport {TuiBreakpointService} from '@taiga-ui/core/services';\nimport {TUI_CLOSE_WORD, TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';\nimport {\n    injectContext,\n    type PolymorpheusContent,\n    PolymorpheusOutlet,\n} from '@taiga-ui/polymorpheus';\nimport {\n    exhaustMap,\n    filter,\n    isObservable,\n    map,\n    merge,\n    type Observable,\n    of,\n    Subject,\n    switchMap,\n    take,\n} from 'rxjs';\n\nimport {type TuiDialogContext, type TuiDialogSize} from './dialog.interfaces';\n\nconst REQUIRED_ERROR = new Error('Required dialog was dismissed');\n\nfunction toObservable<T>(valueOrStream: Observable<T> | T): Observable<T> {\n    return isObservable(valueOrStream) ? valueOrStream : of(valueOrStream);\n}\n\n@Component({\n    selector: 'tui-dialog-legacy',\n    imports: [PolymorpheusOutlet, TuiAutoFocus, TuiButton],\n    templateUrl: './dialog.template.html',\n    styleUrl: './dialog.style.less',\n    // So we don't force OnPush on dialog content\n    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection\n    changeDetection: ChangeDetectionStrategy.Default,\n    providers: [TuiDialogCloseService],\n    hostDirectives: [TuiAnimated],\n    host: {\n        '[attr.data-appearance]': 'context.appearance',\n        '[attr.data-size]': 'size',\n        '[class._centered]': 'header',\n        '[style.--tui-from]': 'from()',\n    },\n})\nexport class TuiDialogComponent<O, I> {\n    protected readonly close$ = new Subject<void>();\n    protected readonly context = injectContext<TuiDialogContext<I, O>>();\n    protected readonly closeWord = inject(TUI_CLOSE_WORD);\n    protected readonly icons = inject(TUI_COMMON_ICONS);\n    protected readonly from = computed(() =>\n        this.size === 'fullscreen' || this.size === 'page' || this.isMobile()\n            ? 'translateY(100vh)'\n            : 'translateY(2.5rem)',\n    );\n\n    protected readonly isMobile = toSignal(\n        inject(TuiBreakpointService).pipe(map((breakpoint) => breakpoint === 'mobile')),\n    );\n\n    constructor() {\n        merge(\n            this.close$.pipe(switchMap(() => toObservable(this.context.closable))),\n            inject(TuiDialogCloseService).pipe(\n                exhaustMap(() => toObservable(this.context.dismissible).pipe(take(1))),\n            ),\n            inject(TUI_DIALOGS_CLOSE).pipe(map(TUI_TRUE_HANDLER)),\n        )\n            .pipe(filter(Boolean), takeUntilDestroyed())\n            .subscribe(() => {\n                this.close();\n            });\n    }\n\n    protected get size(): TuiDialogSize {\n        return this.context.size;\n    }\n\n    protected get header(): PolymorpheusContent<TuiDialogContext<I, O>> {\n        return this.context.header;\n    }\n\n    private close(): void {\n        if (this.context.required) {\n            this.context.$implicit.error(REQUIRED_ERROR);\n        } else {\n            this.context.$implicit.complete();\n        }\n    }\n}\n","@if (header) {\n    <header class=\"t-header\">\n        <ng-container *polymorpheusOutlet=\"header as text; context: context\">\n            {{ text }}\n        </ng-container>\n    </header>\n}\n<div class=\"t-content\">\n    <h2\n        class=\"t-heading\"\n        [class.t-heading_closable]=\"context.closable && !header\"\n        [id]=\"context.id\"\n        [textContent]=\"context.label\"\n    ></h2>\n    <section>\n        <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n            <div [innerHTML]=\"text\"></div>\n            @if (context.closable || context.dismissible) {\n                <div class=\"t-buttons\">\n                    <button\n                        size=\"m\"\n                        tuiAutoFocus\n                        tuiButton\n                        type=\"button\"\n                        (click)=\"context.$implicit.complete()\"\n                    >\n                        {{ context.data?.button || 'OK' }}\n                    </button>\n                </div>\n            }\n        </ng-container>\n    </section>\n</div>\n<div class=\"t-filler\"></div>\n\n<!-- Close button is insensitive to `context.closable === Observable<false>` by design -->\n@if (context.closable) {\n    <button\n        automation-id=\"tui-dialog__close\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-close\"\n        [appearance]=\"isMobile() ? 'icon' : 'neutral'\"\n        [iconStart]=\"icons.close\"\n        [size]=\"isMobile() ? 'xs' : 's'\"\n        [style.border-radius.%]=\"100\"\n        (click)=\"close$.next()\"\n        (mousedown.prevent.zoneless)=\"(0)\"\n    >\n        {{ closeWord() }}\n    </button>\n}\n","import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\n\nimport {type TuiDialogOptions} from './dialog.interfaces';\n\nexport const TUI_DIALOG_DEFAULT_OPTIONS: TuiDialogOptions<void> = {\n    appearance: '',\n    size: 'm',\n    required: false,\n    closable: true,\n    dismissible: true,\n    label: '',\n    header: '',\n    data: undefined,\n};\n\n/**\n * Default parameters for dialog component\n */\nexport const [TUI_DIALOG_OPTIONS, tuiDialogOptionsProvider] = tuiCreateOptions(\n    TUI_DIALOG_DEFAULT_OPTIONS,\n);\n","import {inject, Injectable} from '@angular/core';\nimport {TuiModalService} from '@taiga-ui/core/components/modal';\n\nimport {TuiDialogComponent} from './dialog.component';\nimport {type TuiDialogOptions} from './dialog.interfaces';\nimport {TUI_DIALOG_OPTIONS} from './dialog.tokens';\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class TuiDialogService extends TuiModalService<TuiDialogOptions<any>> {\n    protected readonly options = inject(TUI_DIALOG_OPTIONS);\n    protected readonly content = TuiDialogComponent;\n}\n","import {Directive, input} from '@angular/core';\nimport {tuiAsPortal, TuiPortalDirective} from '@taiga-ui/cdk/portals';\n\nimport {type TuiDialogOptions} from './dialog.interfaces';\nimport {TuiDialogService} from './dialog.service';\n\n@Directive({\n    selector: 'ng-template[tuiDialog]',\n    providers: [tuiAsPortal(TuiDialogService)],\n    hostDirectives: [\n        {\n            directive: TuiPortalDirective,\n            inputs: ['options: tuiDialogOptions', 'open: tuiDialog'],\n            outputs: ['openChange: tuiDialogChange'],\n        },\n    ],\n})\nexport class TuiDialog<T> {\n    public readonly tuiDialogOptions = input<Partial<TuiDialogOptions<T>>>({});\n}\n","import {assertInInjectionContext, inject, INJECTOR, type Injector} from '@angular/core';\nimport {PolymorpheusComponent} from '@taiga-ui/polymorpheus';\nimport {type Observable} from 'rxjs';\n\nimport {type TuiDialogContext, type TuiDialogOptions} from './dialog.interfaces';\nimport {TuiDialogService} from './dialog.service';\n\ntype SingleUnionOrNever<T, U = T> = [T] extends [never]\n    ? never\n    : T extends U\n      ? [U] extends [T]\n          ? T\n          : never\n      : never;\n\ntype ReplaceAny<T> = 0 extends T & 1 ? void : T;\n\ntype ContextKeys<T> = {\n    [K in keyof T]: ReplaceAny<T[K]> extends TuiDialogContext<any, any> | null\n        ? K\n        : never;\n}[keyof T];\n\ntype AssertNotMultipleContexts<T, K extends keyof T> = [K] extends [never]\n    ? new (...args: any[]) => T\n    : [SingleUnionOrNever<K>] extends [never]\n      ? 'Component has multiple context. Cannot determine the type...'\n      : new (...args: any[]) => T;\n\ntype ExtractDialogData<T, K extends keyof T = ContextKeys<T>> = [K] extends [never]\n    ? void\n    : [SingleUnionOrNever<K>] extends [never]\n      ? never\n      : T[K] extends TuiDialogContext<any, infer D> | null\n        ? D\n        : void;\n\ntype ExtractDialogResult<T, K extends keyof T = ContextKeys<T>> = [K] extends [never]\n    ? void\n    : [SingleUnionOrNever<K>] extends [never]\n      ? never\n      : T[K] extends TuiDialogContext<infer R, any> | null\n        ? R\n        : void;\n\ntype Options<T> = Omit<TuiDialogOptions<T>, 'data'> & {injector: Injector};\n\nexport function tuiDialog<\n    T,\n    K extends ContextKeys<T>,\n    D extends ExtractDialogData<T, K>,\n    R extends ExtractDialogResult<T, K>,\n>(\n    component: AssertNotMultipleContexts<T, K>,\n    {injector, ...options}: Partial<Options<D>> = {},\n): (data: D) => Observable<R> {\n    if (!injector) {\n        assertInInjectionContext(tuiDialog);\n        injector = inject(INJECTOR);\n    }\n\n    const dialogService = injector.get(TuiDialogService);\n\n    return (data) =>\n        dialogService.open(\n            new PolymorpheusComponent(component as new () => T, injector),\n            {\n                ...options,\n                data,\n            },\n        );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/taiga-ui-legacy-components-input-date-range.mjs

@@ -1,41 +1,38 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
 import { inject, signal, Input, ViewChild, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { MASKITO_DEFAULT_OPTIONS } from '@maskito/core';
 import { maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import { tuiAsControl } from '@taiga-ui/cdk/classes';
 import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
 import { TuiMonth, TuiDayRange, DATE_RANGE_FILLER_LENGTH, DATE_FILLER_LENGTH, RANGE_SEPARATOR_CHAR, TUI_LAST_DAY, TUI_FIRST_DAY } from '@taiga-ui/cdk/date-time';
-import { tuiWatch } from '@taiga-ui/cdk/observables';
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
 import { changeDateSeparator, tuiIsPresent, tuiNullableSame, tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
 import { tuiAsDataListHost } from '@taiga-ui/core/components/data-list';
-import { TUI_DEFAULT_DATE_FORMAT, TUI_DATE_FORMAT } from '@taiga-ui/core/tokens';
+import { TUI_DATE_FORMAT } from '@taiga-ui/core/tokens';
 import { TUI_MOBILE_CALENDAR, TUI_INPUT_DATE_OPTIONS, TUI_DATE_TEXTS, TUI_DATE_RANGE_VALUE_TRANSFORMER, tuiDateStreamWithTransformer, TUI_MOBILE_CALENDAR_PROVIDER } from '@taiga-ui/kit/tokens';
 import { AbstractTuiNullableControl, tuiAsControl as tuiAsControl$1, AbstractTuiTextfieldHost } from '@taiga-ui/legacy/classes';
-import * as i4 from '@taiga-ui/legacy/components/primitive-textfield';
+import * as i7 from '@taiga-ui/legacy/components/primitive-textfield';
 import { TuiPrimitiveTextfieldComponent, TuiTextfieldComponent, TuiPrimitiveTextfieldModule } from '@taiga-ui/legacy/components/primitive-textfield';
-import * as i5 from '@taiga-ui/legacy/directives';
-import { TUI_TEXTFIELD_SIZE, TuiTextfieldControllerModule, TuiValueAccessorModule, TuiLegacyDropdownOpenMonitorDirective } from '@taiga-ui/legacy/directives';
+import * as i6 from '@taiga-ui/legacy/directives';
+import { TUI_TEXTFIELD_SIZE, TuiLegacyDropdownOpenMonitorDirective, TuiTextfieldControllerModule, TuiValueAccessorModule } from '@taiga-ui/legacy/directives';
 import { tuiAsFocusableItemAccessor, tuiAsTextfieldHost } from '@taiga-ui/legacy/tokens';
 import { TUI_DATE_MODE_MASKITO_ADAPTER } from '@taiga-ui/legacy/utils';
 import { map } from 'rxjs';
 import * as i1 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
-import * as i2 from '@taiga-ui/cdk/directives/let';
-import { TuiLet } from '@taiga-ui/cdk/directives/let';
-import * as i3 from '@taiga-ui/polymorpheus';
+import * as i2 from '@taiga-ui/polymorpheus';
 import { PolymorpheusOutlet, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
-import * as i6 from '@taiga-ui/kit/components/calendar-range';
+import * as i3 from '@taiga-ui/core/directives/appearance';
+import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
+import * as i4 from '@taiga-ui/kit/components/calendar-range';
 import { TuiCalendarRange } from '@taiga-ui/kit/components/calendar-range';
-import * as i7 from '@taiga-ui/core/components/icon';
+import * as i5 from '@taiga-ui/core/components/icon';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
-import * as i8 from '@taiga-ui/core/directives/appearance';
-import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
 import * as i1$1 from '@taiga-ui/core/directives/dropdown';
 import { TuiDropdown } from '@taiga-ui/core/directives/dropdown';
-import * as i10 from '@angular/common';
+import * as i9 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -50,15 +47,10 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
         this.options = inject(TUI_INPUT_DATE_OPTIONS);
         this.textfieldSize = inject(TUI_TEXTFIELD_SIZE);
         this.nativeValue = signal('');
-        this.dateTexts$ = inject(TUI_DATE_TEXTS);
+        this.dateTexts$ = toObservable(inject(TUI_DATE_TEXTS));
         this.valueTransformer = inject(TUI_DATE_RANGE_VALUE_TRANSFORMER, { optional: true });
-        this.dateFiller$ = this.dateTexts$.pipe(map((dateTexts) => changeDateSeparator(dateTexts[this.dateFormat.mode], this.dateFormat.separator)));
-        this.dateFormat = TUI_DEFAULT_DATE_FORMAT;
-        this.dateFormat$ = inject(TUI_DATE_FORMAT)
-            .pipe(tuiWatch(this.cdr), takeUntilDestroyed())
-            .subscribe((format) => {
-            this.dateFormat = format;
-        });
+        this.dateFiller$ = this.dateTexts$.pipe(map((dateTexts) => changeDateSeparator(dateTexts[this.dateFormat().mode], this.dateFormat().separator)));
+        this.dateFormat = inject(TUI_DATE_FORMAT);
         this.selectedActivePeriod = null;
         this.disabledItemHandler = TUI_FALSE_HANDLER;
         this.markerHandler = null;
@@ -87,7 +79,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
             return String(activePeriod);
         }
         return value
-            ? value.getFormattedDayRange(this.dateFormat.mode, this.dateFormat.separator)
+            ? value.getFormattedDayRange(this.dateFormat().mode, this.dateFormat().separator)
             : nativeValue();
     }
     get size() {
@@ -111,7 +103,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
         }
         this.value =
             value.length === DATE_RANGE_FILLER_LENGTH && !this.activePeriod
-                ? TuiDayRange.normalizeParse(value, this.dateFormat.mode)
+                ? TuiDayRange.normalizeParse(value, this.dateFormat().mode)
                 : null;
         if (!this.value) {
             this.selectedActivePeriod = null;
@@ -142,7 +134,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
     get computedMask() {
         return this.activePeriod
             ? MASKITO_DEFAULT_OPTIONS
-            : this.calculateMask(this.dateFormat.mode, this.dateFormat.separator, this.min, this.max, this.minLength, this.maxLength);
+            : this.calculateMask(this.dateFormat().mode, this.dateFormat().separator, this.min, this.max, this.minLength, this.maxLength);
     }
     get activePeriod() {
         return this.selectedActivePeriod ?? this.findActivePeriodBy(this.value);
@@ -180,7 +172,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
             (this.nativeValue().length === DATE_FILLER_LENGTH ||
                 this.nativeValue().length ===
                     DATE_FILLER_LENGTH + RANGE_SEPARATOR_CHAR.length)) {
-            this.value = TuiDayRange.normalizeParse(this.nativeValue(), this.dateFormat.mode);
+            this.value = TuiDayRange.normalizeParse(this.nativeValue(), this.dateFormat().mode);
         }
     }
     valueIdenticalComparator(oldValue, newValue) {
@@ -223,7 +215,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
             tuiDateStreamWithTransformer(TUI_DATE_RANGE_VALUE_TRANSFORMER),
             tuiAsDataListHost(TuiInputDateRangeComponent),
             TUI_MOBILE_CALENDAR_PROVIDER,
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"dateFiller$ | async as dateFiller\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n\n        @if (showValueTemplate) {\n            <div\n                ngProjectAs=\"tuiContent\"\n                class=\"t-value\"\n            >\n                <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar-range\n            [defaultViewedMonth]=\"defaultViewedMonth\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [items]=\"items\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [(item)]=\"selectedActivePeriod\"\n            (valueChange)=\"onRangeChange($event)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small:before{font-size:1rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i4.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i4.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i5.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "component", type: i6.TuiCalendarRange, selector: "tui-calendar-range", inputs: ["disabledItemHandler", "markerHandler", "items", "min", "max", "minLength", "maxLength", "item", "value", "defaultViewedMonth"], outputs: ["valueChange", "itemChange"] }, { kind: "directive", type: i5.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i5.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: i8.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i10.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    @let dateFiller = dateFiller$ | async;\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n\n        @if (showValueTemplate) {\n            <div\n                ngProjectAs=\"tuiContent\"\n                class=\"t-value\"\n            >\n                <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar-range\n            [defaultViewedMonth]=\"defaultViewedMonth\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [items]=\"items\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [(item)]=\"selectedActivePeriod\"\n            (valueChange)=\"onRangeChange($event)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small:before{font-size:1rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: i2.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i4.TuiCalendarRange, selector: "tui-calendar-range", inputs: ["disabledItemHandler", "markerHandler", "items", "min", "max", "minLength", "maxLength", "item", "value", "defaultViewedMonth"], outputs: ["valueChange", "itemChange"] }, { kind: "component", type: i5.TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: i6.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i7.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i7.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i6.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -240,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], host: {
                         '[attr.data-size]': 'size',
                         '(click)': 'onClick()',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"dateFiller$ | async as dateFiller\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n\n        @if (showValueTemplate) {\n            <div\n                ngProjectAs=\"tuiContent\"\n                class=\"t-value\"\n            >\n                <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar-range\n            [defaultViewedMonth]=\"defaultViewedMonth\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [items]=\"items\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [(item)]=\"selectedActivePeriod\"\n            (valueChange)=\"onRangeChange($event)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small:before{font-size:1rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    @let dateFiller = dateFiller$ | async;\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n\n        @if (showValueTemplate) {\n            <div\n                ngProjectAs=\"tuiContent\"\n                class=\"t-value\"\n            >\n                <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar-range\n            [defaultViewedMonth]=\"defaultViewedMonth\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [items]=\"items\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [(item)]=\"selectedActivePeriod\"\n            (valueChange)=\"onRangeChange($event)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small:before{font-size:1rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]
@@ -301,24 +293,23 @@ class TuiInputDateRangeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputDateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiInputDateRangeModule, declarations: [TuiInputDateRangeComponent, TuiInputDateRangeDirective], imports: [CommonModule,
             MaskitoDirective,
-            TuiLet,
             PolymorpheusOutlet,
             PolymorpheusTemplate,
-            TuiPrimitiveTextfieldModule,
-            TuiTextfieldControllerModule,
+            TuiAppearance,
             TuiCalendarRange,
-            TuiValueAccessorModule,
-            TuiLegacyDropdownOpenMonitorDirective,
             TuiIcon,
-            TuiAppearance, i1$1.TuiDropdownOptionsDirective, i1$1.TuiDropdownDriverDirective, i1$1.TuiDropdownDirective, i1$1.TuiDropdownComponent, i1$1.TuiDropdownOpen, i1$1.TuiDropdownOpenLegacy, i1$1.TuiDropdownPortal, i1$1.TuiDropdownManual, i1$1.TuiDropdownHover, i1$1.TuiDropdownContext, i1$1.TuiDropdownPosition, i1$1.TuiDropdownPositionSided, i1$1.TuiDropdownSelection], exports: [TuiInputDateRangeComponent,
+            TuiLegacyDropdownOpenMonitorDirective,
+            TuiPrimitiveTextfieldModule,
+            TuiTextfieldControllerModule,
+            TuiValueAccessorModule, i1$1.TuiDropdownOptionsDirective, i1$1.TuiDropdownDriverDirective, i1$1.TuiDropdownDirective, i1$1.TuiDropdownComponent, i1$1.TuiDropdownOpen, i1$1.TuiDropdownOpenLegacy, i1$1.TuiDropdownManual, i1$1.TuiDropdownHover, i1$1.TuiDropdownContent, i1$1.TuiDropdownContext, i1$1.TuiDropdownPosition, i1$1.TuiDropdownPositionSided, i1$1.TuiDropdownSelection], exports: [TuiInputDateRangeComponent,
             TuiInputDateRangeDirective,
-            TuiTextfieldComponent, i1$1.TuiDropdownOptionsDirective, i1$1.TuiDropdownDriverDirective, i1$1.TuiDropdownDirective, i1$1.TuiDropdownComponent, i1$1.TuiDropdownOpen, i1$1.TuiDropdownOpenLegacy, i1$1.TuiDropdownPortal, i1$1.TuiDropdownManual, i1$1.TuiDropdownHover, i1$1.TuiDropdownContext, i1$1.TuiDropdownPosition, i1$1.TuiDropdownPositionSided, i1$1.TuiDropdownSelection] }); }
+            TuiTextfieldComponent, i1$1.TuiDropdownOptionsDirective, i1$1.TuiDropdownDriverDirective, i1$1.TuiDropdownDirective, i1$1.TuiDropdownComponent, i1$1.TuiDropdownOpen, i1$1.TuiDropdownOpenLegacy, i1$1.TuiDropdownManual, i1$1.TuiDropdownHover, i1$1.TuiDropdownContent, i1$1.TuiDropdownContext, i1$1.TuiDropdownPosition, i1$1.TuiDropdownPositionSided, i1$1.TuiDropdownSelection] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputDateRangeModule, imports: [CommonModule,
+            TuiCalendarRange,
+            TuiIcon,
             TuiPrimitiveTextfieldModule,
             TuiTextfieldControllerModule,
-            TuiCalendarRange,
-            TuiValueAccessorModule,
-            TuiIcon, i1$1.TuiDropdownComponent] }); }
+            TuiValueAccessorModule, i1$1.TuiDropdownComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputDateRangeModule, decorators: [{
             type: NgModule,
@@ -326,16 +317,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     imports: [
                         CommonModule,
                         MaskitoDirective,
-                        TuiLet,
                         PolymorpheusOutlet,
                         PolymorpheusTemplate,
+                        TuiAppearance,
+                        TuiCalendarRange,
+                        TuiIcon,
+                        TuiLegacyDropdownOpenMonitorDirective,
                         TuiPrimitiveTextfieldModule,
                         TuiTextfieldControllerModule,
-                        TuiCalendarRange,
                         TuiValueAccessorModule,
-                        TuiLegacyDropdownOpenMonitorDirective,
-                        TuiIcon,
-                        TuiAppearance,
                         ...TuiDropdown,
                     ],
                     declarations: [TuiInputDateRangeComponent, TuiInputDateRangeDirective],