@taiga-ui/core 2.31.0 → 2.35.0

package/fesm2015/taiga-ui-core-components-primitive-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-components-primitive-checkbox.js","sources":["ng://@taiga-ui/core/components/primitive-checkbox/checkbox-options.ts","ng://@taiga-ui/core/components/primitive-checkbox/primitive-checkbox.component.ts","ng://@taiga-ui/core/components/primitive-checkbox/primitive-checkbox.module.ts","ng://@taiga-ui/core/components/primitive-checkbox/taiga-ui-core-components-primitive-checkbox.ts"],"sourcesContent":["import {InjectionToken} from '@angular/core';\nimport {TuiContextWithImplicit} from '@taiga-ui/cdk';\nimport {TuiAppearance} from '@taiga-ui/core/enums';\nimport {TuiSizeL} from '@taiga-ui/core/types';\nimport {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';\n\nexport interface CheckboxOptions {\n    readonly size: TuiSizeL;\n    readonly appearances: Readonly<{\n        unchecked: string;\n        checked: string;\n        indeterminate: string;\n    }>;\n    readonly icons: Readonly<{\n        checked: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;\n        indeterminate: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;\n    }>;\n}\n\n/** Default values for the checkbox options. */\nexport const TUI_CHECKBOX_DEFAULT_OPTIONS: CheckboxOptions = {\n    size: 'm',\n    appearances: {\n        unchecked: TuiAppearance.Outline,\n        checked: TuiAppearance.Primary,\n        indeterminate: TuiAppearance.Primary,\n    },\n    icons: {\n        checked({$implicit}: TuiContextWithImplicit<TuiSizeL>): string {\n            return $implicit === 'm' ? 'tuiIconCheck' : 'tuiIconCheckLarge';\n        },\n        indeterminate({$implicit}: TuiContextWithImplicit<TuiSizeL>): string {\n            return $implicit === 'm' ? 'tuiIconMinus' : 'tuiIconMinusLarge';\n        },\n    },\n};\n\nexport const TUI_CHECKBOX_OPTIONS = new InjectionToken<CheckboxOptions>(\n    'Default parameters for checkbox component',\n    {\n        factory: () => TUI_CHECKBOX_DEFAULT_OPTIONS,\n    },\n);\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    Inject,\n    Input,\n} from '@angular/core';\nimport {TuiContextWithImplicit, tuiDefaultProp} from '@taiga-ui/cdk';\nimport {TuiSizeL} from '@taiga-ui/core/types';\nimport {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';\n\nimport {CheckboxOptions, TUI_CHECKBOX_OPTIONS} from './checkbox-options';\n\n// @dynamic\n@Component({\n    selector: 'tui-primitive-checkbox',\n    templateUrl: './primitive-checkbox.template.html',\n    styleUrls: ['./primitive-checkbox.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiPrimitiveCheckboxComponent {\n    @Input()\n    @HostBinding('attr.data-tui-host-size')\n    @tuiDefaultProp()\n    size: TuiSizeL = this.options.size;\n\n    @Input()\n    @tuiDefaultProp()\n    disabled = false;\n\n    @Input()\n    @tuiDefaultProp()\n    focused = false;\n\n    @Input()\n    @tuiDefaultProp()\n    hovered = false;\n\n    @Input()\n    @tuiDefaultProp()\n    pressed = false;\n\n    @Input()\n    @tuiDefaultProp()\n    invalid = false;\n\n    @Input('value')\n    @tuiDefaultProp()\n    set valueSetter(value: boolean | null) {\n        if (value !== false) {\n            this.setCurrentIcon(value);\n        }\n\n        this.value = value;\n    }\n\n    icon: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> =\n        this.options.icons.checked;\n\n    value: boolean | null = false;\n\n    constructor(\n        @Inject(TUI_CHECKBOX_OPTIONS) private readonly options: CheckboxOptions,\n    ) {}\n\n    get appearance(): string {\n        switch (this.value) {\n            case false:\n                return this.options.appearances.unchecked;\n            case true:\n                return this.options.appearances.checked;\n            default:\n                return this.options.appearances.indeterminate;\n        }\n    }\n\n    get empty(): boolean {\n        return this.value === false;\n    }\n\n    private setCurrentIcon(value: null | boolean) {\n        this.icon =\n            value === null\n                ? this.options.icons.indeterminate\n                : this.options.icons.checked;\n    }\n}\n","import {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core/components/svg';\nimport {TuiWrapperModule} from '@taiga-ui/core/components/wrapper';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiPrimitiveCheckboxComponent} from './primitive-checkbox.component';\n\n@NgModule({\n    imports: [TuiSvgModule, TuiWrapperModule, PolymorpheusModule],\n    declarations: [TuiPrimitiveCheckboxComponent],\n    exports: [TuiPrimitiveCheckboxComponent],\n})\nexport class TuiPrimitiveCheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-core-components-primitive-checkbox.js","sources":["ng://@taiga-ui/core/components/primitive-checkbox/checkbox-options.ts","ng://@taiga-ui/core/components/primitive-checkbox/primitive-checkbox.component.ts","ng://@taiga-ui/core/components/primitive-checkbox/primitive-checkbox.module.ts","ng://@taiga-ui/core/components/primitive-checkbox/taiga-ui-core-components-primitive-checkbox.ts"],"sourcesContent":["import {InjectionToken, ValueProvider} from '@angular/core';\nimport {TuiContextWithImplicit} from '@taiga-ui/cdk';\nimport {TuiAppearance} from '@taiga-ui/core/enums';\nimport {TuiSizeL} from '@taiga-ui/core/types';\nimport {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';\n\nexport interface TuiCheckboxOptions {\n    readonly size: TuiSizeL;\n    readonly appearances: Readonly<{\n        unchecked: string;\n        checked: string;\n        indeterminate: string;\n    }>;\n    readonly icons: Readonly<{\n        checked: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;\n        indeterminate: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>>;\n    }>;\n}\n\n/**\n * @deprecated: use TuiCheckboxOptions instead\n * todo: remove in 3.0\n */\nexport type CheckboxOptions = TuiCheckboxOptions;\n\n/** Default values for the checkbox options. */\nexport const TUI_CHECKBOX_DEFAULT_OPTIONS: TuiCheckboxOptions = {\n    size: 'm',\n    appearances: {\n        unchecked: TuiAppearance.Outline,\n        checked: TuiAppearance.Primary,\n        indeterminate: TuiAppearance.Primary,\n    },\n    icons: {\n        checked({$implicit}: TuiContextWithImplicit<TuiSizeL>): string {\n            return $implicit === 'm' ? 'tuiIconCheck' : 'tuiIconCheckLarge';\n        },\n        indeterminate({$implicit}: TuiContextWithImplicit<TuiSizeL>): string {\n            return $implicit === 'm' ? 'tuiIconMinus' : 'tuiIconMinusLarge';\n        },\n    },\n};\n\nexport const TUI_CHECKBOX_OPTIONS = new InjectionToken<TuiCheckboxOptions>(\n    'Default parameters for checkbox component',\n    {\n        factory: () => TUI_CHECKBOX_DEFAULT_OPTIONS,\n    },\n);\n\nexport const tuiCheckboxOptionsProvider: (\n    options: Partial<TuiCheckboxOptions>,\n) => ValueProvider = (options: Partial<TuiCheckboxOptions>) => ({\n    provide: TUI_CHECKBOX_OPTIONS,\n    useValue: {...TUI_CHECKBOX_DEFAULT_OPTIONS, ...options},\n});\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    HostBinding,\n    Inject,\n    Input,\n} from '@angular/core';\nimport {TuiContextWithImplicit, tuiDefaultProp} from '@taiga-ui/cdk';\nimport {TuiSizeL} from '@taiga-ui/core/types';\nimport {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';\n\nimport {TUI_CHECKBOX_OPTIONS, TuiCheckboxOptions} from './checkbox-options';\n\n// @dynamic\n@Component({\n    selector: 'tui-primitive-checkbox',\n    templateUrl: './primitive-checkbox.template.html',\n    styleUrls: ['./primitive-checkbox.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiPrimitiveCheckboxComponent {\n    @Input()\n    @HostBinding('attr.data-size')\n    @tuiDefaultProp()\n    size: TuiSizeL = this.options.size;\n\n    @Input()\n    @tuiDefaultProp()\n    disabled = false;\n\n    @Input()\n    @tuiDefaultProp()\n    focused = false;\n\n    @Input()\n    @tuiDefaultProp()\n    hovered = false;\n\n    @Input()\n    @tuiDefaultProp()\n    pressed = false;\n\n    @Input()\n    @tuiDefaultProp()\n    invalid = false;\n\n    @Input('value')\n    @tuiDefaultProp()\n    set valueSetter(value: boolean | null) {\n        if (value !== false) {\n            this.setCurrentIcon(value);\n        }\n\n        this.value = value;\n    }\n\n    icon: PolymorpheusContent<TuiContextWithImplicit<TuiSizeL>> =\n        this.options.icons.checked;\n\n    value: boolean | null = false;\n\n    constructor(\n        @Inject(TUI_CHECKBOX_OPTIONS) private readonly options: TuiCheckboxOptions,\n    ) {}\n\n    get appearance(): string {\n        switch (this.value) {\n            case false:\n                return this.options.appearances.unchecked;\n            case true:\n                return this.options.appearances.checked;\n            default:\n                return this.options.appearances.indeterminate;\n        }\n    }\n\n    get empty(): boolean {\n        return this.value === false;\n    }\n\n    private setCurrentIcon(value: null | boolean) {\n        this.icon =\n            value === null\n                ? this.options.icons.indeterminate\n                : this.options.icons.checked;\n    }\n}\n","import {NgModule} from '@angular/core';\nimport {TuiSvgModule} from '@taiga-ui/core/components/svg';\nimport {TuiWrapperModule} from '@taiga-ui/core/components/wrapper';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiPrimitiveCheckboxComponent} from './primitive-checkbox.component';\n\n@NgModule({\n    imports: [TuiSvgModule, TuiWrapperModule, PolymorpheusModule],\n    declarations: [TuiPrimitiveCheckboxComponent],\n    exports: [TuiPrimitiveCheckboxComponent],\n})\nexport class TuiPrimitiveCheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/taiga-ui-core-components-primitive-textfield.js

