@taiga-ui/kit 3.10.0 → 3.11.0

package/bundles/taiga-ui-kit-components-input-files.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('@tinkoff/ng-polymorpheus'), require('@angular/common'), require('@taiga-ui/kit/utils'), require('@taiga-ui/kit/components/files')) :
     typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/input-files', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/tokens', '@taiga-ui/kit/utils/files', 'rxjs', 'rxjs/operators', '@tinkoff/ng-polymorpheus', '@angular/common', '@taiga-ui/kit/utils', '@taiga-ui/kit/components/files'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : 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-files"] = {}), global.ng.core, global.ng.forms, global.i4, global.i1, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.files, global.rxjs, global.rxjs.operators, global.i2, global.ng.common, global["taiga-ui"].kit.utils, global["taiga-ui"].kit.components.files));
-})(this, (function (exports, i0, i6, i4, i1, tokens, files, i7, operators, i2, i3, utils, files$1) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : 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-files"] = {}), global.ng.core, global.ng.forms, global.i2, global.i1, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.utils.files, global.rxjs, global.rxjs.operators, global.i3, global.ng.common, global["taiga-ui"].kit.utils, global["taiga-ui"].kit.components.files));
+})(this, (function (exports, i0, i6, i2, i1, tokens, files, i7, operators, i3, i4, utils, files$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,11 +24,11 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -357,6 +357,117 @@
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
+    var TUI_INPUT_FILES_DEFAULT_OPTIONS = {
+        capture: null,
+        accepts: "",
+        multiple: false,
+        size: "m",
+        maxFileSize: 30 * 1000 * 1000, // 30 MB
+    };
+    var TUI_INPUT_FILES_OPTIONS = new i0.InjectionToken("[TUI_INPUT_FILES_OPTIONS]: Default parameters for input files component", {
+        factory: function () { return TUI_INPUT_FILES_DEFAULT_OPTIONS; },
+    });
+    var tuiInputFilesOptionsProvider = function (options) { return ({
+        provide: TUI_INPUT_FILES_OPTIONS,
+        useValue: Object.assign(Object.assign({}, TUI_INPUT_FILES_DEFAULT_OPTIONS), options),
+    }); };
+
+    var TuiInputFilesDirective = /** @class */ (function () {
+        function TuiInputFilesDirective(host, elementRef, idService, options) {
+            this.host = host;
+            this.elementRef = elementRef;
+            this.idService = idService;
+            this.options = options;
+        }
+        Object.defineProperty(TuiInputFilesDirective.prototype, "tabIndex", {
+            get: function () {
+                return this.host.focusable ? 0 : -1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputFilesDirective.prototype, "id", {
+            get: function () {
+                return this.elementRef.nativeElement.id || this.idService.generate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputFilesDirective.prototype, "accept", {
+            get: function () {
+                var _a;
+                return (_a = this.elementRef.nativeElement.accept) !== null && _a !== void 0 ? _a : this.options.accepts;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputFilesDirective.prototype, "multiple", {
+            get: function () {
+                var _a;
+                return (_a = this.elementRef.nativeElement.multiple) !== null && _a !== void 0 ? _a : this.options.multiple;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputFilesDirective.prototype, "capture", {
+            get: function () {
+                var _a;
+                return ((_a = this.elementRef.nativeElement.capture) !== null && _a !== void 0 ? _a : this.options.capture);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputFilesDirective.prototype, "input", {
+            get: function () {
+                return this.elementRef.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TuiInputFilesDirective;
+    }());
+    TuiInputFilesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesDirective, deps: [{ token: TuiInputFilesComponent }, { token: i0.ElementRef }, { token: i2.TuiIdService }, { token: TUI_INPUT_FILES_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiInputFilesDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputFilesDirective, selector: "input[tuiInputFiles]", host: { attributes: { "type": "file" }, properties: { "tabIndex": "this.tabIndex", "id": "this.id", "accept": "this.accept", "multiple": "this.multiple", "capture": "this.capture" }, classAttribute: "t-native" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "input[tuiInputFiles]",
+                        host: {
+                            type: "file",
+                            class: "t-native",
+                        },
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: TuiInputFilesComponent, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiInputFilesComponent]
+                        }] }, { type: i0__namespace.ElementRef, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.ElementRef]
+                        }] }, { type: i2__namespace.TuiIdService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.TuiIdService]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_INPUT_FILES_OPTIONS]
+                        }] }];
+        }, propDecorators: { tabIndex: [{
+                    type: i0.HostBinding,
+                    args: ["tabIndex"]
+                }], id: [{
+                    type: i0.HostBinding,
+                    args: ["id"]
+                }], accept: [{
+                    type: i0.HostBinding,
+                    args: ["accept"]
+                }], multiple: [{
+                    type: i0.HostBinding,
+                    args: ["multiple"]
+                }], capture: [{
+                    type: i0.HostBinding,
+                    args: ["capture"]
+                }] } });
+
     var TuiMaxSizeRejectionErrorPipe = /** @class */ (function () {
         function TuiMaxSizeRejectionErrorPipe(inputFileTexts$, units$) {
             this.inputFileTexts$ = inputFileTexts$;
@@ -385,23 +496,45 @@
                         }] }];
         } });
 
