@taiga-ui/kit 4.52.0-canary.ec0802b → 4.52.0-canary.efbd0d4

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

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-drawer.mjs","sources":["../../../projects/kit/components/drawer/drawer.component.ts","../../../projects/kit/components/drawer/drawer.template.html","../../../projects/kit/components/drawer/taiga-ui-kit-components-drawer.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, Input} from '@angular/core';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\nimport {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';\nimport {type TuiHorizontalDirection} from '@taiga-ui/core/types';\n\n@Component({\n    selector: 'tui-drawer',\n    imports: [TuiScrollbar],\n    templateUrl: './drawer.template.html',\n    styleUrl: './drawer.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        tuiButtonOptionsProvider({\n            appearance: 'secondary',\n            size: 's',\n        }),\n    ],\n    hostDirectives: [TuiAnimated],\n    host: {\n        '[class._overlay]': 'overlay',\n        '[style.border-top-left-radius]': 'direction === \"left\" ? 0 : null',\n        '[style.border-top-right-radius]': 'direction === \"right\" ? 0 : null',\n        '[style.left]': 'direction === \"left\" ? 0 : null',\n        '[style.right]': 'direction === \"right\" ? 0 : null',\n        '[style.--tui-from]': 'from',\n    },\n})\nexport class TuiDrawer {\n    @Input()\n    public direction: TuiHorizontalDirection = 'right';\n\n    @Input()\n    public overlay = false;\n\n    public get from(): string {\n        return this.direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)';\n    }\n}\n","<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\">\n            <ng-content />\n        </div>\n    </tui-scrollbar>\n    <tui-scrollbar\n        class=\"t-footer\"\n        [hidden]=\"true\"\n    >\n        <ng-content select=\"footer\" />\n    </tui-scrollbar>\n</aside>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MA4Ba,SAAS,CAAA;AAtBtB,IAAA,WAAA,GAAA;QAwBW,IAAS,CAAA,SAAA,GAA2B,OAAO;QAG3C,IAAO,CAAA,OAAA,GAAG,KAAK;AAKzB;AAHG,IAAA,IAAW,IAAI,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,kBAAkB,GAAG,mBAAmB;;+GARvE,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,SAAS,EAhBP,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,mCAAA,EAAA,+BAAA,EAAA,oCAAA,EAAA,YAAA,EAAA,mCAAA,EAAA,aAAA,EAAA,oCAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA,wBAAwB,CAAC;AACrB,gBAAA,UAAU,EAAE,WAAW;AACvB,gBAAA,IAAI,EAAE,GAAG;aACZ,CAAC;SACL,ECjBL,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,mXAcA,siFDNc,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAoBb,SAAS,EAAA,UAAA,EAAA,CAAA;kBAtBrB,SAAS;+BACI,YAAY,EAAA,OAAA,EACb,CAAC,YAAY,CAAC,mBAGN,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;AACP,wBAAA,wBAAwB,CAAC;AACrB,4BAAA,UAAU,EAAE,WAAW;AACvB,4BAAA,IAAI,EAAE,GAAG;yBACZ,CAAC;qBACL,EACe,cAAA,EAAA,CAAC,WAAW,CAAC,EACvB,IAAA,EAAA;AACF,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,gCAAgC,EAAE,iCAAiC;AACnE,wBAAA,iCAAiC,EAAE,kCAAkC;AACrE,wBAAA,cAAc,EAAE,iCAAiC;AACjD,wBAAA,eAAe,EAAE,kCAAkC;AACnD,wBAAA,oBAAoB,EAAE,MAAM;AAC/B,qBAAA,EAAA,QAAA,EAAA,mXAAA,EAAA,MAAA,EAAA,CAAA,8+EAAA,CAAA,EAAA;8BAIM,SAAS,EAAA,CAAA;sBADf;gBAIM,OAAO,EAAA,CAAA;sBADb;;;AEhCL;;AAEG;;;;"}
+{"version":3,"file":"taiga-ui-kit-components-drawer.mjs","sources":["../../../projects/kit/components/drawer/drawer.component.ts","../../../projects/kit/components/drawer/drawer.template.html","../../../projects/kit/components/drawer/taiga-ui-kit-components-drawer.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, input} from '@angular/core';\nimport {TuiAnimated} from '@taiga-ui/cdk/directives/animated';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\nimport {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';\nimport {type TuiHorizontalDirection} from '@taiga-ui/core/types';\n\n@Component({\n    selector: 'tui-drawer',\n    imports: [TuiScrollbar],\n    templateUrl: './drawer.template.html',\n    styleUrl: './drawer.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiButtonOptionsProvider({appearance: 'secondary', size: 's'})],\n    hostDirectives: [TuiAnimated],\n    host: {\n        '[class._overlay]': 'overlay()',\n        '[style.border-top-left-radius]': 'direction() === \"left\" ? 0 : null',\n        '[style.border-top-right-radius]': 'direction() === \"right\" ? 0 : null',\n        '[style.left]': 'direction() === \"left\" ? 0 : null',\n        '[style.right]': 'direction() === \"right\" ? 0 : null',\n        '[style.--tui-from]':\n            'direction() === \"right\" ? \"translateX(100%)\" : \"translateX(-100%)\"',\n    },\n})\nexport class TuiDrawer {\n    public readonly direction = input<TuiHorizontalDirection>('right');\n    public readonly overlay = input(false);\n}\n","<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\">\n            <ng-content />\n        </div>\n    </tui-scrollbar>\n    <ng-content select=\"footer\" />\n</aside>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAwBa,SAAS,CAAA;AAlBtB,IAAA,WAAA,GAAA;AAmBoB,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAyB,OAAO,CAAC;AAClD,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC;AACzC;+GAHY,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,SAAS,4tBAZP,CAAC,wBAAwB,CAAC,EAAC,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC,ECZ/E,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,uQASA,k8EDDc,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAgBb,SAAS,EAAA,UAAA,EAAA,CAAA;kBAlBrB,SAAS;+BACI,YAAY,EAAA,OAAA,EACb,CAAC,YAAY,CAAC,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC,CAAC,wBAAwB,CAAC,EAAC,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC,EAC3D,cAAA,EAAA,CAAC,WAAW,CAAC,EACvB,IAAA,EAAA;AACF,wBAAA,kBAAkB,EAAE,WAAW;AAC/B,wBAAA,gCAAgC,EAAE,mCAAmC;AACrE,wBAAA,iCAAiC,EAAE,oCAAoC;AACvE,wBAAA,cAAc,EAAE,mCAAmC;AACnD,wBAAA,eAAe,EAAE,oCAAoC;AACrD,wBAAA,oBAAoB,EAChB,oEAAoE;AAC3E,qBAAA,EAAA,QAAA,EAAA,uQAAA,EAAA,MAAA,EAAA,CAAA,04EAAA,CAAA,EAAA;;;AEtBL;;AAEG;;;;"}

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

@@ -1,36 +1,32 @@
-import { __decorate } from 'tslib';
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, LOCALE_ID, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, TemplateRef, ContentChildren, ViewEncapsulation, Directive, forwardRef, ContentChild, Pipe } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { DomSanitizer } from '@angular/platform-browser';
+import { inject, LOCALE_ID, computed, input, output, ChangeDetectionStrategy, Component, contentChildren, TemplateRef, model, ViewEncapsulation, Directive, forwardRef, contentChild, Pipe } from '@angular/core';
 import { WA_WINDOW } from '@ng-web-apis/common';
-import { tuiPure, tuiProvide } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiButton } from '@taiga-ui/core/components/button';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
 import { TuiLoader } from '@taiga-ui/core/components/loader';
 import * as i1 from '@taiga-ui/core/directives/appearance';
 import { tuiAppearanceOptionsProvider, TuiAppearance, tuiAppearanceMode, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
-import { TuiHintOverflow } from '@taiga-ui/core/directives/hint';
-import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
+import { TuiHintOverflow } from '@taiga-ui/core/portals/hint';
+import { TUI_COMMON_ICONS, TUI_BREAKPOINT } from '@taiga-ui/core/tokens';
 import { TUI_DIGITAL_INFORMATION_UNITS, TUI_FILE_TEXTS, TUI_HIDE_TEXT, TUI_SHOW_ALL_TEXT, TUI_INPUT_FILE_TEXTS } from '@taiga-ui/kit/tokens';
 import { PolymorpheusOutlet, injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
-import { of, map, combineLatest, timer, switchMap, filter } from 'rxjs';
-import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
 import { coerceArray } from '@angular/cdk/coercion';
 import { tuiRound } from '@taiga-ui/cdk/utils/math';
 import { TuiItem } from '@taiga-ui/cdk/directives/item';
-import { EMPTY_QUERY, EMPTY_ARRAY, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
+import { NgTemplateOutlet } from '@angular/common';
 import { TuiExpand } from '@taiga-ui/core/components/expand';
 import * as i1$1 from '@taiga-ui/core/directives/group';
 import { TuiGroup, tuiGroupOptionsProvider } from '@taiga-ui/core/directives/group';
 import { TuiLink } from '@taiga-ui/core/components/link';
-import { TuiBreakpointService } from '@taiga-ui/core/services';
+import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
+import { EMPTY_ARRAY, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
 import * as i1$2 from '@taiga-ui/cdk/directives/native-validator';
 import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
 import { tuiZonefreeScheduler, tuiControlValue } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
+import { timer, switchMap, map, filter, combineLatest } from 'rxjs';
 import { Validators, NG_VALIDATORS, FormControl } from '@angular/forms';
 import { TuiValidator } from '@taiga-ui/cdk/directives/validator';
 
@@ -108,224 +104,114 @@ const [TUI_FILE_OPTIONS, tuiFileOptionsProvider] = tuiCreateOptions(TUI_FILE_DEF
 
 class TuiFile {
     constructor() {
-        this.sanitizer = inject(DomSanitizer);
         this.options = inject(TUI_FILE_OPTIONS);
         this.locale = inject(LOCALE_ID);
-        this.units$ = toObservable(inject(TUI_DIGITAL_INFORMATION_UNITS));
+        this.units = inject(TUI_DIGITAL_INFORMATION_UNITS);
         this.win = inject(WA_WINDOW);
         this.icons = inject(TUI_COMMON_ICONS);
-        this.fileTexts$ = toObservable(inject(TUI_FILE_TEXTS));
-        this.file = { name: '' };
-        this.state = 'normal';
-        this.size = 'm';
-        this.showDelete = true;
-        this.showSize = true;
-        this.remove = new EventEmitter();
-    }
-    get preview() {
-        return this.isBig ? this.createPreview(this.file) : '';
-    }
-    get isBig() {
-        return this.size === 'l';
-    }
-    get isLoading() {
-        return this.state === 'loading';
-    }
-    get isError() {
-        return this.state === 'error';
-    }
-    get isDeleted() {
-        return this.state === 'deleted';
+        this.fileTexts = inject(TUI_FILE_TEXTS);
+        this.content = computed(() => this.state() === 'error' && !this.file().content
+            ? this.fileTexts().loadingError
+            : this.file().content || '');
+        this.fileSize = computed(() => this.options.formatSize(this.units(), this.file().size, this.locale));
+        this.preview = computed(() => this.size() === 'l' ? this.createPreview(this.file()) : '');
+        this.name = computed(() => {
+            const dot = this.file().name.lastIndexOf('.');
+            // a dot at position 0 means a “hidden” file, not an extension
+            return dot > 0 ? this.file().name.slice(0, dot) : this.file().name;
+        });
+        this.type = computed(() => {
+            const dot = this.file().name.lastIndexOf('.');
+            // only return an extension when there is one
+            return dot > 0 ? this.file().name.slice(dot) : '';
+        });
+        this.icon = computed((state = this.state()) => state === 'loading' ? '' : this.options.icons[state]);
+        this.file = input({ name: '' });
+        this.state = input('normal');
+        this.size = input('m');
+        this.showDelete = input(true);
+        this.showSize = input(true);
+        this.leftContent = input();
+        this.remove = output();
     }
     get allowDelete() {
-        return this.showDelete && this.remove.observed;
-    }
-    get icon() {
-        return this.state === 'loading' ? '' : this.options.icons[this.state];
-    }
-    get name() {
-        return this.getName(this.file);
-    }
-    get type() {
-        return this.getType(this.file);
-    }
-    get content$() {
-        return this.calculateContent$(this.state, this.file, this.fileTexts$);
-    }
-    get fileSize$() {
-        return this.calculateFileSize$(this.file, this.units$);
-    }
-    calculateContent$(state, file, fileTexts$) {
-        return state === 'error' && !file.content
-            ? fileTexts$.pipe(map((texts) => texts.loadingError))
-            : of(this.file.content || '');
-    }
-    calculateFileSize$(file, units$) {
-        return units$.pipe(map((units) => this.options.formatSize(units, file.size, this.locale)));
+        return this.showDelete() && !!this.remove['listeners']?.length;
     }
     createPreview(file) {
         if (file.src) {
             return file.src;
         }
-        if (this.win.File &&
+        return this.win.File &&
             file instanceof this.win.File &&
-            file.type?.startsWith('image/')) {
-            return this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
-        }
-        return '';
-    }
-    getName(file) {
-        const dot = file.name.lastIndexOf('.');
-        // a dot at position 0 means a “hidden” file, not an extension
-        return dot > 0 ? file.name.slice(0, dot) : file.name;
+            file.type?.startsWith('image/')
+            ? URL.createObjectURL(file)
+            : '';
     }
-    getType(file) {
-        const dot = file.name.lastIndexOf('.');
-        // only return an extension when there is one
-        return dot > 0 ? file.name.slice(dot) : '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFile, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiFile, isStandalone: true, selector: "tui-file,a[tuiFile],button[tuiFile]", inputs: { file: "file", state: "state", size: "size", showDelete: "showDelete", showSize: "showSize", leftContent: "leftContent" }, outputs: { remove: "remove" }, host: { properties: { "attr.data-delete": "showDelete" } }, providers: [tuiAppearanceOptionsProvider(TUI_FILE_OPTIONS)], hostDirectives: [{ directive: i1.TuiAppearance }], ngImport: i0, template: "<div\n    class=\"t-preview\"\n    [class.t-preview_big]=\"isBig\"\n>\n    <ng-container *polymorpheusOutlet=\"leftContent || defaultLeftContent as text\">\n        {{ text }}\n    </ng-container>\n</div>\n<div class=\"t-wrapper\">\n    <div class=\"t-text\">\n        <div\n            tuiHintOverflow\n            class=\"t-name\"\n        >\n            {{ name }}\n        </div>\n        <div class=\"t-type\">{{ type }}</div>\n        @if (showSize && (fileSize$ | async); as fileSize) {\n            <div class=\"t-size\">\n                {{ fileSize }}\n            </div>\n        }\n    </div>\n    @if (content$ | async; as content) {\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"content as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n    <ng-content />\n</div>\n@if (allowDelete) {\n    @if (fileTexts$ | async; as texts) {\n        <button\n            appearance=\"icon\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-remove\"\n            [iconStart]=\"icons.close\"\n            (click.prevent)=\"remove.emit()\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            {{ texts.remove }}\n        </button>\n    }\n}\n\n<ng-template #defaultLeftContent>\n    @if (preview) {\n        <img\n            alt=\"file preview\"\n            class=\"t-image\"\n            [src]=\"preview\"\n        />\n    } @else {\n        @if (isLoading) {\n            <tui-loader\n                class=\"t-loader\"\n                [inheritColor]=\"isBig\"\n            />\n        } @else {\n            <tui-icon\n                *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                class=\"t-icon\"\n                [class.t-icon_blank]=\"isBig || isDeleted\"\n                [class.t-icon_error]=\"isError\"\n                [icon]=\"src.toString()\"\n            />\n        }\n    }\n</ng-template>\n", styles: [":host{position:relative;display:flex;align-items:center;font:var(--tui-font-text-m);padding:.625rem;padding-inline-end:2.25rem;text-decoration:none;border-radius:var(--tui-radius-m)}:host:hover .t-remove,:host[data-delete=always] .t-remove{opacity:1}.t-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;margin-inline-end:.75rem;border-radius:var(--tui-radius-m);overflow:hidden;color:var(--tui-text-tertiary)}.t-preview_big{inline-size:4rem;block-size:4rem;margin-inline-end:1rem}.t-preview_big:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-neutral-1)}.t-image{max-inline-size:100%;max-block-size:100%}.t-loader{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}.t-icon{position:absolute;inset:0;color:var(--tui-status-positive);margin:auto}.t-icon_blank{color:var(--tui-text-tertiary)}.t-icon_error{color:var(--tui-text-negative)}.t-remove{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem}@supports (inset-inline-end: 0){.t-remove{right:unset;inset-inline-end:.625rem}}.t-remove:focus{opacity:1}.t-remove:focus-visible{box-shadow:inset 0 0 0 2px var(--tui-border-focus)}@media (hover: hover) and (pointer: fine){.t-remove{opacity:0}}.t-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;color:var(--tui-text-primary)}.t-text{display:flex;inline-size:100%}.t-size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-inline-start:.5rem}.t-type{flex-shrink:0}.t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-content{font:var(--tui-font-text-s);color:var(--tui-text-negative)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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: TuiHintOverflow, selector: "[tuiHintOverflow]", inputs: ["tuiHintOverflow"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiFile, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiFile, isStandalone: true, selector: "tui-file,a[tuiFile],button[tuiFile]", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDelete: { classPropertyName: "showDelete", publicName: "showDelete", isSignal: true, isRequired: false, transformFunction: null }, showSize: { classPropertyName: "showSize", publicName: "showSize", isSignal: true, isRequired: false, transformFunction: null }, leftContent: { classPropertyName: "leftContent", publicName: "leftContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, host: { properties: { "attr.data-delete": "showDelete()" } }, providers: [tuiAppearanceOptionsProvider(TUI_FILE_OPTIONS)], hostDirectives: [{ directive: i1.TuiAppearance }], ngImport: i0, template: "<div\n    class=\"t-preview\"\n    [class.t-preview_big]=\"size() === 'l'\"\n>\n    <ng-container *polymorpheusOutlet=\"leftContent() || defaultLeftContent as text\">\n        {{ text }}\n    </ng-container>\n</div>\n<div class=\"t-wrapper\">\n    <div class=\"t-text\">\n        <div\n            tuiHintOverflow\n            class=\"t-name\"\n        >\n            {{ name() }}\n        </div>\n        <div class=\"t-type\">{{ type() }}</div>\n        @if (showSize() && fileSize()) {\n            <div class=\"t-size\">\n                {{ fileSize() }}\n            </div>\n        }\n    </div>\n    @if (content(); as text) {\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n    <ng-content />\n</div>\n@if (allowDelete) {\n    @if (fileTexts(); as texts) {\n        <button\n            appearance=\"icon\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-remove\"\n            [iconStart]=\"icons.close\"\n            (click.prevent)=\"remove.emit()\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            {{ texts.remove }}\n        </button>\n    }\n}\n\n<ng-template #defaultLeftContent>\n    @if (preview()) {\n        <img\n            alt=\"file preview\"\n            class=\"t-image\"\n            [src]=\"preview()\"\n        />\n    } @else {\n        @if (state() === 'loading') {\n            <tui-loader\n                class=\"t-loader\"\n                [inheritColor]=\"size() === 'l'\"\n            />\n        } @else {\n            <tui-icon\n                *polymorpheusOutlet=\"icon() as src; context: {$implicit: size()}\"\n                class=\"t-icon\"\n                [class.t-icon_blank]=\"size() === 'l' || state() === 'deleted'\"\n                [class.t-icon_error]=\"state() === 'error'\"\n                [icon]=\"src.toString()\"\n            />\n        }\n    }\n</ng-template>\n", styles: [":host{position:relative;display:flex;align-items:center;font:var(--tui-font-body-m);padding:.625rem;padding-inline-end:2.25rem;text-decoration:none;border-radius:var(--tui-radius-m)}:host:hover .t-remove,:host[data-delete=always] .t-remove{opacity:1}.t-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;margin-inline-end:.75rem;border-radius:var(--tui-radius-m);overflow:hidden;color:var(--tui-text-tertiary)}.t-preview_big{inline-size:4rem;block-size:4rem;margin-inline-end:1rem}.t-preview_big:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-neutral-1)}.t-image{max-inline-size:100%;max-block-size:100%}.t-loader{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}.t-icon{position:absolute;inset:0;color:var(--tui-status-positive);margin:auto}.t-icon_blank{color:var(--tui-text-tertiary)}.t-icon_error{color:var(--tui-text-negative)}.t-remove{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem}@supports (inset-inline-end: 0){.t-remove{right:unset;inset-inline-end:.625rem}}.t-remove:focus{opacity:1}.t-remove:focus-visible{box-shadow:inset 0 0 0 2px var(--tui-border-focus)}@media (hover: hover) and (pointer: fine){.t-remove{opacity:0}}.t-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;color:var(--tui-text-primary)}.t-text{display:flex;inline-size:100%}.t-size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-inline-start:.5rem}.t-type{flex-shrink:0}.t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-content{font:var(--tui-font-body-s);color:var(--tui-text-negative)}\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: TuiHintOverflow, selector: "[tuiHintOverflow]", inputs: ["tuiHintOverflow"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    tuiPure
-], TuiFile.prototype, "calculateContent$", null);
-__decorate([
-    tuiPure
-], TuiFile.prototype, "calculateFileSize$", null);
-__decorate([
-    tuiPure
-], TuiFile.prototype, "createPreview", null);
-__decorate([
-    tuiPure
-], TuiFile.prototype, "getName", null);
-__decorate([
-    tuiPure
-], TuiFile.prototype, "getType", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiFile, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-file,a[tuiFile],button[tuiFile]', imports: [
-                        AsyncPipe,
-                        PolymorpheusOutlet,
-                        TuiButton,
-                        TuiHintOverflow,
-                        TuiIcon,
-                        TuiLoader,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAppearanceOptionsProvider(TUI_FILE_OPTIONS)], hostDirectives: [TuiAppearance], host: {
-                        '[attr.data-delete]': 'showDelete',
-                    }, template: "<div\n    class=\"t-preview\"\n    [class.t-preview_big]=\"isBig\"\n>\n    <ng-container *polymorpheusOutlet=\"leftContent || defaultLeftContent as text\">\n        {{ text }}\n    </ng-container>\n</div>\n<div class=\"t-wrapper\">\n    <div class=\"t-text\">\n        <div\n            tuiHintOverflow\n            class=\"t-name\"\n        >\n            {{ name }}\n        </div>\n        <div class=\"t-type\">{{ type }}</div>\n        @if (showSize && (fileSize$ | async); as fileSize) {\n            <div class=\"t-size\">\n                {{ fileSize }}\n            </div>\n        }\n    </div>\n    @if (content$ | async; as content) {\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"content as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n    <ng-content />\n</div>\n@if (allowDelete) {\n    @if (fileTexts$ | async; as texts) {\n        <button\n            appearance=\"icon\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-remove\"\n            [iconStart]=\"icons.close\"\n            (click.prevent)=\"remove.emit()\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            {{ texts.remove }}\n        </button>\n    }\n}\n\n<ng-template #defaultLeftContent>\n    @if (preview) {\n        <img\n            alt=\"file preview\"\n            class=\"t-image\"\n            [src]=\"preview\"\n        />\n    } @else {\n        @if (isLoading) {\n            <tui-loader\n                class=\"t-loader\"\n                [inheritColor]=\"isBig\"\n            />\n        } @else {\n            <tui-icon\n                *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                class=\"t-icon\"\n                [class.t-icon_blank]=\"isBig || isDeleted\"\n                [class.t-icon_error]=\"isError\"\n                [icon]=\"src.toString()\"\n            />\n        }\n    }\n</ng-template>\n", styles: [":host{position:relative;display:flex;align-items:center;font:var(--tui-font-text-m);padding:.625rem;padding-inline-end:2.25rem;text-decoration:none;border-radius:var(--tui-radius-m)}:host:hover .t-remove,:host[data-delete=always] .t-remove{opacity:1}.t-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;margin-inline-end:.75rem;border-radius:var(--tui-radius-m);overflow:hidden;color:var(--tui-text-tertiary)}.t-preview_big{inline-size:4rem;block-size:4rem;margin-inline-end:1rem}.t-preview_big:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-neutral-1)}.t-image{max-inline-size:100%;max-block-size:100%}.t-loader{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}.t-icon{position:absolute;inset:0;color:var(--tui-status-positive);margin:auto}.t-icon_blank{color:var(--tui-text-tertiary)}.t-icon_error{color:var(--tui-text-negative)}.t-remove{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem}@supports (inset-inline-end: 0){.t-remove{right:unset;inset-inline-end:.625rem}}.t-remove:focus{opacity:1}.t-remove:focus-visible{box-shadow:inset 0 0 0 2px var(--tui-border-focus)}@media (hover: hover) and (pointer: fine){.t-remove{opacity:0}}.t-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;color:var(--tui-text-primary)}.t-text{display:flex;inline-size:100%}.t-size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-inline-start:.5rem}.t-type{flex-shrink:0}.t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-content{font:var(--tui-font-text-s);color:var(--tui-text-negative)}\n"] }]
-        }], propDecorators: { file: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], showDelete: [{
-                type: Input
-            }], showSize: [{
-                type: Input
-            }], leftContent: [{
-                type: Input
-            }], remove: [{
-                type: Output
-            }], calculateContent$: [], calculateFileSize$: [], createPreview: [], getName: [], getType: [] } });
+            args: [{ selector: 'tui-file,a[tuiFile],button[tuiFile]', imports: [PolymorpheusOutlet, TuiButton, TuiHintOverflow, TuiIcon, TuiLoader], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAppearanceOptionsProvider(TUI_FILE_OPTIONS)], hostDirectives: [TuiAppearance], host: { '[attr.data-delete]': 'showDelete()' }, template: "<div\n    class=\"t-preview\"\n    [class.t-preview_big]=\"size() === 'l'\"\n>\n    <ng-container *polymorpheusOutlet=\"leftContent() || defaultLeftContent as text\">\n        {{ text }}\n    </ng-container>\n</div>\n<div class=\"t-wrapper\">\n    <div class=\"t-text\">\n        <div\n            tuiHintOverflow\n            class=\"t-name\"\n        >\n            {{ name() }}\n        </div>\n        <div class=\"t-type\">{{ type() }}</div>\n        @if (showSize() && fileSize()) {\n            <div class=\"t-size\">\n                {{ fileSize() }}\n            </div>\n        }\n    </div>\n    @if (content(); as text) {\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n    <ng-content />\n</div>\n@if (allowDelete) {\n    @if (fileTexts(); as texts) {\n        <button\n            appearance=\"icon\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-remove\"\n            [iconStart]=\"icons.close\"\n            (click.prevent)=\"remove.emit()\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            {{ texts.remove }}\n        </button>\n    }\n}\n\n<ng-template #defaultLeftContent>\n    @if (preview()) {\n        <img\n            alt=\"file preview\"\n            class=\"t-image\"\n            [src]=\"preview()\"\n        />\n    } @else {\n        @if (state() === 'loading') {\n            <tui-loader\n                class=\"t-loader\"\n                [inheritColor]=\"size() === 'l'\"\n            />\n        } @else {\n            <tui-icon\n                *polymorpheusOutlet=\"icon() as src; context: {$implicit: size()}\"\n                class=\"t-icon\"\n                [class.t-icon_blank]=\"size() === 'l' || state() === 'deleted'\"\n                [class.t-icon_error]=\"state() === 'error'\"\n                [icon]=\"src.toString()\"\n            />\n        }\n    }\n</ng-template>\n", styles: [":host{position:relative;display:flex;align-items:center;font:var(--tui-font-body-m);padding:.625rem;padding-inline-end:2.25rem;text-decoration:none;border-radius:var(--tui-radius-m)}:host:hover .t-remove,:host[data-delete=always] .t-remove{opacity:1}.t-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;margin-inline-end:.75rem;border-radius:var(--tui-radius-m);overflow:hidden;color:var(--tui-text-tertiary)}.t-preview_big{inline-size:4rem;block-size:4rem;margin-inline-end:1rem}.t-preview_big:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";background:var(--tui-background-neutral-1)}.t-image{max-inline-size:100%;max-block-size:100%}.t-loader{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}.t-icon{position:absolute;inset:0;color:var(--tui-status-positive);margin:auto}.t-icon_blank{color:var(--tui-text-tertiary)}.t-icon_error{color:var(--tui-text-negative)}.t-remove{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem}@supports (inset-inline-end: 0){.t-remove{right:unset;inset-inline-end:.625rem}}.t-remove:focus{opacity:1}.t-remove:focus-visible{box-shadow:inset 0 0 0 2px var(--tui-border-focus)}@media (hover: hover) and (pointer: fine){.t-remove{opacity:0}}.t-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;color:var(--tui-text-primary)}.t-text{display:flex;inline-size:100%}.t-size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-inline-start:.5rem}.t-type{flex-shrink:0}.t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-content{font:var(--tui-font-body-s);color:var(--tui-text-negative)}\n"] }]
+        }] });
 
 class TuiFilesComponent {
     constructor() {
-        this.items = EMPTY_QUERY;
         this.hideText = inject(TUI_HIDE_TEXT);
         this.showAllText = inject(TUI_SHOW_ALL_TEXT);
-        this.max = 0;
-        this.expanded = false;
-        this.expandedChange = new EventEmitter();
+        this.items = contentChildren(TuiItem, { read: TemplateRef });
+        this.max = input(0);
+        this.expanded = model(false);
     }
-    get hasExtraItems() {
-        return !!this.max && this.items.length > this.max;
-    }
-    toggle() {
-        this.expanded = !this.expanded;
-        this.expandedChange.emit(this.expanded);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiFilesComponent, isStandalone: true, selector: "tui-files", inputs: { max: "max", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiFilesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiFilesComponent, isStandalone: true, selector: "tui-files", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, providers: [
             tuiGroupOptionsProvider({ size: 'm', collapsed: true, orientation: 'vertical' }),
-        ], queries: [{ propertyName: "items", predicate: TuiItem, read: TemplateRef }], hostDirectives: [{ directive: i1$1.TuiGroup }], ngImport: i0, template: "@if (items.changes | async) {}\n<ng-content />\n@for (item of items; track item) {\n    @if (!max || $index < max) {\n        <ng-container [ngTemplateOutlet]=\"item\" />\n    }\n}\n@if (hasExtraItems) {\n    <tui-expand [expanded]=\"expanded\">\n        <div\n            tuiGroup\n            class=\"t-extra-items\"\n        >\n            @for (item of items; track item) {\n                @if (max && $index >= max) {\n                    <ng-container [ngTemplateOutlet]=\"item\" />\n                }\n            }\n        </div>\n    </tui-expand>\n}\n@if (hasExtraItems) {\n    <div\n        class=\"t-bottom\"\n        [class.t-bottom_collapsed]=\"!expanded\"\n    >\n        <button\n            appearance=\"outline\"\n            size=\"m\"\n            tuiButton\n            type=\"button\"\n            class=\"t-button\"\n            (click)=\"toggle()\"\n        >\n            {{ expanded ? hideText() : showAllText() }}\n        </button>\n    </div>\n}\n", styles: ["tui-files{inline-size:100%;overflow:hidden;border-radius:var(--tui-radius-m)}tui-files:empty:empty{display:none}tui-files .t-files{position:relative;display:block;inline-size:100%;block-size:100%;border-radius:var(--tui-radius-m);overflow:hidden}tui-files .t-button{inline-size:100%;border-radius:inherit}tui-files .t-bottom{z-index:3;inline-size:100%;background:var(--tui-background-base);mask:none!important}tui-files .t-bottom_collapsed{box-shadow:var(--tui-shadow-popup);margin-block-start:-1.5rem}tui-files .t-extra-items{inline-size:100%}tui-files .t-extra-items>*{border-radius:0!important}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "items", predicate: TuiItem, read: TemplateRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiGroup }], ngImport: i0, template: "<ng-content />\n@for (item of items(); track $index) {\n    @if (!max() || $index < max()) {\n        <ng-container [ngTemplateOutlet]=\"item\" />\n    }\n}\n@if (max() && items().length > max()) {\n    <tui-expand [expanded]=\"expanded()\">\n        <div\n            tuiGroup\n            class=\"t-extra-items\"\n        >\n            @for (item of items(); track $index) {\n                @if (max() && $index >= max()) {\n                    <ng-container [ngTemplateOutlet]=\"item\" />\n                }\n            }\n        </div>\n    </tui-expand>\n    <div\n        class=\"t-bottom\"\n        [class.t-bottom_collapsed]=\"!expanded()\"\n    >\n        <button\n            appearance=\"outline\"\n            size=\"m\"\n            tuiButton\n            type=\"button\"\n            class=\"t-button\"\n            (click)=\"expanded.set(!expanded())\"\n        >\n            {{ expanded() ? hideText() : showAllText() }}\n        </button>\n    </div>\n}\n", styles: ["tui-files{inline-size:100%;overflow:hidden;border-radius:var(--tui-radius-m)}tui-files:empty:empty{display:none}tui-files .t-files{position:relative;display:block;inline-size:100%;block-size:100%;border-radius:var(--tui-radius-m);overflow:hidden}tui-files .t-button{inline-size:100%;border-radius:inherit}tui-files .t-bottom{z-index:3;inline-size:100%;background:var(--tui-background-base);mask:none!important}tui-files .t-bottom_collapsed{box-shadow:var(--tui-shadow-popup);margin-block-start:-1.5rem}tui-files .t-extra-items{inline-size:100%}tui-files .t-extra-items>*{border-radius:0!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFilesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiFilesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-files', imports: [AsyncPipe, NgTemplateOutlet, TuiButton, TuiExpand, TuiGroup], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'tui-files', imports: [NgTemplateOutlet, TuiButton, TuiExpand, TuiGroup], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         tuiGroupOptionsProvider({ size: 'm', collapsed: true, orientation: 'vertical' }),
-                    ], hostDirectives: [TuiGroup], template: "@if (items.changes | async) {}\n<ng-content />\n@for (item of items; track item) {\n    @if (!max || $index < max) {\n        <ng-container [ngTemplateOutlet]=\"item\" />\n    }\n}\n@if (hasExtraItems) {\n    <tui-expand [expanded]=\"expanded\">\n        <div\n            tuiGroup\n            class=\"t-extra-items\"\n        >\n            @for (item of items; track item) {\n                @if (max && $index >= max) {\n                    <ng-container [ngTemplateOutlet]=\"item\" />\n                }\n            }\n        </div>\n    </tui-expand>\n}\n@if (hasExtraItems) {\n    <div\n        class=\"t-bottom\"\n        [class.t-bottom_collapsed]=\"!expanded\"\n    >\n        <button\n            appearance=\"outline\"\n            size=\"m\"\n            tuiButton\n            type=\"button\"\n            class=\"t-button\"\n            (click)=\"toggle()\"\n        >\n            {{ expanded ? hideText() : showAllText() }}\n        </button>\n    </div>\n}\n", styles: ["tui-files{inline-size:100%;overflow:hidden;border-radius:var(--tui-radius-m)}tui-files:empty:empty{display:none}tui-files .t-files{position:relative;display:block;inline-size:100%;block-size:100%;border-radius:var(--tui-radius-m);overflow:hidden}tui-files .t-button{inline-size:100%;border-radius:inherit}tui-files .t-bottom{z-index:3;inline-size:100%;background:var(--tui-background-base);mask:none!important}tui-files .t-bottom_collapsed{box-shadow:var(--tui-shadow-popup);margin-block-start:-1.5rem}tui-files .t-extra-items{inline-size:100%}tui-files .t-extra-items>*{border-radius:0!important}\n"] }]
-        }], propDecorators: { items: [{
-                type: ContentChildren,
-                args: [TuiItem, { read: TemplateRef }]
-            }], max: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], expandedChange: [{
-                type: Output
-            }] } });
+                    ], hostDirectives: [TuiGroup], template: "<ng-content />\n@for (item of items(); track $index) {\n    @if (!max() || $index < max()) {\n        <ng-container [ngTemplateOutlet]=\"item\" />\n    }\n}\n@if (max() && items().length > max()) {\n    <tui-expand [expanded]=\"expanded()\">\n        <div\n            tuiGroup\n            class=\"t-extra-items\"\n        >\n            @for (item of items(); track $index) {\n                @if (max() && $index >= max()) {\n                    <ng-container [ngTemplateOutlet]=\"item\" />\n                }\n            }\n        </div>\n    </tui-expand>\n    <div\n        class=\"t-bottom\"\n        [class.t-bottom_collapsed]=\"!expanded()\"\n    >\n        <button\n            appearance=\"outline\"\n            size=\"m\"\n            tuiButton\n            type=\"button\"\n            class=\"t-button\"\n            (click)=\"expanded.set(!expanded())\"\n        >\n            {{ expanded() ? hideText() : showAllText() }}\n        </button>\n    </div>\n}\n", styles: ["tui-files{inline-size:100%;overflow:hidden;border-radius:var(--tui-radius-m)}tui-files:empty:empty{display:none}tui-files .t-files{position:relative;display:block;inline-size:100%;block-size:100%;border-radius:var(--tui-radius-m);overflow:hidden}tui-files .t-button{inline-size:100%;border-radius:inherit}tui-files .t-bottom{z-index:3;inline-size:100%;background:var(--tui-background-base);mask:none!important}tui-files .t-bottom_collapsed{box-shadow:var(--tui-shadow-popup);margin-block-start:-1.5rem}tui-files .t-extra-items{inline-size:100%}tui-files .t-extra-items>*{border-radius:0!important}\n"] }]
+        }] });
 
 class TuiInputFilesContent {
     constructor() {
-        this.breakpoint$ = inject(TuiBreakpointService);
-        this.text$ = toObservable(inject(TUI_INPUT_FILE_TEXTS));
-        this.context = injectContext();
+        this.texts = inject(TUI_INPUT_FILE_TEXTS);
         this.component = inject(TuiInputFiles);
-    }
-    get link$() {
-        return this.computeLink$(this.context.$implicit, !!this.component.input?.input.multiple);
-    }
-    get label$() {
-        return this.computeLabel$(this.context.$implicit, !!this.component.input?.input.multiple);
-    }
-    computeLink$(fileDragged, multiple) {
-        return fileDragged
-            ? of('')
-            : this.text$.pipe(map((t) => (multiple ? t.defaultLinkMultiple : t.defaultLinkSingle)));
-    }
-    computeLabel$(fileDragged, multiple) {
-        return fileDragged
-            ? combineLatest([this.breakpoint$, this.text$]).pipe(map(([breakpoint, text]) => {
-                if (breakpoint === 'mobile') {
-                    return '';
-                }
-                return multiple ? text.dropMultiple : text.drop;
-            }))
-            : combineLatest([this.breakpoint$, this.text$]).pipe(map(([breakpoint, text]) => {
-                if (breakpoint === 'mobile') {
-                    return '';
-                }
-                return multiple
-                    ? text.defaultLabelMultiple
-                    : text.defaultLabelSingle;
-            }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFilesContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiInputFilesContent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
-        <a tuiLink>{{ link$ | async }}</a>
-        {{ label$ | async }}
-    `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+        this.breakpoint = inject(TUI_BREAKPOINT);
+        this.context = injectContext();
+        this.link = computed(() => this.component.input()?.el.multiple
+            ? this.texts().defaultLinkMultiple
+            : this.texts().defaultLinkSingle);
+        this.label = computed(() => this.component.input()?.el.multiple
+            ? this.texts().defaultLabelMultiple
+            : this.texts().defaultLabelSingle);
+        this.dragged = computed(() => this.component.input()?.el.multiple
+            ? this.texts().dropMultiple
+            : this.texts().drop);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFilesContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiInputFilesContent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <a tuiLink>{{ context.$implicit ? '' : link() }}</a>
+        @if (breakpoint() !== 'mobile') {
+            {{ context.$implicit ? dragged() : label() }}
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    tuiPure
-], TuiInputFilesContent.prototype, "computeLink$", null);
-__decorate([
-    tuiPure
-], TuiInputFilesContent.prototype, "computeLabel$", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFilesContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFilesContent, decorators: [{
             type: Component,
             args: [{
-                    imports: [AsyncPipe, TuiLink],
+                    imports: [TuiLink],
                     template: `
-        <a tuiLink>{{ link$ | async }}</a>
-        {{ label$ | async }}
+        <a tuiLink>{{ context.$implicit ? '' : link() }}</a>
+        @if (breakpoint() !== 'mobile') {
+            {{ context.$implicit ? dragged() : label() }}
+        }
     `,
-                    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-                    changeDetection: ChangeDetectionStrategy.Default,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { computeLink$: [], computeLabel$: [] } });
+        }] });
 
 const TUI_INPUT_FILES_DEFAULT_OPTIONS = {
     appearance: 'file',
@@ -360,10 +246,10 @@ class TuiInputFilesValidator extends TuiValidator {
             ]) || Validators.nullValidator;
         this.onChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFilesValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiInputFilesValidator, isStandalone: true, inputs: { accept: "accept", maxFileSize: "maxFileSize" }, host: { properties: { "accept": "accept" } }, providers: [tuiProvide(NG_VALIDATORS, TuiInputFilesValidator, true)], exportAs: ["tuiInputFilesValidator"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFilesValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiInputFilesValidator, isStandalone: true, inputs: { accept: "accept", maxFileSize: "maxFileSize" }, host: { properties: { "accept": "accept" } }, providers: [tuiProvide(NG_VALIDATORS, TuiInputFilesValidator, true)], exportAs: ["tuiInputFilesValidator"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFilesValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFilesValidator, decorators: [{
             type: Directive,
             args: [{
                     inputs: ['accept', 'maxFileSize'],
@@ -379,12 +265,12 @@ class TuiInputFilesDirective extends TuiControl {
     constructor() {
         super(...arguments);
         this.host = inject(forwardRef(() => TuiInputFiles));
-        this.m = tuiAppearanceMode(this.mode, {});
-        this.reject = timer(0, tuiZonefreeScheduler()).pipe(switchMap(() => tuiControlValue(this.control.control)), map(() => tuiFilesRejected(this.control.control)), filter(({ length }) => !!length));
-        this.input = tuiInjectElement();
+        this.m = tuiAppearanceMode(this.mode);
+        this.el = tuiInjectElement();
+        this.reject = outputFromObservable(timer(0, tuiZonefreeScheduler()).pipe(switchMap(() => tuiControlValue(this.control.control)), map(() => tuiFilesRejected(this.control.control)), filter(({ length }) => !!length)));
     }
     process(files) {
-        const fileOrFiles = this.input.multiple
+        const fileOrFiles = this.el.multiple
             ? [...toArray(this.value()), ...Array.from(files)]
             : files[0];
         if (fileOrFiles) {
@@ -392,17 +278,17 @@ class TuiInputFilesDirective extends TuiControl {
         }
     }
     onClick(event) {
-        if (this.input.readOnly) {
+        if (this.el.readOnly) {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFilesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiInputFilesDirective, isStandalone: true, selector: "input[tuiInputFiles]", outputs: { reject: "reject" }, host: { attributes: { "title": "", "type": "file" }, listeners: { "blur": "onTouched()", "click": "onClick($event)" }, properties: { "disabled": "disabled()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFilesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiInputFilesDirective, isStandalone: true, selector: "input[tuiInputFiles]", outputs: { reject: "reject" }, host: { attributes: { "title": "", "type": "file" }, listeners: { "blur": "onTouched()", "click": "onClick($event)" }, properties: { "disabled": "disabled()" } }, providers: [
             tuiAsControl(TuiInputFilesDirective),
             tuiAppearanceOptionsProvider(TUI_INPUT_FILES_OPTIONS),
         ], usesInheritance: true, hostDirectives: [{ directive: i1$2.TuiNativeValidator }, { directive: i1.TuiWithAppearance }, { directive: TuiInputFilesValidator, inputs: ["accept", "accept", "maxFileSize", "maxFileSize"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFilesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFilesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[tuiInputFiles]',
@@ -426,9 +312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '(click)': 'onClick($event)',
                     },
                 }]
-        }], propDecorators: { reject: [{
-                type: Output
-            }] } });
+        }] });
 function toArray(value) {
     return value ? coerceArray(value) : EMPTY_ARRAY;
 }
@@ -436,46 +320,48 @@ function toArray(value) {
 class TuiInputFiles {
     constructor() {
         this.content = new PolymorpheusComponent(TuiInputFilesContent);
+        this.template = contentChild(TemplateRef);
+        this.input = contentChild(TuiInputFilesDirective);
     }
     get fileDragged() {
-        return !!this.files && !this.input?.disabled();
+        return !!this.files && !this.input()?.disabled();
     }
     onFilesSelected(input) {
         if (!input?.files) {
             return;
         }
-        this.input?.process(input.files);
+        this.input()?.process(input.files);
         input.value = '';
     }
     onDropped({ dataTransfer }) {
         this.files = null;
-        if (dataTransfer?.files && !this.input?.disabled()) {
-            this.input?.process(dataTransfer.files);
+        if (dataTransfer?.files && !this.input()?.disabled()) {
+            this.input()?.process(dataTransfer.files);
         }
     }
     onDrag(dataTransfer) {
         this.files = dataTransfer?.files;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFiles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiInputFiles, isStandalone: true, selector: "label[tuiInputFiles]", host: { listeners: { "dragover.prevent.zoneless": "0", "drop.prevent": "onDropped($event)", "dragenter": "onDrag($event.dataTransfer)", "dragleave": "onDrag(null)", "change": "onFilesSelected($event.target)" }, properties: { "class._dragged": "fileDragged" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "input", first: true, predicate: TuiInputFilesDirective, descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFiles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: TuiInputFiles, isStandalone: true, selector: "label[tuiInputFiles]", host: { listeners: { "dragover.prevent.zoneless": "0", "drop.prevent": "onDropped($event)", "dragenter": "onDrag($event.dataTransfer)", "dragleave": "onDrag(null)", "change": "onFilesSelected($event.target)" }, properties: { "class._dragged": "fileDragged" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: TuiInputFilesDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
         <ng-content />
         <span
             *polymorpheusOutlet="
-                template || content as text;
+                template() || content as text;
                 context: {$implicit: fileDragged}
             "
         >
             {{ text }}
         </span>
-    `, isInline: true, styles: ["label[tuiInputFiles]{position:relative;display:flex;min-block-size:var(--tui-height-l);justify-content:center;align-items:center;text-align:center;border-radius:var(--tui-radius-m);font:var(--tui-font-text-m);overflow-wrap:break-word;padding:0 .5rem}label[tuiInputFiles]>:not(input){position:relative;pointer-events:none}label[tuiInputFiles] input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;color:transparent;cursor:pointer}label[tuiInputFiles] input:disabled~*{opacity:var(--tui-disabled-opacity)}label[tuiInputFiles] input::-webkit-file-upload-button{display:none}label[tuiInputFiles] input::file-selector-button{display:none}*:disabled label[tuiInputFiles]{pointer-events:none}[tuiAppearance][data-appearance=file]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border-radius:inherit;box-sizing:border-box;border:1px dashed var(--tui-text-action);outline:none}tui-root._mobile [tuiAppearance][data-appearance=file]{border-style:solid}[tuiInputFiles]._dragged [tuiAppearance][data-appearance=file]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}@media (hover: hover) and (pointer: fine){[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]){background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}}[tuiAppearance][data-appearance=file][data-state=hover]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}@media (hover: hover) and (pointer: fine){[tuiAppearance][data-appearance=file][tuiWrapper]:hover:not(._no-hover),[tuiAppearance][data-appearance=file][tuiWrapper][data-state=hover]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}}[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file][data-state=active]{background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file][tuiWrapper]:active:not(._no-active),[tuiAppearance][data-appearance=file][tuiWrapper][data-state=active],[tuiAppearance][data-appearance=file][tuiWrapper][data-state=active]:hover{background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file]:disabled:not([data-state]),[tuiAppearance][data-appearance=file][data-state=disabled]{background:transparent;border-color:var(--tui-text-tertiary)}[tuiAppearance][data-appearance=file][tuiWrapper]:disabled:not([data-state]),[tuiAppearance][data-appearance=file][tuiWrapper][data-state=disabled]{background:transparent;border-color:var(--tui-text-tertiary)}[tuiAppearance][data-appearance=file]:focus-visible:not([data-focus=false]){border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file][data-focus=true]{border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file][tuiWrapper]:not(._focused):has(:focus-visible),[tuiAppearance][data-appearance=file][tuiWrapper]._focused{border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file]:not(:disabled)[data-mode~=invalid],[tuiAppearance][data-appearance=file]:invalid:not(:disabled):not([data-mode]){border-color:var(--tui-status-negative)!important}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["label[tuiInputFiles]{position:relative;display:flex;min-block-size:var(--tui-height-l);justify-content:center;align-items:center;text-align:center;border-radius:var(--tui-radius-m);font:var(--tui-font-body-m);overflow-wrap:break-word;padding:0 .5rem}label[tuiInputFiles]>:not(input){position:relative;pointer-events:none}label[tuiInputFiles] input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;color:transparent;cursor:pointer}label[tuiInputFiles] input:disabled~*{opacity:var(--tui-disabled-opacity)}label[tuiInputFiles] input::-webkit-file-upload-button{display:none}label[tuiInputFiles] input::file-selector-button{display:none}*:disabled label[tuiInputFiles]{pointer-events:none}[tuiAppearance][data-appearance=file]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border-radius:inherit;box-sizing:border-box;border:1px dashed var(--tui-text-action);outline:none}tui-root._mobile [tuiAppearance][data-appearance=file]{border-style:solid}[tuiInputFiles]._dragged [tuiAppearance][data-appearance=file]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}@media (hover: hover) and (pointer: fine){[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}}[tuiAppearance][data-appearance=file][data-state=hover]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file][data-state=active]{background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file]:disabled:not([data-state]),[tuiAppearance][data-appearance=file][data-state=disabled]{background:transparent;border-color:var(--tui-text-tertiary)}[tuiAppearance][data-appearance=file]:focus-visible:not([data-focus=false]){border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file][data-focus=true]{border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file]:not(:disabled)[data-mode~=invalid],[tuiAppearance][data-appearance=file]:invalid:not(:disabled):not([data-mode]){border-color:var(--tui-status-negative)!important}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiInputFiles, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputFiles, decorators: [{
             type: Component,
             args: [{ selector: 'label[tuiInputFiles]', imports: [PolymorpheusOutlet], template: `
         <ng-content />
         <span
             *polymorpheusOutlet="
-                template || content as text;
+                template() || content as text;
                 context: {$implicit: fileDragged}
             "
         >
@@ -488,14 +374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '(dragleave)': 'onDrag(null)',
                         '[class._dragged]': 'fileDragged',
                         '(change)': 'onFilesSelected($event.target)',
-                    }, styles: ["label[tuiInputFiles]{position:relative;display:flex;min-block-size:var(--tui-height-l);justify-content:center;align-items:center;text-align:center;border-radius:var(--tui-radius-m);font:var(--tui-font-text-m);overflow-wrap:break-word;padding:0 .5rem}label[tuiInputFiles]>:not(input){position:relative;pointer-events:none}label[tuiInputFiles] input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;color:transparent;cursor:pointer}label[tuiInputFiles] input:disabled~*{opacity:var(--tui-disabled-opacity)}label[tuiInputFiles] input::-webkit-file-upload-button{display:none}label[tuiInputFiles] input::file-selector-button{display:none}*:disabled label[tuiInputFiles]{pointer-events:none}[tuiAppearance][data-appearance=file]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border-radius:inherit;box-sizing:border-box;border:1px dashed var(--tui-text-action);outline:none}tui-root._mobile [tuiAppearance][data-appearance=file]{border-style:solid}[tuiInputFiles]._dragged [tuiAppearance][data-appearance=file]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}@media (hover: hover) and (pointer: fine){[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not(:disabled):not([data-state]){background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}}[tuiAppearance][data-appearance=file][data-state=hover]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}@media (hover: hover) and (pointer: fine){[tuiAppearance][data-appearance=file][tuiWrapper]:hover:not(._no-hover),[tuiAppearance][data-appearance=file][tuiWrapper][data-state=hover]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}}[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file][data-state=active]{background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file][tuiWrapper]:active:not(._no-active),[tuiAppearance][data-appearance=file][tuiWrapper][data-state=active],[tuiAppearance][data-appearance=file][tuiWrapper][data-state=active]:hover{background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file]:disabled:not([data-state]),[tuiAppearance][data-appearance=file][data-state=disabled]{background:transparent;border-color:var(--tui-text-tertiary)}[tuiAppearance][data-appearance=file][tuiWrapper]:disabled:not([data-state]),[tuiAppearance][data-appearance=file][tuiWrapper][data-state=disabled]{background:transparent;border-color:var(--tui-text-tertiary)}[tuiAppearance][data-appearance=file]:focus-visible:not([data-focus=false]){border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file][data-focus=true]{border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file][tuiWrapper]:not(._focused):has(:focus-visible),[tuiAppearance][data-appearance=file][tuiWrapper]._focused{border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file]:not(:disabled)[data-mode~=invalid],[tuiAppearance][data-appearance=file]:invalid:not(:disabled):not([data-mode]){border-color:var(--tui-status-negative)!important}\n"] }]
-        }], propDecorators: { template: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], input: [{
-                type: ContentChild,
-                args: [TuiInputFilesDirective]
-            }] } });
+                    }, styles: ["label[tuiInputFiles]{position:relative;display:flex;min-block-size:var(--tui-height-l);justify-content:center;align-items:center;text-align:center;border-radius:var(--tui-radius-m);font:var(--tui-font-body-m);overflow-wrap:break-word;padding:0 .5rem}label[tuiInputFiles]>:not(input){position:relative;pointer-events:none}label[tuiInputFiles] input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;color:transparent;cursor:pointer}label[tuiInputFiles] input:disabled~*{opacity:var(--tui-disabled-opacity)}label[tuiInputFiles] input::-webkit-file-upload-button{display:none}label[tuiInputFiles] input::file-selector-button{display:none}*:disabled label[tuiInputFiles]{pointer-events:none}[tuiAppearance][data-appearance=file]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;border-radius:inherit;box-sizing:border-box;border:1px dashed var(--tui-text-action);outline:none}tui-root._mobile [tuiAppearance][data-appearance=file]{border-style:solid}[tuiInputFiles]._dragged [tuiAppearance][data-appearance=file]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}@media (hover: hover) and (pointer: fine){[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):hover:not([data-state]){background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}}[tuiAppearance][data-appearance=file][data-state=hover]{background:var(--tui-background-neutral-1);border-color:var(--tui-text-action-hover)}[tuiAppearance][data-appearance=file]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled):active:not([data-state]){background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file][data-state=active]{background:var(--tui-background-neutral-1-hover)}[tuiAppearance][data-appearance=file]:disabled:not([data-state]),[tuiAppearance][data-appearance=file][data-state=disabled]{background:transparent;border-color:var(--tui-text-tertiary)}[tuiAppearance][data-appearance=file]:focus-visible:not([data-focus=false]){border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file][data-focus=true]{border:.125rem solid var(--tui-border-focus)}[tuiAppearance][data-appearance=file]:not(:disabled)[data-mode~=invalid],[tuiAppearance][data-appearance=file]:invalid:not(:disabled):not([data-mode]){border-color:var(--tui-status-negative)!important}\n"] }]
+        }] });
 
 class TuiFileRejectedPipe {
     constructor() {
@@ -527,10 +407,10 @@ class TuiFileRejectedPipe {
             return null;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFileRejectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiFileRejectedPipe, isStandalone: true, name: "tuiFileRejected" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiFileRejectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TuiFileRejectedPipe, isStandalone: true, name: "tuiFileRejected" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFileRejectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiFileRejectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tuiFileRejected',