@@ -1,24 +1,24 @@
 import { __decorate, __param } from 'tslib';
-import { forwardRef, EventEmitter, Inject, ViewChild, Input, HostBinding, Output, ContentChildren, Component, ChangeDetectionStrategy, ElementRef, NgModule } from '@angular/core';
-import { TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiInteractive, isNativeFocused, setNativeFocused, tuiDefaultProp, tuiPure, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule, TuiInputModeModule, TuiAutofilledModule, TuiPreventDefaultModule } from '@taiga-ui/cdk';
+import { forwardRef, InjectionToken, EventEmitter, Inject, ElementRef, ViewChild, Input, HostBinding, Output, ContentChildren, HostListener, Component, ChangeDetectionStrategy, Directive, NgModule } from '@angular/core';
+import { TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiInteractive, isNativeFocusedIn, setNativeFocused, tuiDefaultProp, tuiPure, TuiIdService, TuiFocusableModule, TuiHoveredModule, TuiInputModeModule, TuiAutofilledModule, TuiPreventDefaultModule } from '@taiga-ui/cdk';
 import { HINT_CONTROLLER_PROVIDER, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER } from '@taiga-ui/core/directives/hint-controller';
 import { TEXTFIELD_CONTROLLER_PROVIDER, TuiTextfieldController, TUI_TEXTFIELD_WATCHED_CONTROLLER } from '@taiga-ui/core/directives/textfield-controller';
