@taiga-ui/core 2.29.0 → 2.33.0

package/bundles/taiga-ui-core-components-primitive-textfield.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core/directives/hint-controller'), require('@taiga-ui/core/directives/textfield-controller'), require('@taiga-ui/core/tokens'), require('@taiga-ui/core/utils/miscellaneous'), require('@tinkoff/ng-polymorpheus'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/core/providers'), require('@angular/common'), require('@angular/forms'), require('@ng-web-apis/mutation-observer'), require('@taiga-ui/core/components/svg'), require('@taiga-ui/core/components/tooltip'), require('@taiga-ui/core/components/wrapper'), require('@taiga-ui/core/directives/border'), require('@taiga-ui/core/directives/described-by'), require('@taiga-ui/core/directives/mask-accessor'), require('@taiga-ui/core/directives')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/core/components/primitive-textfield', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core/directives/hint-controller', '@taiga-ui/core/directives/textfield-controller', '@taiga-ui/core/tokens', '@taiga-ui/core/utils/miscellaneous', '@tinkoff/ng-polymorpheus', 'rxjs', 'rxjs/operators', '@taiga-ui/core/providers', '@angular/common', '@angular/forms', '@ng-web-apis/mutation-observer', '@taiga-ui/core/components/svg', '@taiga-ui/core/components/tooltip', '@taiga-ui/core/components/wrapper', '@taiga-ui/core/directives/border', '@taiga-ui/core/directives/described-by', '@taiga-ui/core/directives/mask-accessor', '@taiga-ui/core/directives'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].core = global['taiga-ui'].core || {}, global['taiga-ui'].core.components = global['taiga-ui'].core.components || {}, global['taiga-ui'].core.components['primitive-textfield'] = {}), global.ng.core, global.cdk, global['taiga-ui'].core.directives['hint-controller'], global['taiga-ui'].core.directives['textfield-controller'], global['taiga-ui'].core.tokens, global['taiga-ui'].core.utils.miscellaneous, global.ngPolymorpheus, global.rxjs, global.rxjs.operators, global['taiga-ui'].core.providers, global.ng.common, global.ng.forms, global.mutationObserver, global['taiga-ui'].core.components.svg, global['taiga-ui'].core.components.tooltip, global['taiga-ui'].core.components.wrapper, global['taiga-ui'].core.directives.border, global['taiga-ui'].core.directives['described-by'], global['taiga-ui'].core.directives['mask-accessor'], global['taiga-ui'].core.directives));
-}(this, (function (exports, core, cdk, hintController, textfieldController, tokens, miscellaneous, ngPolymorpheus, rxjs, operators, providers, common, forms, mutationObserver, svg, tooltip, wrapper, border, describedBy, maskAccessor, directives) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core/directives/hint-controller'), require('@taiga-ui/core/directives/textfield-controller'), require('@taiga-ui/core/tokens'), require('@taiga-ui/core/utils/miscellaneous'), require('@tinkoff/ng-polymorpheus'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/core/providers'), require('@taiga-ui/core/abstract'), require('@angular/common'), require('@angular/forms'), require('@ng-web-apis/mutation-observer'), require('@taiga-ui/core/components/svg'), require('@taiga-ui/core/components/tooltip'), require('@taiga-ui/core/components/wrapper'), require('@taiga-ui/core/directives/described-by'), require('@taiga-ui/core/directives/mask-accessor'), require('@taiga-ui/core/directives')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/core/components/primitive-textfield', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core/directives/hint-controller', '@taiga-ui/core/directives/textfield-controller', '@taiga-ui/core/tokens', '@taiga-ui/core/utils/miscellaneous', '@tinkoff/ng-polymorpheus', 'rxjs', 'rxjs/operators', '@taiga-ui/core/providers', '@taiga-ui/core/abstract', '@angular/common', '@angular/forms', '@ng-web-apis/mutation-observer', '@taiga-ui/core/components/svg', '@taiga-ui/core/components/tooltip', '@taiga-ui/core/components/wrapper', '@taiga-ui/core/directives/described-by', '@taiga-ui/core/directives/mask-accessor', '@taiga-ui/core/directives'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui'].core = global['taiga-ui'].core || {}, global['taiga-ui'].core.components = global['taiga-ui'].core.components || {}, global['taiga-ui'].core.components['primitive-textfield'] = {}), global.ng.core, global.cdk, global['taiga-ui'].core.directives['hint-controller'], global['taiga-ui'].core.directives['textfield-controller'], global['taiga-ui'].core.tokens, global['taiga-ui'].core.utils.miscellaneous, global.ngPolymorpheus, global.rxjs, global.rxjs.operators, global['taiga-ui'].core.providers, global['taiga-ui'].core.abstract, global.ng.common, global.ng.forms, global.mutationObserver, global['taiga-ui'].core.components.svg, global['taiga-ui'].core.components.tooltip, global['taiga-ui'].core.components.wrapper, global['taiga-ui'].core.directives['described-by'], global['taiga-ui'].core.directives['mask-accessor'], global['taiga-ui'].core.directives));
+}(this, (function (exports, core, cdk, hintController, textfieldController, tokens, miscellaneous, ngPolymorpheus, rxjs, operators, providers, abstract, common, forms, mutationObserver, svg, tooltip, wrapper, describedBy, maskAccessor, directives) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -233,22 +233,35 @@
         providers.MODE_PROVIDER,
     ];
 
+    // TODO: remove in ivy compilation
+    var TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER = 'tuiIconCloseLarge';
+    /** Default values for primitive textfield options */
+    var TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS = {
+        iconAlign: 'right',
+        iconCleaner: TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER,
+    };
+    var TUI_PRIMITIVE_TEXTFIELD_OPTIONS = new core.InjectionToken('Default parameters for primitive textfield component', {
+        factory: function () { return TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS; },
+    });
+
     var ICON_PADDING = 1.75;
     var ICON_PADDING_S = 1.5;
     var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
         __extends(TuiPrimitiveTextfieldComponent, _super);
-        function TuiPrimitiveTextfieldComponent(mode$, appearance, controller, hintController) {
+        function TuiPrimitiveTextfieldComponent(mode$, appearance, controller, hintController, options, elementRef) {
             var _this = _super.call(this) || this;
             _this.mode$ = mode$;
             _this.appearance = appearance;
             _this.controller = controller;
             _this.hintController = hintController;
-            _this.autofilled = false;
+            _this.options = options;
+            _this.elementRef = elementRef;
             _this.editable = true;
             _this.filler = '';
-            _this.iconAlign = 'right';
+            _this.iconAlign = _this.options.iconAlign;
             // TODO: Remove null in 3.0
             _this.iconContent = null;
+            _this.iconCleaner = _this.options.iconCleaner;
             _this.readOnly = false;
             _this.invalid = false;
             _this.disabled = false;
@@ -256,21 +269,29 @@
             _this.postfix = '';
             _this.value = '';
             _this.valueChange = new core.EventEmitter();
+            /**
+             * @deprecated TODO: remove in 3.0
+             */
             _this.autofilledChange = new core.EventEmitter();
+            _this.autofilled = false;
             return _this;
         }
         Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "nativeFocusableElement", {
             get: function () {
-                return this.computedDisabled || !this.focusableElement
-                    ? null
-                    : this.focusableElement.nativeElement;
+                if (this.computedDisabled || !this.focusableElement) {
+                    return null;
+                }
+                // TODO: Refactor this after we drop built-in input element
+                return (this.focusableElement.nativeElement
+                    .previousElementSibling ||
+                    this.focusableElement.nativeElement);
             },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "focused", {
             get: function () {
-                return cdk.isNativeFocused(this.nativeFocusableElement);
+                return cdk.isNativeFocusedIn(this.elementRef.nativeElement);
             },
             enumerable: true,
             configurable: true
@@ -282,13 +303,6 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "labelOutside", {
-            get: function () {
-                return this.controller.labelOutside;
-            },
-            enumerable: true,
-            configurable: true
-        });
         Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "computedInvalid", {
             get: function () {
                 return !this.readOnly && !this.disabled && this.invalid;
@@ -335,7 +349,10 @@
         });
         Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasPlaceholder", {
             get: function () {
-                var hasDecor = this.controller.exampleText || this.prefix || this.postfix;
+                var _a;
+                var hasDecor = this.controller.exampleText ||
+                    this.prefix ||
+                    this.postfix || ((_a = this.nativeFocusableElement) === null || _a === void 0 ? void 0 : _a.placeholder);
                 var showDecor = hasDecor && !this.readOnly && this.computedFocused;
                 var placeholderVisible = !this.hasValue && !showDecor;
                 return this.placeholderRaisable || placeholderVisible;
@@ -351,14 +368,14 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderLeft", {
+        Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderStart", {
             get: function () {
                 return this.iconAlignLeft ? this.iconPaddingLeft : 0;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderRight", {
+        Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderEnd", {
             get: function () {
                 return miscellaneous.getBorder(this.iconAlignRight, this.hasCleaner, this.hasTooltip, this.hasCustomContent);
             },
@@ -389,6 +406,17 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "computedId", {
+            get: function () {
+                var _a;
+                return ((_a = this.nativeFocusableElement) === null || _a === void 0 ? void 0 : _a.id) || '';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiPrimitiveTextfieldComponent.prototype.onFocused = function (focused) {
+            this.updateFocused(focused);
+        };
         TuiPrimitiveTextfieldComponent.prototype.getIndent$ = function (element) {
             return rxjs.fromEvent(element, 'scroll').pipe(operators.map(function () { return -1 * element.scrollLeft; }));
         };
@@ -399,12 +427,12 @@
             this.updateValue('');
         };
         TuiPrimitiveTextfieldComponent.prototype.onMouseDown = function (event) {
-            if (!this.focusableElement ||
-                event.target === this.focusableElement.nativeElement) {
+            var nativeFocusableElement = this.nativeFocusableElement;
+            if (!nativeFocusableElement || event.target === nativeFocusableElement) {
                 return;
             }
             event.preventDefault();
-            cdk.setNativeFocused(this.focusableElement.nativeElement);
+            cdk.setNativeFocused(nativeFocusableElement);
         };
         TuiPrimitiveTextfieldComponent.prototype.onModelChange = function (value) {
             this.updateValue(value);
@@ -412,9 +440,6 @@
         TuiPrimitiveTextfieldComponent.prototype.onHovered = function (hovered) {
             this.updateHovered(hovered);
         };
-        TuiPrimitiveTextfieldComponent.prototype.onFocused = function (focused) {
-            this.updateFocused(focused);
-        };
         TuiPrimitiveTextfieldComponent.prototype.onAutofilled = function (autofilled) {
             this.updateAutofilled(autofilled);
         };
@@ -427,7 +452,7 @@
         });
         Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "placeholderRaisable", {
             get: function () {
-                return this.size !== 's' && !this.labelOutside;
+                return this.size !== 's' && !this.controller.labelOutside;
             },
             enumerable: true,
             configurable: true
@@ -454,7 +479,9 @@
             { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [tokens.TUI_MODE,] }] },
             { type: String, decorators: [{ type: core.Inject, args: [tokens.TUI_TEXTFIELD_APPEARANCE,] }] },
             { type: textfieldController.TuiTextfieldController, decorators: [{ type: core.Inject, args: [textfieldController.TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
-            { type: hintController.TuiHintControllerDirective, decorators: [{ type: core.Inject, args: [hintController.TUI_HINT_WATCHED_CONTROLLER,] }] }
+            { type: hintController.TuiHintControllerDirective, decorators: [{ type: core.Inject, args: [hintController.TUI_HINT_WATCHED_CONTROLLER,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [TUI_PRIMITIVE_TEXTFIELD_OPTIONS,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
         ]; };
         __decorate([
             core.ViewChild('focusableElement')
@@ -475,6 +502,10 @@
             core.Input(),
             cdk.tuiDefaultProp()
         ], TuiPrimitiveTextfieldComponent.prototype, "iconContent", void 0);
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiPrimitiveTextfieldComponent.prototype, "iconCleaner", void 0);
         __decorate([
             core.Input(),
             core.HostBinding('class._readonly'),
@@ -510,36 +541,164 @@
             core.ContentChildren(ngPolymorpheus.PolymorpheusOutletComponent)
         ], TuiPrimitiveTextfieldComponent.prototype, "content", void 0);
         __decorate([
-            core.HostBinding('attr.data-tui-host-size')
+            core.HostBinding('attr.data-size')
         ], TuiPrimitiveTextfieldComponent.prototype, "size", null);
-        __decorate([
-            core.HostBinding('class._label-outside')
-        ], TuiPrimitiveTextfieldComponent.prototype, "labelOutside", null);
         __decorate([
             core.HostBinding('class._invalid')
         ], TuiPrimitiveTextfieldComponent.prototype, "computedInvalid", null);
+        __decorate([
+            core.HostBinding('class._hidden')
+        ], TuiPrimitiveTextfieldComponent.prototype, "inputHidden", null);
+        __decorate([
+            core.HostBinding('style.--border-start.rem')
+        ], TuiPrimitiveTextfieldComponent.prototype, "borderStart", null);
+        __decorate([
+            core.HostBinding('style.--border-end.rem')
+        ], TuiPrimitiveTextfieldComponent.prototype, "borderEnd", null);
+        __decorate([
+            core.HostListener('focusin', ['true']),
+            core.HostListener('focusout', ['false'])
+        ], TuiPrimitiveTextfieldComponent.prototype, "onFocused", null);
         __decorate([
             cdk.tuiPure
         ], TuiPrimitiveTextfieldComponent.prototype, "getIndent$", null);
         TuiPrimitiveTextfieldComponent = __decorate([
             core.Component({
                 selector: 'tui-primitive-textfield',
-                template: "<ng-container *ngIf=\"content?.changes | async\"></ng-container>\n<tui-wrapper\n    automation-id=\"tui-primitive-textfield__wrapper\"\n    tuiPreventDefault=\"click\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [pressed]=\"computedPressed\"\n    [invalid]=\"computedInvalid\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <input\n        #focusableElement\n        tuiMaskAccessor\n        automation-id=\"tui-primitive-textfield__native-input\"\n        class=\"input\"\n        [class.input_hidden]=\"inputHidden\"\n        [style.textIndent.px]=\"decor.pre$ | async\"\n        [attr.disabled]=\"computedDisabled || null\"\n        [attr.maxLength]=\"controller.maxLength\"\n        [attr.name]=\"name\"\n        [attr.aria-placeholder]=\"controller.exampleText\"\n        [attr.aria-invalid]=\"computedInvalid\"\n        [autocomplete]=\"controller.autocomplete\"\n        [type]=\"controller.type\"\n        [id]=\"id\"\n        [readOnly]=\"readOnly || !editable\"\n        [tuiBorderStart]=\"borderLeft\"\n        [tuiBorderEnd]=\"borderRight\"\n        [tuiInputMode]=\"controller.inputMode\"\n        [tuiFocusable]=\"computedFocusable\"\n        [tuiDescribedBy]=\"id\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (tuiFocusedChange)=\"onFocused($event)\"\n        (tuiAutofilledChange)=\"onAutofilled($event)\"\n    />\n    <div\n        *ngIf=\"inputHidden\"\n        automation-id=\"tui-primitive-textfield__value\"\n        class=\"input input_template\"\n        [tuiBorderStart]=\"borderLeft\"\n        [tuiBorderEnd]=\"borderRight\"\n    >\n        <ng-content select=\"[polymorpheus-outlet]\"></ng-content>\n    </div>\n    <div class=\"content\">\n        <div\n            *ngIf=\"iconAlignLeft\"\n            polymorpheus-outlet\n            class=\"icon icon_left\"\n            [content]=\"iconContent\"\n            [context]=\"{$implicit: size}\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n        <div class=\"wrapper\">\n            <label\n                *ngIf=\"hasPlaceholder\"\n                automation-id=\"tui-primitive-textfield__placeholder\"\n                class=\"placeholder\"\n                [class.placeholder_raised]=\"placeholderRaised\"\n                [for]=\"id\"\n            >\n                <ng-content></ng-content>\n            </label>\n            <tui-value-decoration\n                #decor\n                automation-id=\"tui-primitive-textfield__value-decoration\"\n                aria-hidden=\"true\"\n                [style.textIndent.px]=\"getIndent$(focusableElement) | async\"\n            ></tui-value-decoration>\n        </div>\n        <div\n            *ngIf=\"hasCustomContent\"\n            polymorpheus-outlet\n            automation-id=\"tui-primitive-textfield__custom-content\"\n            class=\"custom-content\"\n            [content]=\"controller.customContent\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg class=\"custom-icon\" [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n        <tui-svg\n            *ngIf=\"hasCleaner\"\n            automation-id=\"tui-primitive-textfield__cleaner\"\n            src=\"tuiIconCloseLarge\"\n            class=\"cleaner\"\n            (click.stop)=\"clear()\"\n        ></tui-svg>\n        <tui-tooltip\n            *ngIf=\"hasTooltip\"\n            automation-id=\"tui-primitive-textfield__tooltip\"\n            [describeId]=\"id\"\n            [content]=\"hintController.content\"\n            [direction]=\"hintController.direction\"\n            [mode]=\"hintController.mode\"\n            [showDelay]=\"hintController.showDelay\"\n            [hideDelay]=\"hintController.hideDelay\"\n        ></tui-tooltip>\n        <div\n            *ngIf=\"iconAlignRight\"\n            polymorpheus-outlet\n            class=\"icon\"\n            [content]=\"iconContent\"\n            [context]=\"{$implicit: size}\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n    </div>\n</tui-wrapper>\n",
+                template: "<ng-container *ngIf=\"content?.changes | async\"></ng-container>\n<tui-wrapper\n    automation-id=\"tui-primitive-textfield__wrapper\"\n    tuiPreventDefault=\"click\"\n    [appearance]=\"appearance\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [pressed]=\"computedPressed\"\n    [invalid]=\"computedInvalid\"\n    [style.--text-indent.px]=\"decor.pre$ | async\"\n    (mousedown)=\"onMouseDown($event)\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (tuiAutofilledChange)=\"onAutofilled($event)\"\n>\n    <ng-content select=\"input\"></ng-content>\n    <input\n        #focusableElement\n        tuiMaskAccessor\n        automation-id=\"tui-primitive-textfield__native-input\"\n        class=\"input\"\n        [attr.disabled]=\"computedDisabled || null\"\n        [attr.maxLength]=\"controller.maxLength\"\n        [attr.name]=\"name\"\n        [attr.aria-placeholder]=\"controller.exampleText\"\n        [attr.aria-invalid]=\"computedInvalid\"\n        [autocomplete]=\"controller.autocomplete\"\n        [type]=\"controller.type\"\n        [id]=\"id\"\n        [readOnly]=\"readOnly || !editable\"\n        [tuiInputMode]=\"controller.inputMode\"\n        [tuiFocusable]=\"computedFocusable\"\n        [tuiDescribedBy]=\"id\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"onModelChange($event)\"\n    />\n    <div\n        *ngIf=\"inputHidden\"\n        automation-id=\"tui-primitive-textfield__value\"\n        class=\"input input_template\"\n    >\n        <ng-content select=\"[polymorpheus-outlet]\"></ng-content>\n    </div>\n    <div class=\"content\">\n        <div\n            *ngIf=\"iconAlignLeft\"\n            polymorpheus-outlet\n            class=\"icon icon_left\"\n            [content]=\"iconContent\"\n            [context]=\"{$implicit: size}\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n        <div class=\"wrapper\">\n            <label\n                *ngIf=\"hasPlaceholder\"\n                automation-id=\"tui-primitive-textfield__placeholder\"\n                class=\"placeholder\"\n                [class.placeholder_raised]=\"placeholderRaised\"\n                [for]=\"computedId\"\n            >\n                <ng-content></ng-content>\n            </label>\n            <tui-value-decoration\n                #decor\n                automation-id=\"tui-primitive-textfield__value-decoration\"\n                aria-hidden=\"true\"\n                class=\"t-value-decoration\"\n                [style.textIndent.px]=\"getIndent$(focusableElement) | async\"\n            ></tui-value-decoration>\n        </div>\n        <div\n            *ngIf=\"hasCustomContent\"\n            polymorpheus-outlet\n            automation-id=\"tui-primitive-textfield__custom-content\"\n            class=\"custom-content\"\n            [content]=\"controller.customContent\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg class=\"custom-icon\" [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n        <span\n            *ngIf=\"hasCleaner\"\n            polymorpheus-outlet\n            automation-id=\"tui-primitive-textfield__cleaner\"\n            class=\"cleaner\"\n            [content]=\"iconCleaner\"\n            (click.stop)=\"clear()\"\n        >\n            <ng-template let-icon>\n                <tui-svg [src]=\"icon\"></tui-svg>\n            </ng-template>\n        </span>\n        <tui-tooltip\n            *ngIf=\"hasTooltip\"\n            automation-id=\"tui-primitive-textfield__tooltip\"\n            [describeId]=\"computedId\"\n            [content]=\"hintController.content\"\n            [direction]=\"hintController.direction\"\n            [mode]=\"hintController.mode\"\n            [showDelay]=\"hintController.showDelay\"\n            [hideDelay]=\"hintController.hideDelay\"\n        ></tui-tooltip>\n        <div\n            *ngIf=\"iconAlignRight\"\n            polymorpheus-outlet\n            class=\"icon\"\n            [content]=\"iconContent\"\n            [context]=\"{$implicit: size}\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n    </div>\n</tui-wrapper>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: TUI_PRIMITIVE_TEXTFIELD_PROVIDERS,
                 host: {
                     '($.data-mode.attr)': 'mode$',
+                    '[class._autofilled]': 'autofilled',
+                    '[class._label-outside]': 'controller.labelOutside',
                 },
-                styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left}:host[data-tui-host-size='s']{height:var(--tui-height-s);min-height:var(--tui-height-s);max-height:var(--tui-height-s)}:host[data-tui-host-size='m']{height:var(--tui-height-m);min-height:var(--tui-height-m);max-height:var(--tui-height-m)}:host[data-tui-host-size='l']{height:var(--tui-height-l);min-height:var(--tui-height-l);max-height:var(--tui-height-l);font-size:.9375rem}.input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;border:0 solid transparent;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-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%;padding:0 var(--tui-padding-m);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit}.input:-webkit-autofill,.input:-webkit-autofill:focus,.input:-webkit-autofill:hover{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 1000px var(--tui-autofill) inset!important}:host[data-mode=onDark] .input:-webkit-autofill,:host[data-mode=onDark] .input:-webkit-autofill:focus,:host[data-mode=onDark] .input:-webkit-autofill:hover{border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 1000px var(--tui-autofill-night) inset!important}:host[data-tui-host-size='s'] .input{padding:0 var(--tui-padding-s)}:host[data-tui-host-size='l'] .input{padding:0 var(--tui-padding-l)}:host._disabled .input{pointer-events:none}:host._right-aligned .input{text-align:right}:host[data-tui-host-size='l']:not(._label-outside) .input{padding-top:1.25rem}:host[data-tui-host-size='l']:not(._label-outside) .input:-webkit-autofill+.content .placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-tui-host-size='m']:not(._label-outside) .input{padding-top:1.125rem}:host[data-tui-host-size='m']:not(._label-outside) .input:-webkit-autofill+.content .placeholder{font-size:.69rem;transform:translateY(-.5rem)}.filler{vertical-align:middle}.content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-tui-host-size='s'] .content{padding:0 var(--tui-padding-s)}:host[data-tui-host-size='l'] .content{padding:0 var(--tui-padding-l)}.content:after{content:'';margin-right:-.25rem}:host[data-tui-host-size='m'] .content:after{display:none}.wrapper{flex:1;min-width:0;padding-right:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;font-size:.8125rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none}.placeholder_raised{transform:translateY(-.625rem)}:host[data-tui-host-size='m'] .placeholder_raised{font-size:.69rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-tui-host-size='l']._focused._label-outside .placeholder,:host[data-tui-host-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-tui-host-size='l'] .placeholder{font-size:.9375rem}:host[data-tui-host-size='l'] .placeholder_raised{font-size:.8156rem}:host[data-tui-host-size='l']._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-tui-host-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}.cleaner{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.cleaner:hover{color:var(--tui-text-02)}:host._disabled .cleaner,:host._readonly .cleaner{pointer-events:none}:host[data-mode=onDark] .cleaner{color:var(--tui-text-03-night)}:host[data-mode=onDark] .cleaner:hover{color:var(--tui-text-01-night)}.icon{display:flex;align-items:center;justify-content:center;color:var(--tui-text-03)}.icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host[data-tui-host-size='s'] .icon_left{margin-right:.25rem;-webkit-margin-end:.25rem;margin-inline-end:.25rem}.value_visible{display:block}.custom-content{position:relative;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:.25rem;pointer-events:none}.custom-icon{width:100%;height:100%}.icon{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);box-sizing:border-box;cursor:pointer;transition-property:color,transform;position:relative;pointer-events:none}.icon:hover{color:var(--tui-text-02)}:host._disabled .icon,:host._readonly .icon{pointer-events:none}:host[data-mode=onDark] .icon{color:var(--tui-text-03-night)}:host[data-mode=onDark] .icon:hover{color:var(--tui-text-01-night)}:host._hovered:not(._readonly) .icon{color:var(--tui-text-02)}:host[data-mode=onDark]._hovered:not(._readonly) .icon{color:var(--tui-text-01-night)}:host[data-mode=onLight]._hovered:not(._readonly) .icon{color:var(--tui-text-01)}.input_hidden{opacity:0;text-indent:-10em;-webkit-user-select:none}:host[data-tui-host-size] .input_template{display:flex;width:100%;max-width:100%;align-items:center;pointer-events:none}.input::-webkit-caps-lock-indicator{margin-right:.375rem;align-self:center}:host[data-tui-host-size='l']:not(._label-outside) .input::-webkit-caps-lock-indicator{margin-top:-1.25rem}.input::-webkit-contacts-auto-fill-button,.input::-webkit-credentials-auto-fill-button,.input::-webkit-credit-card-auto-fill-button{background-color:var(--tui-text-03)}:host[data-tui-host-size='l']:not(._label-outside) .input::-webkit-contacts-auto-fill-button,:host[data-tui-host-size='l']:not(._label-outside) .input::-webkit-credentials-auto-fill-button,:host[data-tui-host-size='l']:not(._label-outside) .input::-webkit-credit-card-auto-fill-button{margin-top:-1.25rem}.input::-webkit-contacts-auto-fill-button:hover,.input::-webkit-credentials-auto-fill-button:hover,.input::-webkit-credit-card-auto-fill-button:hover{background-color:var(--tui-text-02)}.text-template{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+                styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left}:host[data-size='s']{height:var(--tui-height-s);min-height:var(--tui-height-s);max-height:var(--tui-height-s)}:host[data-size='m']{height:var(--tui-height-m);min-height:var(--tui-height-m);max-height:var(--tui-height-m)}:host[data-size='l']{height:var(--tui-height-l);min-height:var(--tui-height-l);max-height:var(--tui-height-l);font-size:.9375rem}.input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;border:0 solid transparent;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-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%;padding:0 var(--tui-padding-m);border-width:0 var(--border-end) 0 var(--border-start);border-inline-start-width:var(--border-start);border-inline-end-width:var(--border-end);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit}.input:-webkit-autofill,.input:-webkit-autofill:focus,.input:-webkit-autofill:hover{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 1000px var(--tui-autofill) inset!important}.input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill,.input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:focus,.input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:hover,:host[data-mode=onDark] .input:-webkit-autofill,:host[data-mode=onDark] .input:-webkit-autofill:focus,:host[data-mode=onDark] .input:-webkit-autofill:hover{border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 1000px var(--tui-autofill-night) inset!important}.input :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),:host[data-size='s'] .input{padding:0 var(--tui-padding-s)}.input :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),:host[data-size='l'] .input{padding:0 var(--tui-padding-l)}.input :host-context(tui-primitive-textfield._disabled),:host._disabled .input{pointer-events:none}.input :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='l']:not(._label-outside) .input{padding-top:1.25rem}.input :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='l']:not(._label-outside) .input:-webkit-autofill+.content .placeholder{font-size:.8156rem;transform:translateY(-.625rem)}.input :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='m']:not(._label-outside) .input{padding-top:1.125rem}.input :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='m']:not(._label-outside) .input:-webkit-autofill+.content .placeholder{font-size:.69rem;transform:translateY(-.5rem)}.input :host-context(tui-primitive-textfield._hidden),:host._hidden input.input{opacity:0;text-indent:-10em;-webkit-user-select:none}.filler{vertical-align:middle}.content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size='s'] .content{padding:0 var(--tui-padding-s)}:host[data-size='l'] .content{padding:0 var(--tui-padding-l)}.content:after{content:'';margin-right:-.25rem}:host[data-size='m'] .content:after{display:none}.wrapper{flex:1;min-width:0;padding-right:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;font-size:.8125rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none}.placeholder_raised{transform:translateY(-.625rem)}:host[data-size='m'] .placeholder_raised{font-size:.69rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-size='l']._focused._label-outside .placeholder,:host[data-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-size='l'] .placeholder{font-size:.9375rem}:host[data-size='l'] .placeholder_raised{font-size:.8156rem}:host[data-size='l']._focused:not(._label-outside) .placeholder,:host[data-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens:none){.placeholder{transition-property:transform,color,letter-spacing}}.cleaner{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.cleaner:hover{color:var(--tui-text-02)}:host._disabled .cleaner,:host._readonly .cleaner{pointer-events:none}:host[data-mode=onDark] .cleaner{color:var(--tui-text-03-night)}:host[data-mode=onDark] .cleaner:hover{color:var(--tui-text-01-night)}.icon{display:flex;align-items:center;justify-content:center;color:var(--tui-text-03)}.icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host[data-size='s'] .icon_left{margin-right:.25rem;-webkit-margin-end:.25rem;margin-inline-end:.25rem}:host._autofilled .t-value-decoration{display:none}.custom-content{position:relative;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-right:.25rem;pointer-events:none}.custom-icon{width:100%;height:100%}.icon{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);box-sizing:border-box;cursor:pointer;transition-property:color,transform;position:relative;pointer-events:none}.icon:hover{color:var(--tui-text-02)}:host._disabled .icon,:host._readonly .icon{pointer-events:none}:host[data-mode=onDark] .icon{color:var(--tui-text-03-night)}:host[data-mode=onDark] .icon:hover{color:var(--tui-text-01-night)}:host._hovered:not(._readonly) .icon{color:var(--tui-text-02)}:host[data-mode=onDark]._hovered:not(._readonly) .icon{color:var(--tui-text-01-night)}:host[data-mode=onLight]._hovered:not(._readonly) .icon{color:var(--tui-text-01)}.input:not(:first-child){display:none}:host[data-size] .input_template{display:flex;width:100%;max-width:100%;align-items:center;pointer-events:none}.input::-webkit-caps-lock-indicator{margin-right:.375rem;align-self:center}:host[data-size='l']:not(._label-outside) .input::-webkit-caps-lock-indicator{margin-top:-1.25rem}.input::-webkit-contacts-auto-fill-button,.input::-webkit-credentials-auto-fill-button,.input::-webkit-credit-card-auto-fill-button{background-color:var(--tui-text-03)}:host[data-size='l']:not(._label-outside) .input::-webkit-contacts-auto-fill-button,:host[data-size='l']:not(._label-outside) .input::-webkit-credentials-auto-fill-button,:host[data-size='l']:not(._label-outside) .input::-webkit-credit-card-auto-fill-button{margin-top:-1.25rem}.input::-webkit-contacts-auto-fill-button:hover,.input::-webkit-credentials-auto-fill-button:hover,.input::-webkit-credit-card-auto-fill-button:hover{background-color:var(--tui-text-02)}.input:-webkit-autofill,.input:-webkit-autofill::first-line{font-size:inherit;line-height:inherit}.text-template{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
             }),
             __param(0, core.Inject(tokens.TUI_MODE)),
             __param(1, core.Inject(tokens.TUI_TEXTFIELD_APPEARANCE)),
             __param(2, core.Inject(textfieldController.TUI_TEXTFIELD_WATCHED_CONTROLLER)),
-            __param(3, core.Inject(hintController.TUI_HINT_WATCHED_CONTROLLER))
+            __param(3, core.Inject(hintController.TUI_HINT_WATCHED_CONTROLLER)),
+            __param(4, core.Inject(TUI_PRIMITIVE_TEXTFIELD_OPTIONS)),
+            __param(5, core.Inject(core.ElementRef))
         ], TuiPrimitiveTextfieldComponent);
         return TuiPrimitiveTextfieldComponent;
     }(cdk.AbstractTuiInteractive));
 
