@taiga-ui/kit 4.38.0 → 4.39.0-canary.ad6c629

package/fesm2022/taiga-ui-kit-components-combo-box.mjs

@@ -0,0 +1,119 @@
+import * as i0 from '@angular/core';
+import { inject, effect, untracked, Directive, Input } from '@angular/core';
+import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
+import { TUI_ALLOW_SIGNAL_WRITES, TUI_STRICT_MATCHER } from '@taiga-ui/cdk/constants';
+import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
+import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
+import * as i1 from '@taiga-ui/core/components/textfield';
+import { TuiTextfieldComponent, TuiTextfieldDirective, tuiInjectAuxiliary, tuiAsTextfieldAccessor, TuiWithTextfield } from '@taiga-ui/core/components/textfield';
+import { tuiDropdownOpen, TuiDropdownDirective, tuiDropdownEnabled } from '@taiga-ui/core/directives/dropdown';
+import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
+import { tuiAsAuxiliary } from '@taiga-ui/core/tokens';
+import { TuiSelectOption } from '@taiga-ui/kit/components/select';
+
+class TuiComboBox extends TuiControl {
+    constructor() {
+        super(...arguments);
+        this.el = tuiInjectElement();
+        this.host = inject(TuiTextfieldComponent);
+        this.textfield = inject(TuiTextfieldDirective);
+        this.open = tuiDropdownOpen();
+        this.dropdown = inject(TuiDropdownDirective);
+        this.itemsHandlers = inject(TUI_ITEMS_HANDLERS);
+        this.datalist = tuiInjectAuxiliary((x) => 'getOptions' in x);
+        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
+        this.valueEffect = effect(() => {
+            const value = this.value() ?? '';
+            const stringified = tuiIsString(value)
+                ? value
+                : this.itemsHandlers.stringify()(value);
+            const match = this.match(stringified);
+            this.textfield.value.update((x) => stringified || x);
+            if (match) {
+                setTimeout((end = this.el.value.length) => this.el.setSelectionRange(end, end));
+            }
+        }, TUI_ALLOW_SIGNAL_WRITES);
+        this.blurEffect = effect(() => {
+            const value = untracked(() => this.value());
+            if (!this.host.focused() && this.strict && !value) {
+                this.textfield.value.set('');
+            }
+        }, TUI_ALLOW_SIGNAL_WRITES);
+        this.strict = true;
+        this.matcher = TUI_STRICT_MATCHER;
+    }
+    setValue(value) {
+        this.onChange(value);
+        if (!value) {
+            this.toggleDropdown(true);
+            this.textfield.value.set('');
+        }
+    }
+    toggleDropdown(open = !this.open()) {
+        if (this.dropdownEnabled() && this.dropdown.content) {
+            this.open.set(open);
+        }
+    }
+    onInput(value) {
+        const match = this.match(value);
+        const fallback = this.strict || !value ? null : value;
+        this.onChange(match ?? fallback);
+        setTimeout(() => this.toggleDropdown(true));
+    }
+    keydownEnter(event) {
+        if (!this.open()) {
+            return;
+        }
+        event.preventDefault();
+        if (this.options.length === 1) {
+            this.onChange(this.options[0]);
+            this.toggleDropdown(false);
+        }
+    }
+    get options() {
+        return this.datalist()?.getOptions() || [];
+    }
+    match(value) {
+        return (this.options.find((item) => this.matcher?.(item, value, this.itemsHandlers.stringify())) ?? null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiComboBox, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiComboBox, isStandalone: true, selector: "input[tuiComboBox]", inputs: { strict: "strict", matcher: "matcher" }, host: { listeners: { "blur": "onTouched()", "click": "toggleDropdown()", "input": "onInput($event.target.value)", "keydown.enter": "keydownEnter($event)" }, properties: { "disabled": "disabled()" } }, providers: [
+            tuiAsOptionContent(TuiSelectOption),
+            tuiAsTextfieldAccessor(TuiComboBox),
+            tuiAsControl(TuiComboBox),
+            tuiAsAuxiliary(TuiComboBox),
+        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiComboBox, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'input[tuiComboBox]',
+                    providers: [
+                        tuiAsOptionContent(TuiSelectOption),
+                        tuiAsTextfieldAccessor(TuiComboBox),
+                        tuiAsControl(TuiComboBox),
+                        tuiAsAuxiliary(TuiComboBox),
+                    ],
+                    hostDirectives: [TuiWithTextfield],
+                    host: {
+                        '[disabled]': 'disabled()',
+                        '(blur)': 'onTouched()',
+                        '(click)': 'toggleDropdown()',
+                        '(input)': 'onInput($event.target.value)',
+                        '(keydown.enter)': 'keydownEnter($event)',
+                    },
+                }]
+        }], propDecorators: { strict: [{
+                type: Input
+            }], matcher: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TuiComboBox };
+//# sourceMappingURL=taiga-ui-kit-components-combo-box.mjs.map

