@taiga-ui/kit 3.18.0 → 3.19.0-dev.main-9e6bc23

package/fesm2015/taiga-ui-kit-components-data-list-wrapper.js

@@ -31,8 +31,8 @@ class AbstractTuiDataListWrapper {
             .filter(tuiIsPresent);
     }
 }
-AbstractTuiDataListWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AbstractTuiDataListWrapper, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-AbstractTuiDataListWrapper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AbstractTuiDataListWrapper, inputs: { disabledItemHandler: "disabledItemHandler", emptyContent: "emptyContent", size: "size", itemContent: "itemContent" }, viewQueries: [{ propertyName: "optionsQuery", predicate: i0.forwardRef(function () { return TuiOptionComponent; }), descendants: true }], ngImport: i0 });
+AbstractTuiDataListWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AbstractTuiDataListWrapper, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+AbstractTuiDataListWrapper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AbstractTuiDataListWrapper, inputs: { disabledItemHandler: "disabledItemHandler", emptyContent: "emptyContent", size: "size", itemContent: "itemContent" }, viewQueries: [{ propertyName: "optionsQuery", predicate: i0.forwardRef(function () { return TuiOptionComponent; }), descendants: true }], ngImport: i0 });
 __decorate([
     tuiDefaultProp()
 ], AbstractTuiDataListWrapper.prototype, "disabledItemHandler", void 0);