+    var TuiPrimitiveTextfieldDirective = /** @class */ (function (_super) {
+        __extends(TuiPrimitiveTextfieldDirective, _super);
+        function TuiPrimitiveTextfieldDirective(textfield) {
+            var _this = 
+            /**
+             * TuiPrimitiveTextfieldComponent satisfies all required parts of
+             * AbstractTuiControl interface. A new interface is not introduced
+             * so AbstractTuiControl is automatically injected for all other controls.
+             */
+            _super.call(this, textfield) || this;
+            _this.textfield = textfield;
+            return _this;
+        }
+        TuiPrimitiveTextfieldDirective_1 = TuiPrimitiveTextfieldDirective;
+        Object.defineProperty(TuiPrimitiveTextfieldDirective.prototype, "readOnly", {
+            get: function () {
+                return this.textfield.readOnly || !this.textfield.editable;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiPrimitiveTextfieldDirective.prototype.onValueChange = function (value) {
+            this.textfield.onModelChange(value);
+        };
+        var TuiPrimitiveTextfieldDirective_1;
+        TuiPrimitiveTextfieldDirective.ctorParameters = function () { return [
+            { type: TuiPrimitiveTextfieldComponent, decorators: [{ type: core.Inject, args: [TuiPrimitiveTextfieldComponent,] }] }
+        ]; };
+        TuiPrimitiveTextfieldDirective = TuiPrimitiveTextfieldDirective_1 = __decorate([
+            core.Directive({
+                selector: 'tui-primitive-textfield',
+                providers: [
+                    {
+                        provide: tokens.TUI_TEXTFIELD_HOST,
+                        useExisting: core.forwardRef(function () { return TuiPrimitiveTextfieldDirective_1; }),
+                    },
+                ],
+            }),
+            __param(0, core.Inject(TuiPrimitiveTextfieldComponent))
+        ], TuiPrimitiveTextfieldDirective);
+        return TuiPrimitiveTextfieldDirective;
+    }(abstract.TuiAbstractTextfieldHost));
+
+    // @dynamic
+    var TuiTextfieldComponent = /** @class */ (function () {
+        function TuiTextfieldComponent(host, controller, elementRef, describedBy, idService) {
+            this.host = host;
+            this.controller = controller;
+            this.elementRef = elementRef;
+            this.describedBy = describedBy;
+            this.idService = idService;
+            this.host.process(this.elementRef.nativeElement);
+        }
+        Object.defineProperty(TuiTextfieldComponent.prototype, "computedDescribedBy", {
+            get: function () {
+                return this.describedBy.computedDescribedBy;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TuiTextfieldComponent.prototype, "id", {
+            get: function () {
+                return this.elementRef.nativeElement.id || this.idService.generate();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiTextfieldComponent.prototype.ngDoCheck = function () {
+            this.describedBy.tuiDescribedBy = this.id;
+        };
+        TuiTextfieldComponent.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [tokens.TUI_TEXTFIELD_HOST,] }] },
+            { type: directives.TuiTextfieldController, decorators: [{ type: core.Inject, args: [directives.TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: directives.TuiDescribedByDirective, decorators: [{ type: core.Inject, args: [directives.TuiDescribedByDirective,] }] },
+            { type: cdk.TuiIdService, decorators: [{ type: core.Inject, args: [cdk.TuiIdService,] }] }
+        ]; };
+        __decorate([
+            core.HostBinding('attr.aria-describedby')
+        ], TuiTextfieldComponent.prototype, "computedDescribedBy", null);
+        __decorate([
+            core.HostBinding('id')
+        ], TuiTextfieldComponent.prototype, "id", null);
+        TuiTextfieldComponent = __decorate([
+            core.Component({
+                selector: 'input[tuiTextfield]',
+                template: '',
+                providers: [
+                    directives.TuiDescribedByDirective,
+                    directives.TUI_DESCRIBED_BY_PROVIDERS,
+                    directives.TEXTFIELD_CONTROLLER_PROVIDER,
+                ],
+                host: {
+                    type: 'text',
+                    '[attr.aria-placeholder]': 'controller.exampleText',
+                    '[attr.aria-invalid]': 'host.invalid',
+                    '[attr.disabled]': 'host.disabled || null',
+                    '[tabIndex]': 'host.focusable ? 0 : -1',
+                    '[readOnly]': 'host.readOnly',
+                    '[value]': 'host.value',
+                    '(input)': 'host.onValueChange($event.target.value)',
+                },
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;border:0 solid transparent;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-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%;padding:0 var(--tui-padding-m);border-width:0 var(--border-end) 0 var(--border-start);border-inline-start-width:var(--border-start);border-inline-end-width:var(--border-end);text-indent:var(--text-indent);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit}:host:-webkit-autofill,:host:-webkit-autofill:focus,:host:-webkit-autofill:hover{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 1000px var(--tui-autofill) inset!important}:host :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill,:host :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:focus,:host :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:hover,:host[data-mode=onDark] :host:-webkit-autofill,:host[data-mode=onDark] :host:-webkit-autofill:focus,:host[data-mode=onDark] :host:-webkit-autofill:hover{border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 1000px var(--tui-autofill-night) inset!important}:host :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),:host[data-size='s'] :host{padding:0 var(--tui-padding-s)}:host :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),:host[data-size='l'] :host{padding:0 var(--tui-padding-l)}:host :host-context(tui-primitive-textfield._disabled),:host._disabled :host{pointer-events:none}:host :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='l']:not(._label-outside) :host{padding-top:1.25rem}:host :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='l']:not(._label-outside) :host:-webkit-autofill+.content .placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='m']:not(._label-outside) :host{padding-top:1.125rem}:host :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.content .placeholder,:host[data-size='m']:not(._label-outside) :host:-webkit-autofill+.content .placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host :host-context(tui-primitive-textfield._hidden),:host._hidden input:host{opacity:0;text-indent:-10em;-webkit-user-select:none}:host::-webkit-caps-lock-indicator{margin-right:.375rem;align-self:center}:host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)) :host::-webkit-caps-lock-indicator{margin-top:-1.25rem}:host::-webkit-contacts-auto-fill-button,:host::-webkit-credentials-auto-fill-button,:host::-webkit-credit-card-auto-fill-button{background-color:var(--tui-text-03)}:host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)) :host::-webkit-contacts-auto-fill-button,:host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)) :host::-webkit-credentials-auto-fill-button,:host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)) :host::-webkit-credit-card-auto-fill-button{margin-top:-1.25rem}:host::-webkit-contacts-auto-fill-button:hover,:host::-webkit-credentials-auto-fill-button:hover,:host::-webkit-credit-card-auto-fill-button:hover{background-color:var(--tui-text-02)}:host::-ms-input-placeholder{color:var(--tui-text-03);opacity:0}:host::placeholder{color:var(--tui-text-03);opacity:0}:host :host-context(tui-primitive-textfield[data-mode=onDark])::-ms-input-placeholder{color:var(--tui-text-03-night)}:host :host-context(tui-primitive-textfield[data-mode=onDark])::placeholder{color:var(--tui-text-03-night)}:host :host-context(tui-primitive-textfield._focused:not(._readonly))::-ms-input-placeholder{opacity:1}:host :host-context(tui-primitive-textfield._focused:not(._readonly))::placeholder{opacity:1}"]
+            }),
+            __param(0, core.Inject(tokens.TUI_TEXTFIELD_HOST)),
+            __param(1, core.Inject(directives.TUI_TEXTFIELD_WATCHED_CONTROLLER)),
+            __param(2, core.Inject(core.ElementRef)),
+            __param(3, core.Inject(directives.TuiDescribedByDirective)),
+            __param(4, core.Inject(cdk.TuiIdService))
+        ], TuiTextfieldComponent);
+        return TuiTextfieldComponent;
+    }());
+
     var TuiValueDecorationComponent = /** @class */ (function () {
         function TuiValueDecorationComponent(textfield, controller) {
             var _this = this;
@@ -563,9 +722,11 @@
         });
         Object.defineProperty(TuiValueDecorationComponent.prototype, "filler", {
             get: function () {
-                return this.focused
-                    ? this.exampleText || this.textfield.filler.slice(this.value.length)
-                    : '';
+                var _a = this, focused = _a.focused, placeholder = _a.placeholder, exampleText = _a.exampleText, value = _a.value, textfield = _a.textfield;
+                if (focused && placeholder && exampleText) {
+                    return '';
+                }
+                return focused ? exampleText || textfield.filler.slice(value.length) : '';
             },
             enumerable: true,
             configurable: true
@@ -584,9 +745,18 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(TuiValueDecorationComponent.prototype, "placeholder", {
+            get: function () {
+                var _a;
+                return ((_a = this.textfield.nativeFocusableElement) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(TuiValueDecorationComponent.prototype, "exampleText", {
             get: function () {
-                return !this.value && this.focused ? this.controller.exampleText : '';
+                var exampleText = this.controller.exampleText || this.placeholder;
+                return !this.value && this.focused ? exampleText : '';
             },
             enumerable: true,
             configurable: true
@@ -651,7 +821,6 @@
                     forms.FormsModule,
                     maskAccessor.TuiMaskAccessorModule,
                     cdk.TuiFocusableModule,
-                    cdk.TuiFocusedModule,
                     cdk.TuiHoveredModule,
                     cdk.TuiInputModeModule,
                     ngPolymorpheus.PolymorpheusModule,
@@ -661,19 +830,32 @@
                     cdk.TuiAutofilledModule,
                     describedBy.TuiDescribedByModule,
                     cdk.TuiPreventDefaultModule,
-                    border.TuiBorderModule,
                     mutationObserver.MutationObserverModule,
                 ],
-                declarations: [TuiPrimitiveTextfieldComponent, TuiValueDecorationComponent],
-                exports: [TuiPrimitiveTextfieldComponent],
+                declarations: [
+                    TuiPrimitiveTextfieldComponent,
+                    TuiPrimitiveTextfieldDirective,
+                    TuiTextfieldComponent,
+                    TuiValueDecorationComponent,
+                ],
+                exports: [
+                    TuiPrimitiveTextfieldComponent,
+                    TuiPrimitiveTextfieldDirective,
+                    TuiTextfieldComponent,
+                ],
             })
         ], TuiPrimitiveTextfieldModule);
         return TuiPrimitiveTextfieldModule;
     }());
 
+    exports.TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS = TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS;
+    exports.TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER = TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER;
+    exports.TUI_PRIMITIVE_TEXTFIELD_OPTIONS = TUI_PRIMITIVE_TEXTFIELD_OPTIONS;
     exports.TUI_PRIMITIVE_TEXTFIELD_PROVIDERS = TUI_PRIMITIVE_TEXTFIELD_PROVIDERS;
     exports.TuiPrimitiveTextfieldComponent = TuiPrimitiveTextfieldComponent;
+    exports.TuiPrimitiveTextfieldDirective = TuiPrimitiveTextfieldDirective;
     exports.TuiPrimitiveTextfieldModule = TuiPrimitiveTextfieldModule;
+    exports.TuiTextfieldComponent = TuiTextfieldComponent;
     exports.TuiValueDecorationComponent = TuiValueDecorationComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });