@taiga-ui/core 4.52.0-canary.6043e8f → 4.52.0-canary.61fea47

package/fesm2022/taiga-ui-core-components-loader.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { TUI_IS_IOS } from '@taiga-ui/cdk/tokens';
 import { tuiIsSafari } from '@taiga-ui/cdk/utils/browser';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
 import { tuiSizeBigger } from '@taiga-ui/core/utils/miscellaneous';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 
 /** Default values for the loader options. */
 const TUI_LOADER_DEFAULT_OPTIONS = {
@@ -16,48 +16,30 @@ const TUI_LOADER_DEFAULT_OPTIONS = {
 /**
  * Default parameters for loader component
  */
-const TUI_LOADER_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_LOADER_OPTIONS' : '', {
-    factory: () => TUI_LOADER_DEFAULT_OPTIONS,
-});
-function tuiLoaderOptionsProvider(options) {
-    return tuiProvideOptions(TUI_LOADER_OPTIONS, options, TUI_LOADER_DEFAULT_OPTIONS);
-}
+const [TUI_LOADER_OPTIONS, tuiLoaderOptionsProvider] = tuiCreateOptions(TUI_LOADER_DEFAULT_OPTIONS);
 
 class TuiLoader {
     constructor() {
         this.isIOS = inject(TUI_IS_IOS);
         this.options = inject(TUI_LOADER_OPTIONS);
         this.isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;
-        this.size = this.options.size;
-        this.inheritColor = this.options.inheritColor;
-        this.overlay = this.options.overlay;
-        // TODO: Drop alias in v5
-        this.loading = true;
-    }
-    get isHorizontal() {
-        return !tuiSizeBigger(this.size);
+        this.isHorizontal = computed(() => !tuiSizeBigger(this.size()));
+        this.size = input(this.options.size);
+        this.inheritColor = input(this.options.inheritColor);
+        this.overlay = input(this.options.overlay);
+        this.textContent = input();
+        this.loading = input(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiLoader, isStandalone: true, selector: "tui-loader", inputs: { size: "size", inheritColor: "inheritColor", overlay: "overlay", textContent: "textContent", loading: ["showLoader", "loading"] }, host: { properties: { "class._loading": "loading", "attr.data-size": "size" } }, ngImport: i0, template: "<fieldset\n    class=\"t-content\"\n    [attr.inert]=\"loading || null\"\n    [class.t-content_has-overlay]=\"overlay && loading\"\n    [class.t-content_loading]=\"loading\"\n    [disabled]=\"loading && !isApple\"\n>\n    <ng-content />\n</fieldset>\n\n@if (loading) {\n    <div\n        class=\"t-loader\"\n        [class.t-loader_horizontal]=\"isHorizontal\"\n        [class.t-loader_inherit-color]=\"inheritColor\"\n    >\n        <svg\n            automation-id=\"tui-loader__loader\"\n            focusable=\"false\"\n            height=\"100%\"\n            width=\"100%\"\n            class=\"t-icon\"\n        >\n            <circle\n                cx=\"50%\"\n                cy=\"50%\"\n                class=\"t-circle\"\n            />\n        </svg>\n        @if (textContent) {\n            <div\n                automation-id=\"tui-loader__text\"\n                class=\"t-text\"\n                [class.t-text_horizontal]=\"isHorizontal\"\n            >\n                <ng-container *polymorpheusOutlet=\"textContent as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:.25rem calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiLoader, isStandalone: true, selector: "tui-loader", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inheritColor: { classPropertyName: "inheritColor", publicName: "inheritColor", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, textContent: { classPropertyName: "textContent", publicName: "textContent", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class._loading": "loading()", "attr.data-size": "size()" } }, ngImport: i0, template: "<fieldset\n    class=\"t-content\"\n    [attr.inert]=\"loading() || null\"\n    [class.t-content_has-overlay]=\"overlay() && loading()\"\n    [class.t-content_loading]=\"loading()\"\n    [disabled]=\"loading() && !isApple\"\n>\n    <ng-content />\n</fieldset>\n\n@if (loading()) {\n    <div\n        class=\"t-loader\"\n        [class.t-loader_horizontal]=\"isHorizontal()\"\n        [class.t-loader_inherit-color]=\"inheritColor()\"\n    >\n        <svg\n            automation-id=\"tui-loader__loader\"\n            focusable=\"false\"\n            height=\"100%\"\n            width=\"100%\"\n            class=\"t-icon\"\n        >\n            <circle\n                cx=\"50%\"\n                cy=\"50%\"\n                class=\"t-circle\"\n            />\n        </svg>\n        @if (textContent()) {\n            <div\n                automation-id=\"tui-loader__text\"\n                class=\"t-text\"\n                [class.t-text_horizontal]=\"isHorizontal()\"\n            >\n                <ng-container *polymorpheusOutlet=\"textContent() as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:0 calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLoader, decorators: [{
             type: Component,
             args: [{ selector: 'tui-loader', imports: [PolymorpheusOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class._loading]': 'loading',
-                        '[attr.data-size]': 'size',
-                    }, template: "<fieldset\n    class=\"t-content\"\n    [attr.inert]=\"loading || null\"\n    [class.t-content_has-overlay]=\"overlay && loading\"\n    [class.t-content_loading]=\"loading\"\n    [disabled]=\"loading && !isApple\"\n>\n    <ng-content />\n</fieldset>\n\n@if (loading) {\n    <div\n        class=\"t-loader\"\n        [class.t-loader_horizontal]=\"isHorizontal\"\n        [class.t-loader_inherit-color]=\"inheritColor\"\n    >\n        <svg\n            automation-id=\"tui-loader__loader\"\n            focusable=\"false\"\n            height=\"100%\"\n            width=\"100%\"\n            class=\"t-icon\"\n        >\n            <circle\n                cx=\"50%\"\n                cy=\"50%\"\n                class=\"t-circle\"\n            />\n        </svg>\n        @if (textContent) {\n            <div\n                automation-id=\"tui-loader__text\"\n                class=\"t-text\"\n                [class.t-text_horizontal]=\"isHorizontal\"\n            >\n                <ng-container *polymorpheusOutlet=\"textContent as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:.25rem calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], inheritColor: [{
-                type: Input
-            }], overlay: [{
-                type: Input
-            }], textContent: [{
-                type: Input
-            }], loading: [{
-                type: Input,
-                args: ['showLoader']
-            }] } });
+                        '[class._loading]': 'loading()',
+                        '[attr.data-size]': 'size()',
+                    }, template: "<fieldset\n    class=\"t-content\"\n    [attr.inert]=\"loading() || null\"\n    [class.t-content_has-overlay]=\"overlay() && loading()\"\n    [class.t-content_loading]=\"loading()\"\n    [disabled]=\"loading() && !isApple\"\n>\n    <ng-content />\n</fieldset>\n\n@if (loading()) {\n    <div\n        class=\"t-loader\"\n        [class.t-loader_horizontal]=\"isHorizontal()\"\n        [class.t-loader_inherit-color]=\"inheritColor()\"\n    >\n        <svg\n            automation-id=\"tui-loader__loader\"\n            focusable=\"false\"\n            height=\"100%\"\n            width=\"100%\"\n            class=\"t-icon\"\n        >\n            <circle\n                cx=\"50%\"\n                cy=\"50%\"\n                class=\"t-circle\"\n            />\n        </svg>\n        @if (textContent()) {\n            <div\n                automation-id=\"tui-loader__text\"\n                class=\"t-text\"\n                [class.t-text_horizontal]=\"isHorizontal()\"\n            >\n                <ng-container *polymorpheusOutlet=\"textContent() as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </div>\n}\n", styles: [":host{position:relative;display:flex;min-inline-size:1.5rem;--tui-thickness: calc(var(--t-diameter) / 12)}:host._loading{overflow:hidden}:host[data-size=xs]{--t-diameter: .75em}:host[data-size=s]{--t-diameter: 1em}:host[data-size=m]{--t-diameter: 1.5em}:host[data-size=l]{--t-diameter: 2.5em}:host[data-size=xl]{--t-diameter: 3.5em}:host[data-size=xxl]{--t-diameter: 5em}.t-content{z-index:0;min-inline-size:100%;block-size:100%;padding:0;margin:0;border:none}.t-content_has-overlay{opacity:.3}.t-content_loading{pointer-events:none}.t-loader{position:relative;left:-100%;display:flex;inset-inline-start:-100%;flex-direction:column;align-items:center;justify-content:center;min-inline-size:100%;min-block-size:var(--t-diameter);flex-shrink:0;align-self:center;color:var(--tui-text-primary);stroke:var(--tui-background-accent-1);animation:tuiFadeIn var(--tui-duration);font-size:1rem}.t-loader.t-loader_horizontal{flex-direction:row}.t-loader.t-loader_inherit-color{color:inherit;stroke:currentColor}.t-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-s);margin-block-start:1rem;color:inherit;max-inline-size:100%;text-align:center;stroke-width:0}.t-text_horizontal{margin:0;margin-inline-start:1rem}@keyframes tuiLoaderRotate{0%{transform:rotate(-90deg)}50%{transform:rotate(-90deg) rotate(1turn)}to{transform:rotate(-90deg) rotate(3turn)}}.t-icon{display:block;inline-size:var(--t-diameter);block-size:var(--t-diameter);margin:0 calc(var(--t-diameter) / -2);border-radius:100%;overflow:hidden;animation:tuiLoaderRotate 4s linear infinite}@supports (-webkit-hyphens: none){.t-icon{overflow:visible}}@keyframes tuiLoaderDashOffset{0%{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}50%{stroke-dashoffset:calc(.05 * calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness))))}to{stroke-dashoffset:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)))}}.t-circle{r:calc(var(--t-diameter) / 2 - var(--tui-thickness));stroke-dasharray:calc(2 * 3.14159265 * calc(var(--t-diameter) / 2 - var(--tui-thickness)));fill:none;stroke:inherit;stroke-width:max(var(--tui-thickness),1.5px);animation:tuiLoaderDashOffset 4s linear infinite}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/taiga-ui-core-components-loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-components-loader.mjs","sources":["../../../projects/core/components/loader/loader.options.ts","../../../projects/core/components/loader/loader.component.ts","../../../projects/core/components/loader/loader.template.html","../../../projects/core/components/loader/taiga-ui-core-components-loader.ts"],"sourcesContent":["import {InjectionToken, type Provider} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core/types';\n\nexport interface TuiLoaderOptions {\n    readonly inheritColor: boolean;\n    readonly overlay: boolean;\n    readonly size: TuiSizeXS | TuiSizeXXL;\n}\n\n/** Default values for the loader options. */\nexport const TUI_LOADER_DEFAULT_OPTIONS: TuiLoaderOptions = {\n    size: 'm',\n    inheritColor: false,\n    overlay: false,\n};\n\n/**\n * Default parameters for loader component\n */\nexport const TUI_LOADER_OPTIONS = new InjectionToken(\n    ngDevMode ? 'TUI_LOADER_OPTIONS' : '',\n    {\n        factory: () => TUI_LOADER_DEFAULT_OPTIONS,\n    },\n);\n\nexport function tuiLoaderOptionsProvider(options: Partial<TuiLoaderOptions>): Provider {\n    return tuiProvideOptions(TUI_LOADER_OPTIONS, options, TUI_LOADER_DEFAULT_OPTIONS);\n}\n","import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';\nimport {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';\nimport {tuiIsSafari} from '@taiga-ui/cdk/utils/browser';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';\nimport {type PolymorpheusContent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TUI_LOADER_OPTIONS} from './loader.options';\n\n@Component({\n    selector: 'tui-loader',\n    imports: [PolymorpheusOutlet],\n    templateUrl: './loader.template.html',\n    styleUrls: ['./loader.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[class._loading]': 'loading',\n        '[attr.data-size]': 'size',\n    },\n})\nexport class TuiLoader {\n    private readonly isIOS = inject(TUI_IS_IOS);\n    private readonly options = inject(TUI_LOADER_OPTIONS);\n    protected readonly isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;\n\n    @Input()\n    public size = this.options.size;\n\n    @Input()\n    public inheritColor = this.options.inheritColor;\n\n    @Input()\n    public overlay = this.options.overlay;\n\n    @Input()\n    public textContent: PolymorpheusContent;\n\n    // TODO: Drop alias in v5\n    @Input('showLoader')\n    public loading = true;\n\n    protected get isHorizontal(): boolean {\n        return !tuiSizeBigger(this.size);\n    }\n}\n","<fieldset\n    class=\"t-content\"\n    [attr.inert]=\"loading || null\"\n    [class.t-content_has-overlay]=\"overlay && loading\"\n    [class.t-content_loading]=\"loading\"\n    [disabled]=\"loading && !isApple\"\n>\n    <ng-content />\n</fieldset>\n\n@if (loading) {\n    <div\n        class=\"t-loader\"\n        [class.t-loader_horizontal]=\"isHorizontal\"\n        [class.t-loader_inherit-color]=\"inheritColor\"\n    >\n        <svg\n            automation-id=\"tui-loader__loader\"\n            focusable=\"false\"\n            height=\"100%\"\n            width=\"100%\"\n            class=\"t-icon\"\n        >\n            <circle\n                cx=\"50%\"\n                cy=\"50%\"\n                class=\"t-circle\"\n            />\n        </svg>\n        @if (textContent) {\n            <div\n                automation-id=\"tui-loader__text\"\n                class=\"t-text\"\n                [class.t-text_horizontal]=\"isHorizontal\"\n            >\n                <ng-container *polymorpheusOutlet=\"textContent as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAUA;AACa,MAAA,0BAA0B,GAAqB;AACxD,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,OAAO,EAAE,KAAK;;AAGlB;;AAEG;AACU,MAAA,kBAAkB,GAAG,IAAI,cAAc,CAChD,SAAS,GAAG,oBAAoB,GAAG,EAAE,EACrC;AACI,IAAA,OAAO,EAAE,MAAM,0BAA0B;AAC5C,CAAA;AAGC,SAAU,wBAAwB,CAAC,OAAkC,EAAA;IACvE,OAAO,iBAAiB,CAAC,kBAAkB,EAAE,OAAO,EAAE,0BAA0B,CAAC;AACrF;;MCTa,SAAS,CAAA;AAXtB,IAAA,WAAA,GAAA;AAYqB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1B,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC;QAClC,IAAO,CAAA,OAAA,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK;AAGnE,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AAGxB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY;AAGxC,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO;;QAO9B,IAAO,CAAA,OAAA,GAAG,IAAI;AAKxB;AAHG,IAAA,IAAc,YAAY,GAAA;AACtB,QAAA,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;;+GAtB3B,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,SAAA,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBtB,2oCA0CA,EAAA,MAAA,EAAA,CAAA,0sEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED/Bc,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,2BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FASnB,SAAS,EAAA,UAAA,EAAA,CAAA;kBAXrB,SAAS;+BACI,YAAY,EAAA,OAAA,EACb,CAAC,kBAAkB,CAAC,mBAGZ,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA;AACF,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,kBAAkB,EAAE,MAAM;AAC7B,qBAAA,EAAA,QAAA,EAAA,2oCAAA,EAAA,MAAA,EAAA,CAAA,0sEAAA,CAAA,EAAA;8BAQM,IAAI,EAAA,CAAA;sBADV;gBAIM,YAAY,EAAA,CAAA;sBADlB;gBAIM,OAAO,EAAA,CAAA;sBADb;gBAIM,WAAW,EAAA,CAAA;sBADjB;gBAKM,OAAO,EAAA,CAAA;sBADb,KAAK;uBAAC,YAAY;;;AEtCvB;;AAEG;;;;"}
+{"version":3,"file":"taiga-ui-core-components-loader.mjs","sources":["../../../projects/core/components/loader/loader.options.ts","../../../projects/core/components/loader/loader.component.ts","../../../projects/core/components/loader/loader.template.html","../../../projects/core/components/loader/taiga-ui-core-components-loader.ts"],"sourcesContent":["import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core/types';\n\nexport interface TuiLoaderOptions {\n    readonly inheritColor: boolean;\n    readonly overlay: boolean;\n    readonly size: TuiSizeXS | TuiSizeXXL;\n}\n\n/** Default values for the loader options. */\nexport const TUI_LOADER_DEFAULT_OPTIONS: TuiLoaderOptions = {\n    size: 'm',\n    inheritColor: false,\n    overlay: false,\n};\n\n/**\n * Default parameters for loader component\n */\nexport const [TUI_LOADER_OPTIONS, tuiLoaderOptionsProvider] = tuiCreateOptions(\n    TUI_LOADER_DEFAULT_OPTIONS,\n);\n","import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';\nimport {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';\nimport {tuiIsSafari} from '@taiga-ui/cdk/utils/browser';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';\nimport {type PolymorpheusContent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TUI_LOADER_OPTIONS} from './loader.options';\n\n@Component({\n    selector: 'tui-loader',\n    imports: [PolymorpheusOutlet],\n    templateUrl: './loader.template.html',\n    styleUrl: './loader.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[class._loading]': 'loading()',\n        '[attr.data-size]': 'size()',\n    },\n})\nexport class TuiLoader {\n    private readonly isIOS = inject(TUI_IS_IOS);\n    private readonly options = inject(TUI_LOADER_OPTIONS);\n    protected readonly isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;\n\n    protected readonly isHorizontal = computed(() => !tuiSizeBigger(this.size()));\n\n    public readonly size = input(this.options.size);\n\n    public readonly inheritColor = input(this.options.inheritColor);\n\n    public readonly overlay = input(this.options.overlay);\n\n    public readonly textContent = input<PolymorpheusContent>();\n\n    public readonly loading = input(true);\n}\n","<fieldset\n    class=\"t-content\"\n    [attr.inert]=\"loading() || null\"\n    [class.t-content_has-overlay]=\"overlay() && loading()\"\n    [class.t-content_loading]=\"loading()\"\n    [disabled]=\"loading() && !isApple\"\n>\n    <ng-content />\n</fieldset>\n\n@if (loading()) {\n    <div\n        class=\"t-loader\"\n        [class.t-loader_horizontal]=\"isHorizontal()\"\n        [class.t-loader_inherit-color]=\"inheritColor()\"\n    >\n        <svg\n            automation-id=\"tui-loader__loader\"\n            focusable=\"false\"\n            height=\"100%\"\n            width=\"100%\"\n            class=\"t-icon\"\n        >\n            <circle\n                cx=\"50%\"\n                cy=\"50%\"\n                class=\"t-circle\"\n            />\n        </svg>\n        @if (textContent()) {\n            <div\n                automation-id=\"tui-loader__text\"\n                class=\"t-text\"\n                [class.t-text_horizontal]=\"isHorizontal()\"\n            >\n                <ng-container *polymorpheusOutlet=\"textContent() as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        }\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-core-components-notification.mjs

@@ -1,13 +1,25 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, inject, Input, Directive } from '@angular/core';
-import { tuiWithStyles, tuiSetSignal, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
-import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
+import { InjectionToken, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, computed, input, Directive, Injectable } from '@angular/core';
+import { tuiWithStyles, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiButtonOptionsProvider, TuiButton } from '@taiga-ui/core/components/button';
 import { tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
 import * as i2 from '@taiga-ui/core/directives/appearance';
 import { tuiAppearanceOptionsProvider, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
 import * as i1 from '@taiga-ui/core/directives/icons';
-import { TuiIcons, TuiWithIcons } from '@taiga-ui/core/directives/icons';
+import { tuiIconStart, TuiWithIcons } from '@taiga-ui/core/directives/icons';
 import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import * as i1$2 from '@taiga-ui/cdk/portals';
+import { tuiAsPortal, TuiPortalDirective } from '@taiga-ui/cdk/portals';
+import * as i2$1 from '@taiga-ui/core/portals/alert';
+import { TuiAlertDirective, TuiAlertService } from '@taiga-ui/core/portals/alert';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@taiga-ui/cdk/directives/animated';
+import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
+import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
+import { TuiTitle } from '@taiga-ui/core/components/title';
+import { TUI_COMMON_ICONS, TUI_CLOSE_WORD } from '@taiga-ui/core/tokens';
+import { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
+import { of, switchMap, timer, EMPTY, takeUntil, fromEvent, repeat } from 'rxjs';
 
 const ICONS = {
     info: '@tui.info',
@@ -15,96 +27,126 @@ const ICONS = {
     negative: '@tui.circle-x',
     warning: '@tui.circle-alert',
     neutral: '@tui.info',
-    /* TODO @deprecated remove in v5 */
-    success: '@tui.circle-check',
-    /* TODO @deprecated remove in v5 */
-    error: '@tui.circle-x',
 };
-/** Default values for the notification options. */
 const TUI_NOTIFICATION_DEFAULT_OPTIONS = {
     appearance: 'info',
     icon: (appearance) => ICONS[appearance] ?? '',
     size: 'l',
+    data: undefined,
+    autoClose: 3000,
+    label: '',
+    closable: true,
+    block: 'start',
+    inline: 'end',
 };
-/**
- * Default parameters for notification alert component
- */
 const [TUI_NOTIFICATION_OPTIONS, tuiNotificationOptionsProvider] = tuiCreateOptions(TUI_NOTIFICATION_DEFAULT_OPTIONS);
+const TUI_NOTIFICATION_CONCURRENCY = new InjectionToken(ngDevMode ? 'TUI_NOTIFICATION_CONCURRENCY' : '', { factory: () => 5 });
 
-class TuiNotificationStyles {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiNotificationStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-notification" }, ngImport: i0, template: '', isInline: true, styles: ["tui-notification,[tuiNotification]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:block;max-block-size:100%;color:var(--tui-text-primary);padding:1rem;font:var(--tui-font-text-m);line-height:1.5rem;border-radius:var(--tui-radius-l);box-sizing:border-box;text-align:start;text-decoration:none;border-inline-start:var(--t-start) solid transparent;border-inline-end:var(--t-end) solid transparent;--t-start: 0;--t-end: 0}tui-notification[style*=\"--t-icon-start:\"],[tuiNotification][style*=\"--t-icon-start:\"]{--t-start: 2rem}tui-notification[style*=\"--t-icon-end:\"],[tuiNotification][style*=\"--t-icon-end:\"]{--t-end: 1.5rem}tui-notification:before,[tuiNotification]:before{position:absolute;left:-1rem;inset-inline-start:-1rem}tui-notification:after,[tuiNotification]:after{position:absolute;top:50%;transform:translateY(-50%);right:-.5rem;font-size:1rem;margin:0;margin-inline-end:-.25rem;margin-inline-start:auto;color:var(--tui-text-tertiary)!important}@supports (inset-inline-end: 0){tui-notification:after,[tuiNotification]:after{right:unset;inset-inline-end:-.5rem}}tui-notification[data-size=s],[tuiNotification][data-size=s]{padding:.375rem .625rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=s][style*=\"--t-icon-start:\"],[tuiNotification][data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.5rem}tui-notification[data-size=s]:before,[tuiNotification][data-size=s]:before{top:.5rem;left:-.875rem;inset-inline-start:-.875rem;font-size:1rem}tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:-.875rem}@supports (inset-inline-end: 0){tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:unset;inset-inline-end:-.875rem}}tui-notification[data-size=s] tui-icon,[tuiNotification][data-size=s] tui-icon{font-size:1rem}tui-notification[data-size=s] [tuiTitle],[tuiNotification][data-size=s] [tuiTitle]{font:var(--tui-font-text-s);font-weight:700}tui-notification[data-size=s] [tuiSubtitle],[tuiNotification][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=s] [tuiSubtitle]+*,[tuiNotification][data-size=s] [tuiSubtitle]+*{gap:1rem;margin:.375rem 0 .25rem}tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{top:0;right:0}@supports (inset-inline-end: 0){tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{right:unset;inset-inline-end:0}}tui-notification[data-size=m],[tuiNotification][data-size=m]{padding:.75rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=m][style*=\"--t-icon-start:\"],[tuiNotification][data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.625rem}tui-notification[data-size=m]:before,[tuiNotification][data-size=m]:before{left:-.875rem;inset-inline-start:-.875rem;font-size:1.25rem}tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:-.75rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:unset;inset-inline-end:-.75rem}}tui-notification[data-size=m] tui-icon,[tuiNotification][data-size=m] tui-icon{font-size:1.25rem}tui-notification[data-size=m] [tuiTitle],[tuiNotification][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-m);font-weight:700}tui-notification[data-size=m] [tuiSubtitle],[tuiNotification][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=m] [tuiSubtitle]+*,[tuiNotification][data-size=m] [tuiSubtitle]+*{gap:1rem;margin:.625rem 0 .25rem}tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{top:.375rem;right:.5rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{right:unset;inset-inline-end:.5rem}}tui-notification [tuiTitle],[tuiNotification] [tuiTitle]{gap:.125rem;font:var(--tui-font-text-ui-l);font-weight:700}tui-notification [tuiSubtitle],[tuiNotification] [tuiSubtitle]{font:var(--tui-font-text-m)}tui-notification [tuiSubtitle]+*,[tuiNotification] [tuiSubtitle]+*{display:flex;align-items:center;gap:1.25rem;margin-block-start:.625rem;font:var(--tui-font-text-s)}tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{position:absolute;top:.75rem;right:.75rem;box-shadow:none!important;background:transparent!important}@supports (inset-inline-end: 0){tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{right:unset;inset-inline-end:.75rem}}[tuiNotification]{cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class Styles {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: Styles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-notification" }, ngImport: i0, template: '', isInline: true, styles: ["tui-notification,[tuiNotification]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:block;max-block-size:100%;color:var(--tui-text-primary);padding:1rem;font:var(--tui-font-text-m);line-height:1.5rem;border-radius:var(--tui-radius-l);box-sizing:border-box;text-align:start;text-decoration:none;border-inline-start:var(--t-start) solid transparent;border-inline-end:var(--t-end) solid transparent;--t-start: 0;--t-end: 0}tui-notification[style*=\"--t-icon-start:\"],[tuiNotification][style*=\"--t-icon-start:\"]{--t-start: 2rem}tui-notification[style*=\"--t-icon-end:\"],[tuiNotification][style*=\"--t-icon-end:\"]{--t-end: 1.5rem}tui-notification:before,[tuiNotification]:before{position:absolute;left:-1rem;inset-inline-start:-1rem}tui-notification:after,[tuiNotification]:after{position:absolute;top:50%;transform:translateY(-50%);right:-.5rem;font-size:1rem;margin:0;margin-inline-end:-.25rem;margin-inline-start:auto;color:var(--tui-text-tertiary)!important}@supports (inset-inline-end: 0){tui-notification:after,[tuiNotification]:after{right:unset;inset-inline-end:-.5rem}}tui-notification[data-size=s],[tuiNotification][data-size=s]{padding:.375rem .625rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=s][style*=\"--t-icon-start:\"],[tuiNotification][data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.5rem}tui-notification[data-size=s]:before,[tuiNotification][data-size=s]:before{top:.5rem;left:-.875rem;inset-inline-start:-.875rem;font-size:1rem}tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:-.875rem}@supports (inset-inline-end: 0){tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:unset;inset-inline-end:-.875rem}}tui-notification[data-size=s] tui-icon,[tuiNotification][data-size=s] tui-icon{font-size:1rem}tui-notification[data-size=s] [tuiTitle],[tuiNotification][data-size=s] [tuiTitle]{font:var(--tui-font-text-s);font-weight:700}tui-notification[data-size=s] [tuiSubtitle],[tuiNotification][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=s] [tuiSubtitle]+*,[tuiNotification][data-size=s] [tuiSubtitle]+*{gap:1rem;margin:.375rem 0 .25rem}tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{top:0;right:0}@supports (inset-inline-end: 0){tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{right:unset;inset-inline-end:0}}tui-notification[data-size=m],[tuiNotification][data-size=m]{padding:.75rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=m][style*=\"--t-icon-start:\"],[tuiNotification][data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.625rem}tui-notification[data-size=m]:before,[tuiNotification][data-size=m]:before{left:-.875rem;inset-inline-start:-.875rem;font-size:1.25rem}tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:-.75rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:unset;inset-inline-end:-.75rem}}tui-notification[data-size=m] tui-icon,[tuiNotification][data-size=m] tui-icon{font-size:1.25rem}tui-notification[data-size=m] [tuiTitle],[tuiNotification][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-m);font-weight:700}tui-notification[data-size=m] [tuiSubtitle],[tuiNotification][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=m] [tuiSubtitle]+*,[tuiNotification][data-size=m] [tuiSubtitle]+*{gap:1rem;margin:.625rem 0 .25rem}tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{top:.375rem;right:.5rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{right:unset;inset-inline-end:.5rem}}tui-notification [tuiTitle],[tuiNotification] [tuiTitle]{gap:.125rem;font:var(--tui-font-text-ui-l);font-weight:700}tui-notification [tuiSubtitle],[tuiNotification] [tuiSubtitle]{font:var(--tui-font-text-m)}tui-notification [tuiSubtitle]+*,[tuiNotification] [tuiSubtitle]+*{display:flex;align-items:center;gap:1.25rem;margin-block-start:.625rem;font:var(--tui-font-text-s)}tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{position:absolute;top:.75rem;right:.75rem;box-shadow:none!important;background:transparent!important}@supports (inset-inline-end: 0){tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{right:unset;inset-inline-end:.75rem}}[tuiNotification]{cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationStyles, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: Styles, decorators: [{
             type: Component,
-            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'tui-notification',
-                    }, styles: ["tui-notification,[tuiNotification]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:block;max-block-size:100%;color:var(--tui-text-primary);padding:1rem;font:var(--tui-font-text-m);line-height:1.5rem;border-radius:var(--tui-radius-l);box-sizing:border-box;text-align:start;text-decoration:none;border-inline-start:var(--t-start) solid transparent;border-inline-end:var(--t-end) solid transparent;--t-start: 0;--t-end: 0}tui-notification[style*=\"--t-icon-start:\"],[tuiNotification][style*=\"--t-icon-start:\"]{--t-start: 2rem}tui-notification[style*=\"--t-icon-end:\"],[tuiNotification][style*=\"--t-icon-end:\"]{--t-end: 1.5rem}tui-notification:before,[tuiNotification]:before{position:absolute;left:-1rem;inset-inline-start:-1rem}tui-notification:after,[tuiNotification]:after{position:absolute;top:50%;transform:translateY(-50%);right:-.5rem;font-size:1rem;margin:0;margin-inline-end:-.25rem;margin-inline-start:auto;color:var(--tui-text-tertiary)!important}@supports (inset-inline-end: 0){tui-notification:after,[tuiNotification]:after{right:unset;inset-inline-end:-.5rem}}tui-notification[data-size=s],[tuiNotification][data-size=s]{padding:.375rem .625rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=s][style*=\"--t-icon-start:\"],[tuiNotification][data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.5rem}tui-notification[data-size=s]:before,[tuiNotification][data-size=s]:before{top:.5rem;left:-.875rem;inset-inline-start:-.875rem;font-size:1rem}tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:-.875rem}@supports (inset-inline-end: 0){tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:unset;inset-inline-end:-.875rem}}tui-notification[data-size=s] tui-icon,[tuiNotification][data-size=s] tui-icon{font-size:1rem}tui-notification[data-size=s] [tuiTitle],[tuiNotification][data-size=s] [tuiTitle]{font:var(--tui-font-text-s);font-weight:700}tui-notification[data-size=s] [tuiSubtitle],[tuiNotification][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=s] [tuiSubtitle]+*,[tuiNotification][data-size=s] [tuiSubtitle]+*{gap:1rem;margin:.375rem 0 .25rem}tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{top:0;right:0}@supports (inset-inline-end: 0){tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{right:unset;inset-inline-end:0}}tui-notification[data-size=m],[tuiNotification][data-size=m]{padding:.75rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=m][style*=\"--t-icon-start:\"],[tuiNotification][data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.625rem}tui-notification[data-size=m]:before,[tuiNotification][data-size=m]:before{left:-.875rem;inset-inline-start:-.875rem;font-size:1.25rem}tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:-.75rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:unset;inset-inline-end:-.75rem}}tui-notification[data-size=m] tui-icon,[tuiNotification][data-size=m] tui-icon{font-size:1.25rem}tui-notification[data-size=m] [tuiTitle],[tuiNotification][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-m);font-weight:700}tui-notification[data-size=m] [tuiSubtitle],[tuiNotification][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=m] [tuiSubtitle]+*,[tuiNotification][data-size=m] [tuiSubtitle]+*{gap:1rem;margin:.625rem 0 .25rem}tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{top:.375rem;right:.5rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{right:unset;inset-inline-end:.5rem}}tui-notification [tuiTitle],[tuiNotification] [tuiTitle]{gap:.125rem;font:var(--tui-font-text-ui-l);font-weight:700}tui-notification [tuiSubtitle],[tuiNotification] [tuiSubtitle]{font:var(--tui-font-text-m)}tui-notification [tuiSubtitle]+*,[tuiNotification] [tuiSubtitle]+*{display:flex;align-items:center;gap:1.25rem;margin-block-start:.625rem;font:var(--tui-font-text-s)}tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{position:absolute;top:.75rem;right:.75rem;box-shadow:none!important;background:transparent!important}@supports (inset-inline-end: 0){tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{right:unset;inset-inline-end:.75rem}}[tuiNotification]{cursor:pointer}\n"] }]
+            args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'tui-notification' }, styles: ["tui-notification,[tuiNotification]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:block;max-block-size:100%;color:var(--tui-text-primary);padding:1rem;font:var(--tui-font-text-m);line-height:1.5rem;border-radius:var(--tui-radius-l);box-sizing:border-box;text-align:start;text-decoration:none;border-inline-start:var(--t-start) solid transparent;border-inline-end:var(--t-end) solid transparent;--t-start: 0;--t-end: 0}tui-notification[style*=\"--t-icon-start:\"],[tuiNotification][style*=\"--t-icon-start:\"]{--t-start: 2rem}tui-notification[style*=\"--t-icon-end:\"],[tuiNotification][style*=\"--t-icon-end:\"]{--t-end: 1.5rem}tui-notification:before,[tuiNotification]:before{position:absolute;left:-1rem;inset-inline-start:-1rem}tui-notification:after,[tuiNotification]:after{position:absolute;top:50%;transform:translateY(-50%);right:-.5rem;font-size:1rem;margin:0;margin-inline-end:-.25rem;margin-inline-start:auto;color:var(--tui-text-tertiary)!important}@supports (inset-inline-end: 0){tui-notification:after,[tuiNotification]:after{right:unset;inset-inline-end:-.5rem}}tui-notification[data-size=s],[tuiNotification][data-size=s]{padding:.375rem .625rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=s][style*=\"--t-icon-start:\"],[tuiNotification][data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.5rem}tui-notification[data-size=s]:before,[tuiNotification][data-size=s]:before{top:.5rem;left:-.875rem;inset-inline-start:-.875rem;font-size:1rem}tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:-.875rem}@supports (inset-inline-end: 0){tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:unset;inset-inline-end:-.875rem}}tui-notification[data-size=s] tui-icon,[tuiNotification][data-size=s] tui-icon{font-size:1rem}tui-notification[data-size=s] [tuiTitle],[tuiNotification][data-size=s] [tuiTitle]{font:var(--tui-font-text-s);font-weight:700}tui-notification[data-size=s] [tuiSubtitle],[tuiNotification][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=s] [tuiSubtitle]+*,[tuiNotification][data-size=s] [tuiSubtitle]+*{gap:1rem;margin:.375rem 0 .25rem}tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{top:0;right:0}@supports (inset-inline-end: 0){tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{right:unset;inset-inline-end:0}}tui-notification[data-size=m],[tuiNotification][data-size=m]{padding:.75rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=m][style*=\"--t-icon-start:\"],[tuiNotification][data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.625rem}tui-notification[data-size=m]:before,[tuiNotification][data-size=m]:before{left:-.875rem;inset-inline-start:-.875rem;font-size:1.25rem}tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:-.75rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:unset;inset-inline-end:-.75rem}}tui-notification[data-size=m] tui-icon,[tuiNotification][data-size=m] tui-icon{font-size:1.25rem}tui-notification[data-size=m] [tuiTitle],[tuiNotification][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-m);font-weight:700}tui-notification[data-size=m] [tuiSubtitle],[tuiNotification][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=m] [tuiSubtitle]+*,[tuiNotification][data-size=m] [tuiSubtitle]+*{gap:1rem;margin:.625rem 0 .25rem}tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{top:.375rem;right:.5rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{right:unset;inset-inline-end:.5rem}}tui-notification [tuiTitle],[tuiNotification] [tuiTitle]{gap:.125rem;font:var(--tui-font-text-ui-l);font-weight:700}tui-notification [tuiSubtitle],[tuiNotification] [tuiSubtitle]{font:var(--tui-font-text-m)}tui-notification [tuiSubtitle]+*,[tuiNotification] [tuiSubtitle]+*{display:flex;align-items:center;gap:1.25rem;margin-block-start:.625rem;font:var(--tui-font-text-s)}tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{position:absolute;top:.75rem;right:.75rem;box-shadow:none!important;background:transparent!important}@supports (inset-inline-end: 0){tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{right:unset;inset-inline-end:.75rem}}[tuiNotification]{cursor:pointer}\n"] }]
         }] });
