@taiga-ui/kit 3.48.0 → 3.49.0

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

@@ -131,7 +131,7 @@ TuiTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         tuiAsControl(TuiTextareaComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
         MODE_PROVIDER,
-    ], queries: [{ propertyName: "textfield", first: true, predicate: TuiTextfieldComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<div\n    automation-id=\"tui-text-area__wrapper\"\n    tuiWrapper\n    class=\"t-outline\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n>\n    <div\n        *ngIf=\"hasCounter\"\n        automation-id=\"tui-text-area__counter\"\n        class=\"t-counter\"\n    >\n        {{ value.length }}/{{ maxLength }}\n    </div>\n\n    <label\n        class=\"t-content\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-wrapper\">\n            <div\n                *ngIf=\"hasPlaceholder\"\n                automation-id=\"tui-text-area__placeholder\"\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                <ng-content></ng-content>\n            </div>\n            <tui-scrollbar\n                automation-id=\"tui-text-area__scrollbar\"\n                class=\"t-box\"\n                [style.maxHeight.px]=\"computeMaxHeight\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <div class=\"t-relative\">\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"t-pseudo-content\"\n                        >\n                            <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n                            <span\n                                class=\"t-pseudo-content__extra\"\n                                [textContent]=\"extraContent\"\n                            ></span>\n                            <span class=\"t-caret\"></span>\n                        </div>\n                        <textarea\n                            #focusableElement\n                            automation-id=\"tui-text-area__native\"\n                            class=\"t-input\"\n                            [disabled]=\"computedDisabled\"\n                            [id]=\"id\"\n                            [readOnly]=\"readOnly\"\n                            [tuiFocusable]=\"computedFocusable\"\n                            [(ngModel)]=\"value\"\n                        ></textarea>\n                        <ng-content select=\"textarea\"></ng-content>\n                    </div>\n                </div>\n            </tui-scrollbar>\n        </div>\n        <div class=\"t-icons\">\n            <div\n                *ngIf=\"iconLeftContent\"\n                class=\"t-icon t-icon_left t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n            <ng-container *ngIf=\"hasCustomContent\">\n                <tui-svg\n                    *polymorpheusOutlet=\"controller.customContent as src\"\n                    [src]=\"src\"\n                ></tui-svg>\n            </ng-container>\n            <ng-container *ngIf=\"hasCleaner\">\n                <tui-svg\n                    *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    class=\"t-cleaner\"\n                    [src]=\"src\"\n                    (click.stop)=\"onValueChange('')\"\n                ></tui-svg>\n            </ng-container>\n            <tui-tooltip\n                *ngIf=\"hasTooltip\"\n                automation-id=\"tui-text-area__tooltip\"\n                [content]=\"hintOptions?.content\"\n                [describeId]=\"id\"\n            ></tui-tooltip>\n            <div\n                *ngIf=\"iconContent\"\n                class=\"t-icon t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n        </div>\n    </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-height:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}.t-outline{min-height:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-height:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;width:100%;height:100%;min-height:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-height:inherit;width:100%;flex:1}.t-relative{position:relative;min-height:inherit}.t-box{display:flex;min-height:calc(100% - 1rem);width:100%}:host:not(._expandable) .t-box{height:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{height:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-top:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-top:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:transparent;overflow:hidden;border:solid transparent;border-top:0;border-bottom:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-error-bg-night)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}:host._focused .t-input:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem}:host[data-size=l] .t-input{padding:0 1rem}:host[data-mode=onDark]._disabled .t-input{color:var(--tui-text-03-night)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-width:100%;border:solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;height:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){-webkit-margin-start:.25rem;margin-inline-start:.25rem}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{-webkit-margin-end:auto;margin-inline-end:auto}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;height:1rem;width:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .t-counter{color:var(--tui-text-03-night)}\n"], components: [{ type: i1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "textfield", first: true, predicate: TuiTextfieldComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<div\n    automation-id=\"tui-text-area__wrapper\"\n    tuiWrapper\n    class=\"t-outline\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n>\n    <div\n        *ngIf=\"hasCounter\"\n        automation-id=\"tui-text-area__counter\"\n        class=\"t-counter\"\n    >\n        {{ value.length }}/{{ maxLength }}\n    </div>\n\n    <label\n        class=\"t-content\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-wrapper\">\n            <div\n                *ngIf=\"hasPlaceholder\"\n                automation-id=\"tui-text-area__placeholder\"\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                <ng-content></ng-content>\n            </div>\n            <tui-scrollbar\n                automation-id=\"tui-text-area__scrollbar\"\n                class=\"t-box\"\n                [style.maxHeight.px]=\"computeMaxHeight\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <div class=\"t-relative\">\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"t-pseudo-content\"\n                        >\n                            <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n                            <span\n                                class=\"t-pseudo-content__extra\"\n                                [textContent]=\"extraContent\"\n                            ></span>\n                            <span class=\"t-caret\"></span>\n                        </div>\n                        <textarea\n                            #focusableElement\n                            automation-id=\"tui-text-area__native\"\n                            class=\"t-input\"\n                            [disabled]=\"computedDisabled\"\n                            [id]=\"id\"\n                            [readOnly]=\"readOnly\"\n                            [tuiFocusable]=\"computedFocusable\"\n                            [(ngModel)]=\"value\"\n                        ></textarea>\n                        <ng-content select=\"textarea\"></ng-content>\n                    </div>\n                </div>\n            </tui-scrollbar>\n        </div>\n        <div class=\"t-icons\">\n            <div\n                *ngIf=\"iconLeftContent\"\n                class=\"t-icon t-icon_left t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n            <ng-container *ngIf=\"hasCustomContent\">\n                <tui-svg\n                    *polymorpheusOutlet=\"controller.customContent as src\"\n                    [src]=\"src\"\n                ></tui-svg>\n            </ng-container>\n            <ng-container *ngIf=\"hasCleaner\">\n                <tui-svg\n                    *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    class=\"t-cleaner\"\n                    [src]=\"src\"\n                    (click.stop)=\"onValueChange('')\"\n                ></tui-svg>\n            </ng-container>\n            <tui-tooltip\n                *ngIf=\"hasTooltip\"\n                automation-id=\"tui-text-area__tooltip\"\n                [content]=\"hintOptions?.content\"\n                [describeId]=\"id\"\n            ></tui-tooltip>\n            <div\n                *ngIf=\"iconContent\"\n                class=\"t-icon t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n        </div>\n    </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-height:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}.t-outline{min-height:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-height:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;width:100%;height:100%;min-height:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-height:inherit;width:100%;flex:1}.t-relative{position:relative;min-height:inherit}.t-box{display:flex;min-height:calc(100% - 1rem);width:100%}:host:not(._expandable) .t-box{height:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{height:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-top:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-top:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:transparent;overflow:hidden;border:solid transparent;border-top:0;border-bottom:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-error-bg-night)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}:host._focused .t-input:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem}:host[data-size=l] .t-input{padding:0 1rem}:host[data-mode=onDark]._disabled .t-input{color:var(--tui-text-03-night)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-width:100%;border:solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;height:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){-webkit-margin-start:.25rem;margin-inline-start:.25rem}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{-webkit-margin-end:auto;margin-inline-end:auto}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;height:1rem;width:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .t-counter{color:var(--tui-text-03-night)}\n"], components: [{ type: i1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -244,7 +244,7 @@ TuiTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         tuiAsControl(TuiTextAreaComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
         MODE_PROVIDER,
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<div\n    automation-id=\"tui-text-area__wrapper\"\n    tuiWrapper\n    class=\"t-outline\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n>\n    <div\n        *ngIf=\"hasCounter\"\n        automation-id=\"tui-text-area__counter\"\n        class=\"t-counter\"\n    >\n        {{ value.length }}/{{ maxLength }}\n    </div>\n\n    <label\n        class=\"t-content\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-wrapper\">\n            <div\n                *ngIf=\"hasPlaceholder\"\n                automation-id=\"tui-text-area__placeholder\"\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                <ng-content></ng-content>\n            </div>\n            <tui-scrollbar\n                automation-id=\"tui-text-area__scrollbar\"\n                class=\"t-box\"\n                [style.maxHeight.px]=\"computeMaxHeight\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <div class=\"t-relative\">\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"t-pseudo-content\"\n                        >\n                            <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n                            <span\n                                class=\"t-pseudo-content__extra\"\n                                [textContent]=\"extraContent\"\n                            ></span>\n                            <span class=\"t-caret\"></span>\n                        </div>\n                        <textarea\n                            #focusableElement\n                            automation-id=\"tui-text-area__native\"\n                            class=\"t-input\"\n                            [disabled]=\"computedDisabled\"\n                            [id]=\"id\"\n                            [readOnly]=\"readOnly\"\n                            [tuiFocusable]=\"computedFocusable\"\n                            [(ngModel)]=\"value\"\n                        ></textarea>\n                        <ng-content select=\"textarea\"></ng-content>\n                    </div>\n                </div>\n            </tui-scrollbar>\n        </div>\n        <div class=\"t-icons\">\n            <div\n                *ngIf=\"iconLeftContent\"\n                class=\"t-icon t-icon_left t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n            <ng-container *ngIf=\"hasCustomContent\">\n                <tui-svg\n                    *polymorpheusOutlet=\"controller.customContent as src\"\n                    [src]=\"src\"\n                ></tui-svg>\n            </ng-container>\n            <ng-container *ngIf=\"hasCleaner\">\n                <tui-svg\n                    *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    class=\"t-cleaner\"\n                    [src]=\"src\"\n                    (click.stop)=\"onValueChange('')\"\n                ></tui-svg>\n            </ng-container>\n            <tui-tooltip\n                *ngIf=\"hasTooltip\"\n                automation-id=\"tui-text-area__tooltip\"\n                [content]=\"hintOptions?.content\"\n                [describeId]=\"id\"\n            ></tui-tooltip>\n            <div\n                *ngIf=\"iconContent\"\n                class=\"t-icon t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n        </div>\n    </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-height:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}.t-outline{min-height:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-height:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;width:100%;height:100%;min-height:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-height:inherit;width:100%;flex:1}.t-relative{position:relative;min-height:inherit}.t-box{display:flex;min-height:calc(100% - 1rem);width:100%}:host:not(._expandable) .t-box{height:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{height:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-top:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-top:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:transparent;overflow:hidden;border:solid transparent;border-top:0;border-bottom:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-error-bg-night)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}:host._focused .t-input:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem}:host[data-size=l] .t-input{padding:0 1rem}:host[data-mode=onDark]._disabled .t-input{color:var(--tui-text-03-night)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-width:100%;border:solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;height:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){-webkit-margin-start:.25rem;margin-inline-start:.25rem}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{-webkit-margin-end:auto;margin-inline-end:auto}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;height:1rem;width:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .t-counter{color:var(--tui-text-03-night)}\n"], components: [{ type: i1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\"></ng-container>\n<div\n    automation-id=\"tui-text-area__wrapper\"\n    tuiWrapper\n    class=\"t-outline\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n>\n    <div\n        *ngIf=\"hasCounter\"\n        automation-id=\"tui-text-area__counter\"\n        class=\"t-counter\"\n    >\n        {{ value.length }}/{{ maxLength }}\n    </div>\n\n    <label\n        class=\"t-content\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-wrapper\">\n            <div\n                *ngIf=\"hasPlaceholder\"\n                automation-id=\"tui-text-area__placeholder\"\n                class=\"t-placeholder\"\n                [class.t-placeholder_raised]=\"placeholderRaised\"\n            >\n                <ng-content></ng-content>\n            </div>\n            <tui-scrollbar\n                automation-id=\"tui-text-area__scrollbar\"\n                class=\"t-box\"\n                [style.maxHeight.px]=\"computeMaxHeight\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <div class=\"t-relative\">\n                        <div\n                            aria-hidden=\"true\"\n                            class=\"t-pseudo-content\"\n                        >\n                            <span [textContent]=\"fittedContent || nativeFocusableElement?.placeholder\"></span>\n                            <span\n                                class=\"t-pseudo-content__extra\"\n                                [textContent]=\"extraContent\"\n                            ></span>\n                            <span class=\"t-caret\"></span>\n                        </div>\n                        <textarea\n                            #focusableElement\n                            automation-id=\"tui-text-area__native\"\n                            class=\"t-input\"\n                            [disabled]=\"computedDisabled\"\n                            [id]=\"id\"\n                            [readOnly]=\"readOnly\"\n                            [tuiFocusable]=\"computedFocusable\"\n                            [(ngModel)]=\"value\"\n                        ></textarea>\n                        <ng-content select=\"textarea\"></ng-content>\n                    </div>\n                </div>\n            </tui-scrollbar>\n        </div>\n        <div class=\"t-icons\">\n            <div\n                *ngIf=\"iconLeftContent\"\n                class=\"t-icon t-icon_left t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconLeftContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n            <ng-container *ngIf=\"hasCustomContent\">\n                <tui-svg\n                    *polymorpheusOutlet=\"controller.customContent as src\"\n                    [src]=\"src\"\n                ></tui-svg>\n            </ng-container>\n            <ng-container *ngIf=\"hasCleaner\">\n                <tui-svg\n                    *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    class=\"t-cleaner\"\n                    [src]=\"src\"\n                    (click.stop)=\"onValueChange('')\"\n                ></tui-svg>\n            </ng-container>\n            <tui-tooltip\n                *ngIf=\"hasTooltip\"\n                automation-id=\"tui-text-area__tooltip\"\n                [content]=\"hintOptions?.content\"\n                [describeId]=\"id\"\n            ></tui-tooltip>\n            <div\n                *ngIf=\"iconContent\"\n                class=\"t-icon t-textfield-icon\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconContent as src; context: {$implicit: size}\"\n                    appearance=\"icon\"\n                    tuiWrapper\n                    [src]=\"src\"\n                ></tui-svg>\n            </div>\n        </div>\n    </label>\n</div>\n", styles: [":host{position:relative;z-index:0;display:flex;flex-direction:column;min-height:var(--tui-textarea-height);border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-size=s]{--tui-height: var(--tui-height-s);--tui-textarea-height: 4.5625rem;font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);--tui-textarea-height: 5.5rem;font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);--tui-textarea-height: 6.75rem;font:var(--tui-font-text-m)}:host[data-size=m]._has-counter{--tui-textarea-height: 6.625rem}:host[data-size=l]._has-counter{--tui-textarea-height: 7.875rem}.t-outline{min-height:inherit}.t-content{display:block;margin-top:0;margin-bottom:0;min-height:inherit;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}:host._label-outside._has-counter:not(._expandable) .t-content{bottom:1rem}.t-wrapper{position:relative;width:100%;height:100%;min-height:inherit;box-sizing:border-box;padding:calc((var(--tui-height) - 1.25rem) / 2) 0}:host[data-size=l]._label-outside .t-wrapper{padding:calc((var(--tui-height) - 1.5rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.25rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height) - 2.625rem) / 2) 0}:host-context(table)[data-size=m]._label-outside .t-wrapper{padding-bottom:.75rem}:host-context(table)[data-size=l]._label-outside .t-wrapper{padding-bottom:1rem}.t-input-wrapper{min-height:inherit;width:100%;flex:1}.t-relative{position:relative;min-height:inherit}.t-box{display:flex;min-height:calc(100% - 1rem);width:100%}:host:not(._expandable) .t-box{height:calc(100% - 1rem)}:host:not(._expandable)._label-outside .t-box{height:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}:host[data-size=m]:not(._label-outside) .t-box{border-top:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-box{border-top:1.25rem solid transparent}.t-pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:transparent;overflow:hidden;border:solid transparent;border-top:0;border-bottom:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}:host[data-size=s] .t-pseudo-content,:host[data-size=m] .t-pseudo-content{padding:0 .75rem}:host[data-size=l] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-error-bg-night)}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:none;border-style:solid;border-color:transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input:not(:last-of-type){display:none}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}:host._focused .t-input:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size=s] .t-input,:host[data-size=m] .t-input{padding:0 .75rem}:host[data-size=l] .t-input{padding:0 1rem}:host[data-mode=onDark]._disabled .t-input{color:var(--tui-text-03-night)}@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill){:host._ios .t-input{padding-left:.8125rem}}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0);position:absolute;top:calc(var(--tui-height) / 2 - .625rem);left:0;max-width:100%;border:solid transparent;border-inline-start-width:var(--border-start, 0);border-inline-end-width:var(--border-end, 0);box-sizing:border-box}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host._invalid:not(._focused) [tuiWrapper][data-mode=onDark] .t-placeholder_raised,:host._invalid:not(._focused):hover [tuiWrapper][data-mode=onDark] .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}[tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused:not(._label-outside) [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-01-night)}:host._focused [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=m]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder,:host[data-size=l]._focused._label-outside [tuiWrapper][data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=s] .t-placeholder{padding:0 .75rem}:host[data-size=m] .t-placeholder{padding:0 .75rem}:host[data-size=l] .t-placeholder{padding:0 1rem}:host._label-outside .t-placeholder{overflow:initial;height:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:calc((var(--tui-height) - 1.5rem) / 2) 1rem}:host[data-size=m] .t-icons{padding:calc((var(--tui-height) - 1.5rem) / 2) .625rem}.t-icons>:not(:first-child){-webkit-margin-start:.25rem;margin-inline-start:.25rem}.t-icon{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}.t-icon_left{-webkit-margin-end:auto;margin-inline-end:auto}.t-cleaner{position:relative;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-caret{display:inline-block;height:1rem;width:0}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .t-counter{color:var(--tui-text-03-night)}\n"], components: [{ type: i1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiTextAreaComponent, decorators: [{
             type: Component,
             args: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/kit",
-  "version": "3.48.0",
+  "version": "3.49.0",
   "description": "Taiga UI Angular main components kit",
   "keywords": [
     "angular",
@@ -28,9 +28,9 @@
     "@ng-web-apis/common": ">=3.0.0",
     "@ng-web-apis/mutation-observer": ">=3.0.0",
     "@ng-web-apis/resize-observer": ">=3.0.0",
-    "@taiga-ui/cdk": ">=3.48.0",
-    "@taiga-ui/core": ">=3.48.0",
-    "@taiga-ui/i18n": ">=3.48.0",
+    "@taiga-ui/cdk": ">=3.49.0",
+    "@taiga-ui/core": ">=3.49.0",
+    "@taiga-ui/i18n": ">=3.49.0",
     "@tinkoff/ng-polymorpheus": ">=4.0.0",
     "rxjs": ">=6.0.0"
   },