-import { TUI_MODE, TUI_TEXTFIELD_APPEARANCE } from '@taiga-ui/core/tokens';
+import { TUI_MODE, TUI_TEXTFIELD_APPEARANCE, TUI_TEXTFIELD_HOST } from '@taiga-ui/core/tokens';
 import { getBorder } from '@taiga-ui/core/utils/miscellaneous';
 import { PolymorpheusOutletComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 import { fromEvent, Observable, defer, EMPTY } from 'rxjs';
 import { map, startWith, distinctUntilChanged } from 'rxjs/operators';
 import { MODE_PROVIDER } from '@taiga-ui/core/providers';
+import { TuiAbstractTextfieldHost } from '@taiga-ui/core/abstract';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MutationObserverDirective, MutationObserverModule } from '@ng-web-apis/mutation-observer';
 import { TuiSvgModule } from '@taiga-ui/core/components/svg';
 import { TuiTooltipModule } from '@taiga-ui/core/components/tooltip';
 import { TuiWrapperModule } from '@taiga-ui/core/components/wrapper';
-import { TuiBorderModule } from '@taiga-ui/core/directives/border';
 import { TuiDescribedByModule } from '@taiga-ui/core/directives/described-by';
 import { TuiMaskAccessorModule } from '@taiga-ui/core/directives/mask-accessor';
-import { TuiTextfieldController as TuiTextfieldController$1, TUI_TEXTFIELD_WATCHED_CONTROLLER as TUI_TEXTFIELD_WATCHED_CONTROLLER$1 } from '@taiga-ui/core/directives';
+import { TuiTextfieldController as TuiTextfieldController$1, TUI_TEXTFIELD_WATCHED_CONTROLLER as TUI_TEXTFIELD_WATCHED_CONTROLLER$1, TuiDescribedByDirective, TUI_DESCRIBED_BY_PROVIDERS, TEXTFIELD_CONTROLLER_PROVIDER as TEXTFIELD_CONTROLLER_PROVIDER$1 } from '@taiga-ui/core/directives';
 
 const TUI_PRIMITIVE_TEXTFIELD_PROVIDERS = [
     {
@@ -30,21 +30,38 @@ const TUI_PRIMITIVE_TEXTFIELD_PROVIDERS = [
     MODE_PROVIDER,
 ];
 
+// TODO: remove in ivy compilation
+const TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER = 'tuiIconCloseLarge';
+/** Default values for primitive textfield options */
+const TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS = {
+    iconAlign: 'right',
+    iconCleaner: TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER,
+};
+const TUI_PRIMITIVE_TEXTFIELD_OPTIONS = new InjectionToken('Default parameters for primitive textfield component', {
+    factory: () => TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS,
+});
+const tuiPrimitiveTextfieldOptionsProvider = (options) => ({
+    provide: TUI_PRIMITIVE_TEXTFIELD_OPTIONS,
+    useValue: Object.assign(Object.assign({}, TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS), options),
+});
+
 const ICON_PADDING = 1.75;
 const ICON_PADDING_S = 1.5;
 let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extends AbstractTuiInteractive {
-    constructor(mode$, appearance, controller, hintController) {
+    constructor(mode$, appearance, controller, hintController, options, elementRef) {
         super();
         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;
@@ -52,22 +69,27 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
         this.postfix = '';
         this.value = '';
         this.valueChange = new EventEmitter();
+        /**
+         * @deprecated TODO: remove in 3.0
+         */
         this.autofilledChange = new EventEmitter();
+        this.autofilled = false;
     }
     get nativeFocusableElement() {
-        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);
     }
     get focused() {
-        return isNativeFocused(this.nativeFocusableElement);
+        return isNativeFocusedIn(this.elementRef.nativeElement);
     }
     get size() {
         return this.controller.size;
     }
-    get labelOutside() {
-        return this.controller.labelOutside;
-    }
     get computedInvalid() {
         return !this.readOnly && !this.disabled && this.invalid;
     }
@@ -89,7 +111,10 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
         return !!this.controller.customContent;
     }
     get hasPlaceholder() {
-        const hasDecor = this.controller.exampleText || this.prefix || this.postfix;
+        var _a;
+        const hasDecor = this.controller.exampleText ||
+            this.prefix ||
+            this.postfix || ((_a = this.nativeFocusableElement) === null || _a === void 0 ? void 0 : _a.placeholder);
         const showDecor = hasDecor && !this.readOnly && this.computedFocused;
         const placeholderVisible = !this.hasValue && !showDecor;
         return this.placeholderRaisable || placeholderVisible;
@@ -98,10 +123,10 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
         return (this.placeholderRaisable &&
             ((this.computedFocused && !this.readOnly) || this.hasValue || this.autofilled));
     }
-    get borderLeft() {
+    get borderStart() {
         return this.iconAlignLeft ? this.iconPaddingLeft : 0;
     }
-    get borderRight() {
+    get borderEnd() {
         return getBorder(this.iconAlignRight, this.hasCleaner, this.hasTooltip, this.hasCustomContent);
     }
     get iconAlignLeft() {
@@ -116,6 +141,13 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
             ? 'ccexpiryyear'
             : null;
     }
+    get computedId() {
+        var _a;
+        return ((_a = this.nativeFocusableElement) === null || _a === void 0 ? void 0 : _a.id) || '';
+    }
+    onFocused(focused) {
+        this.updateFocused(focused);
+    }
     getIndent$(element) {
         return fromEvent(element, 'scroll').pipe(map(() => -1 * element.scrollLeft));
     }
@@ -126,12 +158,12 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
         this.updateValue('');
     }
     onMouseDown(event) {
-        if (!this.focusableElement ||
-            event.target === this.focusableElement.nativeElement) {
+        const { nativeFocusableElement } = this;
+        if (!nativeFocusableElement || event.target === nativeFocusableElement) {
             return;
         }
         event.preventDefault();
-        setNativeFocused(this.focusableElement.nativeElement);
+        setNativeFocused(nativeFocusableElement);
     }
     onModelChange(value) {
         this.updateValue(value);
@@ -139,9 +171,6 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
     onHovered(hovered) {
         this.updateHovered(hovered);
     }
-    onFocused(focused) {
-        this.updateFocused(focused);
-    }
     onAutofilled(autofilled) {
         this.updateAutofilled(autofilled);
     }
@@ -149,7 +178,7 @@ let TuiPrimitiveTextfieldComponent = class TuiPrimitiveTextfieldComponent extend
         return this.size === 's' ? ICON_PADDING_S : ICON_PADDING;
     }
     get placeholderRaisable() {
-        return this.size !== 's' && !this.labelOutside;
+        return this.size !== 's' && !this.controller.labelOutside;
     }
     get hasIcon() {
         return !!this.iconContent;
@@ -170,7 +199,9 @@ TuiPrimitiveTextfieldComponent.ctorParameters = () => [
     { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] },
     { type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] },
     { type: TuiTextfieldController, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
-    { type: TuiHintControllerDirective, decorators: [{ type: Inject, args: [TUI_HINT_WATCHED_CONTROLLER,] }] }
+    { type: TuiHintControllerDirective, decorators: [{ type: Inject, args: [TUI_HINT_WATCHED_CONTROLLER,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [TUI_PRIMITIVE_TEXTFIELD_OPTIONS,] }] },
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
 ];
 __decorate([
     ViewChild('focusableElement')
@@ -191,6 +222,10 @@ __decorate([
     Input(),
     tuiDefaultProp()
 ], TuiPrimitiveTextfieldComponent.prototype, "iconContent", void 0);
+__decorate([
+    Input(),
+    tuiDefaultProp()
+], TuiPrimitiveTextfieldComponent.prototype, "iconCleaner", void 0);
 __decorate([
     Input(),
     HostBinding('class._readonly'),
@@ -226,34 +261,144 @@ __decorate([
     ContentChildren(PolymorpheusOutletComponent)
 ], TuiPrimitiveTextfieldComponent.prototype, "content", void 0);
 __decorate([
-    HostBinding('attr.data-tui-host-size')
+    HostBinding('attr.data-size')
 ], TuiPrimitiveTextfieldComponent.prototype, "size", null);
-__decorate([
-    HostBinding('class._label-outside')
-], TuiPrimitiveTextfieldComponent.prototype, "labelOutside", null);
 __decorate([
     HostBinding('class._invalid')
 ], TuiPrimitiveTextfieldComponent.prototype, "computedInvalid", null);
+__decorate([
+    HostBinding('class._hidden')
+], TuiPrimitiveTextfieldComponent.prototype, "inputHidden", null);
+__decorate([
+    HostBinding('style.--border-start.rem')
+], TuiPrimitiveTextfieldComponent.prototype, "borderStart", null);
+__decorate([
+    HostBinding('style.--border-end.rem')
+], TuiPrimitiveTextfieldComponent.prototype, "borderEnd", null);
+__decorate([
+    HostListener('focusin', ['true']),
+    HostListener('focusout', ['false'])
+], TuiPrimitiveTextfieldComponent.prototype, "onFocused", null);
 __decorate([
     tuiPure
 ], TuiPrimitiveTextfieldComponent.prototype, "getIndent$", null);
 TuiPrimitiveTextfieldComponent = __decorate([
     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: 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;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:solid transparent;border-width:0 var(--border-end,0) 0 var(--border-start,0);border-inline-start-width:var(--border-start,0);border-inline-end-width:var(--border-end,0);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, Inject(TUI_MODE)),
     __param(1, Inject(TUI_TEXTFIELD_APPEARANCE)),
     __param(2, Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER)),
-    __param(3, Inject(TUI_HINT_WATCHED_CONTROLLER))
+    __param(3, Inject(TUI_HINT_WATCHED_CONTROLLER)),
+    __param(4, Inject(TUI_PRIMITIVE_TEXTFIELD_OPTIONS)),
+    __param(5, Inject(ElementRef))
 ], TuiPrimitiveTextfieldComponent);
 
+var TuiPrimitiveTextfieldDirective_1;
+let TuiPrimitiveTextfieldDirective = TuiPrimitiveTextfieldDirective_1 = class TuiPrimitiveTextfieldDirective extends TuiAbstractTextfieldHost {
+    constructor(textfield) {
+        /**
+         * TuiPrimitiveTextfieldComponent satisfies all required parts of
+         * AbstractTuiControl interface. A new interface is not introduced
+         * so AbstractTuiControl is automatically injected for all other controls.
+         */
+        super(textfield);
+        this.textfield = textfield;
+    }
+    get readOnly() {
+        return this.textfield.readOnly || !this.textfield.editable;
+    }
+    onValueChange(value) {
+        this.textfield.onModelChange(value);
+    }
+};
+TuiPrimitiveTextfieldDirective.ctorParameters = () => [
+    { type: TuiPrimitiveTextfieldComponent, decorators: [{ type: Inject, args: [TuiPrimitiveTextfieldComponent,] }] }
+];
+TuiPrimitiveTextfieldDirective = TuiPrimitiveTextfieldDirective_1 = __decorate([
+    Directive({
+        selector: 'tui-primitive-textfield',
+        providers: [
+            {
+                provide: TUI_TEXTFIELD_HOST,
+                useExisting: forwardRef(() => TuiPrimitiveTextfieldDirective_1),
+            },
+        ],
+    }),
+    __param(0, Inject(TuiPrimitiveTextfieldComponent))
+], TuiPrimitiveTextfieldDirective);
+
+// @dynamic
+let TuiTextfieldComponent = class TuiTextfieldComponent {
+    constructor(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);
+    }
+    get computedDescribedBy() {
+        return this.describedBy.computedDescribedBy;
+    }
+    get id() {
+        return this.elementRef.nativeElement.id || this.idService.generate();
+    }
+    ngDoCheck() {
+        this.describedBy.tuiDescribedBy = this.id;
+    }
+};
+TuiTextfieldComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_HOST,] }] },
+    { type: TuiTextfieldController$1, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_WATCHED_CONTROLLER$1,] }] },
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+    { type: TuiDescribedByDirective, decorators: [{ type: Inject, args: [TuiDescribedByDirective,] }] },
+    { type: TuiIdService, decorators: [{ type: Inject, args: [TuiIdService,] }] }
+];
+__decorate([
+    HostBinding('attr.aria-describedby')
+], TuiTextfieldComponent.prototype, "computedDescribedBy", null);
+__decorate([
+    HostBinding('id')
+], TuiTextfieldComponent.prototype, "id", null);
+TuiTextfieldComponent = __decorate([
+    Component({
+        selector: 'input[tuiTextfield]',
+        template: '',
+        providers: [
+            TuiDescribedByDirective,
+            TUI_DESCRIBED_BY_PROVIDERS,
+            TEXTFIELD_CONTROLLER_PROVIDER$1,
+        ],
+        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: ChangeDetectionStrategy.OnPush,
+        styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;border:0;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:solid transparent;border-width:0 var(--border-end,0) 0 var(--border-start,0);border-inline-start-width:var(--border-start,0);border-inline-end-width:var(--border-end,0);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, Inject(TUI_TEXTFIELD_HOST)),
+    __param(1, Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER$1)),
+    __param(2, Inject(ElementRef)),
+    __param(3, Inject(TuiDescribedByDirective)),
+    __param(4, Inject(TuiIdService))
+], TuiTextfieldComponent);
+
 let TuiValueDecorationComponent = class TuiValueDecorationComponent {
     constructor(textfield, controller) {
         this.textfield = textfield;
@@ -267,9 +412,11 @@ let TuiValueDecorationComponent = class TuiValueDecorationComponent {
         return this.textfield.value;
     }
     get filler() {
-        return this.focused
-            ? this.exampleText || this.textfield.filler.slice(this.value.length)
-            : '';
+        const { focused, placeholder, exampleText, value, textfield } = this;
+        if (focused && placeholder && exampleText) {
+            return '';
+        }
+        return focused ? exampleText || textfield.filler.slice(value.length) : '';
     }
     get prefix() {
         return this.decorationsVisible ? this.textfield.prefix : '';
@@ -277,8 +424,13 @@ let TuiValueDecorationComponent = class TuiValueDecorationComponent {
     get postfix() {
         return this.decorationsVisible ? this.computedPostfix : '';
     }
+    get placeholder() {
+        var _a;
+        return ((_a = this.textfield.nativeFocusableElement) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+    }
     get exampleText() {
-        return !this.value && this.focused ? this.controller.exampleText : '';
+        const exampleText = this.controller.exampleText || this.placeholder;
+        return !this.value && this.focused ? exampleText : '';
     }
     get decorationsVisible() {
         return !!this.value || this.focused;
@@ -326,7 +478,6 @@ TuiPrimitiveTextfieldModule = __decorate([
             FormsModule,
             TuiMaskAccessorModule,
             TuiFocusableModule,
-            TuiFocusedModule,
             TuiHoveredModule,
             TuiInputModeModule,
             PolymorpheusModule,
@@ -336,11 +487,19 @@ TuiPrimitiveTextfieldModule = __decorate([
             TuiAutofilledModule,
             TuiDescribedByModule,
             TuiPreventDefaultModule,
-            TuiBorderModule,
             MutationObserverModule,
         ],
-        declarations: [TuiPrimitiveTextfieldComponent, TuiValueDecorationComponent],
-        exports: [TuiPrimitiveTextfieldComponent],
+        declarations: [
+            TuiPrimitiveTextfieldComponent,
+            TuiPrimitiveTextfieldDirective,
+            TuiTextfieldComponent,
+            TuiValueDecorationComponent,
+        ],
+        exports: [
+            TuiPrimitiveTextfieldComponent,
+            TuiPrimitiveTextfieldDirective,
+            TuiTextfieldComponent,
+        ],
     })
 ], TuiPrimitiveTextfieldModule);
 
@@ -348,5 +507,5 @@ TuiPrimitiveTextfieldModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_PRIMITIVE_TEXTFIELD_PROVIDERS, TuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldModule, TuiValueDecorationComponent };
+export { TUI_PRIMITIVE_TEXTFIELD_DEFAULT_OPTIONS, TUI_PRIMITIVE_TEXTFIELD_ICON_CLEANER, TUI_PRIMITIVE_TEXTFIELD_OPTIONS, TUI_PRIMITIVE_TEXTFIELD_PROVIDERS, TuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldDirective, TuiPrimitiveTextfieldModule, TuiTextfieldComponent, TuiValueDecorationComponent, tuiPrimitiveTextfieldOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-components-primitive-textfield.js.map