package/fesm2022/taiga-ui-kit-components-combo-box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-kit-components-combo-box.mjs","sources":["../../../projects/kit/components/combo-box/combo-box.directive.ts","../../../projects/kit/components/combo-box/taiga-ui-kit-components-combo-box.ts"],"sourcesContent":["import {Directive, effect, inject, Input, untracked} from '@angular/core';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {TUI_ALLOW_SIGNAL_WRITES, TUI_STRICT_MATCHER} from '@taiga-ui/cdk/constants';\nimport type {TuiStringMatcher} from '@taiga-ui/cdk/types';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiIsString} from '@taiga-ui/cdk/utils/miscellaneous';\nimport type {TuiDataListAccessor} from '@taiga-ui/core/components/data-list';\nimport {tuiAsOptionContent} from '@taiga-ui/core/components/data-list';\nimport type {TuiTextfieldAccessor} from '@taiga-ui/core/components/textfield';\nimport {\n    tuiAsTextfieldAccessor,\n    tuiInjectAuxiliary,\n    TuiTextfieldComponent,\n    TuiTextfieldDirective,\n    TuiWithTextfield,\n} from '@taiga-ui/core/components/textfield';\nimport {\n    TuiDropdownDirective,\n    tuiDropdownEnabled,\n    tuiDropdownOpen,\n} from '@taiga-ui/core/directives/dropdown';\nimport type {TuiItemsHandlers} from '@taiga-ui/core/directives/items-handlers';\nimport {TUI_ITEMS_HANDLERS} from '@taiga-ui/core/directives/items-handlers';\nimport {tuiAsAuxiliary} from '@taiga-ui/core/tokens';\nimport {TuiSelectOption} from '@taiga-ui/kit/components/select';\n\n@Directive({\n    standalone: true,\n    selector: 'input[tuiComboBox]',\n    providers: [\n        tuiAsOptionContent(TuiSelectOption),\n        tuiAsTextfieldAccessor(TuiComboBox),\n        tuiAsControl(TuiComboBox),\n        tuiAsAuxiliary(TuiComboBox),\n    ],\n    hostDirectives: [TuiWithTextfield],\n    host: {\n        '[disabled]': 'disabled()',\n        '(blur)': 'onTouched()',\n        '(click)': 'toggleDropdown()',\n        '(input)': 'onInput($event.target.value)',\n        '(keydown.enter)': 'keydownEnter($event)',\n    },\n})\nexport class TuiComboBox<T>\n    extends TuiControl<T | string | null>\n    implements TuiTextfieldAccessor<T>\n{\n    private readonly el = tuiInjectElement<HTMLInputElement>();\n    private readonly host: TuiTextfieldComponent<T> = inject(TuiTextfieldComponent);\n    private readonly textfield: TuiTextfieldDirective<T> = inject(TuiTextfieldDirective);\n\n    private readonly open = tuiDropdownOpen();\n    private readonly dropdown = inject(TuiDropdownDirective);\n    private readonly itemsHandlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    private readonly datalist = tuiInjectAuxiliary<TuiDataListAccessor<T>>(\n        (x) => 'getOptions' in x,\n    );\n\n    protected readonly dropdownEnabled = tuiDropdownEnabled(this.interactive);\n\n    protected readonly valueEffect = effect(() => {\n        const value = this.value() ?? '';\n        const stringified = tuiIsString(value)\n            ? value\n            : this.itemsHandlers.stringify()(value);\n        const match = this.match(stringified);\n\n        this.textfield.value.update((x) => stringified || x);\n\n        if (match) {\n            setTimeout((end = this.el.value.length) =>\n                this.el.setSelectionRange(end, end),\n            );\n        }\n    }, TUI_ALLOW_SIGNAL_WRITES);\n\n    protected readonly blurEffect = effect(() => {\n        const value = untracked(() => this.value());\n\n        if (!this.host.focused() && this.strict && !value) {\n            this.textfield.value.set('');\n        }\n    }, TUI_ALLOW_SIGNAL_WRITES);\n\n    @Input()\n    public strict = true;\n\n    @Input()\n    public matcher: TuiStringMatcher<T> | null = TUI_STRICT_MATCHER;\n\n    public setValue(value: T): void {\n        this.onChange(value);\n\n        if (!value) {\n            this.toggleDropdown(true);\n            this.textfield.value.set('');\n        }\n    }\n\n    protected toggleDropdown(open = !this.open()): void {\n        if (this.dropdownEnabled() && this.dropdown.content) {\n            this.open.set(open);\n        }\n    }\n\n    protected onInput(value: string): void {\n        const match = this.match(value);\n        const fallback = this.strict || !value ? null : value;\n\n        this.onChange(match ?? fallback);\n        setTimeout(() => this.toggleDropdown(true));\n    }\n\n    protected keydownEnter(event: KeyboardEvent): void {\n        if (!this.open()) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (this.options.length === 1) {\n            this.onChange(this.options[0]!);\n            this.toggleDropdown(false);\n        }\n    }\n\n    private get options(): readonly T[] {\n        return this.datalist()?.getOptions() || [];\n    }\n\n    private match(value: string): T | null {\n        return (\n            this.options.find((item) =>\n                this.matcher?.(item, value, this.itemsHandlers.stringify()),\n            ) ?? null\n        );\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,44 +1,41 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { tuiSlideIn, tuiFadeIn } from '@taiga-ui/core/animations';
-import { tuiButtonOptionsProvider, TuiButton } from '@taiga-ui/core/components/button';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i1 from '@taiga-ui/cdk/directives/animated';
+import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
+import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
 import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
-import { TUI_ANIMATIONS_SPEED } from '@taiga-ui/core/tokens';
-import { tuiToAnimationOptions } from '@taiga-ui/core/utils/miscellaneous';
 
 class TuiDrawer {
     constructor() {
-        this.options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
         this.direction = 'right';
         this.overlay = false;
     }
-    get animation() {
-        return { ...this.options, value: this.direction };
+    get from() {
+        return this.direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDrawer, isStandalone: true, selector: "tui-drawer", inputs: { direction: "direction", overlay: "overlay" }, host: { properties: { "@tuiFadeIn": "options", "@tuiSlideIn": "animation", "class._overlay": "overlay", "style.border-top-left-radius": "direction === \"left\" ? 0 : null", "style.border-top-right-radius": "direction === \"right\" ? 0 : null", "style.left": "direction === \"left\" ? 0 : null", "style.right": "direction === \"right\" ? 0 : null" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDrawer, isStandalone: true, selector: "tui-drawer", inputs: { direction: "direction", overlay: "overlay" }, host: { properties: { "class._overlay": "overlay", "style.border-top-left-radius": "direction === \"left\" ? 0 : null", "style.border-top-right-radius": "direction === \"right\" ? 0 : null", "style.left": "direction === \"left\" ? 0 : null", "style.right": "direction === \"right\" ? 0 : null", "style.--tui-from": "from" } }, providers: [
             tuiButtonOptionsProvider({
                 appearance: 'secondary',
                 size: 's',
             }),
-        ], ngImport: i0, template: "<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\"><ng-content /></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", styles: [":host{position:fixed;top:3rem;bottom:0;inline-size:36.25rem;max-inline-size:calc(100vw - 3rem);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-medium);border-top-left-radius:1.25rem;border-top-right-radius:1.25rem}:host._overlay:before{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:var(--tui-service-backdrop);transition-timing-function:ease-out}tui-root:has(tui-dialogs .t-overlay_visible) :host._overlay:before{opacity:0;transition-timing-function:ease-in}.t-aside{position:relative;display:flex;block-size:100%;flex-direction:column;border-radius:inherit;overflow:hidden;background:inherit}.t-scrollbar{flex:1;overscroll-behavior:contain}.t-scrollbar ::ng-deep>.t-content>header{top:0;z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem .75rem;box-shadow:inset 0 -1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-scrollbar ::ng-deep>.t-content>header>*{display:flex;gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiTitle]{font:var(--tui-font-text-xl);font-weight:700}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiSubtitle]{color:var(--tui-text-primary);font:var(--tui-font-text-s)}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories]{gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child{margin-inline-start:.25rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child:before{font-size:1rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiNavigationNav]{min-block-size:var(--tui-height-m);margin-block-end:-.75rem;padding:0;border-image:none}.t-content{padding:1.25rem 1.5rem}.t-footer ::ng-deep footer{scrollbar-width:none;-ms-overflow-style:none;display:flex;min-inline-size:-webkit-min-content;min-inline-size:min-content;justify-content:flex-end;gap:.75rem;padding:.5rem 1.5rem;box-shadow:inset 0 1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-footer ::ng-deep footer::-webkit-scrollbar,.t-footer ::ng-deep footer::-webkit-scrollbar-thumb{display:none}\n"], dependencies: [{ kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }], animations: [tuiSlideIn, tuiFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\"><ng-content /></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", styles: [":host{position:fixed;top:3rem;bottom:0;inline-size:36.25rem;max-inline-size:calc(100vw - 3rem);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-medium);border-top-left-radius:1.25rem;border-top-right-radius:1.25rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host._overlay:before{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:var(--tui-service-backdrop);transition-timing-function:ease-out}tui-root:has(tui-dialogs .t-overlay_visible) :host._overlay:before{opacity:0;transition-timing-function:ease-in}.t-aside{position:relative;display:flex;block-size:100%;flex-direction:column;border-radius:inherit;overflow:hidden;background:inherit}.t-scrollbar{flex:1;overscroll-behavior:contain}.t-scrollbar ::ng-deep>.t-content>header{top:0;z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem .75rem;box-shadow:inset 0 -1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-scrollbar ::ng-deep>.t-content>header>*{display:flex;gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiTitle]{font:var(--tui-font-text-xl);font-weight:700}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiSubtitle]{color:var(--tui-text-primary);font:var(--tui-font-text-s)}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories]{gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child{margin-inline-start:.25rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child:before{font-size:1rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiNavigationNav]{min-block-size:var(--tui-height-m);margin-block-end:-.75rem;padding:0;border-image:none}.t-content{padding:1.25rem 1.5rem}.t-footer ::ng-deep footer{scrollbar-width:none;-ms-overflow-style:none;display:flex;min-inline-size:-webkit-min-content;min-inline-size:min-content;justify-content:flex-end;gap:.75rem;padding:.5rem 1.5rem;box-shadow:inset 0 1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-footer ::ng-deep footer::-webkit-scrollbar,.t-footer ::ng-deep footer::-webkit-scrollbar-thumb{display:none}\n"], dependencies: [{ kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDrawer, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-drawer', imports: [TuiButton, TuiScrollbar], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ standalone: true, selector: 'tui-drawer', imports: [TuiScrollbar], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         tuiButtonOptionsProvider({
                             appearance: 'secondary',
                             size: 's',
                         }),
-                    ], animations: [tuiSlideIn, tuiFadeIn], host: {
-                        '[@tuiFadeIn]': 'options',
-                        '[@tuiSlideIn]': 'animation',
+                    ], hostDirectives: [TuiAnimated], host: {
                         '[class._overlay]': 'overlay',
                         '[style.border-top-left-radius]': 'direction === "left" ? 0 : null',
                         '[style.border-top-right-radius]': 'direction === "right" ? 0 : null',
                         '[style.left]': 'direction === "left" ? 0 : null',
                         '[style.right]': 'direction === "right" ? 0 : null',
-                    }, template: "<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\"><ng-content /></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", styles: [":host{position:fixed;top:3rem;bottom:0;inline-size:36.25rem;max-inline-size:calc(100vw - 3rem);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-medium);border-top-left-radius:1.25rem;border-top-right-radius:1.25rem}:host._overlay:before{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:var(--tui-service-backdrop);transition-timing-function:ease-out}tui-root:has(tui-dialogs .t-overlay_visible) :host._overlay:before{opacity:0;transition-timing-function:ease-in}.t-aside{position:relative;display:flex;block-size:100%;flex-direction:column;border-radius:inherit;overflow:hidden;background:inherit}.t-scrollbar{flex:1;overscroll-behavior:contain}.t-scrollbar ::ng-deep>.t-content>header{top:0;z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem .75rem;box-shadow:inset 0 -1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-scrollbar ::ng-deep>.t-content>header>*{display:flex;gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiTitle]{font:var(--tui-font-text-xl);font-weight:700}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiSubtitle]{color:var(--tui-text-primary);font:var(--tui-font-text-s)}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories]{gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child{margin-inline-start:.25rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child:before{font-size:1rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiNavigationNav]{min-block-size:var(--tui-height-m);margin-block-end:-.75rem;padding:0;border-image:none}.t-content{padding:1.25rem 1.5rem}.t-footer ::ng-deep footer{scrollbar-width:none;-ms-overflow-style:none;display:flex;min-inline-size:-webkit-min-content;min-inline-size:min-content;justify-content:flex-end;gap:.75rem;padding:.5rem 1.5rem;box-shadow:inset 0 1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-footer ::ng-deep footer::-webkit-scrollbar,.t-footer ::ng-deep footer::-webkit-scrollbar-thumb{display:none}\n"] }]
+                        '[style.--tui-from]': 'from',
+                    }, template: "<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\"><ng-content /></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", styles: [":host{position:fixed;top:3rem;bottom:0;inline-size:36.25rem;max-inline-size:calc(100vw - 3rem);background:var(--tui-background-elevation-1);box-shadow:var(--tui-shadow-medium);border-top-left-radius:1.25rem;border-top-right-radius:1.25rem}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host._overlay:before{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:fixed;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:var(--tui-service-backdrop);transition-timing-function:ease-out}tui-root:has(tui-dialogs .t-overlay_visible) :host._overlay:before{opacity:0;transition-timing-function:ease-in}.t-aside{position:relative;display:flex;block-size:100%;flex-direction:column;border-radius:inherit;overflow:hidden;background:inherit}.t-scrollbar{flex:1;overscroll-behavior:contain}.t-scrollbar ::ng-deep>.t-content>header{top:0;z-index:1;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem .75rem;box-shadow:inset 0 -1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-scrollbar ::ng-deep>.t-content>header>*{display:flex;gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiTitle]{font:var(--tui-font-text-xl);font-weight:700}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiSubtitle]{color:var(--tui-text-primary);font:var(--tui-font-text-s)}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories]{gap:.5rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child{margin-inline-start:.25rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiHeader] [tuiAccessories] [tuiIconButton][data-appearance=icon]:last-child:before{font-size:1rem}.t-scrollbar ::ng-deep>.t-content>header>[tuiNavigationNav]{min-block-size:var(--tui-height-m);margin-block-end:-.75rem;padding:0;border-image:none}.t-content{padding:1.25rem 1.5rem}.t-footer ::ng-deep footer{scrollbar-width:none;-ms-overflow-style:none;display:flex;min-inline-size:-webkit-min-content;min-inline-size:min-content;justify-content:flex-end;gap:.75rem;padding:.5rem 1.5rem;box-shadow:inset 0 1px var(--tui-border-normal);background:var(--tui-background-elevation-1)}.t-footer ::ng-deep footer::-webkit-scrollbar,.t-footer ::ng-deep footer::-webkit-scrollbar-thumb{display:none}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], overlay: [{

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 type {AnimationOptions} from '@angular/animations';\nimport {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';\nimport {tuiFadeIn, tuiSlideIn} from '@taiga-ui/core/animations';\nimport {TuiButton, tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\nimport {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';\nimport {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';\nimport type {TuiHorizontalDirection} from '@taiga-ui/core/types';\nimport {tuiToAnimationOptions} from '@taiga-ui/core/utils/miscellaneous';\n\n@Component({\n    standalone: true,\n    selector: 'tui-drawer',\n    imports: [TuiButton, TuiScrollbar],\n    templateUrl: './drawer.template.html',\n    styleUrls: ['./drawer.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        tuiButtonOptionsProvider({\n            appearance: 'secondary',\n            size: 's',\n        }),\n    ],\n    animations: [tuiSlideIn, tuiFadeIn],\n    host: {\n        '[@tuiFadeIn]': 'options',\n        '[@tuiSlideIn]': 'animation',\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    },\n})\nexport class TuiDrawer {\n    protected readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));\n\n    @Input()\n    public direction: TuiHorizontalDirection = 'right';\n\n    @Input()\n    public overlay = false;\n\n    protected get animation(): AnimationOptions & {value: string} {\n        return {...this.options, value: this.direction};\n    }\n}\n","<aside class=\"t-aside\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <ng-content select=\"header\" />\n        <div class=\"t-content\"><ng-content /></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":";;;;;;;;AASA,MAwBa,SAAS,CAAA;AAxBtB,IAAA,WAAA,GAAA;QAyBuB,IAAO,CAAA,OAAA,GAAG,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;QAG1E,IAAS,CAAA,SAAA,GAA2B,OAAO,CAAC;QAG5C,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAK1B,KAAA;AAHG,IAAA,IAAc,SAAS,GAAA;AACnB,QAAA,OAAO,EAAC,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC;KACnD;+GAXQ,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,SAAS,EAjBP,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,YAAA,EAAA,SAAA,EAAA,aAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,mCAAA,EAAA,+BAAA,EAAA,oCAAA,EAAA,YAAA,EAAA,mCAAA,EAAA,aAAA,EAAA,oCAAA,EAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA,wBAAwB,CAAC;AACrB,gBAAA,UAAU,EAAE,WAAW;AACvB,gBAAA,IAAI,EAAE,GAAG;aACZ,CAAC;SACL,ECrBL,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2VAYA,8zEDAyB,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAUrB,CAAC,UAAU,EAAE,SAAS,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAW1B,SAAS,EAAA,UAAA,EAAA,CAAA;kBAxBrB,SAAS;AACM,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,YAAY,EACb,OAAA,EAAA,CAAC,SAAS,EAAE,YAAY,CAAC,EAGjB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;AACP,wBAAA,wBAAwB,CAAC;AACrB,4BAAA,UAAU,EAAE,WAAW;AACvB,4BAAA,IAAI,EAAE,GAAG;yBACZ,CAAC;AACL,qBAAA,EAAA,UAAA,EACW,CAAC,UAAU,EAAE,SAAS,CAAC,EAC7B,IAAA,EAAA;AACF,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,eAAe,EAAE,WAAW;AAC5B,wBAAA,kBAAkB,EAAE,SAAS;AAC7B,wBAAA,gCAAgC,EAAE,iCAAiC;AACnE,wBAAA,iCAAiC,EAAE,kCAAkC;AACrE,wBAAA,cAAc,EAAE,iCAAiC;AACjD,wBAAA,eAAe,EAAE,kCAAkC;AACtD,qBAAA,EAAA,QAAA,EAAA,2VAAA,EAAA,MAAA,EAAA,CAAA,swEAAA,CAAA,EAAA,CAAA;8BAMM,SAAS,EAAA,CAAA;sBADf,KAAK;gBAIC,OAAO,EAAA,CAAA;sBADb,KAAK;;;AEvCV;;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    standalone: true,\n    selector: 'tui-drawer',\n    imports: [TuiScrollbar],\n    templateUrl: './drawer.template.html',\n    styleUrls: ['./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\"><ng-content /></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":";;;;;;;AAMA,MAuBa,SAAS,CAAA;AAvBtB,IAAA,WAAA,GAAA;QAyBW,IAAS,CAAA,SAAA,GAA2B,OAAO,CAAC;QAG5C,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAK1B,KAAA;AAHG,IAAA,IAAW,IAAI,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;KAChF;+GATQ,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;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,EClBL,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,WAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2VAYA,83EDHc,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAoBb,SAAS,EAAA,UAAA,EAAA,CAAA;kBAvBrB,SAAS;iCACM,IAAI,EAAA,QAAA,EACN,YAAY,EAAA,OAAA,EACb,CAAC,YAAY,CAAC,EAGN,eAAA,EAAA,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,2VAAA,EAAA,MAAA,EAAA,CAAA,s0EAAA,CAAA,EAAA,CAAA;8BAIM,SAAS,EAAA,CAAA;sBADf,KAAK;gBAIC,OAAO,EAAA,CAAA;sBADb,KAAK;;;AEjCV;;AAEG;;;;"}

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

@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
 import { inject, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, TemplateRef, ViewEncapsulation, ContentChildren, Directive, forwardRef, ContentChild, Pipe } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { WA_WINDOW } from '@ng-web-apis/common';
-import { tuiPure, tuiCreateToken, tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiPure, tuiCreateToken, tuiProvideOptions, 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';
@@ -27,12 +27,11 @@ import { tuiGroupOptionsProvider, TuiGroup } from '@taiga-ui/core/directives/gro
 import { TuiLink } from '@taiga-ui/core/components/link';
 import { TuiBreakpointService } from '@taiga-ui/core/services';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
-import * as i1$3 from '@taiga-ui/cdk/directives/native-validator';
+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 { Validators, FormControl } from '@angular/forms';
-import * as i1$2 from '@taiga-ui/cdk/directives/validator';
+import { Validators, NG_VALIDATORS, FormControl } from '@angular/forms';
 import { TuiValidator } from '@taiga-ui/cdk/directives/validator';
 
 const TUI_SIZE_ERROR = 'tuiSize';
@@ -343,45 +342,42 @@ function tuiInputFilesOptionsProvider(options) {
     return tuiProvideOptions(TUI_INPUT_FILES_OPTIONS, options, TUI_INPUT_FILES_DEFAULT_OPTIONS);
 }
 
-class TuiInputFilesValidator {
+class TuiInputFilesValidator extends TuiValidator {
     constructor() {
+        super(...arguments);
         this.options = inject(TUI_INPUT_FILES_OPTIONS);
-        this.validator = inject(TuiValidator);
         this.accept = this.options.accept;
         this.maxFileSize = this.options.maxFileSize;
     }
     ngOnChanges() {
-        this.validate();
+        this.update();
     }
     ngOnInit() {
-        this.validate();
+        this.update();
     }
-    validate() {
-        this.validator.tuiValidator =
+    update() {
+        this.validate =
             Validators.compose([
                 tuiCreateFileFormatValidator(this.accept),
                 tuiCreateFileSizeValidator(this.maxFileSize),
             ]) || Validators.nullValidator;
-        this.validator.ngOnChanges();
+        this.onChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputFilesValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputFilesValidator, isStandalone: true, inputs: { accept: "accept", maxFileSize: "maxFileSize" }, host: { properties: { "accept": "accept" } }, exportAs: ["tuiInputFilesValidator"], usesOnChanges: true, hostDirectives: [{ directive: i1$2.TuiValidator }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputFilesValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: TuiInputFilesValidator, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
+                    inputs: ['accept', 'maxFileSize'],
+                    providers: [tuiProvide(NG_VALIDATORS, TuiInputFilesValidator, true)],
                     exportAs: 'tuiInputFilesValidator',
-                    hostDirectives: [TuiValidator],
                     host: {
                         '[accept]': 'accept',
                     },
                 }]
-        }], propDecorators: { accept: [{
-                type: Input
-            }], maxFileSize: [{
-                type: Input
-            }] } });
+        }] });
 
 class TuiInputFilesDirective extends TuiControl {
     constructor() {
@@ -408,7 +404,7 @@ class TuiInputFilesDirective extends TuiControl {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputFilesDirective, isStandalone: true, selector: "input[tuiInputFiles]", outputs: { reject: "reject" }, host: { attributes: { "type": "file" }, listeners: { "blur": "onTouched()", "click": "onClick($event)" }, properties: { "disabled": "disabled()" } }, providers: [
             tuiAsControl(TuiInputFilesDirective),
             tuiAppearanceOptionsProvider(TuiInputFilesDirective),
-        ], usesInheritance: true, hostDirectives: [{ directive: i1$3.TuiNativeValidator }, { directive: i1.TuiWithAppearance }, { directive: TuiInputFilesValidator, inputs: ["accept", "accept", "maxFileSize", "maxFileSize"] }], ngImport: i0 }); }
+        ], 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: "16.2.12", ngImport: i0, type: TuiInputFilesDirective, decorators: [{
             type: Directive,