@taiga-ui/core 5.23.0 → 5.24.0

package/fesm2022/taiga-ui-core-portals-dialog.mjs

@@ -95,7 +95,7 @@ class TuiDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDialogComponent, isStandalone: true, selector: "tui-dialog", host: { attributes: { "data-tui-version": "5.23.0" }, properties: { "attr.data-appearance": "context.appearance", "attr.data-size": "context.size", "class._closable": "context.closable", "class.tui-backdrop-hidden": "context.appearance.includes(\"fullscreen\")" } }, providers: [TuiDialogCloseService], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "@if (context.closable) {\n    <button\n        tabindex=\"0\"\n        tuiButtonX\n        [appearance]=\"context.appearance.includes('fullscreen') ? 'action' : 'neutral'\"\n        (click)=\"close$.next()\"\n    >\n        {{ close() }}\n    </button>\n}\n\n@if (!primitive && context.label) {\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n        </hgroup>\n    </header>\n}\n\n<ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n            <p [innerHTML]=\"text\"></p>\n        </hgroup>\n    </header>\n    @if (context.closable || context.dismissible) {\n        <footer>\n            <button\n                size=\"m\"\n                tuiAutoFocus\n                tuiButton\n                type=\"button\"\n                (click)=\"context.$implicit.complete()\"\n            >\n                {{ context.data || 'OK' }}\n            </button>\n        </footer>\n    }\n</ng-container>\n", styles: ["tui-dialog:where(*[data-tui-version=\"5.23.0\"]){position:relative;box-sizing:border-box;overflow-wrap:break-word;font:var(--tui-typography-body-m);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-popup)}tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header{padding-inline-end:2.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>header p,tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header p{margin-inline-end:-2.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header [tuiTitle],tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header [tuiTitle]{font:inherit}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header p,tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header p{margin:.25rem 0 0;font:var(--tui-typography-body-m)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header p:empty,tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header p:empty{display:none}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>[tuiButtonX]{position:absolute;z-index:1;inset-block-start:1rem;inset-inline-end:1rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga]{max-inline-size:calc(100vw - 5rem);margin:2.5rem;padding:1.75rem;border-radius:1.5rem;--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga].tui-enter,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]{inline-size:25rem;padding:1.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.25rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>footer,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>footer{margin-block-start:1.25rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m],tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]{inline-size:37.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h4)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]{inline-size:50rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga]>footer,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga]>ng-component>footer{display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:.75rem;margin-block-start:2rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]{display:flex;flex-direction:column;block-size:100%;inline-size:100%;max-inline-size:100vw;padding:env(safe-area-inset-top) max(calc(50vw - var(--tui-width) / 2),1rem) max(2rem,env(safe-area-inset-bottom));background:var(--tui-background-base);box-shadow:none;--tui-width: min(45rem, 100vw);--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size].tui-enter,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{position:sticky;inset-block-start:env(safe-area-inset-top);block-size:4rem;inline-size:auto;align-self:flex-end;margin-block-end:2rem;border-radius:0!important;font:var(--tui-typography-body-l)!important;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0 / 0 / env(safe-area-inset-top) 100vw 0}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]:before{display:none}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size].tui-app-bar>[tuiButtonX]{display:none}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]:not(._closable):not(.tui-app-bar):before{content:\"\";block-size:1.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{position:sticky;z-index:1;inset-block-start:0;order:-1;border-inline-end:calc(50vw - var(--tui-width) / 2) solid transparent;border-inline-start:calc(50vw - var(--tui-width) / 2) solid transparent;margin:0 calc(var(--tui-width) / 2 - 50vw) 2rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar[data-size=l],tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar[data-size=l]{border-width:max(calc(50vw - var(--tui-width) / 2),1rem)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h3);margin-block-end:2rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{display:flex;gap:.5rem .75rem;padding:2rem calc(50vw - var(--tui-width) / 2);margin:0 calc(var(--tui-width) / 2 - 50vw) calc(-2rem - env(safe-area-inset-top))}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{inset-inline-start:0;inset-inline-end:0}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{flex-direction:row;background:color-mix(in hsl,var(--tui-background-base) 80%,transparent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{display:none}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer>a,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>a{inline-size:auto}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]{padding-block-end:max(1rem,env(safe-area-inset-bottom));--tui-from: translateY(4rem)}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{align-self:flex-start;block-size:3.5rem;margin-block-end:1rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{margin:calc(-1*env(safe-area-inset-top)) -1rem 1rem;padding-block-start:env(safe-area-inset-top);box-sizing:content-box}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{margin:-.25rem 0 1.5rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{padding:0 1rem max(1rem,env(safe-area-inset-bottom));margin:1.5rem -1rem calc(-1*max(1rem,env(safe-area-inset-bottom)))}[data-platform=ios] tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX][tuiButtonX]{block-size:2.75rem}\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],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonX, selector: "[tuiButtonX]" }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDialogComponent, isStandalone: true, selector: "tui-dialog", host: { attributes: { "data-tui-version": "5.24.0" }, properties: { "attr.data-appearance": "context.appearance", "attr.data-size": "context.size", "class._closable": "context.closable", "class.tui-backdrop-hidden": "context.appearance.includes(\"fullscreen\")" } }, providers: [TuiDialogCloseService], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "@if (context.closable) {\n    <button\n        tabindex=\"0\"\n        tuiButtonX\n        [appearance]=\"context.appearance.includes('fullscreen') ? 'action' : 'neutral'\"\n        (click)=\"close$.next()\"\n    >\n        {{ close() }}\n    </button>\n}\n\n@if (!primitive && context.label) {\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n        </hgroup>\n    </header>\n}\n\n<ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n            <p [innerHTML]=\"text\"></p>\n        </hgroup>\n    </header>\n    @if (context.closable || context.dismissible) {\n        <footer>\n            <button\n                size=\"m\"\n                tuiAutoFocus\n                tuiButton\n                type=\"button\"\n                (click)=\"context.$implicit.complete()\"\n            >\n                {{ context.data || 'OK' }}\n            </button>\n        </footer>\n    }\n</ng-container>\n", styles: ["tui-dialog:where(*[data-tui-version=\"5.24.0\"]){position:relative;box-sizing:border-box;overflow-wrap:break-word;font:var(--tui-typography-body-m);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-popup)}tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header{padding-inline-end:2.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>header p,tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header p{margin-inline-end:-2.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header [tuiTitle],tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header [tuiTitle]{font:inherit}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header p,tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header p{margin:.25rem 0 0;font:var(--tui-typography-body-m)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header p:empty,tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header p:empty{display:none}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>[tuiButtonX]{position:absolute;z-index:1;inset-block-start:1rem;inset-inline-end:1rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga]{max-inline-size:calc(100vw - 5rem);margin:2.5rem;padding:1.75rem;border-radius:1.5rem;--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga].tui-enter,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]{inline-size:25rem;padding:1.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.25rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>footer,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>footer{margin-block-start:1.25rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m],tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]{inline-size:37.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h4)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]{inline-size:50rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga]>footer,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga]>ng-component>footer{display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:.75rem;margin-block-start:2rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]{display:flex;flex-direction:column;block-size:100%;inline-size:100%;max-inline-size:100vw;padding:env(safe-area-inset-top) max(calc(50vw - var(--tui-width) / 2),1rem) max(2rem,env(safe-area-inset-bottom));background:var(--tui-background-base);box-shadow:none;--tui-width: min(45rem, 100vw);--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size].tui-enter,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{position:sticky;inset-block-start:env(safe-area-inset-top);block-size:4rem;inline-size:auto;align-self:flex-end;margin-block-end:2rem;border-radius:0!important;font:var(--tui-typography-body-l)!important;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0 / 0 / env(safe-area-inset-top) 100vw 0}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]:before{display:none}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size].tui-app-bar>[tuiButtonX]{display:none}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]:not(._closable):not(.tui-app-bar):before{content:\"\";block-size:1.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{position:sticky;z-index:1;inset-block-start:0;order:-1;border-inline-end:calc(50vw - var(--tui-width) / 2) solid transparent;border-inline-start:calc(50vw - var(--tui-width) / 2) solid transparent;margin:0 calc(var(--tui-width) / 2 - 50vw) 2rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar[data-size=l],tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar[data-size=l]{border-width:max(calc(50vw - var(--tui-width) / 2),1rem)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h3);margin-block-end:2rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{display:flex;gap:.5rem .75rem;padding:2rem calc(50vw - var(--tui-width) / 2);margin:0 calc(var(--tui-width) / 2 - 50vw) calc(-2rem - env(safe-area-inset-top))}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{inset-inline-start:0;inset-inline-end:0}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{flex-direction:row;background:color-mix(in hsl,var(--tui-background-base) 80%,transparent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{display:none}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer>a,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>a{inline-size:auto}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]{padding-block-end:max(1rem,env(safe-area-inset-bottom));--tui-from: translateY(4rem)}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{align-self:flex-start;block-size:3.5rem;margin-block-end:1rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{margin:calc(-1*env(safe-area-inset-top)) -1rem 1rem;padding-block-start:env(safe-area-inset-top);box-sizing:content-box}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{margin:-.25rem 0 1.5rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{padding:0 1rem max(1rem,env(safe-area-inset-bottom));margin:1.5rem -1rem calc(-1*max(1rem,env(safe-area-inset-bottom)))}[data-platform=ios] tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX][tuiButtonX]{block-size:2.75rem}\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],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonX, selector: "[tuiButtonX]" }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDialogComponent, decorators: [{
             type: Component,
@@ -105,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         '[attr.data-size]': 'context.size',
                         '[class._closable]': 'context.closable',
                         '[class.tui-backdrop-hidden]': 'context.appearance.includes("fullscreen")',
-                    }, template: "@if (context.closable) {\n    <button\n        tabindex=\"0\"\n        tuiButtonX\n        [appearance]=\"context.appearance.includes('fullscreen') ? 'action' : 'neutral'\"\n        (click)=\"close$.next()\"\n    >\n        {{ close() }}\n    </button>\n}\n\n@if (!primitive && context.label) {\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n        </hgroup>\n    </header>\n}\n\n<ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n            <p [innerHTML]=\"text\"></p>\n        </hgroup>\n    </header>\n    @if (context.closable || context.dismissible) {\n        <footer>\n            <button\n                size=\"m\"\n                tuiAutoFocus\n                tuiButton\n                type=\"button\"\n                (click)=\"context.$implicit.complete()\"\n            >\n                {{ context.data || 'OK' }}\n            </button>\n        </footer>\n    }\n</ng-container>\n", styles: ["tui-dialog:where(*[data-tui-version=\"5.23.0\"]){position:relative;box-sizing:border-box;overflow-wrap:break-word;font:var(--tui-typography-body-m);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-popup)}tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header{padding-inline-end:2.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>header p,tui-dialog:where(*[data-tui-version=\"5.23.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header p{margin-inline-end:-2.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header [tuiTitle],tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header [tuiTitle]{font:inherit}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header p,tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header p{margin:.25rem 0 0;font:var(--tui-typography-body-m)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>header p:empty,tui-dialog:where(*[data-tui-version=\"5.23.0\"])>ng-component>header p:empty{display:none}tui-dialog:where(*[data-tui-version=\"5.23.0\"])>[tuiButtonX]{position:absolute;z-index:1;inset-block-start:1rem;inset-inline-end:1rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga]{max-inline-size:calc(100vw - 5rem);margin:2.5rem;padding:1.75rem;border-radius:1.5rem;--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga].tui-enter,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]{inline-size:25rem;padding:1.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.25rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>footer,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=s]>ng-component>footer{margin-block-start:1.25rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m],tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]{inline-size:37.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h4)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga][data-size=l]{inline-size:50rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga]>footer,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=taiga]>ng-component>footer{display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:.75rem;margin-block-start:2rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]{display:flex;flex-direction:column;block-size:100%;inline-size:100%;max-inline-size:100vw;padding:env(safe-area-inset-top) max(calc(50vw - var(--tui-width) / 2),1rem) max(2rem,env(safe-area-inset-bottom));background:var(--tui-background-base);box-shadow:none;--tui-width: min(45rem, 100vw);--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size].tui-enter,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{position:sticky;inset-block-start:env(safe-area-inset-top);block-size:4rem;inline-size:auto;align-self:flex-end;margin-block-end:2rem;border-radius:0!important;font:var(--tui-typography-body-l)!important;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0 / 0 / env(safe-area-inset-top) 100vw 0}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]:before{display:none}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size].tui-app-bar>[tuiButtonX]{display:none}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]:not(._closable):not(.tui-app-bar):before{content:\"\";block-size:1.5rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{position:sticky;z-index:1;inset-block-start:0;order:-1;border-inline-end:calc(50vw - var(--tui-width) / 2) solid transparent;border-inline-start:calc(50vw - var(--tui-width) / 2) solid transparent;margin:0 calc(var(--tui-width) / 2 - 50vw) 2rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar[data-size=l],tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar[data-size=l]{border-width:max(calc(50vw - var(--tui-width) / 2),1rem)}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h3);margin-block-end:2rem}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{display:flex;gap:.5rem .75rem;padding:2rem calc(50vw - var(--tui-width) / 2);margin:0 calc(var(--tui-width) / 2 - 50vw) calc(-2rem - env(safe-area-inset-top))}tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{inset-inline-start:0;inset-inline-end:0}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{flex-direction:row;background:color-mix(in hsl,var(--tui-background-base) 80%,transparent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{display:none}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer>a,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>a{inline-size:auto}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]{padding-block-end:max(1rem,env(safe-area-inset-bottom));--tui-from: translateY(4rem)}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{align-self:flex-start;block-size:3.5rem;margin-block-end:1rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{margin:calc(-1*env(safe-area-inset-top)) -1rem 1rem;padding-block-start:env(safe-area-inset-top);box-sizing:content-box}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{margin:-.25rem 0 1.5rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{padding:0 1rem max(1rem,env(safe-area-inset-bottom));margin:1.5rem -1rem calc(-1*max(1rem,env(safe-area-inset-bottom)))}[data-platform=ios] tui-dialog:where(*[data-tui-version=\"5.23.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX][tuiButtonX]{block-size:2.75rem}\n"] }]
+                    }, template: "@if (context.closable) {\n    <button\n        tabindex=\"0\"\n        tuiButtonX\n        [appearance]=\"context.appearance.includes('fullscreen') ? 'action' : 'neutral'\"\n        (click)=\"close$.next()\"\n    >\n        {{ close() }}\n    </button>\n}\n\n@if (!primitive && context.label) {\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n        </hgroup>\n    </header>\n}\n\n<ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n    <header>\n        <hgroup tuiTitle>\n            <h2\n                [id]=\"context.id\"\n                [innerHTML]=\"context.label\"\n            ></h2>\n            <p [innerHTML]=\"text\"></p>\n        </hgroup>\n    </header>\n    @if (context.closable || context.dismissible) {\n        <footer>\n            <button\n                size=\"m\"\n                tuiAutoFocus\n                tuiButton\n                type=\"button\"\n                (click)=\"context.$implicit.complete()\"\n            >\n                {{ context.data || 'OK' }}\n            </button>\n        </footer>\n    }\n</ng-container>\n", styles: ["tui-dialog:where(*[data-tui-version=\"5.24.0\"]){position:relative;box-sizing:border-box;overflow-wrap:break-word;font:var(--tui-typography-body-m);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-popup)}tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header{padding-inline-end:2.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>header p,tui-dialog:where(*[data-tui-version=\"5.24.0\"]):not([data-appearance~=fullscreen])._closable>ng-component>header p{margin-inline-end:-2.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header [tuiTitle],tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header [tuiTitle]{font:inherit}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header p,tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header p{margin:.25rem 0 0;font:var(--tui-typography-body-m)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>header p:empty,tui-dialog:where(*[data-tui-version=\"5.24.0\"])>ng-component>header p:empty{display:none}tui-dialog:where(*[data-tui-version=\"5.24.0\"])>[tuiButtonX]{position:absolute;z-index:1;inset-block-start:1rem;inset-inline-end:1rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga]{max-inline-size:calc(100vw - 5rem);margin:2.5rem;padding:1.75rem;border-radius:1.5rem;--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga].tui-enter,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]{inline-size:25rem;padding:1.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h5)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.25rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>footer,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=s]>ng-component>footer{margin-block-start:1.25rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m],tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]{inline-size:37.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h4)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=m]>ng-component>[tuiSlides]>*>header:not(:last-child),tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]>ng-component>[tuiSlides]>*>header:not(:last-child){margin-block-end:1.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga][data-size=l]{inline-size:50rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga]>footer,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=taiga]>ng-component>footer{display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:.75rem;margin-block-start:2rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]{display:flex;flex-direction:column;block-size:100%;inline-size:100%;max-inline-size:100vw;padding:env(safe-area-inset-top) max(calc(50vw - var(--tui-width) / 2),1rem) max(2rem,env(safe-area-inset-bottom));background:var(--tui-background-base);box-shadow:none;--tui-width: min(45rem, 100vw);--tui-from: translateY(2rem)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size].tui-enter,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size].tui-leave{animation-name:tuiFade,tuiSlide}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{position:sticky;inset-block-start:env(safe-area-inset-top);block-size:4rem;inline-size:auto;align-self:flex-end;margin-block-end:2rem;border-radius:0!important;font:var(--tui-typography-body-l)!important;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0 / 0 / env(safe-area-inset-top) 100vw 0}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]:before{display:none}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size].tui-app-bar>[tuiButtonX]{display:none}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]:not(._closable):not(.tui-app-bar):before{content:\"\";block-size:1.5rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{position:sticky;z-index:1;inset-block-start:0;order:-1;border-inline-end:calc(50vw - var(--tui-width) / 2) solid transparent;border-inline-start:calc(50vw - var(--tui-width) / 2) solid transparent;margin:0 calc(var(--tui-width) / 2 - 50vw) 2rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar[data-size=l],tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar[data-size=l]{border-width:max(calc(50vw - var(--tui-width) / 2),1rem)}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{font:var(--tui-typography-heading-h3);margin-block-end:2rem}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{display:flex;gap:.5rem .75rem;padding:2rem calc(50vw - var(--tui-width) / 2);margin:0 calc(var(--tui-width) / 2 - 50vw) calc(-2rem - env(safe-area-inset-top))}tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{inset-inline-start:0;inset-inline-end:0}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{flex-direction:row;background:color-mix(in hsl,var(--tui-background-base) 80%,transparent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer:before,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer:before{display:none}tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>button,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer>a,tui-root:not(._mobile) tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer>a{inline-size:auto}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]{padding-block-end:max(1rem,env(safe-area-inset-bottom));--tui-from: translateY(4rem)}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX]{align-self:flex-start;block-size:3.5rem;margin-block-end:1rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>tui-app-bar,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>tui-app-bar{margin:calc(-1*env(safe-area-inset-top)) -1rem 1rem;padding-block-start:env(safe-area-inset-top);box-sizing:content-box}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiSlides]>*>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>header,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>[tuiSlides]>*>header{margin:-.25rem 0 1.5rem}tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>footer,tui-root._mobile tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>ng-component>footer{padding:0 1rem max(1rem,env(safe-area-inset-bottom));margin:1.5rem -1rem calc(-1*max(1rem,env(safe-area-inset-bottom)))}[data-platform=ios] tui-dialog:where(*[data-tui-version=\"5.24.0\"])[data-appearance~=fullscreen][data-size]>[tuiButtonX][tuiButtonX]{block-size:2.75rem}\n"] }]
         }] });
 
 const [TUI_DIALOG_OPTIONS, tuiDialogOptionsProvider] = tuiCreateOptions({

package/fesm2022/taiga-ui-core-portals-dropdown.mjs

@@ -1,7 +1,7 @@
 import { tuiProvide, tuiDirectiveBinding, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { coerceArray } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, forwardRef, computed, ChangeDetectionStrategy, Component, input, effect, INJECTOR, ChangeDetectorRef, signal, TemplateRef, ElementRef, contentChild, model, PLATFORM_ID, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, forwardRef, computed, ChangeDetectionStrategy, Component, input, effect, ElementRef, INJECTOR, ChangeDetectorRef, signal, TemplateRef, contentChild, model, PLATFORM_ID, ViewContainerRef, afterNextRender } from '@angular/core';
 import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { tuiZonefreeScheduler, tuiIfMap, tuiCloseWatcher, tuiTypedFromEvent, tuiStopPropagation, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement, tuiGetActualTarget, tuiIsElement, tuiIsElementEditable, tuiIsHTMLElement, tuiPointToClientRect, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
@@ -172,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         }] });
 
 const MAX_WIDTH_GAP = 16; // 8px min gap from each side
-class TuiDropdownAnchor {
+class TuiDropdownAnchored {
     constructor() {
         this.el = tuiInjectElement();
         this.directive = inject(TuiDropdownDirective);
@@ -215,14 +215,14 @@ class TuiDropdownAnchor {
             maxWidth: tuiPx(Math.round(viewport.width / zoom) - MAX_WIDTH_GAP),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchor, isStandalone: true, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchored, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchored, isStandalone: true, providers: [
             TuiPositionService,
             tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
             tuiRectAccessorFor('dropdown', forwardRef(() => TuiDropdownDirective)),
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchored, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -248,11 +248,11 @@ class TuiDropdownComponent {
         this.close = () => this.directive.toggle(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }, { directive: TuiDropdownAnchor }], ngImport: i0, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive.content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-1);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide;animation-duration:calc(var(--tui-duration) / 2);pointer-events:none}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.t-primitive{padding:1rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }, { directive: TuiDropdownAnchored }], ngImport: i0, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive.content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-1);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide;animation-duration:calc(var(--tui-duration) / 2);pointer-events:none}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.t-primitive{padding:1rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollbar], changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiActiveZone, TuiAnimated, TuiDropdownAnchor], host: {
+            args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollbar], changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiActiveZone, TuiAnimated, TuiDropdownAnchored], host: {
                         '[attr.data-appearance]': 'options.appearance',
                         '[attr.tuiTheme]': 'theme()',
                     }, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive.content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-1);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide;animation-duration:calc(var(--tui-duration) / 2);pointer-events:none}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:calc(100% + 2px);inline-size:max-content;overscroll-behavior:none;margin:-1px}.t-primitive{padding:1rem}\n"] }]