-    var DEFAULT_MAX_SIZE = 30 * 1000 * 1000; // 30 MB
     var TuiInputFilesComponent = /** @class */ (function (_super) {
         __extends(TuiInputFilesComponent, _super);
-        function TuiInputFilesComponent(control, changeDetectorRef, isMobile, inputFileTexts$) {
+        function TuiInputFilesComponent(control, changeDetectorRef, isMobile, inputFileTexts$, options) {
             var _this = _super.call(this, control, changeDetectorRef) || this;
             _this.isMobile = isMobile;
             _this.inputFileTexts$ = inputFileTexts$;
+            _this.options = options;
             _this.dataTransfer = null;
             _this.link = "";
             _this.label = "";
-            _this.accept = "";
-            _this.multiple = false;
-            _this.size = "m";
-            _this.maxFileSize = DEFAULT_MAX_SIZE;
+            /**
+             * @deprecated: use `<input tuiInputFiles accept="image/*" />`
+             */
+            _this.accept = _this.options.accepts;
+            /**
+             * @deprecated: use `<input tuiInputFiles multiple />`
+             */
+            _this.multiple = _this.options.multiple;
+            _this.size = _this.options.size;
+            _this.maxFileSize = _this.options.maxFileSize;
             _this.reject = new i0.EventEmitter();
             return _this;
         }
+        Object.defineProperty(TuiInputFilesComponent.prototype, "computedMultiple", {
+            get: function () {
+                var _a, _b;
+                return (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : this.multiple;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiInputFilesComponent.prototype, "computedAccept", {
+            get: function () {
+                var _a, _b;
+                return (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.accept) !== null && _b !== void 0 ? _b : this.accept;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TuiInputFilesComponent.prototype, "nativeFocusableElement", {
             get: function () {
                 var _a;
@@ -412,7 +545,7 @@
         });
         Object.defineProperty(TuiInputFilesComponent.prototype, "focused", {
             get: function () {
-                return i4.tuiIsNativeFocused(this.nativeFocusableElement);
+                return i2.tuiIsNativeFocused(this.nativeFocusableElement);
             },
             enumerable: false,
             configurable: true
@@ -427,14 +560,14 @@
         });
         Object.defineProperty(TuiInputFilesComponent.prototype, "computedLink$", {
             get: function () {
-                return this.computeLink$(this.fileDragged, this.multiple, this.link);
+                return this.computeLink$(this.fileDragged, this.computedMultiple, this.link);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TuiInputFilesComponent.prototype, "computedLabel$", {
             get: function () {
-                return this.computeLabel$(this.isMobile, this.fileDragged, this.multiple, this.label);
+                return this.computeLabel$(this.isMobile, this.fileDragged, this.computedMultiple, this.label);
             },
             enumerable: false,
             configurable: true
@@ -457,18 +590,25 @@
         TuiInputFilesComponent.prototype.onFocused = function (focused) {
             this.updateFocused(focused);
         };
-        TuiInputFilesComponent.prototype.onFilesSelected = function (input, errors) {
-            this.processSelectedFiles(input.files, errors);
+        TuiInputFilesComponent.prototype.onFilesSelected = function () {
+            var _a, _b, _c;
+            var input = (_b = (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.input) !== null && _b !== void 0 ? _b : (_c = this.input) === null || _c === void 0 ? void 0 : _c.nativeElement;
+            if (!input) {
+                return;
+            }
+            this.processSelectedFiles(input.files);
             input.value = "";
         };
-        TuiInputFilesComponent.prototype.onDropped = function (event, errors) {
-            this.processSelectedFiles(event.files, errors);
+        TuiInputFilesComponent.prototype.onDropped = function (event) {
+            this.processSelectedFiles(event.files);
         };
         TuiInputFilesComponent.prototype.onDragOver = function (dataTransfer) {
             this.dataTransfer = dataTransfer;
         };
         TuiInputFilesComponent.prototype.removeFile = function (removedFile) {
-            this.updateValue(this.multiple ? this.arrayValue.filter(function (file) { return file !== removedFile; }) : null);
+            this.updateValue(this.computedMultiple
+                ? this.arrayValue.filter(function (file) { return file !== removedFile; })
+                : null);
         };
         TuiInputFilesComponent.prototype.computeLink$ = function (fileDragged, multiple, link) {
             return fileDragged
@@ -490,17 +630,21 @@
         };
         TuiInputFilesComponent.prototype.getValueArray = function (value) {
             if (!value) {
-                return i4.EMPTY_ARRAY;
+                return i2.EMPTY_ARRAY;
             }
             return Array.isArray(value) ? value : [value];
         };
-        TuiInputFilesComponent.prototype.processSelectedFiles = function (files, errors) {
+        TuiInputFilesComponent.prototype.processSelectedFiles = function (files) {
             var _this = this;
             // IE11 after selecting a file through the open dialog generates a second event passing an empty FileList.
             if (!(files === null || files === void 0 ? void 0 : files.length)) {
                 return;
             }
-            var newFiles = this.multiple ? Array.from(files) : [files[0]];
+            var errors = {
+                formatRejection: this.formatRejection,
+                maxSizeRejection: this.maxSizeRejection,
+            };
+            var newFiles = this.computedMultiple ? Array.from(files) : [files[0]];
             var tooBigFiles = newFiles.filter(function (file) { return file.size > _this.maxFileSize; });
             var wrongFormatFiles = newFiles.filter(function (file) { return !_this.isFormatAcceptable(file) && !tooBigFiles.includes(file); });
             var acceptedFiles = newFiles.filter(function (file) { return !tooBigFiles.includes(file) && !wrongFormatFiles.includes(file); });
@@ -517,52 +661,52 @@
                     content: errors.formatRejection,
                 }); }))));
             }
-            this.updateValue(this.multiple
+            this.updateValue(this.computedMultiple
                 ? __spreadArray(__spreadArray([], __read(this.arrayValue)), __read(acceptedFiles)) : acceptedFiles[0] || null);
         };
         TuiInputFilesComponent.prototype.isFormatAcceptable = function (file) {
-            if (!this.accept) {
+            if (!this.computedAccept) {
                 return true;
             }
             var extension = "." + (file.name.split(".").pop() || "").toLowerCase();
-            return files.tuiGetAcceptArray(this.accept).some(function (format) { return format === extension ||
+            return files.tuiGetAcceptArray(this.computedAccept).some(function (format) { return format === extension ||
                 format === file.type ||
                 (format.split("/")[1] === "*" &&
                     file.type.split("/")[0] === format.split("/")[0]); });
         };
         TuiInputFilesComponent.prototype.rejectFiles = function (rejectedFiles) {
-            this.reject.emit(this.multiple ? rejectedFiles : rejectedFiles[0]);
+            this.reject.emit(this.computedMultiple ? rejectedFiles : rejectedFiles[0]);
         };
         return TuiInputFilesComponent;
-    }(i4.AbstractTuiNullableControl));
-    TuiInputFilesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i4.TUI_IS_MOBILE }, { token: tokens.TUI_INPUT_FILE_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiInputFilesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputFilesComponent, selector: "tui-input-files", inputs: { link: "link", label: "label", accept: "accept", multiple: "multiple", size: "size", maxFileSize: "maxFileSize" }, outputs: { reject: "reject" }, providers: [i1.MODE_PROVIDER, i4.tuiAsFocusableItemAccessor(TuiInputFilesComponent)], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    tuiWrapper\n    appearance=\"input-file\"\n    class=\"t-wrapper\"\n    [class._mobile]=\"isMobile\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover || fileDragged || null\"\n    [active]=\"pseudoActive\"\n    [disabled]=\"computedDisabled\"\n>\n    <label automation-id=\"tui-input-file__label\">\n        <a tuiLink>\n            <ng-container *polymorpheusOutlet=\"computedLink$ | async as text\">\n                {{ text }}\n            </ng-container>\n        </a>\n        <ng-container *polymorpheusOutlet=\"computedLabel$ | async as text\">\n            {{ text }}\n        </ng-container>\n        <ng-container *ngIf=\"!readOnly && !computedDisabled\">\n            <input\n                #input\n                type=\"file\"\n                class=\"t-native\"\n                [id]=\"id\"\n                [accept]=\"accept\"\n                [multiple]=\"multiple\"\n                [tuiFocusable]=\"focusable\"\n                (change)=\"onFilesSelected(input, {formatRejection, maxSizeRejection})\"\n                (tuiFocusedChange)=\"onFocused($event)\"\n                (tuiDroppableDropped)=\"onDropped($event, {formatRejection, maxSizeRejection})\"\n                (tuiDroppableDragOverChange)=\"onDragOver($event)\"\n                (mousedown.prevent.silent)=\"(0)\"\n            />\n        </ng-container>\n    </label>\n</div>\n\n<ng-template #formatRejection>\n    {{ (inputFileTexts$ | async)?.formatRejectionReason || '' }}\n</ng-template>\n\n<ng-template #maxSizeRejection>\n    {{ maxFileSize | tuiMaxSizeRejectionError | async }}\n</ng-template>\n", styles: ["tui-input-files{display:block}tui-input-files .t-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}tui-input-files .t-native::-webkit-file-upload-button{display:none}[tuiWrapper][data-appearance=input-file]{display:flex;background:transparent;font:var(--tui-font-text-m);word-wrap:break-word;color:var(--tui-text-02);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}[tuiWrapper][data-appearance=input-file]:after{border:1px dashed;color:var(--tui-link)}[tuiWrapper][data-appearance=input-file]._mobile:after{border:1px solid}[tuiWrapper][data-appearance=input-file]:disabled:disabled,[tuiWrapper][data-appearance=input-file][data-state=disabled][data-state=disabled]{opacity:var(--tui-disabled-opacity);pointer-events:none}[tuiWrapper][data-appearance=input-file]:disabled:disabled:after,[tuiWrapper][data-appearance=input-file][data-state=disabled][data-state=disabled]:after{color:var(--tui-text-03)}[tuiWrapper][data-appearance=input-file]:focus-visible:focus-visible:after{border-style:solid;border-width:2px;color:var(--tui-focus)}[tuiWrapper][data-appearance=input-file]._focused._focused:after{border-style:solid;border-width:2px;color:var(--tui-focus)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]{color:var(--tui-text-01-night)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:after{color:var(--tui-text-01-night)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:focus-visible:focus-visible:after{color:var(--tui-text-01-night)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]._focused._focused:after{color:var(--tui-text-01-night)}@media (hover: hover){[tuiWrapper][data-appearance=input-file][data-mode=onDark]:hover:not(._no-hover),[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=hover]{background:var(--tui-clear-inverse-hover)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:hover:not(._no-hover):after,[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=hover]:after{color:var(--tui-text-03-night)}}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:active:not(._no-active),[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active],[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active]:hover{background:var(--tui-clear-inverse-active)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:active:not(._no-active):after,[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active]:after,[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active]:hover:after{color:var(--tui-text-03-night)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]{color:var(--tui-text-01)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:after{color:var(--tui-text-01)}@media (hover: hover){[tuiWrapper][data-appearance=input-file][data-mode=onLight]:hover:not(._no-hover),[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=hover]{background:var(--tui-clear-hover)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:hover:not(._no-hover):after,[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=hover]:after{color:var(--tui-text-03)}}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:active:not(._no-active),[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active],[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active]:hover{background:var(--tui-clear-active)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:active:not(._no-active):after,[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active]:after,[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active]:hover:after{color:var(--tui-text-03)}@media (hover: hover){[tuiWrapper][data-appearance=input-file]:hover:not(._no-hover),[tuiWrapper][data-appearance=input-file][data-state=hover]{background:var(--tui-secondary)}[tuiWrapper][data-appearance=input-file]:hover:not(._no-hover):after,[tuiWrapper][data-appearance=input-file][data-state=hover]:after{color:var(--tui-link-hover)}}[tuiWrapper][data-appearance=input-file]:active:not(._no-active),[tuiWrapper][data-appearance=input-file][data-state=active],[tuiWrapper][data-appearance=input-file][data-state=active]:hover{background:var(--tui-secondary-hover)}\n"], components: [{ type: i1__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i2__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i4__namespace.TuiFocusedDirective, selector: "[tuiFocusedChange]", outputs: ["tuiFocusedChange"] }, { type: i4__namespace.TuiDroppableDirective, selector: "[tuiDroppableDropped], [tuiDroppableDragOverChange]", outputs: ["tuiDroppableDropped", "tuiDroppableDragOverChange"] }], pipes: { "async": i3__namespace.AsyncPipe, "tuiMaxSizeRejectionError": TuiMaxSizeRejectionErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    }(i2.AbstractTuiNullableControl));
+    TuiInputFilesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesComponent, deps: [{ token: i6.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i2.TUI_IS_MOBILE }, { token: tokens.TUI_INPUT_FILE_TEXTS }, { token: TUI_INPUT_FILES_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiInputFilesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputFilesComponent, selector: "tui-input-files", inputs: { link: "link", label: "label", accept: "accept", multiple: "multiple", size: "size", maxFileSize: "maxFileSize" }, outputs: { reject: "reject" }, host: { listeners: { "focusin": "onFocused(true)", "focusout": "onFocused(false)", "change": "onFilesSelected()" } }, providers: [i1.MODE_PROVIDER, i2.tuiAsFocusableItemAccessor(TuiInputFilesComponent)], queries: [{ propertyName: "nativeInput", first: true, predicate: TuiInputFilesDirective, descendants: true, read: TuiInputFilesDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "formatRejection", first: true, predicate: ["formatRejection"], descendants: true }, { propertyName: "maxSizeRejection", first: true, predicate: ["maxSizeRejection"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div\n    tuiWrapper\n    appearance=\"input-file\"\n    class=\"t-wrapper\"\n    [class._mobile]=\"isMobile\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover || fileDragged || null\"\n    [active]=\"pseudoActive\"\n    [disabled]=\"computedDisabled\"\n>\n    <label\n        automation-id=\"tui-input-file__label\"\n        (tuiDroppableDropped)=\"onDropped($event)\"\n        (tuiDroppableDragOverChange)=\"onDragOver($event)\"\n        (mousedown.prevent.silent)=\"(0)\"\n    >\n        <a tuiLink>\n            <ng-container *polymorpheusOutlet=\"computedLink$ | async as text\">\n                {{ text }}\n            </ng-container>\n        </a>\n        <ng-container *polymorpheusOutlet=\"computedLabel$ | async as text\">\n            {{ text }}\n        </ng-container>\n        <ng-container *ngIf=\"!readOnly && !computedDisabled\">\n            <ng-content select=\"input\"></ng-content>\n            <input\n                #input\n                type=\"file\"\n                class=\"t-native\"\n                [id]=\"id\"\n                [accept]=\"accept\"\n                [multiple]=\"multiple\"\n                [tuiFocusable]=\"focusable\"\n            />\n        </ng-container>\n    </label>\n</div>\n\n<ng-template #formatRejection>\n    {{ (inputFileTexts$ | async)?.formatRejectionReason || '' }}\n</ng-template>\n\n<ng-template #maxSizeRejection>\n    {{ maxFileSize | tuiMaxSizeRejectionError | async }}\n</ng-template>\n", styles: ["tui-input-files{display:block}tui-input-files .t-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}tui-input-files .t-native::-webkit-file-upload-button{display:none}tui-input-files .t-native+.t-native{display:none}[tuiWrapper][data-appearance=input-file]{display:flex;background:transparent;font:var(--tui-font-text-m);word-wrap:break-word;color:var(--tui-text-02);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}[tuiWrapper][data-appearance=input-file]:after{border:1px dashed;color:var(--tui-link)}[tuiWrapper][data-appearance=input-file]._mobile:after{border:1px solid}[tuiWrapper][data-appearance=input-file]:disabled:disabled,[tuiWrapper][data-appearance=input-file][data-state=disabled][data-state=disabled]{opacity:var(--tui-disabled-opacity);pointer-events:none}[tuiWrapper][data-appearance=input-file]:disabled:disabled:after,[tuiWrapper][data-appearance=input-file][data-state=disabled][data-state=disabled]:after{color:var(--tui-text-03)}[tuiWrapper][data-appearance=input-file]:focus-visible:focus-visible:after{border-style:solid;border-width:2px;color:var(--tui-focus)}[tuiWrapper][data-appearance=input-file]._focused._focused:after{border-style:solid;border-width:2px;color:var(--tui-focus)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]{color:var(--tui-text-01-night)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:after{color:var(--tui-text-01-night)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:focus-visible:focus-visible:after{color:var(--tui-text-01-night)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]._focused._focused:after{color:var(--tui-text-01-night)}@media (hover: hover){[tuiWrapper][data-appearance=input-file][data-mode=onDark]:hover:not(._no-hover),[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=hover]{background:var(--tui-clear-inverse-hover)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:hover:not(._no-hover):after,[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=hover]:after{color:var(--tui-text-03-night)}}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:active:not(._no-active),[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active],[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active]:hover{background:var(--tui-clear-inverse-active)}[tuiWrapper][data-appearance=input-file][data-mode=onDark]:active:not(._no-active):after,[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active]:after,[tuiWrapper][data-appearance=input-file][data-mode=onDark][data-state=active]:hover:after{color:var(--tui-text-03-night)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]{color:var(--tui-text-01)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:after{color:var(--tui-text-01)}@media (hover: hover){[tuiWrapper][data-appearance=input-file][data-mode=onLight]:hover:not(._no-hover),[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=hover]{background:var(--tui-clear-hover)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:hover:not(._no-hover):after,[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=hover]:after{color:var(--tui-text-03)}}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:active:not(._no-active),[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active],[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active]:hover{background:var(--tui-clear-active)}[tuiWrapper][data-appearance=input-file][data-mode=onLight]:active:not(._no-active):after,[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active]:after,[tuiWrapper][data-appearance=input-file][data-mode=onLight][data-state=active]:hover:after{color:var(--tui-text-03)}@media (hover: hover){[tuiWrapper][data-appearance=input-file]:hover:not(._no-hover),[tuiWrapper][data-appearance=input-file][data-state=hover]{background:var(--tui-secondary)}[tuiWrapper][data-appearance=input-file]:hover:not(._no-hover):after,[tuiWrapper][data-appearance=input-file][data-state=hover]:after{color:var(--tui-link-hover)}}[tuiWrapper][data-appearance=input-file]:active:not(._no-active),[tuiWrapper][data-appearance=input-file][data-state=active],[tuiWrapper][data-appearance=input-file][data-state=active]:hover{background:var(--tui-secondary-hover)}\n"], components: [{ type: i1__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i2__namespace.TuiDroppableDirective, selector: "[tuiDroppableDropped], [tuiDroppableDragOverChange]", outputs: ["tuiDroppableDropped", "tuiDroppableDragOverChange"] }, { type: i3__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }], pipes: { "async": i4__namespace.AsyncPipe, "tuiMaxSizeRejectionError": TuiMaxSizeRejectionErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     __decorate([
-        i4.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputFilesComponent.prototype, "link", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputFilesComponent.prototype, "label", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputFilesComponent.prototype, "accept", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputFilesComponent.prototype, "multiple", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputFilesComponent.prototype, "size", void 0);
     __decorate([
-        i4.tuiDefaultProp()
+        i2.tuiDefaultProp()
     ], TuiInputFilesComponent.prototype, "maxFileSize", void 0);
     __decorate([
-        i4.tuiPure
+        i2.tuiPure
     ], TuiInputFilesComponent.prototype, "computeLink$", null);
     __decorate([
-        i4.tuiPure
+        i2.tuiPure
     ], TuiInputFilesComponent.prototype, "computeLabel$", null);
     __decorate([
-        i4.tuiPure
+        i2.tuiPure
     ], TuiInputFilesComponent.prototype, "getValueArray", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesComponent, decorators: [{
                 type: i0.Component,
@@ -572,7 +716,7 @@
                         styleUrls: ["./input-files.style.less"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
-                        providers: [i1.MODE_PROVIDER, i4.tuiAsFocusableItemAccessor(TuiInputFilesComponent)],
+                        providers: [i1.MODE_PROVIDER, i2.tuiAsFocusableItemAccessor(TuiInputFilesComponent)],
                     }]
             }], ctorParameters: function () {
             return [{ type: i6__namespace.NgControl, decorators: [{
@@ -587,14 +731,26 @@
                             args: [i0.ChangeDetectorRef]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i4.TUI_IS_MOBILE]
+                            args: [i2.TUI_IS_MOBILE]
                         }] }, { type: i7__namespace.Observable, decorators: [{
                             type: i0.Inject,
                             args: [tokens.TUI_INPUT_FILE_TEXTS]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [TUI_INPUT_FILES_OPTIONS]
                         }] }];
         }, propDecorators: { input: [{
                     type: i0.ViewChild,
                     args: ["input"]
+                }], nativeInput: [{
+                    type: i0.ContentChild,
+                    args: [TuiInputFilesDirective, { read: TuiInputFilesDirective }]
+                }], formatRejection: [{
+                    type: i0.ViewChild,
+                    args: ["formatRejection"]
+                }], maxSizeRejection: [{
+                    type: i0.ViewChild,
+                    args: ["maxSizeRejection"]
                 }], link: [{
                     type: i0.Input
                 }], label: [{
@@ -609,6 +765,15 @@
                     type: i0.Input
                 }], reject: [{
                     type: i0.Output
+                }], onFocused: [{
+                    type: i0.HostListener,
+                    args: ["focusin", ["true"]]
+                }, {
+                    type: i0.HostListener,
+                    args: ["focusout", ["false"]]
+                }], onFilesSelected: [{
+                    type: i0.HostListener,
+                    args: ["change"]
                 }], computeLink$: [], computeLabel$: [], getValueArray: [] } });
 
     var TuiInputFilesModule = /** @class */ (function () {
@@ -617,15 +782,17 @@
         return TuiInputFilesModule;
     }());
     TuiInputFilesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiInputFilesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesModule, declarations: [TuiInputFilesComponent, TuiMaxSizeRejectionErrorPipe], imports: [i3.CommonModule,
-            i2.PolymorpheusModule,
-            i4.TuiLetModule,
-            i4.TuiFocusedModule,
-            i4.TuiFocusVisibleModule,
-            i4.TuiPressedModule,
-            i4.TuiHoveredModule,
-            i4.TuiFocusableModule,
-            i4.TuiDroppableModule,
+    TuiInputFilesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesModule, declarations: [TuiInputFilesComponent,
+            TuiInputFilesDirective,
+            TuiMaxSizeRejectionErrorPipe], imports: [i4.CommonModule,
+            i3.PolymorpheusModule,
+            i2.TuiLetModule,
+            i2.TuiFocusedModule,
+            i2.TuiFocusVisibleModule,
+            i2.TuiPressedModule,
+            i2.TuiHoveredModule,
+            i2.TuiFocusableModule,
+            i2.TuiDroppableModule,
             i1.TuiWrapperModule,
             i1.TuiSvgModule,
             i1.TuiLinkModule,
@@ -633,19 +800,20 @@
             i1.TuiButtonModule,
             i1.TuiGroupModule,
             files$1.TuiFilesModule], exports: [TuiInputFilesComponent,
+            TuiInputFilesDirective,
             files$1.TuiFilesComponent,
             files$1.TuiFileComponent,
-            i4.TuiItemDirective] });
+            i2.TuiItemDirective] });
     TuiInputFilesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputFilesModule, imports: [[
-                i3.CommonModule,
-                i2.PolymorpheusModule,
-                i4.TuiLetModule,
-                i4.TuiFocusedModule,
-                i4.TuiFocusVisibleModule,
-                i4.TuiPressedModule,
-                i4.TuiHoveredModule,
-                i4.TuiFocusableModule,
-                i4.TuiDroppableModule,
+                i4.CommonModule,
+                i3.PolymorpheusModule,
+                i2.TuiLetModule,
+                i2.TuiFocusedModule,
+                i2.TuiFocusVisibleModule,
+                i2.TuiPressedModule,
+                i2.TuiHoveredModule,
+                i2.TuiFocusableModule,
+                i2.TuiDroppableModule,
                 i1.TuiWrapperModule,
                 i1.TuiSvgModule,
                 i1.TuiLinkModule,
@@ -658,15 +826,15 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3.CommonModule,
-                            i2.PolymorpheusModule,
-                            i4.TuiLetModule,
-                            i4.TuiFocusedModule,
-                            i4.TuiFocusVisibleModule,
-                            i4.TuiPressedModule,
-                            i4.TuiHoveredModule,
-                            i4.TuiFocusableModule,
-                            i4.TuiDroppableModule,
+                            i4.CommonModule,
+                            i3.PolymorpheusModule,
+                            i2.TuiLetModule,
+                            i2.TuiFocusedModule,
+                            i2.TuiFocusVisibleModule,
+                            i2.TuiPressedModule,
+                            i2.TuiHoveredModule,
+                            i2.TuiFocusableModule,
+                            i2.TuiDroppableModule,
                             i1.TuiWrapperModule,
                             i1.TuiSvgModule,
                             i1.TuiLinkModule,
@@ -675,12 +843,17 @@
                             i1.TuiGroupModule,
                             files$1.TuiFilesModule,
                         ],
-                        declarations: [TuiInputFilesComponent, TuiMaxSizeRejectionErrorPipe],
+                        declarations: [
+                            TuiInputFilesComponent,
+                            TuiInputFilesDirective,
+                            TuiMaxSizeRejectionErrorPipe,
+                        ],
                         exports: [
                             TuiInputFilesComponent,
+                            TuiInputFilesDirective,
                             files$1.TuiFilesComponent,
                             files$1.TuiFileComponent,
-                            i4.TuiItemDirective,
+                            i2.TuiItemDirective,
                         ],
                     }]
             }] });
@@ -689,8 +862,12 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.TUI_INPUT_FILES_DEFAULT_OPTIONS = TUI_INPUT_FILES_DEFAULT_OPTIONS;
+    exports.TUI_INPUT_FILES_OPTIONS = TUI_INPUT_FILES_OPTIONS;
     exports.TuiInputFilesComponent = TuiInputFilesComponent;
+    exports.TuiInputFilesDirective = TuiInputFilesDirective;
     exports.TuiInputFilesModule = TuiInputFilesModule;
+    exports.tuiInputFilesOptionsProvider = tuiInputFilesOptionsProvider;
 
     Object.defineProperty(exports, '__esModule', { value: true });