-class TuiNotification {
+class TuiNotificationDirective {
     constructor() {
         this.options = inject(TUI_NOTIFICATION_OPTIONS);
-        this.nothing = tuiWithStyles(TuiNotificationStyles);
-        this.icons = inject(TuiIcons);
-        this.appearance = this.options.appearance;
-        this.icon = this.options.icon;
-        this.size = this.options.size;
-    }
-    ngOnInit() {
-        this.refresh();
-    }
-    ngOnChanges() {
-        this.refresh();
+        this.nothing = tuiWithStyles(Styles);
+        this.icons = tuiIconStart(computed((icon = this.icon()) => tuiIsString(icon) ? icon : icon(this.appearance())));
+        this.appearance = input(this.options.appearance);
+        this.size = input(this.options.size);
+        this.icon = input(this.options.icon);
     }
-    refresh() {
-        // TODO: Refactor to tuiDirectiveBinding
-        tuiSetSignal(this.icons.iconStart, tuiIsString(this.icon) ? this.icon : this.icon(this.appearance));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotification, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiNotification, isStandalone: true, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: { appearance: "appearance", icon: "icon", size: "size" }, host: { properties: { "attr.data-size": "size" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiNotificationDirective, isStandalone: true, selector: "tui-notification,[tuiNotification]:not(ng-template)", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, providers: [
             tuiAppearanceOptionsProvider(TUI_NOTIFICATION_OPTIONS),
-            tuiLinkOptionsProvider({
-                appearance: '',
-                pseudo: true,
-            }),
-            tuiButtonOptionsProvider({
-                appearance: 'outline-grayscale',
-                size: 's',
-            }),
-        ], usesOnChanges: true, hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiWithAppearance }], ngImport: i0 }); }
+            tuiLinkOptionsProvider({ appearance: '', pseudo: true }),
+            tuiButtonOptionsProvider({ appearance: 'outline-grayscale', size: 's' }),
+        ], hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiWithAppearance }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: 'tui-notification,a[tuiNotification],button[tuiNotification]',
+                    selector: 'tui-notification,[tuiNotification]:not(ng-template)',
                     providers: [
                         tuiAppearanceOptionsProvider(TUI_NOTIFICATION_OPTIONS),
-                        tuiLinkOptionsProvider({
-                            appearance: '',
-                            pseudo: true,
-                        }),
-                        tuiButtonOptionsProvider({
-                            appearance: 'outline-grayscale',
-                            size: 's',
-                        }),
+                        tuiLinkOptionsProvider({ appearance: '', pseudo: true }),
+                        tuiButtonOptionsProvider({ appearance: 'outline-grayscale', size: 's' }),
                     ],
                     hostDirectives: [TuiWithIcons, TuiWithAppearance],
                     host: {
-                        '[attr.data-size]': 'size',
+                        '[attr.data-size]': 'size()',
                     },
                 }]
-        }], propDecorators: { appearance: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+        }] });
+
+class TuiNotificationComponent {
+    constructor() {
+        this.el = tuiInjectElement();
+        this.icons = inject(TUI_COMMON_ICONS);
+        this.close = inject(TUI_CLOSE_WORD);
+        this.item = injectContext();
+        this.sub = of(typeof this.item.autoClose === 'function'
+            ? this.item.autoClose(this.item.appearance)
+            : this.item.autoClose)
+            .pipe(switchMap((autoClose) => (autoClose ? timer(autoClose) : EMPTY)), takeUntil(fromEvent(this.el, 'mouseenter')), repeat({ delay: () => fromEvent(this.el, 'mouseleave') }), takeUntilDestroyed())
+            .subscribe(() => this.item.$implicit.complete());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiNotificationComponent, isStandalone: true, selector: "tui-notification-alert", host: { attributes: { "role": "alert" } }, hostDirectives: [{ directive: i1$1.TuiAnimated }, { directive: i2$1.TuiAlertDirective }], ngImport: i0, template: "<div class=\"t-wrapper\">\n    <tui-notification\n        size=\"m\"\n        [appearance]=\"item.appearance\"\n        [class.t-closable]=\"item.closable\"\n        [icon]=\"item.icon\"\n    >\n        <span tuiTitle>\n            <ng-container *polymorpheusOutlet=\"item.label as text; context: item\">\n                {{ text }}\n            </ng-container>\n            <span tuiSubtitle>\n                <span\n                    *polymorpheusOutlet=\"item.content as text; context: item\"\n                    [innerHTML]=\"text\"\n                ></span>\n            </span>\n        </span>\n        @if (item.closable) {\n            <button\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"icons.close\"\n                (click)=\"item.$implicit.complete()\"\n            >\n                {{ close() }}\n            </button>\n        }\n    </tui-notification>\n</div>\n", styles: [":host{inline-size:18rem;margin:1.625rem 3rem;word-break:break-word;transform:translateZ(0);filter:drop-shadow(0 .375rem 1rem rgba(0,0,0,.12))}:host :host-context(tui-root._mobile){margin:.625rem 1rem}.t-wrapper{background:var(--tui-background-base);clip-path:inset(.375rem 0 round var(--tui-radius-m))}.t-closable{padding-inline-end:2.5rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiNotificationDirective, selector: "tui-notification,[tuiNotification]:not(ng-template)", inputs: ["appearance", "size", "icon"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-notification-alert', imports: [PolymorpheusOutlet, TuiButton, TuiNotificationDirective, TuiTitle], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated, TuiAlertDirective], host: { role: 'alert' }, template: "<div class=\"t-wrapper\">\n    <tui-notification\n        size=\"m\"\n        [appearance]=\"item.appearance\"\n        [class.t-closable]=\"item.closable\"\n        [icon]=\"item.icon\"\n    >\n        <span tuiTitle>\n            <ng-container *polymorpheusOutlet=\"item.label as text; context: item\">\n                {{ text }}\n            </ng-container>\n            <span tuiSubtitle>\n                <span\n                    *polymorpheusOutlet=\"item.content as text; context: item\"\n                    [innerHTML]=\"text\"\n                ></span>\n            </span>\n        </span>\n        @if (item.closable) {\n            <button\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"icons.close\"\n                (click)=\"item.$implicit.complete()\"\n            >\n                {{ close() }}\n            </button>\n        }\n    </tui-notification>\n</div>\n", styles: [":host{inline-size:18rem;margin:1.625rem 3rem;word-break:break-word;transform:translateZ(0);filter:drop-shadow(0 .375rem 1rem rgba(0,0,0,.12))}:host :host-context(tui-root._mobile){margin:.625rem 1rem}.t-wrapper{background:var(--tui-background-base);clip-path:inset(.375rem 0 round var(--tui-radius-m))}.t-closable{padding-inline-end:2.5rem}\n"] }]
+        }] });
+
+class TuiNotificationService extends TuiAlertService {
+    constructor() {
+        super(inject(TUI_NOTIFICATION_CONCURRENCY));
+        this.options = inject(TUI_NOTIFICATION_OPTIONS);
+        this.component = TuiNotificationComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+class TuiNotificationTemplate {
+    constructor() {
+        this.tuiNotificationOptions = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiNotificationTemplate, isStandalone: true, selector: "ng-template[tuiNotification]", inputs: { tuiNotificationOptions: { classPropertyName: "tuiNotificationOptions", publicName: "tuiNotificationOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsPortal(TuiNotificationService)], hostDirectives: [{ directive: i1$2.TuiPortalDirective, inputs: ["options", "tuiNotificationOptions", "open", "tuiNotification"], outputs: ["openChange", "tuiNotificationChange"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNotificationTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[tuiNotification]',
+                    providers: [tuiAsPortal(TuiNotificationService)],
+                    hostDirectives: [
+                        {
+                            directive: TuiPortalDirective,
+                            inputs: ['options: tuiNotificationOptions', 'open: tuiNotification'],
+                            outputs: ['openChange: tuiNotificationChange'],
+                        },
+                    ],
+                }]
+        }] });
+
+const TuiNotification = [
+    TuiNotificationDirective,
+    TuiNotificationTemplate,
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_NOTIFICATION_DEFAULT_OPTIONS, TUI_NOTIFICATION_OPTIONS, TuiNotification, tuiNotificationOptionsProvider };
+export { TUI_NOTIFICATION_CONCURRENCY, TUI_NOTIFICATION_DEFAULT_OPTIONS, TUI_NOTIFICATION_OPTIONS, TuiNotification, TuiNotificationComponent, TuiNotificationDirective, TuiNotificationService, TuiNotificationTemplate, tuiNotificationOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-components-notification.mjs.map

package/fesm2022/taiga-ui-core-components-notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-components-notification.mjs","sources":["../../../projects/core/components/notification/notification.options.ts","../../../projects/core/components/notification/notification.directive.ts","../../../projects/core/components/notification/taiga-ui-core-components-notification.ts"],"sourcesContent":["import {type TuiStringHandler} from '@taiga-ui/cdk/types';\nimport {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\n\nexport interface TuiNotificationOptions extends TuiAppearanceOptions {\n    readonly icon: TuiStringHandler<string> | string;\n    readonly size: TuiSizeL | TuiSizeS;\n}\n\nconst ICONS: Record<string, string> = {\n    info: '@tui.info',\n    positive: '@tui.circle-check',\n    negative: '@tui.circle-x',\n    warning: '@tui.circle-alert',\n    neutral: '@tui.info',\n    /* TODO @deprecated remove in v5 */\n    success: '@tui.circle-check',\n    /* TODO @deprecated remove in v5 */\n    error: '@tui.circle-x',\n};\n\n/** Default values for the notification options. */\nexport const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationOptions = {\n    appearance: 'info',\n    icon: (appearance) => ICONS[appearance] ?? '',\n    size: 'l',\n};\n\n/**\n * Default parameters for notification alert component\n */\nexport const [TUI_NOTIFICATION_OPTIONS, tuiNotificationOptionsProvider] =\n    tuiCreateOptions(TUI_NOTIFICATION_DEFAULT_OPTIONS);\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    Directive,\n    inject,\n    Input,\n    type OnChanges,\n    type OnInit,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {type TuiStringHandler} from '@taiga-ui/cdk/types';\nimport {\n    tuiIsString,\n    tuiSetSignal,\n    tuiWithStyles,\n} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\nimport {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link';\nimport {\n    tuiAppearanceOptionsProvider,\n    TuiWithAppearance,\n} from '@taiga-ui/core/directives/appearance';\nimport {TuiIcons, TuiWithIcons} from '@taiga-ui/core/directives/icons';\n\nimport {TUI_NOTIFICATION_OPTIONS} from './notification.options';\n\n@Component({\n    standalone: true,\n    template: '',\n    styles: ['@import \"@taiga-ui/core/styles/components/notification.less\";'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'tui-notification',\n    },\n})\nclass TuiNotificationStyles {}\n\n@Directive({\n    standalone: true,\n    selector: 'tui-notification,a[tuiNotification],button[tuiNotification]',\n    providers: [\n        tuiAppearanceOptionsProvider(TUI_NOTIFICATION_OPTIONS),\n        tuiLinkOptionsProvider({\n            appearance: '',\n            pseudo: true,\n        }),\n        tuiButtonOptionsProvider({\n            appearance: 'outline-grayscale',\n            size: 's',\n        }),\n    ],\n    hostDirectives: [TuiWithIcons, TuiWithAppearance],\n    host: {\n        '[attr.data-size]': 'size',\n    },\n})\nexport class TuiNotification implements OnChanges, OnInit {\n    private readonly options = inject(TUI_NOTIFICATION_OPTIONS);\n\n    protected readonly nothing = tuiWithStyles(TuiNotificationStyles);\n    protected readonly icons = inject(TuiIcons);\n\n    @Input()\n    public appearance = this.options.appearance;\n\n    @Input()\n    public icon: TuiStringHandler<string> | string = this.options.icon;\n\n    @Input()\n    public size = this.options.size;\n\n    public ngOnInit(): void {\n        this.refresh();\n    }\n\n    public ngOnChanges(): void {\n        this.refresh();\n    }\n\n    private refresh(): void {\n        // TODO: Refactor to tuiDirectiveBinding\n        tuiSetSignal(\n            this.icons.iconStart,\n            tuiIsString(this.icon) ? this.icon : this.icon(this.appearance),\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-core-components-notification.mjs","sources":["../../../projects/core/components/notification/notification.options.ts","../../../projects/core/components/notification/notification.directive.ts","../../../projects/core/components/notification/notification.component.ts","../../../projects/core/components/notification/notification.template.html","../../../projects/core/components/notification/notification.service.ts","../../../projects/core/components/notification/notification.ts","../../../projects/core/components/notification/taiga-ui-core-components-notification.ts"],"sourcesContent":["import {InjectionToken} from '@angular/core';\nimport {type TuiNumberHandler, type TuiStringHandler} from '@taiga-ui/cdk/types';\nimport {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';\nimport {type TuiPositionOptions} from '@taiga-ui/core/portals/alert';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\n\nexport interface TuiNotificationOptions<I = undefined>\n    extends TuiAppearanceOptions,\n        TuiPositionOptions {\n    readonly icon: TuiStringHandler<string> | string;\n    readonly size: TuiSizeL | TuiSizeS;\n    readonly autoClose: TuiNumberHandler<string> | number;\n    readonly closable: boolean;\n    readonly label: string;\n    readonly data: I;\n}\n\nconst ICONS: Record<string, string> = {\n    info: '@tui.info',\n    positive: '@tui.circle-check',\n    negative: '@tui.circle-x',\n    warning: '@tui.circle-alert',\n    neutral: '@tui.info',\n};\n\nexport const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationOptions = {\n    appearance: 'info',\n    icon: (appearance) => ICONS[appearance] ?? '',\n    size: 'l',\n    data: undefined,\n    autoClose: 3000,\n    label: '',\n    closable: true,\n    block: 'start',\n    inline: 'end',\n};\n\nexport const [TUI_NOTIFICATION_OPTIONS, tuiNotificationOptionsProvider] =\n    tuiCreateOptions(TUI_NOTIFICATION_DEFAULT_OPTIONS);\n\nexport const TUI_NOTIFICATION_CONCURRENCY = new InjectionToken(\n    ngDevMode ? 'TUI_NOTIFICATION_CONCURRENCY' : '',\n    {factory: () => 5},\n);\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    Directive,\n    inject,\n    input,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {type TuiStringHandler} from '@taiga-ui/cdk/types';\nimport {tuiIsString, tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\nimport {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link';\nimport {\n    tuiAppearanceOptionsProvider,\n    TuiWithAppearance,\n} from '@taiga-ui/core/directives/appearance';\nimport {tuiIconStart, TuiWithIcons} from '@taiga-ui/core/directives/icons';\n\nimport {TUI_NOTIFICATION_OPTIONS} from './notification.options';\n\n@Component({\n    template: '',\n    styles: '@import \"@taiga-ui/core/styles/components/notification.less\";',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {class: 'tui-notification'},\n})\nclass Styles {}\n\n@Directive({\n    selector: 'tui-notification,[tuiNotification]:not(ng-template)',\n    providers: [\n        tuiAppearanceOptionsProvider(TUI_NOTIFICATION_OPTIONS),\n        tuiLinkOptionsProvider({appearance: '', pseudo: true}),\n        tuiButtonOptionsProvider({appearance: 'outline-grayscale', size: 's'}),\n    ],\n    hostDirectives: [TuiWithIcons, TuiWithAppearance],\n    host: {\n        '[attr.data-size]': 'size()',\n    },\n})\nexport class TuiNotificationDirective {\n    private readonly options = inject(TUI_NOTIFICATION_OPTIONS);\n\n    protected readonly nothing = tuiWithStyles(Styles);\n    protected readonly icons = tuiIconStart(\n        computed((icon = this.icon()) =>\n            tuiIsString(icon) ? icon : icon(this.appearance()),\n        ),\n    );\n\n    public readonly appearance = input(this.options.appearance);\n    public readonly size = input(this.options.size);\n    public readonly icon = input<TuiStringHandler<string> | string>(this.options.icon);\n}\n","import {ChangeDetectionStrategy, Component, inject} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {type TuiPortalContext} from '@taiga-ui/cdk/portals';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TuiTitle} from '@taiga-ui/core/components/title';\nimport {TuiAlertDirective} from '@taiga-ui/core/portals/alert';\nimport {TUI_CLOSE_WORD, TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';\nimport {injectContext, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\nimport {EMPTY, fromEvent, of, repeat, switchMap, takeUntil, timer} from 'rxjs';\n\nimport {TuiNotificationDirective} from './notification.directive';\nimport {type TuiNotificationOptions} from './notification.options';\n\n@Component({\n    selector: 'tui-notification-alert',\n    imports: [PolymorpheusOutlet, TuiButton, TuiNotificationDirective, TuiTitle],\n    templateUrl: './notification.template.html',\n    styleUrl: './notification.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [TuiAnimated, TuiAlertDirective],\n    host: {role: 'alert'},\n})\nexport class TuiNotificationComponent<O, I> {\n    private readonly el = tuiInjectElement();\n\n    protected readonly icons = inject(TUI_COMMON_ICONS);\n    protected readonly close = inject(TUI_CLOSE_WORD);\n    protected readonly item =\n        injectContext<TuiPortalContext<TuiNotificationOptions<I>, O>>();\n\n    protected readonly sub = of(\n        typeof this.item.autoClose === 'function'\n            ? this.item.autoClose(this.item.appearance)\n            : this.item.autoClose,\n    )\n        .pipe(\n            switchMap((autoClose) => (autoClose ? timer(autoClose) : EMPTY)),\n            takeUntil(fromEvent(this.el, 'mouseenter')),\n            repeat({delay: () => fromEvent(this.el, 'mouseleave')}),\n            takeUntilDestroyed(),\n        )\n        .subscribe(() => this.item.$implicit.complete());\n}\n","<div class=\"t-wrapper\">\n    <tui-notification\n        size=\"m\"\n        [appearance]=\"item.appearance\"\n        [class.t-closable]=\"item.closable\"\n        [icon]=\"item.icon\"\n    >\n        <span tuiTitle>\n            <ng-container *polymorpheusOutlet=\"item.label as text; context: item\">\n                {{ text }}\n            </ng-container>\n            <span tuiSubtitle>\n                <span\n                    *polymorpheusOutlet=\"item.content as text; context: item\"\n                    [innerHTML]=\"text\"\n                ></span>\n            </span>\n        </span>\n        @if (item.closable) {\n            <button\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"icons.close\"\n                (click)=\"item.$implicit.complete()\"\n            >\n                {{ close() }}\n            </button>\n        }\n    </tui-notification>\n</div>\n","import {Directive, inject, Injectable, input} from '@angular/core';\nimport {tuiAsPortal, TuiPortalDirective} from '@taiga-ui/cdk/portals';\nimport {TuiAlertService} from '@taiga-ui/core/portals/alert';\n\nimport {TuiNotificationComponent} from './notification.component';\nimport {\n    TUI_NOTIFICATION_CONCURRENCY,\n    TUI_NOTIFICATION_OPTIONS,\n    type TuiNotificationOptions,\n} from './notification.options';\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class TuiNotificationService extends TuiAlertService<TuiNotificationOptions<any>> {\n    protected override readonly options = inject(TUI_NOTIFICATION_OPTIONS);\n    protected override readonly component = TuiNotificationComponent;\n\n    constructor() {\n        super(inject(TUI_NOTIFICATION_CONCURRENCY));\n    }\n}\n\n@Directive({\n    selector: 'ng-template[tuiNotification]',\n    providers: [tuiAsPortal(TuiNotificationService)],\n    hostDirectives: [\n        {\n            directive: TuiPortalDirective,\n            inputs: ['options: tuiNotificationOptions', 'open: tuiNotification'],\n            outputs: ['openChange: tuiNotificationChange'],\n        },\n    ],\n})\nexport class TuiNotificationTemplate<T> {\n    public readonly tuiNotificationOptions = input<Partial<TuiNotificationOptions<T>>>(\n        {},\n    );\n}\n","import {TuiNotificationDirective} from './notification.directive';\nimport {TuiNotificationTemplate} from './notification.service';\n\nexport const TuiNotification = [\n    TuiNotificationDirective,\n    TuiNotificationTemplate,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2"],"mappings":"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"}

package/fesm2022/taiga-ui-core-components-root.mjs

@@ -3,8 +3,6 @@ import * as i0 from '@angular/core';
 import { inject, signal, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { TUI_VERSION } from '@taiga-ui/cdk/constants';
-import * as i4 from '@taiga-ui/cdk/directives/active-zone';
-import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
 import * as i3 from '@taiga-ui/cdk/directives/font-size';
 import { TuiFontSize } from '@taiga-ui/cdk/directives/font-size';
 import * as i1 from '@taiga-ui/cdk/directives/platform';
@@ -13,16 +11,11 @@ import * as i2 from '@taiga-ui/cdk/directives/visual-viewport';
 import { TuiVisualViewport } from '@taiga-ui/cdk/directives/visual-viewport';
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
-import { TuiAlerts } from '@taiga-ui/core/components/alert';
-import { TuiDialogs } from '@taiga-ui/core/components/dialog';
 import { TUI_SCROLLBAR_OPTIONS, TuiScrollControls } from '@taiga-ui/core/components/scrollbar';
-import { TuiDropdowns } from '@taiga-ui/core/directives/dropdown';
-import { TuiHints } from '@taiga-ui/core/directives/hint';
-import { TuiPopups } from '@taiga-ui/core/directives/popup';
+import { TuiPopups } from '@taiga-ui/core/portals/popup';
 import { TuiBreakpointService } from '@taiga-ui/core/services';
 import { TUI_REDUCED_MOTION, TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
 import { tuiGetDuration, TUI_OPTIONS } from '@taiga-ui/core/utils/miscellaneous';
-import { map } from 'rxjs';
 
 class TuiRoot {
     constructor() {
@@ -32,7 +25,7 @@ class TuiRoot {
         this.reducedMotion = inject(TUI_REDUCED_MOTION);
         this.duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));
         this.top = signal(this.parent);
-        this.isMobileRes = toSignal(inject(TuiBreakpointService).pipe(map((breakpoint) => breakpoint === 'mobile')));
+        this.breakpoint = toSignal(inject(TuiBreakpointService));
         this.scrollbars = !inject(TUI_IS_MOBILE) &&
             !this.child &&
             inject(TUI_SCROLLBAR_OPTIONS).mode !== 'native' &&
@@ -42,26 +35,19 @@ class TuiRoot {
         return this.doc.fullscreenElement === this.el || !this.child;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRoot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiRoot, isStandalone: true, selector: "tui-root", host: { attributes: { "data-tui-version": "4.52.0-canary.6043e8f" }, listeners: { "touchstart.passive.zoneless": "0", "document:fullscreenchange": "top.set(parent)" }, properties: { "style.--tui-duration.ms": "duration", "style.--tui-scroll-behavior": "reducedMotion ? \"auto\" : \"smooth\"", "class._mobile": "isMobileRes()" } }, hostDirectives: [{ directive: i1.TuiPlatform }, { directive: i2.TuiVisualViewport }, { directive: i3.TuiFontSize }, { directive: i4.TuiActiveZone }], ngImport: i0, template: "<div class=\"t-root-content\">\n    <ng-content />\n</div>\n@if (top()) {\n    @if (scrollbars) {\n        <tui-scroll-controls class=\"t-root-scrollbar\" />\n    }\n    <tui-popups />\n    <ng-content select=\"tuiOverContent\" />\n    <tui-dialogs />\n    <ng-content select=\"tuiOverDialogs\" />\n    <tui-alerts />\n    <ng-content select=\"tuiOverAlerts\" />\n    <tui-dropdowns />\n    <ng-content select=\"tuiOverDropdowns\" />\n    <tui-hints />\n    <ng-content select=\"tuiOverHints\" />\n}\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{content:\"\"}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(var(--tui-scale, 0))}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;z-index:0;top:0;right:0;bottom:0;left:0}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"], dependencies: [{ kind: "component", type: TuiAlerts, selector: "tui-alerts" }, { kind: "component", type: TuiDialogs, selector: "tui-dialogs" }, { kind: "component", type: TuiDropdowns, selector: "tui-dropdowns" }, { kind: "component", type: TuiHints, selector: "tui-hints" }, { kind: "component", type: TuiPopups, selector: "tui-popups" }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiRoot, isStandalone: true, selector: "tui-root", host: { attributes: { "data-tui-version": "4.52.0-canary.61fea47" }, listeners: { "touchstart.passive.zoneless": "0", "document:fullscreenchange": "top.set(parent)" }, properties: { "style.--tui-duration.ms": "duration", "style.--tui-scroll-behavior": "reducedMotion ? \"auto\" : \"smooth\"", "class._mobile": "breakpoint() === \"mobile\"" } }, hostDirectives: [{ directive: i1.TuiPlatform }, { directive: i2.TuiVisualViewport }, { directive: i3.TuiFontSize }], ngImport: i0, template: "<div class=\"t-root-content\">\n    <ng-content />\n</div>\n@if (top()) {\n    @if (scrollbars) {\n        <tui-scroll-controls class=\"t-root-scrollbar\" />\n    }\n    <tui-popups>\n        <ng-content select=\"tuiOverContent\" />\n    </tui-popups>\n}\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{opacity:.99999}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(var(--tui-scale, 0))}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;z-index:0;inset:0}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"], dependencies: [{ kind: "component", type: TuiPopups, selector: "tui-popups" }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRoot, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-root', imports: [
-                        TuiAlerts,
-                        TuiDialogs,
-                        TuiDropdowns,
-                        TuiHints,
-                        TuiPopups,
-                        TuiScrollControls,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiPlatform, TuiVisualViewport, TuiFontSize, TuiActiveZone], host: {
+            args: [{ selector: 'tui-root', imports: [TuiPopups, TuiScrollControls], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [TuiPlatform, TuiVisualViewport, TuiFontSize], host: {
                         'data-tui-version': TUI_VERSION,
                         '[style.--tui-duration.ms]': 'duration',
                         '[style.--tui-scroll-behavior]': 'reducedMotion ? "auto" : "smooth"',
-                        '[class._mobile]': 'isMobileRes()',
+                        '[class._mobile]': 'breakpoint() === "mobile"',
                         // Required for the :active state to work in Safari. https://stackoverflow.com/a/33681490
                         '(touchstart.passive.zoneless)': '0',
                         '(document:fullscreenchange)': 'top.set(parent)',
-                    }, template: "<div class=\"t-root-content\">\n    <ng-content />\n</div>\n@if (top()) {\n    @if (scrollbars) {\n        <tui-scroll-controls class=\"t-root-scrollbar\" />\n    }\n    <tui-popups />\n    <ng-content select=\"tuiOverContent\" />\n    <tui-dialogs />\n    <ng-content select=\"tuiOverDialogs\" />\n    <tui-alerts />\n    <ng-content select=\"tuiOverAlerts\" />\n    <tui-dropdowns />\n    <ng-content select=\"tuiOverDropdowns\" />\n    <tui-hints />\n    <ng-content select=\"tuiOverHints\" />\n}\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{content:\"\"}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(var(--tui-scale, 0))}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;z-index:0;top:0;right:0;bottom:0;left:0}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"] }]
+                    }, template: "<div class=\"t-root-content\">\n    <ng-content />\n</div>\n@if (top()) {\n    @if (scrollbars) {\n        <tui-scroll-controls class=\"t-root-scrollbar\" />\n    }\n    <tui-popups>\n        <ng-content select=\"tuiOverContent\" />\n    </tui-popups>\n}\n", styles: ["@keyframes tuiSkeletonVibe{to{opacity:.5}}@keyframes tuiPresent{to{opacity:.99999}}@keyframes tuiFade{0%{opacity:0}}@keyframes tuiSlide{0%{transform:var(--tui-from, translateY(100%))}}@keyframes tuiScale{0%{transform:scale(var(--tui-scale, 0))}}@keyframes tuiCollapse{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.tui-enter,.tui-leave{animation-duration:var(--tui-duration);animation-timing-function:ease-in-out;pointer-events:none}.tui-leave{animation-direction:reverse}\n", ".tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.tui-zero-scrollbar::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar-thumb{display:none}body,input{margin:0}tui-root{position:relative;display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);flex:1;border-image:conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 0 100vh 0;-webkit-tap-highlight-color:transparent}:root{--tui-inline-start: left;--tui-inline-end: right;--tui-inline: 1}[dir=rtl]{--tui-inline-start: right;--tui-inline-end: left;--tui-inline: -1}tui-root>.t-root-scrollbar{position:fixed;z-index:0;inset:0}.t-root-content{position:relative;top:var(--t-root-top);block-size:100%;isolation:isolate}.t-root-content>*{--t-root-top: 0}[tuiDropdownButton][tuiDropdownButton]{display:none}\n"] }]
         }] });
 
 /**