@@ -264,6 +264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 const TUI_DROPDOWN_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_COMPONENT' : '', { factory: () => TuiDropdownComponent });
 const TUI_DROPDOWN_CONTEXT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_CONTEXT' : '');
 const TUI_DROPDOWN_HOST = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_HOST' : '');
+const TUI_DROPDOWN_ANCHOR = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_ANCHOR' : '');
 
 class TuiDropdownA11y {
     constructor() {
@@ -296,6 +297,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: '[tuiDropdownA11y]' }]
         }] });
 
+class TuiDropdownAnchor {
+    constructor() {
+        this.anchor = `--${tuiGenerateId()}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiDropdownAnchor, isStandalone: true, host: { properties: { "attr.data-tui-anchor": "anchor", "style.anchor-name": "anchor" } }, providers: [
+            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, ElementRef),
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, ElementRef),
+                    ],
+                    host: {
+                        '[attr.data-tui-anchor]': 'anchor',
+                        '[style.anchor-name]': 'anchor',
+                    },
+                }]
+        }] });
+
 class TuiDropdownDirective {
     constructor() {
         this.injector = inject(INJECTOR);
@@ -357,21 +382,16 @@ class TuiDropdownDirective {
         this.drivers.forEach((driver) => driver?.next(show));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [
-            tuiAsVehicle(TuiDropdownDirective),
-            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
-        ], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiDropdown", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownAnchor }, { directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiDropdown]:not(ng-container):not(ng-template)',
-                    providers: [
-                        tuiAsVehicle(TuiDropdownDirective),
-                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
-                    ],
+                    providers: [tuiAsVehicle(TuiDropdownDirective)],
                     exportAs: 'tuiDropdown',
                     hostDirectives: [
+                        TuiDropdownAnchor,
                         TuiDropdownDriverDirective,
                         { directive: TuiDropdownA11y, inputs: ['tuiDropdownRole'] },
                         {
@@ -558,6 +578,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: 'ng-template[tuiDropdown]' }]
         }], ctorParameters: () => [] });
 
+const STYLE = {
+    position: 'fixed',
+    blockSize: '1px',
+    inlineSize: '1px',
+    pointerEvents: 'none',
+};
 class TuiDropdownContext extends TuiRectAccessor {
     constructor() {
         super(...arguments);
@@ -580,12 +606,27 @@ class TuiDropdownContext extends TuiRectAccessor {
             this.currentRect = EMPTY_CLIENT_RECT;
         });
         this.type = 'dropdown';
+        this.nativeElement = this.doc.createElement('div');
+    }
+    ngAfterViewInit() {
+        const anchorName = `--${tuiGenerateId()}`;
+        const positionAnchor = this.el.getAttribute('data-tui-anchor');
+        const style = { ...STYLE, positionAnchor, anchorName };
+        Object.assign(this.nativeElement.style, style);
+        this.nativeElement.setAttribute('data-tui-anchor', anchorName);
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
     }
     getClientRect() {
         return this.currentRect;
     }
     onContextMenu(x, y) {
+        const { top, left } = this.el.getBoundingClientRect();
         this.currentRect = tuiPointToClientRect(x, y);
+        this.nativeElement.style.top = `calc(anchor(top) + ${y - top}px)`;
+        this.nativeElement.style.left = `calc(anchor(left) + ${x - left}px)`;
+        this.doc.body.appendChild(this.nativeElement);
         this.driver.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownContext, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
@@ -594,6 +635,7 @@ class TuiDropdownContext extends TuiRectAccessor {
             TuiDropdownDriver,
             tuiAsDriver(TuiDropdownDriver),
             tuiAsRectAccessor(TuiDropdownContext),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownContext),
         ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownContext, decorators: [{
@@ -605,6 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TuiDropdownDriver,
                         tuiAsDriver(TuiDropdownDriver),
                         tuiAsRectAccessor(TuiDropdownContext),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownContext),
                     ],
                     host: {
                         '[style.-webkit-touch-callout]': 'userSelect()',
@@ -802,16 +845,35 @@ class TuiDropdownSelection extends TuiDriver {
             const contained = this.el.contains(range.commonAncestorContainer);
             const valid = contained && handler(this.range);
             const visible = valid || this.inDropdown(range);
-            const active = tuiGetFocused(this.doc);
-            const textfield = active && tuiIsTextfield(active) && this.el.contains(active);
+            const focus = tuiGetFocused(this.doc);
+            const textfield = focus && tuiIsTextfield(focus) && this.el.contains(focus);
+            this.updateAnchor();
             return visible && textfield ? this.isCaretVisible(this.range) : visible;
         }));
         this.range = isPlatformBrowser(inject(PLATFORM_ID))
             ? new Range()
             : {};
         this.type = 'dropdown';
+        this.nativeElement = this.doc.createElement('div');
         this.tuiDropdownSelection = input('');
         this.tuiDropdownSelectionPosition = input('selection');
+        afterNextRender(() => {
+            const anchorName = `--${tuiGenerateId()}`;
+            Object.assign(this.nativeElement.style, {
+                position: 'fixed',
+                pointerEvents: 'none',
+                positionAnchor: this.el.dataset.tuiAnchor,
+                anchorName,
+            });
+            this.nativeElement.dataset.tuiAnchor = anchorName;
+            this.doc.body.appendChild(this.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.nativeElement.parentNode?.removeChild(this.nativeElement);
+        if (this.ghost) {
+            this.ghostHost.removeChild(this.ghost);
+        }
     }
     getClientRect() {
         switch (this.tuiDropdownSelectionPosition()) {
@@ -830,11 +892,6 @@ class TuiDropdownSelection extends TuiDriver {
                 return this.range.getBoundingClientRect();
         }
     }
-    ngOnDestroy() {
-        if (this.ghost) {
-            this.ghostHost.removeChild(this.ghost);
-        }
-    }
     get ghostHost() {
         return this.el.querySelector('tui-textfield .t-ghost') || this.el;
     }
@@ -917,10 +974,21 @@ class TuiDropdownSelection extends TuiDriver {
         const threshold = lineHeight * 0.5;
         return visibleHeight >= threshold;
     }
+    updateAnchor() {
+        const rect = this.getClientRect();
+        const { top, left } = this.el.getBoundingClientRect();
+        Object.assign(this.nativeElement.style, {
+            top: `calc(anchor(top) + ${rect.top - top}px)`,
+            left: `calc(anchor(left) + ${rect.left - left}px)`,
+            blockSize: tuiPx(rect.height),
+            inlineSize: tuiPx(rect.width),
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiDropdownSelection, isStandalone: true, selector: "[tuiDropdownSelection]", inputs: { tuiDropdownSelection: { classPropertyName: "tuiDropdownSelection", publicName: "tuiDropdownSelection", isSignal: true, isRequired: false, transformFunction: null }, tuiDropdownSelectionPosition: { classPropertyName: "tuiDropdownSelectionPosition", publicName: "tuiDropdownSelectionPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             tuiAsDriver(TuiDropdownSelection),
             tuiAsRectAccessor(TuiDropdownSelection),
+            tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownSelection),
         ], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDropdownSelection, decorators: [{
@@ -930,6 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     providers: [
                         tuiAsDriver(TuiDropdownSelection),
                         tuiAsRectAccessor(TuiDropdownSelection),
+                        tuiProvide(TUI_DROPDOWN_ANCHOR, TuiDropdownSelection),
                     ],
                 }]
         }], ctorParameters: () => [] });
@@ -971,5 +1040,5 @@ const TuiDropdown = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAnchor, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_ANCHOR, TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAnchor, TuiDropdownAnchored, TuiDropdownAuto, TuiDropdownClose, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-portals-dropdown.mjs.map