@taiga-ui/kit 2.21.0 → 2.25.0

package/bundles/taiga-ui-kit-components-input-file.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/tokens'), require('@taiga-ui/kit/utils/files'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-file', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/files', 'rxjs', 'rxjs/operators', '@angular/common', '@tinkoff/ng-polymorpheus', '@angular/platform-browser'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-file'] = {}), global.ng.core, global.ng.forms, global.cdk, global.core$1, global['taiga-ui'].kit.tokens, global['taiga-ui'].kit.utils.files, global.rxjs, global.rxjs.operators, global.ng.common, global.ngPolymorpheus, global.ng.platformBrowser));
-}(this, (function (exports, core, forms, cdk, core$1, tokens, files, rxjs, operators, common, ngPolymorpheus, platformBrowser) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@taiga-ui/cdk'), require('@taiga-ui/kit/tokens'), require('@taiga-ui/kit/utils/files'), require('rxjs'), require('rxjs/operators'), require('@angular/forms'), require('@taiga-ui/core'), require('@angular/common'), require('@tinkoff/ng-polymorpheus')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-file', ['exports', '@angular/core', '@angular/platform-browser', '@taiga-ui/cdk', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/files', 'rxjs', 'rxjs/operators', '@angular/forms', '@taiga-ui/core', '@angular/common', '@tinkoff/ng-polymorpheus'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].kit = global['taiga-ui'].kit || {}, global['taiga-ui'].kit.components = global['taiga-ui'].kit.components || {}, global['taiga-ui'].kit.components['input-file'] = {}), global.ng.core, global.ng.platformBrowser, global.cdk, global['taiga-ui'].kit.tokens, global['taiga-ui'].kit.utils.files, global.rxjs, global.rxjs.operators, global.ng.forms, global.core$1, global.ng.common, global.ngPolymorpheus));
+}(this, (function (exports, core, platformBrowser, cdk, tokens, files, rxjs, operators, forms, core$1, common, ngPolymorpheus) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -223,6 +223,191 @@
         return value;
     }
 
+    // @dynamic
+    var TuiFileComponent = /** @class */ (function () {
+        function TuiFileComponent(isMobile, sanitizer, fileTexts$, units$) {
+            this.isMobile = isMobile;
+            this.sanitizer = sanitizer;
+            this.fileTexts$ = fileTexts$;
+            this.units$ = units$;
+            this.file = { name: '' };
+            this.state = "normal" /* Normal */;
+            this.size = 'm';
+            this.allowDelete = true;
+            this.showSize = true;
+            this.fileRemoved = new core.EventEmitter();
+            this.focused = false;
+        }
+        Object.defineProperty(TuiFileComponent.prototype, "preview", {
+            get: function () {
+                return this.isBig ? this.createPreview(this.file, this.sanitizer) : '';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "isBig", {
+            get: function () {
+                return this.size === 'l';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "isLoading", {
+            get: function () {
+                return this.state === "loading" /* Loading */;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "isError", {
+            get: function () {
+                return this.state === "error" /* Error */;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "isDeleted", {
+            get: function () {
+                return this.state === "deleted" /* Deleted */;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "icon", {
+            get: function () {
+                if (this.state === "normal" /* Normal */ && this.isBig) {
+                    return 'tuiIconDefaultDocLarge';
+                }
+                switch (this.state) {
+                    case "deleted" /* Deleted */:
+                        return 'tuiIconTrashLarge';
+                    case "error" /* Error */:
+                        return 'tuiIconAlertCircleLarge';
+                    default:
+                        return 'tuiIconCheckCircleLarge';
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "src", {
+            get: function () {
+                return this.file.src || '';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "name", {
+            get: function () {
+                return this.file.name.split('.').slice(0, -1).join('.');
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "type", {
+            get: function () {
+                return '.' + this.file.name.split('.').pop() || '';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "content$", {
+            get: function () {
+                return this.calculateContent$(this.state, this.file, this.fileTexts$);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiFileComponent.prototype, "fileSize$", {
+            get: function () {
+                return this.calculateFileSize$(this.file, this.units$);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiFileComponent.prototype.onRemoveClick = function () {
+            this.fileRemoved.emit();
+        };
+        TuiFileComponent.prototype.onFocusVisible = function (focusVisible) {
+            this.focused = focusVisible;
+        };
+        TuiFileComponent.prototype.calculateContent$ = function (state, file, fileTexts$) {
+            return state === "error" /* Error */ && !file.content
+                ? fileTexts$.pipe(operators.map(function (texts) { return texts.loadingError; }))
+                : rxjs.of(this.file.content || '');
+        };
+        TuiFileComponent.prototype.calculateFileSize$ = function (file, units$) {
+            return units$.pipe(operators.map(function (units) { return files.formatSize(units, file.size); }));
+        };
+        TuiFileComponent.prototype.createPreview = function (file, sanitizer) {
+            if (file.src) {
+                return file.src;
+            }
+            // TODO: iframe warning
+            if (file instanceof File && file.type && file.type.startsWith('image/')) {
+                return sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
+            }
+            return '';
+        };
+        TuiFileComponent.ctorParameters = function () { return [
+            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] },
+            { type: platformBrowser.DomSanitizer, decorators: [{ type: core.Inject, args: [platformBrowser.DomSanitizer,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [tokens.TUI_FILE_TEXTS,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [tokens.TUI_DIGITAL_INFORMATION_UNITS,] }] }
+        ]; };
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiFileComponent.prototype, "file", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiFileComponent.prototype, "state", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiFileComponent.prototype, "size", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiFileComponent.prototype, "allowDelete", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiFileComponent.prototype, "showSize", void 0);
+        __decorate([
+            core.Output()
+        ], TuiFileComponent.prototype, "fileRemoved", void 0);
+        __decorate([
+            core.HostBinding('class._focused')
+        ], TuiFileComponent.prototype, "focused", void 0);
+        __decorate([
+            core.HostBinding('class._link')
+        ], TuiFileComponent.prototype, "src", null);
+        __decorate([
+            cdk.tuiPure
+        ], TuiFileComponent.prototype, "calculateContent$", null);
+        __decorate([
+            cdk.tuiPure
+        ], TuiFileComponent.prototype, "calculateFileSize$", null);
+        __decorate([
+            cdk.tuiPure
+        ], TuiFileComponent.prototype, "createPreview", null);
+        TuiFileComponent = __decorate([
+            core.Component({
+                selector: 'tui-file',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                template: "<ng-container *ngIf=\"!src; else withLink\">\n    <ng-container *ngTemplateOutlet=\"fileInfoTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #withLink>\n    <a\n        rel=\"noreferrer noopener\"\n        target=\"_blank\"\n        class=\"link\"\n        [href]=\"src\"\n        (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"fileInfoTemplate\"></ng-container>\n    </a>\n</ng-template>\n\n<ng-template #fileInfoTemplate>\n    <div class=\"preview\" [class.preview_big]=\"isBig\">\n        <img\n            *ngIf=\"preview && (fileTexts$ | async) as texts; else loader\"\n            automation-id=\"tui-file__preview\"\n            class=\"image\"\n            [alt]=\"texts.preview\"\n            [src]=\"preview\"\n        />\n        <ng-template #loader>\n            <tui-loader\n                *ngIf=\"isLoading; else svg\"\n                automation-id=\"tui-file__loader\"\n                class=\"loader\"\n                [inheritColor]=\"isBig\"\n            ></tui-loader>\n        </ng-template>\n        <ng-template #svg>\n            <tui-svg\n                automation-id=\"tui-file__icon\"\n                class=\"icon\"\n                [class.icon_deleted]=\"isDeleted\"\n                [class.icon_error]=\"isError\"\n                [src]=\"icon\"\n            ></tui-svg>\n        </ng-template>\n    </div>\n    <div class=\"wrapper\">\n        <div class=\"text\">\n            <div automation-id=\"tui-file__name\" class=\"name\">{{ name }}</div>\n            <div automation-id=\"tui-file__type\" class=\"type\">{{ type }}</div>\n            <div\n                *ngIf=\"showSize && (fileSize$ | async) as fileSize\"\n                automation-id=\"tui-file__size\"\n                class=\"size\"\n            >\n                {{ fileSize }}\n            </div>\n        </div>\n        <div\n            *ngIf=\"content$ | async as content\"\n            polymorpheus-outlet\n            automation-id=\"tui-file__content\"\n            class=\"content\"\n            [content]=\"content\"\n        ></div>\n    </div>\n    <button\n        *ngIf=\"allowDelete && (fileTexts$ | async) as texts\"\n        automation-id=\"tui-file__remove\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconCloseLarge\"\n        appearance=\"icon\"\n        class=\"remove\"\n        [title]=\"texts.remove\"\n        [class.remove_mobile]=\"isMobile\"\n        (click.prevent)=\"onRemoveClick()\"\n    ></button>\n</ng-template>\n",
+                styles: [":host{position:relative;display:flex;font:var(--tui-font-text-m);border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host:not(._link){padding:.5625rem 2.1875rem .5625rem .5625rem}:host:hover .remove{opacity:1}:host._focused{border-color:var(--tui-focus);box-shadow:0 0 0 1px inset var(--tui-focus)}.link{display:flex;flex:1;padding:.5625rem 2.1875rem .5625rem .5625rem;text-decoration:none;outline:0;cursor:pointer;color:var(--tui-text-01);max-width:calc(100% - 2.75rem)}.link:hover{background-color:var(--tui-base-02)}.preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;margin-right:.75rem;border-radius:var(--tui-radius-m);overflow:hidden;color:rgba(0,0,0,.24)}.preview_big{width:4rem;height:4rem;margin-right:1rem}.preview_big:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:#333;opacity:.08}.image{max-width:100%;max-height:100%}.loader{position:absolute;top:0;left:0;width:100%;height:100%}.icon{position:absolute;top:0;left:0;width:100%;height:100%;color:var(--tui-success-fill)}.icon_error{color:var(--tui-error-fill)}.icon_deleted{color:var(--tui-base-06)}.remove{transition-property:opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem;opacity:0}.remove:focus,.remove_mobile{opacity:1}.wrapper{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.text{display:flex}.size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-left:.5rem}.type{flex-shrink:0}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content{font:var(--tui-font-text-s);color:var(--tui-error-fill)}"]
+            }),
+            __param(0, core.Inject(cdk.TUI_IS_MOBILE)),
+            __param(1, core.Inject(platformBrowser.DomSanitizer)),
+            __param(2, core.Inject(tokens.TUI_FILE_TEXTS)),
+            __param(3, core.Inject(tokens.TUI_DIGITAL_INFORMATION_UNITS))
+        ], TuiFileComponent);
+        return TuiFileComponent;
+    }());
+
     var DEFAULT_MAX_SIZE = 30 * 1000 * 1000; // 30 MB
     // @dynamic
     var TuiInputFileComponent = /** @class */ (function (_super) {
@@ -510,7 +695,7 @@
         TuiInputFileComponent = TuiInputFileComponent_1 = __decorate([
             core.Component({
                 selector: 'tui-input-file',
-                template: "<tui-wrapper\n    *ngIf=\"multiple || !value\"\n    class=\"wrapper\"\n    [class.wrapper_mobile]=\"isMobile\"\n    [class.wrapper_has-files]=\"hasFiles\"\n    [appearance]=\"getAppearance(mode$ | async)\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered || fileDragged\"\n    [pressed]=\"computedPressed\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n>\n    <label\n        *ngIf=\"(units$ | async) as units\"\n        automation-id=\"tui-input-file__label\"\n    >\n        <a tuiLink>\n            <span\n                polymorpheus-outlet\n                class=\"inline\"\n                [content]=\"computedLink$ | async\"\n            ></span>\n        </a>\n        <ng-container *ngIf=\"computedLabel$ | async as computedLabel\">\n            <span>&nbsp;</span>\n            <span\n                polymorpheus-outlet\n                class=\"inline\"\n                [content]=\"computedLabel\"\n            ></span>\n        </ng-container>\n        <input\n            *ngIf=\"!readOnly && !computedDisabled && (inputFileTexts$ | async) as texts\"\n            #input\n            class=\"native\"\n            type=\"file\"\n            tuiPreventDefault=\"mousedown\"\n            [id]=\"id\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            [tuiFocusable]=\"focusable\"\n            (change)=\"onFilesSelected(input, texts, units)\"\n            (tuiHoveredChange)=\"onHovered($event)\"\n            (tuiFocusedChange)=\"onFocused($event)\"\n            (tuiPressedChange)=\"onPressed($event)\"\n            (tuiDroppableDropped)=\"onDropped($event, texts, units)\"\n            (tuiDroppableDragOverChange)=\"onDragOver($event)\"\n        />\n    </label>\n</tui-wrapper>\n\n<section\n    *tuiLet=\"mode$ | async as mode\"\n    tuiGroup\n    class=\"files\"\n    orientation=\"vertical\"\n    [collapsed]=\"true\"\n>\n    <tui-file\n        *ngFor=\"let file of rejectedFiles\"\n        automation-id=\"tui-input-file__error\"\n        state=\"error\"\n        [attr.data-mode]=\"mode\"\n        [showSize]=\"showSize\"\n        [allowDelete]=\"allowDelete\"\n        [size]=\"size\"\n        [file]=\"file\"\n        (fileRemoved)=\"removeRejectedFile(file)\"\n    ></tui-file>\n    <tui-file\n        *ngFor=\"let file of computedLoading\"\n        automation-id=\"tui-input-file__loading\"\n        state=\"loading\"\n        [attr.data-mode]=\"mode\"\n        [showSize]=\"showSize\"\n        [allowDelete]=\"allowDelete\"\n        [size]=\"size\"\n        [file]=\"file\"\n        (fileRemoved)=\"removeFile(file)\"\n    ></tui-file>\n    <tui-file\n        *ngFor=\"let file of readyFiles\"\n        automation-id=\"tui-input-file__file\"\n        [attr.data-mode]=\"mode\"\n        [showSize]=\"showSize\"\n        [allowDelete]=\"allowDelete\"\n        [size]=\"size\"\n        [file]=\"file\"\n        (fileRemoved)=\"removeFile(file)\"\n    ></tui-file>\n</section>\n",
+                template: "<tui-wrapper\n    *ngIf=\"multiple || !value\"\n    class=\"wrapper\"\n    [class.wrapper_mobile]=\"isMobile\"\n    [class.wrapper_has-files]=\"hasFiles\"\n    [appearance]=\"getAppearance(mode$ | async)\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered || fileDragged\"\n    [pressed]=\"computedPressed\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"computedDisabled\"\n>\n    <label\n        *ngIf=\"units$ | async as units\"\n        automation-id=\"tui-input-file__label\"\n    >\n        <a tuiLink>\n            <span\n                polymorpheus-outlet\n                class=\"inline\"\n                [content]=\"computedLink$ | async\"\n            ></span>\n        </a>\n        <ng-container *ngIf=\"computedLabel$ | async as computedLabel\">\n            <span>&nbsp;</span>\n            <span\n                polymorpheus-outlet\n                class=\"inline\"\n                [content]=\"computedLabel\"\n            ></span>\n        </ng-container>\n        <input\n            *ngIf=\"!readOnly && !computedDisabled && (inputFileTexts$ | async) as texts\"\n            #input\n            type=\"file\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"native\"\n            [id]=\"id\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            [tuiFocusable]=\"focusable\"\n            (change)=\"onFilesSelected(input, texts, units)\"\n            (tuiHoveredChange)=\"onHovered($event)\"\n            (tuiFocusedChange)=\"onFocused($event)\"\n            (tuiPressedChange)=\"onPressed($event)\"\n            (tuiDroppableDropped)=\"onDropped($event, texts, units)\"\n            (tuiDroppableDragOverChange)=\"onDragOver($event)\"\n        />\n    </label>\n</tui-wrapper>\n\n<section\n    *tuiLet=\"mode$ | async as mode\"\n    tuiGroup\n    orientation=\"vertical\"\n    class=\"files\"\n    [collapsed]=\"true\"\n>\n    <tui-file\n        *ngFor=\"let file of rejectedFiles\"\n        automation-id=\"tui-input-file__error\"\n        state=\"error\"\n        [attr.data-mode]=\"mode\"\n        [showSize]=\"showSize\"\n        [allowDelete]=\"allowDelete\"\n        [size]=\"size\"\n        [file]=\"file\"\n        (fileRemoved)=\"removeRejectedFile(file)\"\n    ></tui-file>\n    <tui-file\n        *ngFor=\"let file of computedLoading\"\n        automation-id=\"tui-input-file__loading\"\n        state=\"loading\"\n        [attr.data-mode]=\"mode\"\n        [showSize]=\"showSize\"\n        [allowDelete]=\"allowDelete\"\n        [size]=\"size\"\n        [file]=\"file\"\n        (fileRemoved)=\"removeFile(file)\"\n    ></tui-file>\n    <tui-file\n        *ngFor=\"let file of readyFiles\"\n        automation-id=\"tui-input-file__file\"\n        [attr.data-mode]=\"mode\"\n        [showSize]=\"showSize\"\n        [allowDelete]=\"allowDelete\"\n        [size]=\"size\"\n        [file]=\"file\"\n        (fileRemoved)=\"removeFile(file)\"\n    ></tui-file>\n</section>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     core$1.MODE_PROVIDER,
@@ -519,7 +704,7 @@
                         useExisting: core.forwardRef(function () { return TuiInputFileComponent_1; }),
                     },
                 ],
-                styles: [":host{font:var(--tui-font-text-m);display:block;word-wrap:break-word;color:var(--tui-text-02)}.native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.native::-webkit-file-upload-button{display:none}.inline{display:inline}.wrapper{display:flex;flex:1;justify-content:center;align-items:center;min-height:var(--tui-height-l);border-radius:var(--tui-radius-m);padding:1rem .5rem;box-sizing:border-box}.wrapper:after{border:1px dashed;color:var(--tui-link)}.wrapper_mobile:after{border-style:solid}.wrapper_has-files{margin-bottom:.5rem}.wrapper[data-state=hovered]{background:var(--tui-secondary)}.wrapper[data-state=hovered]:after{color:var(--tui-link-hover)}.wrapper[data-state=pressed]{background:var(--tui-secondary-hover)}.wrapper[data-state=readonly]{pointer-events:none}.wrapper[data-state=readonly]:after{color:var(--tui-text-03)}.wrapper[data-state=disabled]{opacity:var(--tui-disabled-opacity);pointer-events:none}.wrapper[data-state=disabled]:after{color:var(--tui-text-03)}.wrapper._focused:after{border-style:solid;border-width:2px;color:var(--tui-focus)}.files{display:flex}"]
+                styles: [":host{display:block;font:var(--tui-font-text-m);word-wrap:break-word;color:var(--tui-text-02)}.native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.native::-webkit-file-upload-button{display:none}.inline{display:inline}.wrapper{display:flex;flex:1;justify-content:center;align-items:center;min-height:var(--tui-height-l);border-radius:var(--tui-radius-m);padding:1rem .5rem;box-sizing:border-box}.wrapper:after{border:1px dashed;color:var(--tui-link)}.wrapper_mobile:after{border-style:solid}.wrapper_has-files{margin-bottom:.5rem}.wrapper[data-state=hovered]{background:var(--tui-secondary)}.wrapper[data-state=hovered]:after{color:var(--tui-link-hover)}.wrapper[data-state=pressed]{background:var(--tui-secondary-hover)}.wrapper[data-state=readonly]{pointer-events:none}.wrapper[data-state=readonly]:after{color:var(--tui-text-03)}.wrapper[data-state=disabled]{opacity:var(--tui-disabled-opacity);pointer-events:none}.wrapper[data-state=disabled]:after{color:var(--tui-text-03)}.wrapper._focused:after{border-style:solid;border-width:2px;color:var(--tui-focus)}.files{display:flex}"]
             }),
             __param(0, core.Optional()),
             __param(0, core.Self()),
@@ -533,191 +718,6 @@
         return TuiInputFileComponent;
     }(cdk.AbstractTuiNullableControl));
 
-    // @dynamic
-    var TuiFileComponent = /** @class */ (function () {
-        function TuiFileComponent(isMobile, sanitizer, fileTexts$, units$) {
-            this.isMobile = isMobile;
-            this.sanitizer = sanitizer;
-            this.fileTexts$ = fileTexts$;
-            this.units$ = units$;
-            this.file = { name: '' };
-            this.state = "normal" /* Normal */;
-            this.size = 'm';
-            this.allowDelete = true;
-            this.showSize = true;
-            this.fileRemoved = new core.EventEmitter();
-            this.focused = false;
-        }
-        Object.defineProperty(TuiFileComponent.prototype, "preview", {
-            get: function () {
-                return this.isBig ? this.createPreview(this.file, this.sanitizer) : '';
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "isBig", {
-            get: function () {
-                return this.size === 'l';
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "isLoading", {
-            get: function () {
-                return this.state === "loading" /* Loading */;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "isError", {
-            get: function () {
-                return this.state === "error" /* Error */;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "isDeleted", {
-            get: function () {
-                return this.state === "deleted" /* Deleted */;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "icon", {
-            get: function () {
-                if (this.state === "normal" /* Normal */ && this.isBig) {
-                    return 'tuiIconDefaultDocLarge';
-                }
-                switch (this.state) {
-                    case "deleted" /* Deleted */:
-                        return 'tuiIconTrashLarge';
-                    case "error" /* Error */:
-                        return 'tuiIconAlertCircleLarge';
-                    default:
-                        return 'tuiIconCheckCircleLarge';
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "src", {
-            get: function () {
-                return this.file.src || '';
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "name", {
-            get: function () {
-                return this.file.name.split('.').slice(0, -1).join('.');
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "type", {
-            get: function () {
-                return '.' + this.file.name.split('.').pop() || '';
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "content$", {
-            get: function () {
-                return this.calculateContent$(this.state, this.file, this.fileTexts$);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiFileComponent.prototype, "fileSize$", {
-            get: function () {
-                return this.calculateFileSize$(this.file, this.units$);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        TuiFileComponent.prototype.onRemoveClick = function () {
-            this.fileRemoved.emit();
-        };
-        TuiFileComponent.prototype.onFocusVisible = function (focusVisible) {
-            this.focused = focusVisible;
-        };
-        TuiFileComponent.prototype.calculateContent$ = function (state, file, fileTexts$) {
-            return state === "error" /* Error */ && !file.content
-                ? fileTexts$.pipe(operators.map(function (texts) { return texts.loadingError; }))
-                : rxjs.of(this.file.content || '');
-        };
-        TuiFileComponent.prototype.calculateFileSize$ = function (file, units$) {
-            return units$.pipe(operators.map(function (units) { return files.formatSize(units, file.size); }));
-        };
-        TuiFileComponent.prototype.createPreview = function (file, sanitizer) {
-            if (file.src) {
-                return file.src;
-            }
-            // TODO: iframe warning
-            if (file instanceof File && file.type && file.type.startsWith('image/')) {
-                return sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
-            }
-            return '';
-        };
-        TuiFileComponent.ctorParameters = function () { return [
-            { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_MOBILE,] }] },
-            { type: platformBrowser.DomSanitizer, decorators: [{ type: core.Inject, args: [platformBrowser.DomSanitizer,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [tokens.TUI_FILE_TEXTS,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [tokens.TUI_DIGITAL_INFORMATION_UNITS,] }] }
-        ]; };
-        __decorate([
-            core.Input(),
-            cdk.tuiDefaultProp()
-        ], TuiFileComponent.prototype, "file", void 0);
-        __decorate([
-            core.Input(),
-            cdk.tuiDefaultProp()
-        ], TuiFileComponent.prototype, "state", void 0);
-        __decorate([
-            core.Input(),
-            cdk.tuiDefaultProp()
-        ], TuiFileComponent.prototype, "size", void 0);
-        __decorate([
-            core.Input(),
-            cdk.tuiDefaultProp()
-        ], TuiFileComponent.prototype, "allowDelete", void 0);
-        __decorate([
-            core.Input(),
-            cdk.tuiDefaultProp()
-        ], TuiFileComponent.prototype, "showSize", void 0);
-        __decorate([
-            core.Output()
-        ], TuiFileComponent.prototype, "fileRemoved", void 0);
-        __decorate([
-            core.HostBinding('class._focused')
-        ], TuiFileComponent.prototype, "focused", void 0);
-        __decorate([
-            core.HostBinding('class._link')
-        ], TuiFileComponent.prototype, "src", null);
-        __decorate([
-            cdk.tuiPure
-        ], TuiFileComponent.prototype, "calculateContent$", null);
-        __decorate([
-            cdk.tuiPure
-        ], TuiFileComponent.prototype, "calculateFileSize$", null);
-        __decorate([
-            cdk.tuiPure
-        ], TuiFileComponent.prototype, "createPreview", null);
-        TuiFileComponent = __decorate([
-            core.Component({
-                selector: 'tui-file',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                template: "<ng-container *ngIf=\"!src; else withLink\">\n    <ng-container *ngTemplateOutlet=\"fileInfoTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #withLink>\n    <a\n        class=\"link\"\n        rel=\"noreferrer noopener\"\n        target=\"_blank\"\n        [href]=\"src\"\n        (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"fileInfoTemplate\"></ng-container>\n    </a>\n</ng-template>\n\n<ng-template #fileInfoTemplate>\n    <div class=\"preview\" [class.preview_big]=\"isBig\">\n        <img\n            *ngIf=\"preview && (fileTexts$ | async) as texts; else loader\"\n            automation-id=\"tui-file__preview\"\n            class=\"image\"\n            [alt]=\"texts.preview\"\n            [src]=\"preview\"\n        />\n        <ng-template #loader>\n            <tui-loader\n                *ngIf=\"isLoading; else svg\"\n                automation-id=\"tui-file__loader\"\n                class=\"loader\"\n                [inheritColor]=\"isBig\"\n            ></tui-loader>\n        </ng-template>\n        <ng-template #svg>\n            <tui-svg\n                class=\"icon\"\n                automation-id=\"tui-file__icon\"\n                [class.icon_deleted]=\"isDeleted\"\n                [class.icon_error]=\"isError\"\n                [src]=\"icon\"\n            ></tui-svg>\n        </ng-template>\n    </div>\n    <div class=\"wrapper\">\n        <div class=\"text\">\n            <div automation-id=\"tui-file__name\" class=\"name\">{{name}}</div>\n            <div automation-id=\"tui-file__type\" class=\"type\">{{type}}</div>\n            <div\n                *ngIf=\"showSize && (fileSize$ | async) as fileSize\"\n                automation-id=\"tui-file__size\"\n                class=\"size\"\n            >\n                {{fileSize}}\n            </div>\n        </div>\n        <div\n            polymorpheus-outlet\n            *ngIf=\"content$ | async as content\"\n            automation-id=\"tui-file__content\"\n            class=\"content\"\n            [content]=\"content\"\n        ></div>\n    </div>\n    <button\n        *ngIf=\"allowDelete && (fileTexts$ | async) as texts\"\n        automation-id=\"tui-file__remove\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconCloseLarge\"\n        appearance=\"icon\"\n        class=\"remove\"\n        [title]=\"texts.remove\"\n        [class.remove_mobile]=\"isMobile\"\n        (click.prevent)=\"onRemoveClick()\"\n    ></button>\n</ng-template>\n",
-                styles: [":host{font:var(--tui-font-text-m);position:relative;display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host:not(._link){padding:.5625rem 2.1875rem .5625rem .5625rem}:host:hover .remove{opacity:1}:host._focused{border-color:var(--tui-focus);box-shadow:0 0 0 1px inset var(--tui-focus)}.link{display:flex;flex:1;padding:.5625rem 2.1875rem .5625rem .5625rem;text-decoration:none;outline:0;cursor:pointer;color:var(--tui-text-01);max-width:calc(100% - 2.75rem)}.link:hover{background-color:var(--tui-base-02)}.preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;margin-right:.75rem;border-radius:var(--tui-radius-m);overflow:hidden;color:rgba(0,0,0,.24)}.preview_big{width:4rem;height:4rem;margin-right:1rem}.preview_big:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:#333;opacity:.08}.image{max-width:100%;max-height:100%}.loader{position:absolute;top:0;left:0;width:100%;height:100%}.icon{position:absolute;top:0;left:0;width:100%;height:100%;color:var(--tui-success-fill)}.icon_error{color:var(--tui-error-fill)}.icon_deleted{color:var(--tui-base-06)}.remove{transition-property:opacity;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem;opacity:0}.remove:focus,.remove_mobile{opacity:1}.wrapper{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.text{display:flex}.size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-left:.5rem}.type{flex-shrink:0}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content{font:var(--tui-font-text-s);color:var(--tui-error-fill)}"]
-            }),
-            __param(0, core.Inject(cdk.TUI_IS_MOBILE)),
-            __param(1, core.Inject(platformBrowser.DomSanitizer)),
-            __param(2, core.Inject(tokens.TUI_FILE_TEXTS)),
-            __param(3, core.Inject(tokens.TUI_DIGITAL_INFORMATION_UNITS))
-        ], TuiFileComponent);
-        return TuiFileComponent;
-    }());
-
     var TuiInputFileModule = /** @class */ (function () {
         function TuiInputFileModule() {
         }