@@ -45,7 +45,7 @@ __decorate([
 __decorate([
     tuiDefaultProp()
 ], AbstractTuiDataListWrapper.prototype, "itemContent", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AbstractTuiDataListWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AbstractTuiDataListWrapper, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }]; }, propDecorators: { optionsQuery: [{
                 type: ViewChildren,
@@ -67,15 +67,15 @@ class TuiDataListGroupWrapperComponent extends AbstractTuiDataListWrapper {
         this.labels = [];
     }
 }
-TuiDataListGroupWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListGroupWrapperComponent, deps: [{ token: TUI_ITEMS_HANDLERS }, { token: TuiTextfieldSizeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TuiDataListGroupWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDataListGroupWrapperComponent, selector: "tui-data-list-wrapper[labels]", inputs: { items: "items", labels: "labels" }, providers: [tuiAsDataListAccessor(TuiDataListGroupWrapperComponent)], usesInheritance: true, ngImport: i0, template: "<!-- TODO: remove $any in 4.0 -->\n<tui-data-list\n    *ngIf=\"items; else loading\"\n    [emptyContent]=\"emptyContent\"\n    [size]=\"$any(size)\"\n>\n    <tui-opt-group\n        *ngFor=\"let group of items; let index = index\"\n        [label]=\"labels[index]\"\n    >\n        <button\n            *ngFor=\"let item of group\"\n            #elementRef=\"elementRef\"\n            tuiElement\n            tuiOption\n            automation-id=\"tui-data-list-wrapper__option\"\n            [value]=\"item\"\n            [disabled]=\"disabledItemHandler(item)\"\n        >\n            <ng-container *polymorpheusOutlet=\"itemContent as text; context: getContext(item, elementRef)\">\n                {{ text }}\n            </ng-container>\n        </button>\n    </tui-opt-group>\n</tui-data-list>\n<ng-template #loading>\n    <tui-loader class=\"t-loader\"></tui-loader>\n</ng-template>\n", styles: [":host{display:block}.t-loader{margin:.75rem 0}\n"], components: [{ type: i1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i3.TuiElementDirective, selector: "[tuiElement]", exportAs: ["elementRef"] }, { type: i4.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiDataListGroupWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListGroupWrapperComponent, deps: [{ token: TUI_ITEMS_HANDLERS }, { token: TuiTextfieldSizeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiDataListGroupWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDataListGroupWrapperComponent, selector: "tui-data-list-wrapper[labels]", inputs: { items: "items", labels: "labels" }, providers: [tuiAsDataListAccessor(TuiDataListGroupWrapperComponent)], usesInheritance: true, ngImport: i0, template: "<!-- TODO: remove $any in 4.0 -->\n<tui-data-list\n    *ngIf=\"items; else loading\"\n    [emptyContent]=\"emptyContent\"\n    [size]=\"$any(size)\"\n>\n    <tui-opt-group\n        *ngFor=\"let group of items; let index = index\"\n        [label]=\"labels[index]\"\n    >\n        <button\n            *ngFor=\"let item of group\"\n            #elementRef=\"elementRef\"\n            tuiElement\n            tuiOption\n            automation-id=\"tui-data-list-wrapper__option\"\n            [value]=\"item\"\n            [disabled]=\"disabledItemHandler(item)\"\n        >\n            <ng-container *polymorpheusOutlet=\"itemContent as text; context: getContext(item, elementRef)\">\n                {{ text }}\n            </ng-container>\n        </button>\n    </tui-opt-group>\n</tui-data-list>\n<ng-template #loading>\n    <tui-loader class=\"t-loader\"></tui-loader>\n</ng-template>\n", styles: [":host{display:block}.t-loader{margin:.75rem 0}\n"], components: [{ type: i1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i3.TuiElementDirective, selector: "[tuiElement]", exportAs: ["elementRef"] }, { type: i4.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiDataListGroupWrapperComponent.prototype, "items", void 0);
 __decorate([
     tuiDefaultProp()
 ], TuiDataListGroupWrapperComponent.prototype, "labels", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListGroupWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListGroupWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-data-list-wrapper[labels]',
@@ -104,15 +104,15 @@ class TuiDataListWrapperComponent extends AbstractTuiDataListWrapper {
         this.items = [];
     }
 }
-TuiDataListWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListWrapperComponent, deps: [{ token: TUI_ITEMS_HANDLERS }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TuiDataListWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: { items: "items" }, providers: [
+TuiDataListWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListWrapperComponent, deps: [{ token: TUI_ITEMS_HANDLERS }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiDataListWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: { items: "items" }, providers: [
         tuiAsDataListAccessor(TuiDataListWrapperComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
     ], usesInheritance: true, ngImport: i0, template: "<!-- TODO: remove $any in 4.0 -->\n<tui-data-list\n    *ngIf=\"items; else loading\"\n    [emptyContent]=\"emptyContent\"\n    [size]=\"$any(size)\"\n>\n    <button\n        *ngFor=\"let item of items\"\n        #elementRef=\"elementRef\"\n        tuiElement\n        tuiOption\n        automation-id=\"tui-data-list-wrapper__option\"\n        [value]=\"item\"\n        [disabled]=\"disabledItemHandler(item)\"\n    >\n        <span class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"itemContent as text; context: getContext(item, elementRef)\">\n                {{ text }}\n            </ng-container>\n        </span>\n    </button>\n</tui-data-list>\n<ng-template #loading>\n    <tui-loader\n        automation-id=\"tui-data-list-wrapper__loader\"\n        class=\"t-loader\"\n    ></tui-loader>\n</ng-template>\n", styles: [":host{display:block}.t-loader{margin:.75rem 0}\n"], components: [{ type: i1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.TuiElementDirective, selector: "[tuiElement]", exportAs: ["elementRef"] }, { type: i4.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiDataListWrapperComponent.prototype, "items", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-data-list-wrapper:not([labels])',
@@ -138,22 +138,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiDataListWrapperModule {
 }
-TuiDataListWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiDataListWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListWrapperModule, declarations: [TuiDataListWrapperComponent, TuiDataListGroupWrapperComponent], imports: [CommonModule,
+TuiDataListWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDataListWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListWrapperModule, declarations: [TuiDataListWrapperComponent, TuiDataListGroupWrapperComponent], imports: [CommonModule,
         PolymorpheusModule,
         TuiElementModule,
         TuiDataListModule,
         TuiLoaderModule], exports: [TuiDataListWrapperComponent,
         TuiDataListGroupWrapperComponent,
         TuiDataListDirective] });
-TuiDataListWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListWrapperModule, imports: [[
+TuiDataListWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListWrapperModule, imports: [[
             CommonModule,
             PolymorpheusModule,
             TuiElementModule,
             TuiDataListModule,
             TuiLoaderModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDataListWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDataListWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2015/taiga-ui-kit-components-elastic-container.js

@@ -14,8 +14,8 @@ class TuiElasticContainerDirective {
         this.tuiElasticContainer = merge(this.resize$, this.mutation$).pipe(debounceTime(0), map(() => this.elementRef.nativeElement.clientHeight), distinctUntilChanged());
     }
 }
-TuiElasticContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerDirective, deps: [{ token: ElementRef }, { token: ResizeObserverService }, { token: MutationObserverService }], target: i0.ɵɵFactoryTarget.Directive });
-TuiElasticContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiElasticContainerDirective, selector: "[tuiElasticContainer]", outputs: { tuiElasticContainer: "tuiElasticContainer" }, providers: [
+TuiElasticContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerDirective, deps: [{ token: ElementRef }, { token: ResizeObserverService }, { token: MutationObserverService }], target: i0.ɵɵFactoryTarget.Directive });
+TuiElasticContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiElasticContainerDirective, selector: "[tuiElasticContainer]", outputs: { tuiElasticContainer: "tuiElasticContainer" }, providers: [
         ResizeObserverService,
         MutationObserverService,
         {
@@ -27,7 +27,7 @@ TuiElasticContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12
             },
         },
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiElasticContainer]',
@@ -62,9 +62,9 @@ class TuiElasticContainerComponent {
         this.height = NaN;
     }
 }
-TuiElasticContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TuiElasticContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiElasticContainerComponent, selector: "tui-elastic-container", host: { properties: { "style.height.px": "this.height" } }, ngImport: i0, template: "<div (tuiElasticContainer)=\"height = $event\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{transition-property:height;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:block;overflow:hidden}\n"], directives: [{ type: TuiElasticContainerDirective, selector: "[tuiElasticContainer]", outputs: ["tuiElasticContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerComponent, decorators: [{
+TuiElasticContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TuiElasticContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiElasticContainerComponent, selector: "tui-elastic-container", host: { properties: { "style.height.px": "this.height" } }, ngImport: i0, template: "<div (tuiElasticContainer)=\"height = $event\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{transition-property:height;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:block;overflow:hidden}\n"], directives: [{ type: TuiElasticContainerDirective, selector: "[tuiElasticContainer]", outputs: ["tuiElasticContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-elastic-container',
@@ -79,10 +79,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiElasticContainerModule {
 }
-TuiElasticContainerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiElasticContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerModule, declarations: [TuiElasticContainerComponent, TuiElasticContainerDirective], exports: [TuiElasticContainerComponent] });
-TuiElasticContainerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiElasticContainerModule, decorators: [{
+TuiElasticContainerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiElasticContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerModule, declarations: [TuiElasticContainerComponent, TuiElasticContainerDirective], exports: [TuiElasticContainerComponent] });
+TuiElasticContainerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiElasticContainerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TuiElasticContainerComponent, TuiElasticContainerDirective],

package/fesm2015/taiga-ui-kit-components-files.js

@@ -117,8 +117,8 @@ class TuiFileComponent {
         return `.${file.name.split('.').pop()}` || '';
     }
 }
-TuiFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFileComponent, deps: [{ token: TUI_IS_MOBILE }, { token: DomSanitizer }, { token: TUI_FILE_TEXTS }, { token: TUI_FILE_OPTIONS }, { token: TUI_DIGITAL_INFORMATION_UNITS }], target: i0.ɵɵFactoryTarget.Component });
-TuiFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiFileComponent, selector: "tui-file", inputs: { file: "file", state: "state", size: "size", showDelete: "showDelete", showSize: "showSize", leftContent: "leftContent" }, outputs: { removed: "removed" }, host: { properties: { "class._focused": "this.focused", "class._link": "this.src" } }, ngImport: i0, template: "<ng-container\n    *ngIf=\"!src; else withLink\"\n    [ngTemplateOutlet]=\"fileInfoTemplate\"\n></ng-container>\n\n<ng-template #withLink>\n    <a\n        rel=\"noreferrer noopener\"\n        target=\"_blank\"\n        class=\"t-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\n        class=\"t-preview\"\n        [class.t-preview_big]=\"isBig\"\n    >\n        <ng-container *polymorpheusOutlet=\"leftContent || defaultLeftContent as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n    <div class=\"t-wrapper\">\n        <div class=\"t-text\">\n            <div\n                automation-id=\"tui-file__name\"\n                class=\"t-name\"\n            >\n                {{ name }}\n            </div>\n            <div\n                automation-id=\"tui-file__type\"\n                class=\"t-type\"\n            >\n                {{ type }}\n            </div>\n            <div\n                *ngIf=\"showSize && (fileSize$ | async) as fileSize\"\n                automation-id=\"tui-file__size\"\n                class=\"t-size\"\n            >\n                {{ fileSize }}\n            </div>\n        </div>\n        <div\n            *ngIf=\"content$ | async as content\"\n            automation-id=\"tui-file__content\"\n            class=\"t-content\"\n        >\n            <ng-container *polymorpheusOutlet=\"content as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"allowDelete\">\n        <button\n            *ngIf=\"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=\"t-remove\"\n            [title]=\"texts.remove\"\n            [class.t-remove_mobile]=\"isMobile\"\n            (click.prevent)=\"onRemoveClick()\"\n        ></button>\n    </ng-container>\n</ng-template>\n\n<ng-template #defaultLeftContent>\n    <img\n        *ngIf=\"preview; else loader\"\n        automation-id=\"tui-file__preview\"\n        alt=\"file preview\"\n        class=\"t-image\"\n        [src]=\"preview\"\n    />\n    <ng-template #loader>\n        <tui-loader\n            *ngIf=\"isLoading; else svg\"\n            automation-id=\"tui-file__loader\"\n            class=\"t-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=\"t-icon\"\n            [class.t-icon_blank]=\"isBig || isDeleted\"\n            [class.t-icon_error]=\"isError\"\n            [src]=\"icon\"\n        ></tui-svg>\n    </ng-template>\n</ng-template>\n", styles: [":host{position:relative;display:flex;align-items:center;font:var(--tui-font-text-m);background:var(--tui-base-01);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 .t-remove{opacity:1}:host._focused{border-color:var(--tui-focus);box-shadow:0 0 0 1px inset var(--tui-focus)}.t-link{display:flex;flex:1;padding:.5625rem 2.1875rem .5625rem .5625rem;text-decoration:none;outline:none;cursor:pointer;color:var(--tui-text-01);max-width:calc(100% - 2.75rem)}.t-link:hover{background-color:var(--tui-base-02)}.t-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:var(--tui-base-06)}.t-preview_big{width:4rem;height:4rem;margin-right:1rem}.t-preview_big:before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";background:var(--tui-base-08);opacity:.08}.t-image{max-width:100%;max-height:100%}.t-loader{position:absolute;top:0;left:0;width:100%;height:100%}.t-icon{position:absolute;top:0;left:0;width:100%;height:100%;color:var(--tui-success-fill)}.t-icon_blank{color:var(--tui-base-06)}.t-icon_error{color:var(--tui-error-fill)}.t-remove{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem;opacity:0}.t-remove:focus,.t-remove_mobile{opacity:1}.t-wrapper{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.t-text{display:flex}.t-size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-left:.5rem}.t-type{flex-shrink:0}.t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-content{font:var(--tui-font-text-s);color:var(--tui-error-fill)}\n"], components: [{ type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.TuiFocusVisibleDirective, selector: "[tuiFocusVisibleChange]", outputs: ["tuiFocusVisibleChange"] }, { type: i4.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFileComponent, deps: [{ token: TUI_IS_MOBILE }, { token: DomSanitizer }, { token: TUI_FILE_TEXTS }, { token: TUI_FILE_OPTIONS }, { token: TUI_DIGITAL_INFORMATION_UNITS }], target: i0.ɵɵFactoryTarget.Component });
+TuiFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiFileComponent, selector: "tui-file", inputs: { file: "file", state: "state", size: "size", showDelete: "showDelete", showSize: "showSize", leftContent: "leftContent" }, outputs: { removed: "removed" }, host: { properties: { "class._focused": "this.focused", "class._link": "this.src" } }, ngImport: i0, template: "<ng-container\n    *ngIf=\"!src; else withLink\"\n    [ngTemplateOutlet]=\"fileInfoTemplate\"\n></ng-container>\n\n<ng-template #withLink>\n    <a\n        rel=\"noreferrer noopener\"\n        target=\"_blank\"\n        class=\"t-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\n        class=\"t-preview\"\n        [class.t-preview_big]=\"isBig\"\n    >\n        <ng-container *polymorpheusOutlet=\"leftContent || defaultLeftContent as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n    <div class=\"t-wrapper\">\n        <div class=\"t-text\">\n            <div\n                automation-id=\"tui-file__name\"\n                class=\"t-name\"\n            >\n                {{ name }}\n            </div>\n            <div\n                automation-id=\"tui-file__type\"\n                class=\"t-type\"\n            >\n                {{ type }}\n            </div>\n            <div\n                *ngIf=\"showSize && (fileSize$ | async) as fileSize\"\n                automation-id=\"tui-file__size\"\n                class=\"t-size\"\n            >\n                {{ fileSize }}\n            </div>\n        </div>\n        <div\n            *ngIf=\"content$ | async as content\"\n            automation-id=\"tui-file__content\"\n            class=\"t-content\"\n        >\n            <ng-container *polymorpheusOutlet=\"content as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"allowDelete\">\n        <button\n            *ngIf=\"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=\"t-remove\"\n            [title]=\"texts.remove\"\n            [class.t-remove_mobile]=\"isMobile\"\n            (click.prevent)=\"onRemoveClick()\"\n        ></button>\n    </ng-container>\n</ng-template>\n\n<ng-template #defaultLeftContent>\n    <img\n        *ngIf=\"preview; else loader\"\n        automation-id=\"tui-file__preview\"\n        alt=\"file preview\"\n        class=\"t-image\"\n        [src]=\"preview\"\n    />\n    <ng-template #loader>\n        <tui-loader\n            *ngIf=\"isLoading; else svg\"\n            automation-id=\"tui-file__loader\"\n            class=\"t-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=\"t-icon\"\n            [class.t-icon_blank]=\"isBig || isDeleted\"\n            [class.t-icon_error]=\"isError\"\n            [src]=\"icon\"\n        ></tui-svg>\n    </ng-template>\n</ng-template>\n", styles: [":host{position:relative;display:flex;align-items:center;font:var(--tui-font-text-m);background:var(--tui-base-01);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 .t-remove{opacity:1}:host._focused{border-color:var(--tui-focus);box-shadow:0 0 0 1px inset var(--tui-focus)}.t-link{display:flex;flex:1;padding:.5625rem 2.1875rem .5625rem .5625rem;text-decoration:none;outline:none;cursor:pointer;color:var(--tui-text-01);max-width:calc(100% - 2.75rem)}.t-link:hover{background-color:var(--tui-base-02)}.t-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:var(--tui-base-06)}.t-preview_big{width:4rem;height:4rem;margin-right:1rem}.t-preview_big:before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";background:var(--tui-base-08);opacity:.08}.t-image{max-width:100%;max-height:100%}.t-loader{position:absolute;top:0;left:0;width:100%;height:100%}.t-icon{position:absolute;top:0;left:0;width:100%;height:100%;color:var(--tui-success-fill)}.t-icon_blank{color:var(--tui-base-06)}.t-icon_error{color:var(--tui-error-fill)}.t-remove{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:.625rem;right:.625rem;opacity:0}.t-remove:focus,.t-remove_mobile{opacity:1}.t-wrapper{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.t-text{display:flex}.t-size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-left:.5rem}.t-type{flex-shrink:0}.t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-content{font:var(--tui-font-text-s);color:var(--tui-error-fill)}\n"], components: [{ type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.TuiFocusVisibleDirective, selector: "[tuiFocusVisibleChange]", outputs: ["tuiFocusVisibleChange"] }, { type: i4.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiFileComponent.prototype, "file", void 0);
@@ -152,7 +152,7 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiFileComponent.prototype, "getType", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-file',
@@ -213,12 +213,12 @@ class TuiFilesComponent {
         this.hidden = !this.hidden;
     }
 }
-TuiFilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilesComponent, deps: [{ token: TUI_HIDE_TEXT }, { token: TUI_SHOW_ALL_TEXT }], target: i0.ɵɵFactoryTarget.Component });
-TuiFilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiFilesComponent, selector: "tui-files", inputs: { max: "max" }, queries: [{ propertyName: "items", predicate: TuiItemDirective, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"items?.changes | async\"></ng-container>\n\n<section\n    tuiGroup\n    orientation=\"vertical\"\n    class=\"t-files\"\n    [collapsed]=\"true\"\n>\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let item of items; let index = index\">\n        <ng-container\n            *ngIf=\"!max || index < max\"\n            [ngTemplateOutlet]=\"item\"\n        ></ng-container>\n    </ng-container>\n    <tui-expand\n        *ngIf=\"hasExtraItems\"\n        [expanded]=\"!hidden\"\n    >\n        <div class=\"t-extra-items\">\n            <ng-container *ngFor=\"let item of items; let index = index\">\n                <ng-container\n                    *ngIf=\"max && index >= max\"\n                    [ngTemplateOutlet]=\"item\"\n                ></ng-container>\n            </ng-container>\n        </div>\n    </tui-expand>\n    <button\n        *ngIf=\"hasExtraItems\"\n        tuiButton\n        appearance=\"outline\"\n        size=\"m\"\n        type=\"button\"\n        class=\"t-button\"\n        [class.t-button_collapsed]=\"hidden\"\n        (click)=\"toggle()\"\n    >\n        {{ (hidden ? showAllText$ : hideText$) | async }}\n    </button>\n</section>\n", styles: ["tui-files{display:block}tui-files .t-files{position:relative;display:block;width:100%;height:100%;border-radius:var(--tui-radius-m);overflow:hidden}tui-files .t-button{z-index:3;width:100%;background:var(--tui-base-01)}tui-files .t-button_collapsed{box-shadow:0 1.125rem 1.875rem rgba(0,0,0,.48);margin-top:-1.5rem}tui-files .t-extra-items tui-file{border-radius:0;margin-top:0;margin-bottom:-.0625rem}\n"], components: [{ type: i1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TuiFilesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilesComponent, deps: [{ token: TUI_HIDE_TEXT }, { token: TUI_SHOW_ALL_TEXT }], target: i0.ɵɵFactoryTarget.Component });
+TuiFilesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiFilesComponent, selector: "tui-files", inputs: { max: "max" }, queries: [{ propertyName: "items", predicate: TuiItemDirective, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"items?.changes | async\"></ng-container>\n\n<section\n    tuiGroup\n    orientation=\"vertical\"\n    class=\"t-files\"\n    [collapsed]=\"true\"\n>\n    <ng-content></ng-content>\n    <ng-container *ngFor=\"let item of items; let index = index\">\n        <ng-container\n            *ngIf=\"!max || index < max\"\n            [ngTemplateOutlet]=\"item\"\n        ></ng-container>\n    </ng-container>\n    <tui-expand\n        *ngIf=\"hasExtraItems\"\n        [expanded]=\"!hidden\"\n    >\n        <div class=\"t-extra-items\">\n            <ng-container *ngFor=\"let item of items; let index = index\">\n                <ng-container\n                    *ngIf=\"max && index >= max\"\n                    [ngTemplateOutlet]=\"item\"\n                ></ng-container>\n            </ng-container>\n        </div>\n    </tui-expand>\n    <button\n        *ngIf=\"hasExtraItems\"\n        tuiButton\n        appearance=\"outline\"\n        size=\"m\"\n        type=\"button\"\n        class=\"t-button\"\n        [class.t-button_collapsed]=\"hidden\"\n        (click)=\"toggle()\"\n    >\n        {{ (hidden ? showAllText$ : hideText$) | async }}\n    </button>\n</section>\n", styles: ["tui-files{display:block}tui-files .t-files{position:relative;display:block;width:100%;height:100%;border-radius:var(--tui-radius-m);overflow:hidden}tui-files .t-button{z-index:3;width:100%;background:var(--tui-base-01)}tui-files .t-button_collapsed{box-shadow:0 1.125rem 1.875rem rgba(0,0,0,.48);margin-top:-1.5rem}tui-files .t-extra-items tui-file{border-radius:0;margin-top:0;margin-bottom:-.0625rem}\n"], components: [{ type: i1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     tuiDefaultProp()
 ], TuiFilesComponent.prototype, "max", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-files',
@@ -242,8 +242,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiFilesModule {
 }
-TuiFilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiFilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilesModule, declarations: [TuiFilesComponent, TuiFileComponent], imports: [CommonModule,
+TuiFilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiFilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilesModule, declarations: [TuiFilesComponent, TuiFileComponent], imports: [CommonModule,
         TuiGroupModule,
         TuiLoaderModule,
         PolymorpheusModule,
@@ -252,7 +252,7 @@ TuiFilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TuiButtonModule,
         TuiItemModule,
         TuiExpandModule], exports: [TuiFilesComponent, TuiFileComponent, TuiItemDirective] });
-TuiFilesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilesModule, imports: [[
+TuiFilesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilesModule, imports: [[
             CommonModule,
             TuiGroupModule,
             TuiLoaderModule,
@@ -263,7 +263,7 @@ TuiFilesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             TuiItemModule,
             TuiExpandModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TuiFilesComponent, TuiFileComponent],

package/fesm2015/taiga-ui-kit-components-filter.js

@@ -41,8 +41,8 @@ class TuiFilterComponent extends AbstractTuiMultipleControl {
         return this.value.some(arrItem => this.identityMatcher(arrItem, item));
     }
 }
-TuiFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilterComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TuiFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiFilterComponent, selector: "tui-filter", inputs: { identityMatcher: "identityMatcher", items: "items", size: "size", disabledItemHandler: "disabledItemHandler", content: "content", badgeHandler: "badgeHandler" }, outputs: { toggledItem: "toggledItem" }, host: { properties: { "attr.data-size": "this.size" } }, usesInheritance: true, ngImport: i0, template: "<tui-checkbox-block\n    *ngFor=\"let item of items\"\n    automation-id=\"tui-filter__checkbox\"\n    class=\"t-item\"\n    [disabled]=\"disabledItemHandler(item)\"\n    [hideCheckbox]=\"true\"\n    [ngModel]=\"isCheckboxEnabled(item)\"\n    [size]=\"size\"\n    (ngModelChange)=\"onCheckbox($event, item)\"\n>\n    <div\n        automation-id=\"tui-filter__content\"\n        class=\"t-content\"\n    >\n        <ng-container *polymorpheusOutlet=\"content as text; context: {$implicit: item}\">\n            {{ text }}\n        </ng-container>\n        <tui-badge\n            *ngIf=\"badgeHandler(item) as badgeValue\"\n            automation-id=\"tui-filter__badge\"\n            tuiMode=\"onLight\"\n            class=\"t-badge\"\n            [class.t-badge_disabled]=\"disabledItemHandler(item)\"\n            [size]=\"size\"\n            [value]=\"badgeValue\"\n        ></tui-badge>\n    </div>\n</tui-checkbox-block>\n", styles: [":host{display:block;margin-bottom:-.25rem}.t-content{display:flex;align-items:center}.t-item{margin-right:.25rem;margin-bottom:.25rem}.t-item:last-child,:host[data-size=l] .t-item:last-child{margin-right:0}:host[data-size=l] .t-item{margin-right:.5rem;margin-bottom:.5rem}.t-badge{margin-left:.25rem}.t-badge_disabled{opacity:var(--tui-disabled-opacity)}\n"], components: [{ type: i1.TuiCheckboxBlockComponent, selector: "tui-checkbox-block", inputs: ["contentAlign", "hideCheckbox", "size"] }, { type: i2.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilterComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TuiFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiFilterComponent, selector: "tui-filter", inputs: { identityMatcher: "identityMatcher", items: "items", size: "size", disabledItemHandler: "disabledItemHandler", content: "content", badgeHandler: "badgeHandler" }, outputs: { toggledItem: "toggledItem" }, host: { properties: { "attr.data-size": "this.size" } }, usesInheritance: true, ngImport: i0, template: "<tui-checkbox-block\n    *ngFor=\"let item of items\"\n    automation-id=\"tui-filter__checkbox\"\n    class=\"t-item\"\n    [disabled]=\"disabledItemHandler(item)\"\n    [hideCheckbox]=\"true\"\n    [ngModel]=\"isCheckboxEnabled(item)\"\n    [size]=\"size\"\n    (ngModelChange)=\"onCheckbox($event, item)\"\n>\n    <div\n        automation-id=\"tui-filter__content\"\n        class=\"t-content\"\n    >\n        <ng-container *polymorpheusOutlet=\"content as text; context: {$implicit: item}\">\n            {{ text }}\n        </ng-container>\n        <tui-badge\n            *ngIf=\"badgeHandler(item) as badgeValue\"\n            automation-id=\"tui-filter__badge\"\n            tuiMode=\"onLight\"\n            class=\"t-badge\"\n            [class.t-badge_disabled]=\"disabledItemHandler(item)\"\n            [size]=\"size\"\n            [value]=\"badgeValue\"\n        ></tui-badge>\n    </div>\n</tui-checkbox-block>\n", styles: [":host{display:block;margin-bottom:-.25rem}.t-content{display:flex;align-items:center}.t-item{margin-right:.25rem;margin-bottom:.25rem}.t-item:last-child,:host[data-size=l] .t-item:last-child{margin-right:0}:host[data-size=l] .t-item{margin-right:.5rem;margin-bottom:.5rem}.t-badge{margin-left:.25rem}.t-badge_disabled{opacity:var(--tui-disabled-opacity)}\n"], components: [{ type: i1.TuiCheckboxBlockComponent, selector: "tui-checkbox-block", inputs: ["contentAlign", "hideCheckbox", "size"] }, { type: i2.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiFilterComponent.prototype, "identityMatcher", void 0);
@@ -61,7 +61,7 @@ __decorate([
 __decorate([
     tuiDefaultProp()
 ], TuiFilterComponent.prototype, "badgeHandler", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-filter',
@@ -103,14 +103,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiFilterModule {
 }
-TuiFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilterModule, declarations: [TuiFilterComponent], imports: [CommonModule,
+TuiFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilterModule, declarations: [TuiFilterComponent], imports: [CommonModule,
         FormsModule,
         PolymorpheusModule,
         TuiCheckboxBlockModule,
         TuiBadgeModule,
         TuiModeModule], exports: [TuiFilterComponent] });
-TuiFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilterModule, imports: [[
+TuiFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilterModule, imports: [[
             CommonModule,
             FormsModule,
             PolymorpheusModule,
@@ -118,7 +118,7 @@ TuiFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             TuiBadgeModule,
             TuiModeModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2015/taiga-ui-kit-components-input-copy.js

@@ -63,8 +63,8 @@ class TuiInputCopyComponent extends AbstractTuiControl {
         return '';
     }
 }
-TuiInputCopyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: DOCUMENT }, { token: TUI_TEXTFIELD_SIZE }, { token: TUI_COPY_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
-TuiInputCopyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputCopyComponent, selector: "tui-input-copy", inputs: { successMessage: "successMessage", messageDirection: "messageDirection", messageAppearance: "messageAppearance" }, host: { properties: { "class._has-value": "this.hasValue" } }, providers: [
+TuiInputCopyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: DOCUMENT }, { token: TUI_TEXTFIELD_SIZE }, { token: TUI_COPY_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
+TuiInputCopyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputCopyComponent, selector: "tui-input-copy", inputs: { successMessage: "successMessage", messageDirection: "messageDirection", messageAppearance: "messageAppearance" }, host: { properties: { "class._has-value": "this.hasValue" } }, providers: [
         TUI_VALUE_ACCESSOR_PROVIDER,
         tuiAsFocusableItemAccessor(TuiInputCopyComponent),
         tuiAsControl(TuiInputCopyComponent),
@@ -81,7 +81,7 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiInputCopyComponent.prototype, "hintText$", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-input-copy',
@@ -132,9 +132,9 @@ class TuiInputCopyDirective extends AbstractTuiTextfieldHost {
         this.host.onValueChange(value);
     }
 }
-TuiInputCopyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiInputCopyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputCopyDirective, selector: "tui-input-copy", providers: [tuiAsTextfieldHost(TuiInputCopyDirective)], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyDirective, decorators: [{
+TuiInputCopyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiInputCopyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputCopyDirective, selector: "tui-input-copy", providers: [tuiAsTextfieldHost(TuiInputCopyDirective)], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tui-input-copy',
@@ -144,8 +144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiInputCopyModule {
 }
-TuiInputCopyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiInputCopyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyModule, declarations: [TuiInputCopyComponent, TuiInputCopyDirective], imports: [CommonModule,
+TuiInputCopyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiInputCopyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyModule, declarations: [TuiInputCopyComponent, TuiInputCopyDirective], imports: [CommonModule,
         PolymorpheusModule,
         TuiWrapperModule,
         TuiSvgModule,
@@ -153,7 +153,7 @@ TuiInputCopyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         TuiPrimitiveTextfieldModule,
         TuiAlertModule,
         TuiTextfieldControllerModule], exports: [TuiInputCopyComponent, TuiInputCopyDirective, TuiTextfieldComponent] });
-TuiInputCopyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyModule, imports: [[
+TuiInputCopyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyModule, imports: [[
             CommonModule,
             PolymorpheusModule,
             TuiWrapperModule,
@@ -163,7 +163,7 @@ TuiInputCopyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
             TuiAlertModule,
             TuiTextfieldControllerModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCopyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCopyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2015/taiga-ui-kit-components-input-count.js

@@ -5,7 +5,7 @@ import * as i4 from '@angular/forms';
 import { NgControl } from '@angular/forms';
 import { AbstractTuiNullableControl, tuiIsNativeFocused, tuiIsPresent, tuiClamp, TUI_IS_MOBILE, tuiAsFocusableItemAccessor, tuiAsControl, tuiDefaultProp, tuiPure } from '@taiga-ui/cdk';
 import * as i1 from '@taiga-ui/core';
-import { tuiCreateNumberMask, tuiFormatNumber, TUI_TEXTFIELD_APPEARANCE, TUI_TEXTFIELD_SIZE, TUI_NUMBER_FORMAT, TuiPrimitiveTextfieldComponent, AbstractTuiTextfieldHost, tuiAsTextfieldHost, TuiButtonModule, TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule, TuiTextfieldComponent } from '@taiga-ui/core';
+import { tuiCreateNumberMask, tuiFormatNumber, TUI_TEXTFIELD_WATCHED_CONTROLLER, TUI_NUMBER_FORMAT, TEXTFIELD_CONTROLLER_PROVIDER, TuiPrimitiveTextfieldComponent, AbstractTuiTextfieldHost, tuiAsTextfieldHost, TuiButtonModule, TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule, TuiTextfieldComponent } from '@taiga-ui/core';
 import { TUI_PLUS_MINUS_TEXTS } from '@taiga-ui/kit/tokens';
 import * as i2 from '@taiga-ui/kit/directives';
 import { TextMaskModule, TuiValueAccessorModule } from '@taiga-ui/kit/directives';
@@ -36,10 +36,9 @@ const tuiInputCountOptionsProvider = (options) => ({
 });
 
 class TuiInputCountComponent extends AbstractTuiNullableControl {
-    constructor(control, changeDetectorRef, appearance, textfieldSize, minusTexts$, isMobile, options, numberFormat) {
+    constructor(control, changeDetectorRef, textfieldController, minusTexts$, isMobile, options, numberFormat) {
         super(control, changeDetectorRef);
-        this.appearance = appearance;
-        this.textfieldSize = textfieldSize;
+        this.textfieldController = textfieldController;
         this.minusTexts$ = minusTexts$;
         this.isMobile = isMobile;
         this.options = options;
@@ -64,7 +63,7 @@ class TuiInputCountComponent extends AbstractTuiNullableControl {
         };
     }
     get buttonsHidden() {
-        return this.hideButtons || this.appearance === 'table';
+        return this.hideButtons || this.textfieldController.appearance === 'table';
     }
     get iconUp() {
         return this.options.icons.up;
@@ -78,7 +77,7 @@ class TuiInputCountComponent extends AbstractTuiNullableControl {
             : this.primitiveTextfield.nativeFocusableElement;
     }
     get size() {
-        return this.textfieldSize.size;
+        return this.textfieldController.size;
     }
     get focused() {
         return tuiIsNativeFocused(this.nativeFocusableElement);
@@ -191,10 +190,11 @@ class TuiInputCountComponent extends AbstractTuiNullableControl {
         return Number.isNaN(value) || !tuiIsPresent(value);
     }
 }
-TuiInputCountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_TEXTFIELD_APPEARANCE }, { token: TUI_TEXTFIELD_SIZE }, { token: TUI_PLUS_MINUS_TEXTS }, { token: TUI_IS_MOBILE }, { token: TUI_INPUT_COUNT_OPTIONS }, { token: TUI_NUMBER_FORMAT }], target: i0.ɵɵFactoryTarget.Component });
-TuiInputCountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputCountComponent, selector: "tui-input-count", inputs: { step: "step", min: "min", max: "max", hideButtons: "hideButtons", prefix: "prefix", postfix: "postfix" }, host: { properties: { "class._hide-buttons": "this.buttonsHidden", "attr.data-size": "this.size" } }, providers: [
+TuiInputCountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: TUI_PLUS_MINUS_TEXTS }, { token: TUI_IS_MOBILE }, { token: TUI_INPUT_COUNT_OPTIONS }, { token: TUI_NUMBER_FORMAT }], target: i0.ɵɵFactoryTarget.Component });
+TuiInputCountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputCountComponent, selector: "tui-input-count", inputs: { step: "step", min: "min", max: "max", hideButtons: "hideButtons", prefix: "prefix", postfix: "postfix" }, host: { properties: { "class._hide-buttons": "this.buttonsHidden", "attr.data-size": "this.size" } }, providers: [
         tuiAsFocusableItemAccessor(TuiInputCountComponent),
         tuiAsControl(TuiInputCountComponent),
+        TEXTFIELD_CONTROLLER_PROVIDER,
     ], viewQueries: [{ propertyName: "primitiveTextfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-primitive-textfield\n    tuiValueAccessor\n    class=\"t-textfield\"\n    [pseudoFocus]=\"pseudoFocus\"\n    [pseudoHover]=\"pseudoHover\"\n    [pseudoActive]=\"pseudoActive\"\n    [focusable]=\"focusable\"\n    [nativeId]=\"nativeId\"\n    [prefix]=\"prefix\"\n    [postfix]=\"postfix\"\n    [disabled]=\"computedDisabled\"\n    [readOnly]=\"readOnly\"\n    [textMask]=\"getMask(min < 0)\"\n    [invalid]=\"computedInvalid\"\n    [value]=\"computedValue\"\n    (valueChange)=\"onValueChange()\"\n    (keydown)=\"onKeydown($event)\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <ng-content></ng-content>\n    <ng-content\n        select=\"input\"\n        ngProjectAs=\"input\"\n    ></ng-content>\n</tui-primitive-textfield>\n<ng-container *ngIf=\"!buttonsHidden\">\n    <ng-container *ngIf=\"minusTexts$ | async as texts\">\n        <section class=\"t-buttons\">\n            <button\n                tuiIconButton\n                type=\"button\"\n                automation-id=\"tui-input-count__plus-button\"\n                size=\"s\"\n                class=\"t-button t-button_plus\"\n                [icon]=\"iconUp\"\n                [appearance]=\"options.appearance\"\n                [title]=\"texts[0]\"\n                [disabled]=\"plusButtonDisabled\"\n                [focusable]=\"false\"\n                (mousedown)=\"onButtonMouseDown($event, plusButtonDisabled)\"\n                (click)=\"increaseValue()\"\n            ></button>\n            <button\n                tuiIconButton\n                type=\"button\"\n                automation-id=\"tui-input-count__minus-button\"\n                size=\"s\"\n                class=\"t-button t-button_minus\"\n                [icon]=\"iconDown\"\n                [appearance]=\"options.appearance\"\n                [disabled]=\"minusButtonDisabled\"\n                [focusable]=\"false\"\n                [title]=\"texts[1]\"\n                (mousedown)=\"onButtonMouseDown($event, minusButtonDisabled)\"\n                (click)=\"decreaseValue()\"\n            ></button>\n        </section>\n    </ng-container>\n</ng-container>\n", styles: [":host{display:flex;font:var(--tui-font-text-s);border-radius:var(--tui-radius-m);height:var(--tui-height-m);color:var(--tui-text-01);text-align:left}:host._disabled{pointer-events:none}:host[data-size=l]{font:var(--tui-font-text-m);height:var(--tui-height-l)}.t-textfield{position:relative;border-radius:inherit;text-align:inherit;flex-grow:1;min-width:0}:host:not(._hide-buttons) .t-textfield{border-top-right-radius:0;border-bottom-right-radius:0}.t-buttons{display:flex;flex-direction:column;margin-left:.125rem;height:100%}.t-buttons .t-button{display:flex;width:calc(var(--tui-height-m) * .75);height:calc(50% - .0625rem)}.t-buttons .t-button_plus{margin-bottom:.125rem;border-radius:0 var(--tui-radius-m) 0 0}.t-buttons .t-button_minus{border-radius:0 0 var(--tui-radius-m)}:host[data-size=l] .t-buttons .t-button{width:calc(var(--tui-height-l) * .75)}\n"], components: [{ type: i1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { type: i2.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
@@ -217,7 +217,7 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiInputCountComponent.prototype, "getMask", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tui-input-count',
@@ -227,6 +227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [
                         tuiAsFocusableItemAccessor(TuiInputCountComponent),
                         tuiAsControl(TuiInputCountComponent),
+                        TEXTFIELD_CONTROLLER_PROVIDER,
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
@@ -239,12 +240,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }, { type: i0.ChangeDetectorRef, decorators: [{
                     type: Inject,
                     args: [ChangeDetectorRef]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TUI_TEXTFIELD_APPEARANCE]
-                }] }, { type: i1.TuiTextfieldSizeDirective, decorators: [{
+                }] }, { type: i1.TuiTextfieldController, decorators: [{
                     type: Inject,
-                    args: [TUI_TEXTFIELD_SIZE]
+                    args: [TUI_TEXTFIELD_WATCHED_CONTROLLER]
                 }] }, { type: i5.Observable, decorators: [{
                     type: Inject,
                     args: [TUI_PLUS_MINUS_TEXTS]
@@ -296,9 +294,9 @@ class TuiInputCountDirective extends AbstractTuiTextfieldHost {
         }
     }
 }
-TuiInputCountDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TuiInputCountDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputCountDirective, selector: "tui-input-count", providers: [tuiAsTextfieldHost(TuiInputCountDirective)], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountDirective, decorators: [{
+TuiInputCountDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiInputCountDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputCountDirective, selector: "tui-input-count", providers: [tuiAsTextfieldHost(TuiInputCountDirective)], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tui-input-count',
@@ -308,15 +306,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class TuiInputCountModule {
 }
-TuiInputCountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuiInputCountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountModule, declarations: [TuiInputCountComponent, TuiInputCountDirective], imports: [CommonModule,
+TuiInputCountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiInputCountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountModule, declarations: [TuiInputCountComponent, TuiInputCountDirective], imports: [CommonModule,
         TextMaskModule,
         TuiButtonModule,
         TuiPrimitiveTextfieldModule,
         TuiTextfieldControllerModule,
         TuiValueAccessorModule,
         PolymorpheusModule], exports: [TuiInputCountComponent, TuiInputCountDirective, TuiTextfieldComponent] });
-TuiInputCountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountModule, imports: [[
+TuiInputCountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountModule, imports: [[
             CommonModule,
             TextMaskModule,
             TuiButtonModule,
@@ -325,7 +323,7 @@ TuiInputCountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             TuiValueAccessorModule,
             PolymorpheusModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputCountModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiInputCountModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [