@taiga-ui/core 2.20.0 → 2.24.0

package/fesm5/taiga-ui-core-components-primitive-calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-components-primitive-calendar.js","sources":["ng://@taiga-ui/core/components/primitive-calendar/primitive-calendar.component.ts","ng://@taiga-ui/core/components/primitive-calendar/primitive-calendar.module.ts","ng://@taiga-ui/core/components/primitive-calendar/taiga-ui-core-components-primitive-calendar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    HostBinding,\n    Inject,\n    Input,\n    Output,\n} from '@angular/core';\nimport {\n    ALWAYS_FALSE_HANDLER,\n    nullableSame,\n    TuiBooleanHandler,\n    TuiDay,\n    TuiDayRange,\n    tuiDefaultProp,\n    TuiMonth,\n} from '@taiga-ui/cdk';\nimport {TUI_DEFAULT_MARKER_HANDLER} from '@taiga-ui/core/constants';\nimport {TuiInteractiveState, TuiRangeState} from '@taiga-ui/core/enums';\nimport {TUI_ORDERED_SHORT_WEEK_DAYS, WEEK_DAYS_NAMES} from '@taiga-ui/core/tokens';\nimport {TuiColor, TuiMarkerHandler} from '@taiga-ui/core/types';\nimport {Observable} from 'rxjs';\n\n// @dynamic\n@Component({\n    selector: 'tui-primitive-calendar',\n    templateUrl: './primitive-calendar.template.html',\n    styleUrls: ['./primitive-calendar.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiPrimitiveCalendarComponent {\n    @Input()\n    @tuiDefaultProp()\n    month: TuiMonth = TuiMonth.currentLocal();\n\n    @Input()\n    @tuiDefaultProp()\n    disabledItemHandler: TuiBooleanHandler<TuiDay> = ALWAYS_FALSE_HANDLER;\n\n    @Input()\n    @tuiDefaultProp()\n    markerHandler: TuiMarkerHandler = TUI_DEFAULT_MARKER_HANDLER;\n\n    @Input()\n    @tuiDefaultProp()\n    value: TuiDayRange | TuiDay | null = null;\n\n    @Input()\n    @tuiDefaultProp()\n    hoveredItem: TuiDay | null = null;\n\n    @Input()\n    @tuiDefaultProp()\n    showAdjacent = true;\n\n    @Output()\n    readonly hoveredItemChange = new EventEmitter<TuiDay | null>();\n\n    @Output()\n    readonly dayClick = new EventEmitter<TuiDay>();\n\n    private pressedItem: TuiDay | null = null;\n\n    private today = TuiDay.currentLocal();\n\n    readonly toMarkers = (\n        day: TuiDay,\n        today: boolean,\n        inRange: boolean,\n    ): null | [TuiColor | string] | [TuiColor | string, TuiColor | string] => {\n        if (today || inRange) {\n            return null;\n        }\n\n        const markers = this.markerHandler(day);\n\n        return markers.length === 0 ? null : markers;\n    };\n\n    constructor(\n        @Inject(TUI_ORDERED_SHORT_WEEK_DAYS)\n        readonly weekDays$: Observable<WEEK_DAYS_NAMES>,\n    ) {}\n\n    @HostBinding('class._single')\n    get isSingle(): boolean {\n        return (\n            this.value !== null &&\n            (this.value instanceof TuiDay || this.value.isSingleDay)\n        );\n    }\n\n    getItemState(item: TuiDay): TuiInteractiveState | null {\n        const {disabledItemHandler, pressedItem, hoveredItem} = this;\n\n        if (disabledItemHandler(item)) {\n            return TuiInteractiveState.Disabled;\n        }\n\n        if (pressedItem && pressedItem.daySame(item)) {\n            return TuiInteractiveState.Pressed;\n        }\n\n        if (hoveredItem && hoveredItem.daySame(item)) {\n            return TuiInteractiveState.Hovered;\n        }\n\n        return null;\n    }\n\n    getItemRange(item: TuiDay): TuiRangeState | null {\n        const {value, hoveredItem} = this;\n\n        if (!value) {\n            return null;\n        }\n\n        if (value instanceof TuiDay) {\n            return value.daySame(item) ? TuiRangeState.Single : null;\n        }\n\n        if (\n            (value.from.daySame(item) && !value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.dayAfter(value.from) &&\n                value.from.daySame(item) &&\n                value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.daySame(item) &&\n                hoveredItem.dayBefore(value.from) &&\n                value.isSingleDay)\n        ) {\n            return TuiRangeState.Start;\n        }\n\n        if (\n            (value.to.daySame(item) && !value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.dayBefore(value.from) &&\n                value.from.daySame(item) &&\n                value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.daySame(item) &&\n                hoveredItem.dayAfter(value.from) &&\n                value.isSingleDay)\n        ) {\n            return TuiRangeState.End;\n        }\n\n        return value.isSingleDay && value.from.daySame(item)\n            ? TuiRangeState.Single\n            : null;\n    }\n\n    itemIsDisabled(day: TuiDay): boolean {\n        const {disabledItemHandler} = this;\n\n        return disabledItemHandler(day);\n    }\n\n    itemIsToday(item: TuiDay): boolean {\n        return this.today.daySame(item);\n    }\n\n    itemIsUnavailable(item: TuiDay): boolean {\n        return !this.month.monthSame(item);\n    }\n\n    itemIsInterval(day: TuiDay): boolean {\n        const {value, hoveredItem} = this;\n\n        if (value === null || value instanceof TuiDay) {\n            return false;\n        }\n\n        if (!value.isSingleDay) {\n            return value.from.daySameOrBefore(day) && value.to.dayAfter(day);\n        }\n\n        if (hoveredItem === null) {\n            return false;\n        }\n\n        const range = TuiDayRange.sort(value.from, hoveredItem);\n\n        return range.from.daySameOrBefore(day) && range.to.dayAfter(day);\n    }\n\n    onItemHovered(item: TuiDay | false) {\n        this.updateHoveredItem(item || null);\n    }\n\n    onItemPressed(item: TuiDay | false) {\n        this.pressedItem = item || null;\n    }\n\n    onItemClick(item: TuiDay) {\n        this.dayClick.emit(item);\n    }\n\n    private updateHoveredItem(day: TuiDay | null) {\n        if (nullableSame(this.hoveredItem, day, (a, b) => a.daySame(b))) {\n            return;\n        }\n\n        this.hoveredItem = day;\n        this.hoveredItemChange.emit(day);\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {\n    TuiHoveredModule,\n    TuiLetModule,\n    TuiMapperPipeModule,\n    TuiPressedModule,\n    TuiRepeatTimesModule,\n} from '@taiga-ui/cdk';\nimport {TuiColorModule} from '@taiga-ui/core/directives/color';\nimport {TuiCalendarSheetPipeModule} from '@taiga-ui/core/pipes';\nimport {TuiPrimitiveCalendarComponent} from './primitive-calendar.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TuiLetModule,\n        TuiMapperPipeModule,\n        TuiRepeatTimesModule,\n        TuiHoveredModule,\n        TuiPressedModule,\n        TuiColorModule,\n        TuiCalendarSheetPipeModule,\n    ],\n    declarations: [TuiPrimitiveCalendarComponent],\n    exports: [TuiPrimitiveCalendarComponent],\n})\nexport class TuiPrimitiveCalendarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAwBA;;IAwDI,uCAEa,SAAsC;QAFnD,iBAGI;QADS,cAAS,GAAT,SAAS,CAA6B;QAhDnD,UAAK,GAAa,QAAQ,CAAC,YAAY,EAAE,CAAC;QAI1C,wBAAmB,GAA8B,oBAAoB,CAAC;QAItE,kBAAa,GAAqB,0BAA0B,CAAC;QAI7D,UAAK,GAAgC,IAAI,CAAC;QAI1C,gBAAW,GAAkB,IAAI,CAAC;QAIlC,iBAAY,GAAG,IAAI,CAAC;QAGX,sBAAiB,GAAG,IAAI,YAAY,EAAiB,CAAC;QAGtD,aAAQ,GAAG,IAAI,YAAY,EAAU,CAAC;QAEvC,gBAAW,GAAkB,IAAI,CAAC;QAElC,UAAK,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;QAE7B,cAAS,GAAG,UACjB,GAAW,EACX,KAAc,EACd,OAAgB;YAEhB,IAAI,KAAK,IAAI,OAAO,EAAE;gBAClB,OAAO,IAAI,CAAC;aACf;YAED,IAAM,OAAO,GAAG,KAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAExC,OAAO,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,IAAI,GAAG,OAAO,CAAC;SAChD,CAAC;KAKE;IAGJ,sBAAI,mDAAQ;aAAZ;YACI,QACI,IAAI,CAAC,KAAK,KAAK,IAAI;iBAClB,IAAI,CAAC,KAAK,YAAY,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAC1D;SACL;;;OAAA;IAED,oDAAY,GAAZ,UAAa,IAAY;QACf,IAAA,SAAsD,EAArD,4CAAmB,EAAE,4BAAW,EAAE,4BAAmB,CAAC;QAE7D,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE;YAC3B,iCAAoC;SACvC;QAED,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC1C,+BAAmC;SACtC;QAED,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC1C,+BAAmC;SACtC;QAED,OAAO,IAAI,CAAC;KACf;IAED,oDAAY,GAAZ,UAAa,IAAY;QACf,IAAA,SAA2B,EAA1B,gBAAK,EAAE,4BAAmB,CAAC;QAElC,IAAI,CAAC,KAAK,EAAE;YACR,OAAO,IAAI,CAAC;SACf;QAED,IAAI,KAAK,YAAY,MAAM,EAAE;YACzB,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA0B,IAAI,CAAC;SAC5D;QAED,IACI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW;aAC9C,WAAW;gBACR,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;gBAChC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBACxB,KAAK,CAAC,WAAW,CAAC;aACrB,WAAW;gBACR,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC;gBACzB,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;gBACjC,KAAK,CAAC,WAAW,CAAC,EACxB;YACE,2BAA2B;SAC9B;QAED,IACI,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW;aAC5C,WAAW;gBACR,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;gBACjC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBACxB,KAAK,CAAC,WAAW,CAAC;aACrB,WAAW;gBACR,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC;gBACzB,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;gBAChC,KAAK,CAAC,WAAW,CAAC,EACxB;YACE,uBAAyB;SAC5B;QAED,OAAO,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;;cAE9C,IAAI,CAAC;KACd;IAED,sDAAc,GAAd,UAAe,GAAW;QACf,IAAA,8CAAmB,CAAS;QAEnC,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;KACnC;IAED,mDAAW,GAAX,UAAY,IAAY;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;KACnC;IAED,yDAAiB,GAAjB,UAAkB,IAAY;QAC1B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;KACtC;IAED,sDAAc,GAAd,UAAe,GAAW;QAChB,IAAA,SAA2B,EAA1B,gBAAK,EAAE,4BAAmB,CAAC;QAElC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,YAAY,MAAM,EAAE;YAC3C,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACpE;QAED,IAAI,WAAW,KAAK,IAAI,EAAE;YACtB,OAAO,KAAK,CAAC;SAChB;QAED,IAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAExD,OAAO,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACpE;IAED,qDAAa,GAAb,UAAc,IAAoB;QAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;KACxC;IAED,qDAAa,GAAb,UAAc,IAAoB;QAC9B,IAAI,CAAC,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC;KACnC;IAED,mDAAW,GAAX,UAAY,IAAY;QACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;IAEO,yDAAiB,GAAzB,UAA0B,GAAkB;QACxC,IAAI,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAA,CAAC,EAAE;YAC7D,OAAO;SACV;QAED,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;QACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC;;gBA9HuB,UAAU,uBAD7B,MAAM,SAAC,2BAA2B;;IA/CvC;QAFC,KAAK,EAAE;QACP,cAAc,EAAE;gEACyB;IAI1C;QAFC,KAAK,EAAE;QACP,cAAc,EAAE;8EACqD;IAItE;QAFC,KAAK,EAAE;QACP,cAAc,EAAE;wEAC4C;IAI7D;QAFC,KAAK,EAAE;QACP,cAAc,EAAE;gEACyB;IAI1C;QAFC,KAAK,EAAE;QACP,cAAc,EAAE;sEACiB;IAIlC;QAFC,KAAK,EAAE;QACP,cAAc,EAAE;uEACG;IAGpB;QADC,MAAM,EAAE;4EACsD;IAG/D;QADC,MAAM,EAAE;mEACsC;IA0B/C;QADC,WAAW,CAAC,eAAe,CAAC;iEAM5B;IA5DQ,6BAA6B;QANzC,SAAS,CAAC;YACP,QAAQ,EAAE,wBAAwB;YAClC,+zEAAiD;YAEjD,eAAe,EAAE,uBAAuB,CAAC,MAAM;;SAClD,CAAC;QAmDO,WAAA,MAAM,CAAC,2BAA2B,CAAC,CAAA;OAlD/B,6BAA6B,CAkLzC;IAAD,oCAAC;CAlLD;;;ICJA;KAA0C;IAA7B,0BAA0B;QAdtC,QAAQ,CAAC;YACN,OAAO,EAAE;gBACL,YAAY;gBACZ,YAAY;gBACZ,mBAAmB;gBACnB,oBAAoB;gBACpB,gBAAgB;gBAChB,gBAAgB;gBAChB,cAAc;gBACd,0BAA0B;aAC7B;YACD,YAAY,EAAE,CAAC,6BAA6B,CAAC;YAC7C,OAAO,EAAE,CAAC,6BAA6B,CAAC;SAC3C,CAAC;OACW,0BAA0B,CAAG;IAAD,iCAAC;CAA1C;;AC3BA;;;;;;"}
+{"version":3,"file":"taiga-ui-core-components-primitive-calendar.js","sources":["ng://@taiga-ui/core/components/primitive-calendar/primitive-calendar.component.ts","ng://@taiga-ui/core/components/primitive-calendar/primitive-calendar.module.ts","ng://@taiga-ui/core/components/primitive-calendar/taiga-ui-core-components-primitive-calendar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    HostBinding,\n    Inject,\n    Input,\n    Output,\n} from '@angular/core';\nimport {\n    ALWAYS_FALSE_HANDLER,\n    nullableSame,\n    TuiBooleanHandler,\n    TuiDay,\n    TuiDayRange,\n    tuiDefaultProp,\n    TuiMonth,\n} from '@taiga-ui/cdk';\nimport {TUI_DEFAULT_MARKER_HANDLER} from '@taiga-ui/core/constants';\nimport {TuiInteractiveState, TuiRangeState} from '@taiga-ui/core/enums';\nimport {TUI_ORDERED_SHORT_WEEK_DAYS, WEEK_DAYS_NAMES} from '@taiga-ui/core/tokens';\nimport {TuiColor, TuiMarkerHandler} from '@taiga-ui/core/types';\nimport {Observable} from 'rxjs';\n\n// @dynamic\n@Component({\n    selector: 'tui-primitive-calendar',\n    templateUrl: './primitive-calendar.template.html',\n    styleUrls: ['./primitive-calendar.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiPrimitiveCalendarComponent {\n    @Input()\n    @tuiDefaultProp()\n    month: TuiMonth = TuiMonth.currentLocal();\n\n    @Input()\n    @tuiDefaultProp()\n    disabledItemHandler: TuiBooleanHandler<TuiDay> = ALWAYS_FALSE_HANDLER;\n\n    @Input()\n    @tuiDefaultProp()\n    markerHandler: TuiMarkerHandler = TUI_DEFAULT_MARKER_HANDLER;\n\n    @Input()\n    @tuiDefaultProp()\n    value: TuiDayRange | TuiDay | null = null;\n\n    @Input()\n    @tuiDefaultProp()\n    hoveredItem: TuiDay | null = null;\n\n    @Input()\n    @tuiDefaultProp()\n    showAdjacent = true;\n\n    @Output()\n    readonly hoveredItemChange = new EventEmitter<TuiDay | null>();\n\n    @Output()\n    readonly dayClick = new EventEmitter<TuiDay>();\n\n    private pressedItem: TuiDay | null = null;\n\n    private today = TuiDay.currentLocal();\n\n    readonly toMarkers = (\n        day: TuiDay,\n        today: boolean,\n        inRange: boolean,\n    ): null | [TuiColor | string] | [TuiColor | string, TuiColor | string] => {\n        if (today || inRange) {\n            return null;\n        }\n\n        const markers = this.markerHandler(day);\n\n        return markers.length === 0 ? null : markers;\n    };\n\n    constructor(\n        @Inject(TUI_ORDERED_SHORT_WEEK_DAYS)\n        readonly weekDays$: Observable<WEEK_DAYS_NAMES>,\n    ) {}\n\n    @HostBinding('class._single')\n    get isSingle(): boolean {\n        return (\n            this.value !== null &&\n            (this.value instanceof TuiDay || this.value.isSingleDay)\n        );\n    }\n\n    getItemState(item: TuiDay): TuiInteractiveState | null {\n        const {disabledItemHandler, pressedItem, hoveredItem} = this;\n\n        if (disabledItemHandler(item)) {\n            return TuiInteractiveState.Disabled;\n        }\n\n        if (pressedItem && pressedItem.daySame(item)) {\n            return TuiInteractiveState.Pressed;\n        }\n\n        if (hoveredItem && hoveredItem.daySame(item)) {\n            return TuiInteractiveState.Hovered;\n        }\n\n        return null;\n    }\n\n    getItemRange(item: TuiDay): TuiRangeState | null {\n        const {value, hoveredItem} = this;\n\n        if (!value) {\n            return null;\n        }\n\n        if (value instanceof TuiDay) {\n            return value.daySame(item) ? TuiRangeState.Single : null;\n        }\n\n        if (\n            (value.from.daySame(item) && !value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.dayAfter(value.from) &&\n                value.from.daySame(item) &&\n                value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.daySame(item) &&\n                hoveredItem.dayBefore(value.from) &&\n                value.isSingleDay)\n        ) {\n            return TuiRangeState.Start;\n        }\n\n        if (\n            (value.to.daySame(item) && !value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.dayBefore(value.from) &&\n                value.from.daySame(item) &&\n                value.isSingleDay) ||\n            (hoveredItem &&\n                hoveredItem.daySame(item) &&\n                hoveredItem.dayAfter(value.from) &&\n                value.isSingleDay)\n        ) {\n            return TuiRangeState.End;\n        }\n\n        return value.isSingleDay && value.from.daySame(item)\n            ? TuiRangeState.Single\n            : null;\n    }\n\n    itemIsDisabled(day: TuiDay): boolean {\n        const {disabledItemHandler} = this;\n\n        return disabledItemHandler(day);\n    }\n\n    itemIsToday(item: TuiDay): boolean {\n        return this.today.daySame(item);\n    }\n\n    itemIsUnavailable(item: TuiDay): boolean {\n        return !this.month.monthSame(item);\n    }\n\n    itemIsInterval(day: TuiDay): boolean {\n        const {value, hoveredItem} = this;\n\n        if (value === null || value instanceof TuiDay) {\n            return false;\n        }\n\n        if (!value.isSingleDay) {\n            return value.from.daySameOrBefore(day) && value.to.dayAfter(day);\n        }\n\n        if (hoveredItem === null) {\n            return false;\n        }\n\n        const range = TuiDayRange.sort(value.from, hoveredItem);\n\n        return range.from.daySameOrBefore(day) && range.to.dayAfter(day);\n    }\n\n    onItemHovered(item: TuiDay | false) {\n        this.updateHoveredItem(item || null);\n    }\n\n    onItemPressed(item: TuiDay | false) {\n        this.pressedItem = item || null;\n    }\n\n    onItemClick(item: TuiDay) {\n        this.dayClick.emit(item);\n    }\n\n    private updateHoveredItem(day: TuiDay | null) {\n        if (nullableSame(this.hoveredItem, day, (a, b) => a.daySame(b))) {\n            return;\n        }\n\n        this.hoveredItem = day;\n        this.hoveredItemChange.emit(day);\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {\n    TuiHoveredModule,\n    TuiLetModule,\n    TuiMapperPipeModule,\n    TuiPressedModule,\n    TuiRepeatTimesModule,\n} from '@taiga-ui/cdk';\nimport {TuiColorModule} from '@taiga-ui/core/directives/color';\nimport {TuiCalendarSheetPipeModule} from '@taiga-ui/core/pipes';\nimport {TuiPrimitiveCalendarComponent} from './primitive-calendar.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TuiLetModule,\n        TuiMapperPipeModule,\n        TuiRepeatTimesModule,\n        TuiHoveredModule,\n        TuiPressedModule,\n        TuiColorModule,\n        TuiCalendarSheetPipeModule,\n    ],\n    declarations: [TuiPrimitiveCalendarComponent],\n    exports: [TuiPrimitiveCalendarComponent],\n})\nexport class TuiPrimitiveCalendarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm5/taiga-ui-core-components-primitive-spin-button.js

@@ -89,8 +89,8 @@ var TuiPrimitiveSpinButtonComponent = /** @class */ (function (_super) {
         Component({
             selector: 'tui-primitive-spin-button',
             changeDetection: ChangeDetectionStrategy.OnPush,
-            template: "<div\n    *ngIf=\"spinTexts$ | async as texts\"\n    class=\"wrapper\"\n    tuiPreventDefault=\"mousedown\"\n    #wrapper\n    [tuiFocusable]=\"computedFocusable\"\n    (tuiFocusedChange)=\"onFocused($event)\"\n    (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n    (keydown.arrowLeft)=\"onLeftClick()\"\n    (keydown.arrowRight)=\"onRightClick()\"\n>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        appearance=\"\"\n        automation-id=\"tui-primitive-spin-button__left\"\n        icon=\"tuiIconChevronLeftLarge\"\n        class=\"arrow\"\n        [class.arrow_hidden]=\"leftComputedDisabled\"\n        [title]=\"texts[0]\"\n        [focusable]=\"false\"\n        (click)=\"onLeftClick()\"\n    ></button>\n    <span class=\"content\">\n        <ng-content></ng-content>\n    </span>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        appearance=\"\"\n        automation-id=\"tui-primitive-spin-button__right\"\n        icon=\"tuiIconChevronRightLarge\"\n        class=\"arrow\"\n        [class.arrow_hidden]=\"rightComputedDisabled\"\n        [title]=\"texts[1]\"\n        [focusable]=\"false\"\n        (click)=\"onRightClick()\"\n    ></button>\n</div>\n",
-            styles: [":host{font:var(--tui-font-text-l);display:block;text-align:center;font-weight:700}.wrapper{display:flex;align-items:center;justify-content:space-between;outline:0}.arrow{margin:0 .25rem}.arrow_hidden{visibility:hidden}.content{padding:0 .5rem}:host._focus-visible .content{box-shadow:0 0 0 1px var(--tui-focus)}"]
+            template: "<div\n    *ngIf=\"spinTexts$ | async as texts\"\n    #wrapper\n    tuiPreventDefault=\"mousedown\"\n    class=\"wrapper\"\n    [tuiFocusable]=\"computedFocusable\"\n    (tuiFocusedChange)=\"onFocused($event)\"\n    (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n    (keydown.arrowLeft)=\"onLeftClick()\"\n    (keydown.arrowRight)=\"onRightClick()\"\n>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        appearance=\"\"\n        automation-id=\"tui-primitive-spin-button__left\"\n        icon=\"tuiIconChevronLeftLarge\"\n        class=\"arrow\"\n        [class.arrow_hidden]=\"leftComputedDisabled\"\n        [title]=\"texts[0]\"\n        [focusable]=\"false\"\n        (click)=\"onLeftClick()\"\n    ></button>\n    <span class=\"content\">\n        <ng-content></ng-content>\n    </span>\n    <button\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        appearance=\"\"\n        automation-id=\"tui-primitive-spin-button__right\"\n        icon=\"tuiIconChevronRightLarge\"\n        class=\"arrow\"\n        [class.arrow_hidden]=\"rightComputedDisabled\"\n        [title]=\"texts[1]\"\n        [focusable]=\"false\"\n        (click)=\"onRightClick()\"\n    ></button>\n</div>\n",
+            styles: [":host{display:block;font:var(--tui-font-text-l);text-align:center;font-weight:700}.wrapper{display:flex;align-items:center;justify-content:space-between;outline:0}.arrow{margin:0 .25rem}.arrow_hidden{visibility:hidden}.content{padding:0 .5rem}:host._focus-visible .content{box-shadow:0 0 0 1px var(--tui-focus)}"]
         }),
         __param(0, Inject(TUI_SPIN_TEXTS))
     ], TuiPrimitiveSpinButtonComponent);

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

@@ -1,20 +1,24 @@
 import { __extends, __decorate, __param } from 'tslib';
-import { forwardRef, EventEmitter, Inject, Input, HostBinding, Output, ViewChild, ContentChildren, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Inject, Input, HostBinding, Output, ViewChild, ContentChildren, Component, ChangeDetectionStrategy, ElementRef, NgModule } from '@angular/core';
 import { TUI_FOCUSABLE_ITEM_ACCESSOR, isNativeFocused, setNativeFocused, tuiDefaultProp, tuiPure, AbstractTuiInteractive, TuiFocusableModule, TuiFocusedModule, 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 { getBorder, sizeBigger } from '@taiga-ui/core/utils/miscellaneous';
+import { getBorder } from '@taiga-ui/core/utils/miscellaneous';
 import { PolymorpheusOutletComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
-import { Observable } from 'rxjs';
+import { fromEvent, Observable, defer, EMPTY } from 'rxjs';
+import { map, startWith, distinctUntilChanged } from 'rxjs/operators';
 import { MODE_PROVIDER } from '@taiga-ui/core/providers';
 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';
 
 var TUI_PRIMITIVE_TEXTFIELD_PROVIDERS = [
     {
@@ -44,6 +48,7 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
         _this.readOnly = false;
         _this.invalid = false;
         _this.disabled = false;
+        _this.prefix = '';
         _this.postfix = '';
         _this.value = '';
         _this.valueChange = new EventEmitter();
@@ -103,131 +108,77 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasTooltip", {
-        get: function () {
-            return !!this.hintController && !!this.hintController.content && !this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasCustomContent", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasValue", {
         get: function () {
-            return !!this.controller.customContent;
+            return !!this.value;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconPaddingLeft", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasCleaner", {
         get: function () {
-            return this.size === 's' ? ICON_PADDING_S : ICON_PADDING;
+            return (this.controller.cleaner && this.hasValue && !this.disabled && !this.readOnly);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderLeft", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasTooltip", {
         get: function () {
-            return ((this.iconAlignLeft ? this.iconPaddingLeft : 0) +
-                getBorder(sizeBigger(this.size, 'm'), false));
+            var _a;
+            return !!((_a = this.hintController) === null || _a === void 0 ? void 0 : _a.content) && !this.disabled;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderRight", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasCustomContent", {
         get: function () {
-            return getBorder(sizeBigger(this.size, 'm'), this.iconAlignRight, this.hasCleaner, this.hasTooltip, this.hasCustomContent);
+            return !!this.controller.customContent;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasPlaceholder", {
         get: function () {
-            return ((this.big && !this.labelOutside) ||
-                (!this.hasValue && !this.hasExampleText && !this.hasPostfix));
+            var hasDecor = this.controller.exampleText || this.prefix || this.postfix;
+            var showDecor = hasDecor && !this.readOnly && this.computedFocused;
+            var placeholderVisible = !this.hasValue && !showDecor;
+            return this.placeholderRaisable || placeholderVisible;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "placeholderRaised", {
         get: function () {
-            return (this.big &&
-                !this.labelOutside &&
+            return (this.placeholderRaisable &&
                 ((this.computedFocused && !this.readOnly) || this.hasValue || this.autofilled));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconAlignLeft", {
-        get: function () {
-            return this.hasIcon && this.iconAlign === 'left';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconAlignRight", {
-        get: function () {
-            return this.hasIcon && this.iconAlign === 'right';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasValue", {
-        get: function () {
-            return !!this.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasCleaner", {
-        get: function () {
-            return (this.controller.cleaner && this.hasValue && !this.disabled && !this.readOnly);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "rightAligned", {
-        get: function () {
-            return (this.appearance === "table" /* Table */ &&
-                (this.controller.inputMode === 'numeric' ||
-                    this.controller.inputMode === 'decimal'));
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasValueDecoration", {
-        get: function () {
-            var fillerOrExampleShown = this.computedFocused && !this.readOnly && this.hasFillerOrExampleText;
-            return fillerOrExampleShown || this.hasPostfix;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasPostfix", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderLeft", {
         get: function () {
-            var isPostfixAllowed = this.hasValue || (this.computedFocused && !this.readOnly);
-            return isPostfixAllowed && !!this.postfix;
+            return this.iconAlignLeft ? this.iconPaddingLeft : 0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasFillerOrExampleText", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "borderRight", {
         get: function () {
-            return this.hasValue ? !!this.computedFiller : !!this.controller.exampleText;
+            return getBorder(this.iconAlignRight, this.hasCleaner, this.hasTooltip, this.hasCustomContent);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "postfixShifted", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconAlignLeft", {
         get: function () {
-            return this.postfix !== '%' && (this.hasFillerOrExampleText || this.hasValue);
+            return this.hasIcon && this.iconAlign === 'left';
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "computedFiller", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconAlignRight", {
         get: function () {
-            return this.hasExampleText
-                ? this.controller.exampleText
-                : this.filler.slice(this.value.length);
+            return this.hasIcon && this.iconAlign === 'right';
         },
         enumerable: true,
         configurable: true
@@ -242,13 +193,9 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "context", {
-        get: function () {
-            return this.getContext(this.size);
-        },
-        enumerable: true,
-        configurable: true
-    });
+    TuiPrimitiveTextfieldComponent.prototype.getIndent$ = function (element) {
+        return fromEvent(element, 'scroll').pipe(map(function () { return -1 * element.scrollLeft; }));
+    };
     TuiPrimitiveTextfieldComponent.prototype.clear = function () {
         if (this.nativeFocusableElement) {
             this.nativeFocusableElement.value = '';
@@ -275,33 +222,27 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
     TuiPrimitiveTextfieldComponent.prototype.onAutofilled = function (autofilled) {
         this.updateAutofilled(autofilled);
     };
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "big", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "iconPaddingLeft", {
         get: function () {
-            return this.size !== 's';
+            return this.size === 's' ? ICON_PADDING_S : ICON_PADDING;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasIcon", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "placeholderRaisable", {
         get: function () {
-            return !!this.iconContent;
+            return this.size !== 's' && !this.labelOutside;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasExampleText", {
+    Object.defineProperty(TuiPrimitiveTextfieldComponent.prototype, "hasIcon", {
         get: function () {
-            return (!!this.controller.exampleText &&
-                this.computedFocused &&
-                !this.hasValue &&
-                !this.readOnly);
+            return !!this.iconContent;
         },
         enumerable: true,
         configurable: true
     });
-    TuiPrimitiveTextfieldComponent.prototype.getContext = function ($implicit) {
-        return { $implicit: $implicit };
-    };
     TuiPrimitiveTextfieldComponent.prototype.updateAutofilled = function (autofilled) {
         if (this.autofilled === autofilled) {
             return;
@@ -348,6 +289,10 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
         Input(),
         tuiDefaultProp()
     ], TuiPrimitiveTextfieldComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiPrimitiveTextfieldComponent.prototype, "prefix", void 0);
     __decorate([
         Input(),
         tuiDefaultProp()
@@ -377,22 +322,19 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
     __decorate([
         HostBinding('class._invalid')
     ], TuiPrimitiveTextfieldComponent.prototype, "computedInvalid", null);
-    __decorate([
-        HostBinding('class._right-aligned')
-    ], TuiPrimitiveTextfieldComponent.prototype, "rightAligned", null);
     __decorate([
         tuiPure
-    ], TuiPrimitiveTextfieldComponent.prototype, "getContext", null);
+    ], 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.borderLeftWidth.rem]=\"borderLeft\"\n        [style.borderRightWidth.rem]=\"borderRight\"\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        (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        [style.paddingLeft.rem]=\"borderLeft\"\n        [style.borderRightWidth.rem]=\"borderRight\"\n    >\n        <ng-content select=\"[polymorpheus-outlet]\"></ng-content>\n    </div>\n    <div class=\"content\">\n        <div\n            polymorpheus-outlet\n            *ngIf=\"iconAlignLeft\"\n            class=\"icon icon_left\"\n            [content]=\"iconContent\"\n            [context]=\"context\"\n        >\n            <ng-template let-iconSrc>\n                <tui-svg [src]=\"iconSrc\"></tui-svg>\n            </ng-template>\n        </div>\n        <div class=\"wrapper\">\n            <span\n                [class.value_visible]=\"isContextTable\"\n                aria-hidden=\"true\"\n                class=\"value\"\n            >\n                {{value}}\n            </span>\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            <div\n                *ngIf=\"hasValueDecoration\"\n                class=\"value-decoration\"\n                automation-id=\"tui-primitive-textfield__value-decoration\"\n                aria-hidden=\"true\"\n            >\n                <span class=\"value-decoration-inner\">\n                    <span class=\"ghost\">{{value}}</span>\n                    <span automation-id=\"tui-primitive-textfield__example-text\"\n                        >{{computedFiller}}</span\n                    >\n                    <span\n                        *ngIf=\"hasPostfix\"\n                        class=\"postfix\"\n                        [class.postfix_shifted]=\"postfixShifted\"\n                        >{{postfix}}</span\n                    >\n                </span>\n            </div>\n        </div>\n        <div\n            polymorpheus-outlet\n            *ngIf=\"hasCustomContent\"\n            class=\"custom-content\"\n            automation-id=\"tui-primitive-textfield__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            class=\"cleaner\"\n            automation-id=\"tui-primitive-textfield__cleaner\"\n            src=\"tuiIconCloseLarge\"\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            polymorpheus-outlet\n            *ngIf=\"iconAlignRight\"\n            class=\"icon\"\n            [content]=\"iconContent\"\n            [context]=\"context\"\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    (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            <span\n                aria-hidden=\"true\"\n                class=\"value\"\n                [class.value_visible]=\"isContextTable\"\n            >\n                {{ value }}\n            </span>\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",
             changeDetection: ChangeDetectionStrategy.OnPush,
             providers: TUI_PRIMITIVE_TEXTFIELD_PROVIDERS,
             host: {
                 '($.data-mode.attr)': 'mode$',
             },
-            styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m)}: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);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;border:solid transparent;border-width:0 .75rem;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{border-width:0 5rem 0 .75rem}:host[data-tui-host-size='l'] .input{border-width:0 1rem}: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{width:114%;transform:translateY(-.625rem) scale(.87)}: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{width:118%;transform:translateY(-.5rem) scale(.85)}.ghost{visibility:hidden;white-space:pre;text-overflow:clip}.filler{vertical-align:middle}.content{display:flex;height:100%;width:100%;padding:0 .75rem;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-tui-host-size='s'] .content{padding-right:.5rem}:host[data-tui-host-size='l'] .content{padding-left:1rem}.wrapper{flex:1;min-width:0;padding-right:.25rem}.value-decoration{display:flex;align-items:center;height:1.25rem;margin:-1.25rem 0;padding:.625rem 0;box-sizing:content-box;color:var(--tui-text-03);letter-spacing:normal;text-transform:none}:host._right-aligned .value-decoration{flex-direction:row-reverse;margin-right:-.25rem}:host[data-tui-host-size='m']._label-outside .value-decoration{margin-top:-1.1875rem}:host[data-mode=onDark] .value-decoration{color:var(--tui-text-03-night)}.value-decoration-inner{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.postfix{transition-property:color;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;color:var(--tui-text-01)}.postfix_shifted{margin-left:.5ch}:host[data-mode=onDark] .postfix{color:var(--tui-text-01-night)}.placeholder{transition-property:transform,min-width,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%;height:1.25rem;font-size:.8125rem;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;color:var(--tui-text-02);transform-origin:left;letter-spacing:normal;text-transform:none}.placeholder_raised{width:114%;transform:translateY(-.625rem) scale(.87)}:host[data-tui-host-size='m'] .placeholder_raised{width:118%;transform:translateY(-.5rem) scale(.85);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']._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}:host[data-tui-host-size='s'] .icon_left{margin-right:.25rem}.value{height:0;display:none;visibility:hidden;white-space:pre}.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;padding-right:0;border:0 solid transparent;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-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{display:none;height:0;visibility:hidden;white-space:pre}.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}"]
         }),
         __param(0, Inject(TUI_MODE)),
         __param(1, Inject(TUI_TEXTFIELD_APPEARANCE)),
@@ -402,6 +344,97 @@ var TuiPrimitiveTextfieldComponent = /** @class */ (function (_super) {
     return TuiPrimitiveTextfieldComponent;
 }(AbstractTuiInteractive));
 
+var TuiValueDecorationComponent = /** @class */ (function () {
+    function TuiValueDecorationComponent(textfield, controller) {
+        var _this = this;
+        this.textfield = textfield;
+        this.controller = controller;
+        this.pre$ = defer(function () { var _a, _b; return (_b = (_a = _this.directive) === null || _a === void 0 ? void 0 : _a.waMutationObserver) !== null && _b !== void 0 ? _b : EMPTY; }).pipe(map(function () { var _a, _b; return (_b = (_a = _this.pre) === null || _a === void 0 ? void 0 : _a.nativeElement.offsetWidth) !== null && _b !== void 0 ? _b : 0; }), startWith(0), distinctUntilChanged());
+    }
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "value", {
+        get: function () {
+            return this.textfield.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "filler", {
+        get: function () {
+            return this.focused
+                ? this.exampleText || this.textfield.filler.slice(this.value.length)
+                : '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "prefix", {
+        get: function () {
+            return this.decorationsVisible ? this.textfield.prefix : '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "postfix", {
+        get: function () {
+            return this.decorationsVisible ? this.computedPostfix : '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "exampleText", {
+        get: function () {
+            return !this.value && this.focused ? this.controller.exampleText : '';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "decorationsVisible", {
+        get: function () {
+            return !!this.value || this.focused;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "focused", {
+        get: function () {
+            return this.textfield.computedFocused && !this.textfield.readOnly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiValueDecorationComponent.prototype, "computedPostfix", {
+        get: function () {
+            return this.textfield.postfix && (this.filler || this.value)
+                ? " " + this.textfield.postfix
+                : this.textfield.postfix;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TuiValueDecorationComponent.ctorParameters = function () { return [
+        { type: TuiPrimitiveTextfieldComponent, decorators: [{ type: Inject, args: [TuiPrimitiveTextfieldComponent,] }] },
+        { type: TuiTextfieldController$1, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_WATCHED_CONTROLLER$1,] }] }
+    ]; };
+    __decorate([
+        ViewChild('pre', { read: ElementRef, static: true })
+    ], TuiValueDecorationComponent.prototype, "pre", void 0);
+    __decorate([
+        ViewChild(MutationObserverDirective, { static: true })
+    ], TuiValueDecorationComponent.prototype, "directive", void 0);
+    TuiValueDecorationComponent = __decorate([
+        Component({
+            selector: 'tui-value-decoration',
+            template: "<span #pre subtree characterData waMutationObserver>{{ prefix }}</span>\n<span class=\"t-ghost\">{{ value }}</span>\n<span class=\"t-filler\">{{ filler }}</span>\n{{ postfix }}\n",
+            // It follows Change Detection of PrimitiveTextfield
+            changeDetection: ChangeDetectionStrategy.Default,
+            styles: [":host{display:block;height:1.25rem;margin:-1.25rem 0;padding:.625rem 0;box-sizing:content-box;color:var(--tui-text-01);white-space:nowrap;overflow:hidden}:host-context(tui-textfield[data-mode=onDark]) :host{color:var(--tui-text-01-night)}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip}.t-filler{color:var(--tui-text-03)}:host-context(tui-textfield[data-mode=onDark]) .t-filler{color:var(--tui-text-03-night)}"]
+        }),
+        __param(0, Inject(TuiPrimitiveTextfieldComponent)),
+        __param(1, Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER$1))
+    ], TuiValueDecorationComponent);
+    return TuiValueDecorationComponent;
+}());
+
 var TuiPrimitiveTextfieldModule = /** @class */ (function () {
     function TuiPrimitiveTextfieldModule() {
     }
@@ -422,8 +455,10 @@ var TuiPrimitiveTextfieldModule = /** @class */ (function () {
                 TuiAutofilledModule,
                 TuiDescribedByModule,
                 TuiPreventDefaultModule,
+                TuiBorderModule,
+                MutationObserverModule,
             ],
-            declarations: [TuiPrimitiveTextfieldComponent],
+            declarations: [TuiPrimitiveTextfieldComponent, TuiValueDecorationComponent],
             exports: [TuiPrimitiveTextfieldComponent],
         })
     ], TuiPrimitiveTextfieldModule);
@@ -434,5 +469,5 @@ var TuiPrimitiveTextfieldModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_PRIMITIVE_TEXTFIELD_PROVIDERS, TuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldModule };
+export { TUI_PRIMITIVE_TEXTFIELD_PROVIDERS, TuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldModule, TuiValueDecorationComponent };
 //# sourceMappingURL=taiga-ui-core-components-primitive-textfield.js.map