@taiga-ui/kit 2.35.0 → 2.36.0

package/fesm5/taiga-ui-kit-components-line-clamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-line-clamp.js","sources":["ng://@taiga-ui/kit/components/line-clamp/line-clamp.component.ts","ng://@taiga-ui/kit/components/line-clamp/line-clamp.directive.ts","ng://@taiga-ui/kit/components/line-clamp/line-clamp.module.ts","ng://@taiga-ui/kit/components/line-clamp/taiga-ui-kit-components-line-clamp.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    NgZone,\n    Renderer2,\n    ViewChild,\n} from '@angular/core';\nimport {isCurrentTarget, tuiDefaultProp, tuiPure, typedFromEvent} from '@taiga-ui/cdk';\nimport {PolymorpheusContent, PolymorpheusOutletComponent} from '@tinkoff/ng-polymorpheus';\nimport {BehaviorSubject, Observable, of} from 'rxjs';\nimport {filter, mapTo, pairwise, startWith, switchMap} from 'rxjs/operators';\n\n@Component({\n    selector: 'tui-line-clamp',\n    templateUrl: './line-clamp.template.html',\n    styleUrls: ['./line-clamp.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiLineClampComponent implements AfterViewInit {\n    @ViewChild(PolymorpheusOutletComponent, {read: ElementRef})\n    private readonly outlet?: ElementRef<HTMLElement>;\n\n    private readonly linesLimit$ = new BehaviorSubject(1);\n    private initialized = false;\n\n    @Input()\n    @tuiDefaultProp()\n    set linesLimit(linesLimit: number) {\n        this.linesLimit$.next(linesLimit);\n    }\n\n    @Input()\n    @tuiDefaultProp()\n    lineHeight = 24;\n\n    @Input()\n    @tuiDefaultProp()\n    content: PolymorpheusContent = '';\n\n    constructor(\n        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,\n        @Inject(Renderer2) private readonly renderer: Renderer2,\n        @Inject(ChangeDetectorRef) private readonly cd: ChangeDetectorRef,\n        @Inject(NgZone) private readonly ngZone: NgZone,\n    ) {\n        this.skipInitialTransition();\n    }\n\n    @tuiPure\n    get lineClamp$(): Observable<number> {\n        return this.linesLimit$.pipe(\n            startWith(1),\n            pairwise(),\n            switchMap(([prev, next]) =>\n                next >= prev\n                    ? of(next)\n                    : typedFromEvent(this.elementRef.nativeElement, 'transitionend').pipe(\n                          filter(isCurrentTarget),\n                          mapTo(next),\n                      ),\n            ),\n        );\n    }\n\n    get overflown(): boolean {\n        if (!this.outlet) {\n            return false;\n        }\n\n        const {scrollHeight, scrollWidth} = this.outlet.nativeElement;\n        const {clientHeight, clientWidth} = this.elementRef.nativeElement;\n\n        // 4px buffer for IE/Edge incorrectly rounding scrollHeight\n        return scrollHeight - clientHeight > 4 || scrollWidth - clientWidth > 0;\n    }\n\n    get computedContent(): PolymorpheusContent {\n        return this.overflown ? this.content : '';\n    }\n\n    get oneLine(): boolean {\n        return this.linesLimit$.value === 1;\n    }\n\n    @HostBinding('style.maxHeight.px')\n    get maxHeight(): number | null {\n        return this.initialized ? this.lineHeight * this.linesLimit$.value : null;\n    }\n\n    @HostBinding('style.height.px')\n    get height(): number | null {\n        return !this.outlet ? 0 : this.outlet.nativeElement.scrollHeight + 4 || null;\n    }\n\n    updateView() {\n        this.cd.detectChanges();\n    }\n\n    ngAfterViewInit() {\n        this.initialized = true;\n    }\n\n    private skipInitialTransition() {\n        this.ngZone.runOutsideAngular(() => {\n            setTimeout(() => {\n                this.renderer.addClass(this.elementRef.nativeElement, '_initialized');\n                this.cd.detectChanges();\n            });\n        });\n    }\n}\n","import {DOCUMENT} from '@angular/common';\nimport {\n    Directive,\n    ElementRef,\n    Inject,\n    NgZone,\n    Renderer2,\n    ViewContainerRef,\n} from '@angular/core';\nimport {ANIMATION_FRAME, CSS} from '@ng-web-apis/common';\nimport {CHAR_ELLIPSIS, TuiDestroyService, tuiZonefree} from '@taiga-ui/cdk';\nimport {setRangeOffset} from '@taiga-ui/kit/utils/dom';\nimport {Observable} from 'rxjs';\nimport {map, takeUntil} from 'rxjs/operators';\n\nimport {TuiLineClampComponent} from './line-clamp.component';\n\nconst HIDDEN_LEFT = -200;\n\n// @dynamic\n@Directive({\n    selector: '[lineClamp]',\n    providers: [TuiDestroyService],\n})\nexport class TuiLineClampDirective {\n    constructor(\n        @Inject(TuiLineClampComponent) component: TuiLineClampComponent,\n        @Inject(ViewContainerRef) viewContainerRef: ViewContainerRef,\n        @Inject(DOCUMENT) documentRef: Document,\n        @Inject(Renderer2) renderer: Renderer2,\n        @Inject(NgZone) ngZone: NgZone,\n        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,\n        @Inject(TuiDestroyService) destroy$: TuiDestroyService,\n        @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,\n        /**\n         * TODO: remove \"any\" in new TS version; https://github.com/ng-web-apis/common/pull/6\n         */\n        @Inject(CSS) cssRef: any,\n    ) {\n        if (\n            cssRef.supports('-webkit-line-clamp', '1') ||\n            !(nativeElement.parentElement instanceof HTMLElement)\n        ) {\n            return;\n        }\n\n        const range = documentRef.createRange();\n        const ellipsis: HTMLElement = renderer.createElement('div');\n        const {parentElement} = nativeElement;\n        const {style} = ellipsis;\n\n        style.position = 'absolute';\n        style.bottom = '0';\n        style.left = `${HIDDEN_LEFT}px`;\n        ellipsis.textContent = CHAR_ELLIPSIS;\n\n        viewContainerRef.element.nativeElement.appendChild(ellipsis);\n\n        animationFrame$\n            .pipe(\n                map(() => {\n                    // 4px buffer for IE/Edge incorrectly rounding scrollHeight\n                    if (\n                        component.oneLine ||\n                        nativeElement.scrollHeight - parentElement.clientHeight < 4\n                    ) {\n                        return HIDDEN_LEFT;\n                    }\n\n                    let result = 0;\n                    const length = nativeElement.textContent\n                        ? nativeElement.textContent.length\n                        : 0;\n\n                    for (let char = 0; char < length - 2; char++) {\n                        setRangeOffset(range, nativeElement, char, 'setStart');\n                        setRangeOffset(range, nativeElement, char + 1, 'setEnd');\n\n                        const rangeRect = range.getBoundingClientRect();\n                        const clientRect = parentElement.getBoundingClientRect();\n\n                        if (Math.round(rangeRect.top - clientRect.bottom) >= 0) {\n                            break;\n                        }\n\n                        result = rangeRect.right - clientRect.left;\n                    }\n\n                    return result;\n                }),\n                tuiZonefree(ngZone),\n                takeUntil(destroy$),\n            )\n            .subscribe(left => {\n                style.left = `${left}px`;\n            });\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiResizeModule} from '@taiga-ui/cdk';\nimport {TuiHintModule} from '@taiga-ui/core';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiLineClampComponent} from './line-clamp.component';\nimport {TuiLineClampDirective} from './line-clamp.directive';\n\n@NgModule({\n    imports: [CommonModule, PolymorpheusModule, TuiHintModule, TuiResizeModule],\n    declarations: [TuiLineClampComponent, TuiLineClampDirective],\n    exports: [TuiLineClampComponent],\n})\nexport class TuiLineClampModule {}\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-kit-components-line-clamp.js","sources":["ng://@taiga-ui/kit/components/line-clamp/line-clamp.component.ts","ng://@taiga-ui/kit/components/line-clamp/line-clamp.directive.ts","ng://@taiga-ui/kit/components/line-clamp/line-clamp.module.ts","ng://@taiga-ui/kit/components/line-clamp/taiga-ui-kit-components-line-clamp.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    NgZone,\n    Renderer2,\n    ViewChild,\n} from '@angular/core';\nimport {isCurrentTarget, tuiDefaultProp, tuiPure, typedFromEvent} from '@taiga-ui/cdk';\nimport {PolymorpheusContent, PolymorpheusOutletComponent} from '@tinkoff/ng-polymorpheus';\nimport {BehaviorSubject, Observable, of} from 'rxjs';\nimport {filter, mapTo, pairwise, startWith, switchMap} from 'rxjs/operators';\n\n@Component({\n    selector: 'tui-line-clamp',\n    templateUrl: './line-clamp.template.html',\n    styleUrls: ['./line-clamp.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiLineClampComponent implements AfterViewInit {\n    @ViewChild(PolymorpheusOutletComponent, {read: ElementRef})\n    private readonly outlet?: ElementRef<HTMLElement>;\n\n    private readonly linesLimit$ = new BehaviorSubject(1);\n    private initialized = false;\n\n    @Input()\n    @tuiDefaultProp()\n    set linesLimit(linesLimit: number) {\n        this.linesLimit$.next(linesLimit);\n    }\n\n    @Input()\n    @tuiDefaultProp()\n    lineHeight = 24;\n\n    @Input()\n    @tuiDefaultProp()\n    content: PolymorpheusContent = '';\n\n    constructor(\n        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,\n        @Inject(Renderer2) private readonly renderer: Renderer2,\n        @Inject(ChangeDetectorRef) private readonly cd: ChangeDetectorRef,\n        @Inject(NgZone) private readonly ngZone: NgZone,\n    ) {\n        this.skipInitialTransition();\n    }\n\n    @tuiPure\n    get lineClamp$(): Observable<number> {\n        return this.linesLimit$.pipe(\n            startWith(1),\n            pairwise(),\n            switchMap(([prev, next]) =>\n                next >= prev\n                    ? of(next)\n                    : typedFromEvent(this.elementRef.nativeElement, 'transitionend').pipe(\n                          filter(isCurrentTarget),\n                          mapTo(next),\n                      ),\n            ),\n        );\n    }\n\n    get overflown(): boolean {\n        if (!this.outlet) {\n            return false;\n        }\n\n        const {scrollHeight, scrollWidth} = this.outlet.nativeElement;\n        const {clientHeight, clientWidth} = this.elementRef.nativeElement;\n\n        // 4px buffer for IE/Edge incorrectly rounding scrollHeight\n        return scrollHeight - clientHeight > 4 || scrollWidth - clientWidth > 0;\n    }\n\n    get computedContent(): PolymorpheusContent {\n        return this.overflown ? this.content : '';\n    }\n\n    get oneLine(): boolean {\n        return this.linesLimit$.value === 1;\n    }\n\n    @HostBinding('style.maxHeight.px')\n    get maxHeight(): number | null {\n        return this.initialized ? this.lineHeight * this.linesLimit$.value : null;\n    }\n\n    @HostBinding('style.height.px')\n    get height(): number | null {\n        return !this.outlet ? 0 : this.outlet.nativeElement.scrollHeight + 4 || null;\n    }\n\n    updateView() {\n        this.cd.detectChanges();\n    }\n\n    ngAfterViewInit() {\n        this.initialized = true;\n    }\n\n    private skipInitialTransition() {\n        this.ngZone.runOutsideAngular(() => {\n            setTimeout(() => {\n                this.renderer.addClass(this.elementRef.nativeElement, '_initialized');\n                this.cd.detectChanges();\n            });\n        });\n    }\n}\n","import {DOCUMENT} from '@angular/common';\nimport {\n    Directive,\n    ElementRef,\n    Inject,\n    NgZone,\n    Renderer2,\n    ViewContainerRef,\n} from '@angular/core';\nimport {ANIMATION_FRAME, CSS} from '@ng-web-apis/common';\nimport {CHAR_ELLIPSIS, TuiDestroyService, tuiZonefree} from '@taiga-ui/cdk';\nimport {setRangeOffset} from '@taiga-ui/kit/utils/dom';\nimport {Observable} from 'rxjs';\nimport {map, takeUntil} from 'rxjs/operators';\n\nimport {TuiLineClampComponent} from './line-clamp.component';\n\nconst HIDDEN_LEFT = -200;\n\n// @dynamic\n@Directive({\n    selector: '[lineClamp]',\n    providers: [TuiDestroyService],\n})\nexport class TuiLineClampDirective {\n    constructor(\n        @Inject(TuiLineClampComponent) component: TuiLineClampComponent,\n        @Inject(ViewContainerRef) viewContainerRef: ViewContainerRef,\n        @Inject(DOCUMENT) documentRef: Document,\n        @Inject(Renderer2) renderer: Renderer2,\n        @Inject(NgZone) ngZone: NgZone,\n        @Inject(ElementRef) {nativeElement}: ElementRef<HTMLElement>,\n        @Inject(TuiDestroyService) destroy$: TuiDestroyService,\n        @Inject(ANIMATION_FRAME) animationFrame$: Observable<number>,\n        /**\n         * TODO: remove \"any\" in new TS version; https://github.com/ng-web-apis/common/pull/6\n         */\n        @Inject(CSS) cssRef: any,\n    ) {\n        if (\n            cssRef.supports('-webkit-line-clamp', '1') ||\n            !documentRef.createRange ||\n            !(nativeElement.parentElement instanceof HTMLElement)\n        ) {\n            return;\n        }\n\n        const range = documentRef.createRange();\n        const ellipsis: HTMLElement = renderer.createElement('div');\n        const {parentElement} = nativeElement;\n        const {style} = ellipsis;\n\n        style.position = 'absolute';\n        style.bottom = '0';\n        style.left = `${HIDDEN_LEFT}px`;\n        ellipsis.textContent = CHAR_ELLIPSIS;\n\n        viewContainerRef.element.nativeElement.appendChild(ellipsis);\n\n        animationFrame$\n            .pipe(\n                map(() => {\n                    // 4px buffer for IE/Edge incorrectly rounding scrollHeight\n                    if (\n                        component.oneLine ||\n                        nativeElement.scrollHeight - parentElement.clientHeight < 4\n                    ) {\n                        return HIDDEN_LEFT;\n                    }\n\n                    let result = 0;\n                    const length = nativeElement.textContent\n                        ? nativeElement.textContent.length\n                        : 0;\n\n                    for (let char = 0; char < length - 2; char++) {\n                        setRangeOffset(range, nativeElement, char, 'setStart');\n                        setRangeOffset(range, nativeElement, char + 1, 'setEnd');\n\n                        const rangeRect = range.getBoundingClientRect();\n                        const clientRect = parentElement.getBoundingClientRect();\n\n                        if (Math.round(rangeRect.top - clientRect.bottom) >= 0) {\n                            break;\n                        }\n\n                        result = rangeRect.right - clientRect.left;\n                    }\n\n                    return result;\n                }),\n                tuiZonefree(ngZone),\n                takeUntil(destroy$),\n            )\n            .subscribe(left => {\n                style.left = `${left}px`;\n            });\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {TuiResizeModule} from '@taiga-ui/cdk';\nimport {TuiHintModule} from '@taiga-ui/core';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {TuiLineClampComponent} from './line-clamp.component';\nimport {TuiLineClampDirective} from './line-clamp.directive';\n\n@NgModule({\n    imports: [CommonModule, PolymorpheusModule, TuiHintModule, TuiResizeModule],\n    declarations: [TuiLineClampComponent, TuiLineClampDirective],\n    exports: [TuiLineClampComponent],\n})\nexport class TuiLineClampModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm5/taiga-ui-kit-components-slider.js

@@ -1,8 +1,8 @@
-import { __decorate, __param, __extends } from 'tslib';
-import { Optional, Self, Inject, ChangeDetectorRef, ElementRef, Input, HostBinding, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
+import { __assign, __decorate, __param, __extends, __read } from 'tslib';
+import { InjectionToken, Optional, Self, Inject, ChangeDetectorRef, ElementRef, Input, HostBinding, Component, ChangeDetectionStrategy, HostListener, Directive, forwardRef, NgModule } from '@angular/core';
 import { NgModel, NgControl } from '@angular/forms';
 import { USER_AGENT } from '@ng-web-apis/common';
-import { watch, isEdgeOlderThan, CHROMIUM_EDGE_START_VERSION, tuiDefaultProp, isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiRepeatTimesModule, TuiFocusableModule, TuiFocusVisibleModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
+import { watch, isEdgeOlderThan, CHROMIUM_EDGE_START_VERSION, tuiDefaultProp, isNativeFocused, AbstractTuiControl, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiRepeatTimesModule, TuiFocusableModule, TuiFocusVisibleModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
 import { take } from 'rxjs/operators';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { TuiFormatNumberPipeModule } from '@taiga-ui/core';
@@ -10,12 +10,23 @@ import { AbstractTuiSlider } from '@taiga-ui/kit/abstract';
 import { TUI_FROM_TO_TEXTS } from '@taiga-ui/kit/tokens';
 import { Observable } from 'rxjs';
 
+var TUI_SLIDER_DEFAULT_OPTIONS = {
+    size: 'm',
+    trackColor: 'var(--tui-base-03)',
+};
+var TUI_SLIDER_OPTIONS = new InjectionToken('Default parameters for Slider component', { factory: function () { return TUI_SLIDER_DEFAULT_OPTIONS; } });
+var tuiSliderOptionsProvider = function (options) { return ({
+    provide: TUI_SLIDER_OPTIONS,
+    useValue: __assign(__assign({}, TUI_SLIDER_DEFAULT_OPTIONS), options),
+}); };
+
 var TuiSliderComponent = /** @class */ (function () {
-    function TuiSliderComponent(control, changeDetectorRef, elementRef, userAgent) {
+    function TuiSliderComponent(control, changeDetectorRef, options, elementRef, userAgent) {
         var _a;
+        this.options = options;
         this.elementRef = elementRef;
         this.userAgent = userAgent;
-        this.size = 'm';
+        this.size = this.options.size;
         this.segments = 1;
         if (control instanceof NgModel) {
             /**
@@ -53,19 +64,22 @@ var TuiSliderComponent = /** @class */ (function () {
         get: function () {
             return Number(this.elementRef.nativeElement.value) || 0;
         },
+        set: function (newValue) {
+            this.elementRef.nativeElement.value = "" + newValue;
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiSliderComponent.prototype, "fillPercentage", {
+    Object.defineProperty(TuiSliderComponent.prototype, "valuePercentage", {
         get: function () {
             return (100 * this.value) / (this.max - this.min);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(TuiSliderComponent.prototype, "stepPercentage", {
+    Object.defineProperty(TuiSliderComponent.prototype, "segmentWidth", {
         get: function () {
-            return 100 / this.segments - 0.1;
+            return 100 / Math.max(1, this.segments);
         },
         enumerable: true,
         configurable: true
@@ -80,6 +94,7 @@ var TuiSliderComponent = /** @class */ (function () {
     TuiSliderComponent.ctorParameters = function () { return [
         { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
         { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
+        { type: undefined, decorators: [{ type: Inject, args: [TUI_SLIDER_OPTIONS,] }] },
         { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
         { type: String, decorators: [{ type: Inject, args: [USER_AGENT,] }] }
     ]; };
@@ -94,10 +109,10 @@ var TuiSliderComponent = /** @class */ (function () {
     ], TuiSliderComponent.prototype, "segments", void 0);
     __decorate([
         HostBinding('style.--tui-slider-fill-percentage.%')
-    ], TuiSliderComponent.prototype, "fillPercentage", null);
+    ], TuiSliderComponent.prototype, "valuePercentage", null);
     __decorate([
         HostBinding('style.--tui-slider-segment-width.%')
-    ], TuiSliderComponent.prototype, "stepPercentage", null);
+    ], TuiSliderComponent.prototype, "segmentWidth", null);
     __decorate([
         HostBinding('class._old-edge')
     ], TuiSliderComponent.prototype, "isOldEdge", null);
@@ -119,20 +134,118 @@ var TuiSliderComponent = /** @class */ (function () {
                  * This function triggers change detection (for `fillPercentage` function) when we drag thumb of the input.
                  */
                 '(input)': '0',
+                '[style.--tui-slider-track-color]': 'options.trackColor',
             },
             changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [":host{display:block;width:100%;color:var(--tui-primary);cursor:pointer}:host:disabled{opacity:var(--tui-disabled-opacity);cursor:auto}:host:not(._old-edge){-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.125rem;padding:.4375rem 0;background:var(--tui-base-03);background-clip:content-box;outline:0}:host:not(._old-edge)::-webkit-slider-runnable-track{height:.125rem;border-radius:var(--tui-radius-m);background:linear-gradient(to right,currentColor 0 .25rem,transparent .25rem),linear-gradient(to left,var(--tui-base-03) 0 .25rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent .25rem var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage))}:host:not(._old-edge)::-moz-range-track{height:.125rem;border-radius:var(--tui-radius-m);background:linear-gradient(to right,currentColor 0 .25rem,transparent .25rem),linear-gradient(to left,var(--tui-base-03) 0 .25rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent .25rem var(--tui-slider-segment-width))}:host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem;margin-top:-.4375rem}:not(:disabled):host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem;margin-top:-.1875rem}:not(:disabled):host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='m']::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem}:not(:disabled):host:not(._old-edge)[data-size='m']::-moz-range-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='m']::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='s']::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem}:not(:disabled):host:not(._old-edge)[data-size='s']::-moz-range-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='s']::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)::-moz-range-progress{background:currentColor}:host._old-edge::-ms-thumb{background:currentColor}:host._old-edge::-ms-fill-lower{background:currentColor}:host._old-edge::-ms-track{background:var(--tui-base-03)}"]
+            styles: [":host{display:block;width:100%;color:var(--tui-primary);cursor:pointer}:host:disabled{opacity:var(--tui-disabled-opacity);cursor:auto}:host:not(._old-edge){-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.125rem;padding:.4375rem 0;background:var(--tui-slider-track-color);background-clip:content-box;outline:0;border-radius:var(--tui-radius-m)}:host:not(._old-edge)::-webkit-slider-container{border-radius:inherit}:host:not(._old-edge)[data-size='m']::-webkit-slider-runnable-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-image:linear-gradient(to right,currentColor 0 .625rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage));background-position-x:0,.375rem,0;background-size:calc(100% - 1rem),calc(100% - 1rem),auto}:host:not(._old-edge)[data-size='s']::-webkit-slider-runnable-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-image:linear-gradient(to right,currentColor 0 .375rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width)),linear-gradient(to right,currentColor var(--tui-slider-fill-percentage),transparent var(--tui-slider-fill-percentage));background-position-x:0,.125rem,0;background-size:calc(100% - .5rem),calc(100% - .5rem),auto}:host:not(._old-edge)[data-size='m']::-moz-range-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-image:linear-gradient(to right,currentColor 0 .625rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width));background-position-x:0,.375rem;background-size:calc(100% - 1rem)}:host:not(._old-edge)[data-size='s']::-moz-range-track{height:.125rem;border-radius:inherit;background-repeat:no-repeat;background-image:linear-gradient(to right,currentColor 0 .375rem,transparent .25rem),repeating-linear-gradient(to right,var(--tui-base-07) 0 .25rem,transparent 0 var(--tui-slider-segment-width));background-position-x:0,.125rem;background-size:calc(100% - .5rem)}:host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem;margin-top:-.4375rem}:not(:disabled):host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='m']::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem;margin-top:-.1875rem}:not(:disabled):host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='s']::-webkit-slider-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='m']::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:1rem;width:1rem}:not(:disabled):host:not(._old-edge)[data-size='m']::-moz-range-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='m']::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)[data-size='s']::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border:none;border-radius:50%;height:.5rem;width:.5rem}:not(:disabled):host:not(._old-edge)[data-size='s']::-moz-range-thumb{cursor:ew-resize}:focus-visible:host:not(._old-edge)[data-size='s']::-moz-range-thumb{box-shadow:0 0 0 2px inset var(--tui-focus)}:host:not(._old-edge)::-moz-range-progress{background:currentColor;border-radius:inherit;border-top-right-radius:0;border-bottom-right-radius:0}:host._old-edge::-ms-thumb{background:currentColor}:host._old-edge::-ms-fill-lower{background:currentColor}:host._old-edge::-ms-track{background:var(--tui-slider-track-color)}"]
         }),
         __param(0, Optional()),
         __param(0, Self()),
         __param(0, Inject(NgControl)),
         __param(1, Inject(ChangeDetectorRef)),
-        __param(2, Inject(ElementRef)),
-        __param(3, Inject(USER_AGENT))
+        __param(2, Inject(TUI_SLIDER_OPTIONS)),
+        __param(3, Inject(ElementRef)),
+        __param(4, Inject(USER_AGENT))
     ], TuiSliderComponent);
     return TuiSliderComponent;
 }());
 
+// @dynamic
+var TuiSliderKeyStepsDirective = /** @class */ (function (_super) {
+    __extends(TuiSliderKeyStepsDirective, _super);
+    function TuiSliderKeyStepsDirective(control, changeDetectorRef, elementRef, slider) {
+        var _this = _super.call(this, control, changeDetectorRef) || this;
+        _this.elementRef = elementRef;
+        _this.slider = slider;
+        _this.keySteps = [];
+        return _this;
+    }
+    Object.defineProperty(TuiSliderKeyStepsDirective.prototype, "nativeFocusableElement", {
+        get: function () {
+            return this.computedDisabled ? null : this.elementRef.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiSliderKeyStepsDirective.prototype, "focused", {
+        get: function () {
+            return isNativeFocused(this.nativeFocusableElement);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TuiSliderKeyStepsDirective.prototype.onInput = function () {
+        var valuePercentage = this.slider.valuePercentage;
+        var _a = __read(findKeyStepsBoundariesByFn(this.keySteps, function (_a) {
+            var _b = __read(_a, 2), keyStepPercentage = _b[0], _ = _b[1];
+            return valuePercentage <= keyStepPercentage;
+        }), 2), lowerStep = _a[0], upperStep = _a[1];
+        var newControlValue = transformToControlValue(valuePercentage, lowerStep, upperStep);
+        this.updateValue(newControlValue);
+    };
+    TuiSliderKeyStepsDirective.prototype.writeValue = function (controlValue) {
+        if (controlValue === null) {
+            return;
+        }
+        var _a = __read(findKeyStepsBoundariesByFn(this.keySteps, function (_a) {
+            var _b = __read(_a, 2), _ = _b[0], keyStepValue = _b[1];
+            return controlValue <= keyStepValue;
+        }), 2), lowerStep = _a[0], upperStep = _a[1];
+        this.slider.value = this.transformToNativeValue(controlValue, lowerStep, upperStep);
+    };
+    TuiSliderKeyStepsDirective.prototype.getFallbackValue = function () {
+        return 0;
+    };
+    TuiSliderKeyStepsDirective.prototype.transformToNativeValue = function (controlValue, _a, _b) {
+        var _c = __read(_a, 2), upperStepPercent = _c[0], upperStepValue = _c[1];
+        var _d = __read(_b, 2), lowerStepPercent = _d[0], lowerStepValue = _d[1];
+        var _e = this.slider, min = _e.min, max = _e.max;
+        var ratio = (controlValue - lowerStepValue) / (upperStepValue - lowerStepValue);
+        var newValuePercentage = (upperStepPercent - lowerStepPercent) * ratio + lowerStepPercent;
+        return (newValuePercentage * (max - min)) / 100;
+    };
+    TuiSliderKeyStepsDirective.ctorParameters = function () { return [
+        { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
+        { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
+        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+        { type: TuiSliderComponent, decorators: [{ type: Inject, args: [TuiSliderComponent,] }] }
+    ]; };
+    __decorate([
+        Input(),
+        tuiDefaultProp(checkHasMinMaxPercents, 'Should contain min and max values')
+    ], TuiSliderKeyStepsDirective.prototype, "keySteps", void 0);
+    __decorate([
+        HostListener('change')
+    ], TuiSliderKeyStepsDirective.prototype, "onInput", null);
+    TuiSliderKeyStepsDirective = __decorate([
+        Directive({
+            selector: 'input[tuiSlider][keySteps]',
+        }),
+        __param(0, Optional()),
+        __param(0, Self()),
+        __param(0, Inject(NgControl)),
+        __param(1, Inject(ChangeDetectorRef)),
+        __param(2, Inject(ElementRef)),
+        __param(3, Inject(TuiSliderComponent))
+    ], TuiSliderKeyStepsDirective);
+    return TuiSliderKeyStepsDirective;
+}(AbstractTuiControl));
+function checkHasMinMaxPercents(steps) {
+    return !steps.length || (steps[0][0] === 0 && steps[steps.length - 1][0] === 100);
+}
+function findKeyStepsBoundariesByFn(keySteps, fn) {
+    var keyStepUpperIndex = keySteps.findIndex(function (ketStep, i) { return i && fn(ketStep); });
+    var lowerStep = keySteps[keyStepUpperIndex - 1];
+    var upperStep = keySteps[keyStepUpperIndex];
+    return [lowerStep, upperStep];
+}
+function transformToControlValue(valuePercentage, _a, _b) {
+    var _c = __read(_a, 2), upperStepPercent = _c[0], upperStepValue = _c[1];
+    var _d = __read(_b, 2), lowerStepPercent = _d[0], lowerStepValue = _d[1];
+    var ratio = (valuePercentage - lowerStepPercent) / (upperStepPercent - lowerStepPercent);
+    return (upperStepValue - lowerStepValue) * ratio + lowerStepValue;
+}
+
 /**
  * @deprecated use {@link TuiSliderComponent} instead
  * TODO remove in 3.0
@@ -227,8 +340,8 @@ var TuiSliderModule = /** @class */ (function () {
                 TuiActiveZoneModule,
                 TuiFormatNumberPipeModule,
             ],
-            declarations: [TuiSliderComponent, TuiSliderOldComponent],
-            exports: [TuiSliderComponent, TuiSliderOldComponent],
+            declarations: [TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderOldComponent],
+            exports: [TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderOldComponent],
         })
     ], TuiSliderModule);
     return TuiSliderModule;
@@ -238,5 +351,5 @@ var TuiSliderModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { TuiSliderComponent, TuiSliderModule, TuiSliderOldComponent };
+export { TUI_SLIDER_DEFAULT_OPTIONS, TUI_SLIDER_OPTIONS, TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderModule, TuiSliderOldComponent, tuiSliderOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-slider.js.map

package/fesm5/taiga-ui-kit-components-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-slider.js","sources":["ng://@taiga-ui/kit/components/slider/slider.component.ts","ng://@taiga-ui/kit/components/slider/slider-old.component.ts","ng://@taiga-ui/kit/components/slider/slider.module.ts","ng://@taiga-ui/kit/components/slider/taiga-ui-kit-components-slider.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    Optional,\n    Self,\n} from '@angular/core';\nimport {NgControl, NgModel} from '@angular/forms';\nimport {USER_AGENT} from '@ng-web-apis/common';\nimport {\n    CHROMIUM_EDGE_START_VERSION,\n    isEdgeOlderThan,\n    tuiDefaultProp,\n    watch,\n} from '@taiga-ui/cdk';\nimport {TuiSizeS} from '@taiga-ui/core';\nimport {take} from 'rxjs/operators';\n\n@Component({\n    /**\n     * We have to call our component as `<input tuiSlider type=\"range\" ... />`\n     * because otherwise built-in angular\n     * {@link https://github.com/angular/angular/blob/master/packages/forms/src/directives/range_value_accessor.ts#L45 RangeValueAccessor}\n     * cannot be matched by its CSS selector.\n     */\n    selector: 'input[type=range][tuiSlider]',\n    template: ``,\n    styleUrls: ['./slider.style.less'],\n    host: {\n        /**\n         * For change detection.\n         * Webkit does not have built-in method for customization of filling progress (as Firefox).\n         * We draw filling of progress by `background: linear-gradient(...)` of the track.\n         * This function triggers change detection (for `fillPercentage` function) when we drag thumb of the input.\n         */\n        '(input)': '0',\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiSliderComponent {\n    @Input()\n    @HostBinding('attr.data-size')\n    @tuiDefaultProp()\n    size: TuiSizeS = 'm';\n\n    @Input()\n    @tuiDefaultProp()\n    segments = 1;\n\n    get min(): number {\n        return Number(this.elementRef.nativeElement.min);\n    }\n\n    get max(): number {\n        return Number(this.elementRef.nativeElement.max) || 100;\n    }\n\n    get step(): number {\n        return Number(this.elementRef.nativeElement.step) || 1;\n    }\n\n    get value(): number {\n        return Number(this.elementRef.nativeElement.value) || 0;\n    }\n\n    @HostBinding('style.--tui-slider-fill-percentage.%')\n    get fillPercentage(): number {\n        return (100 * this.value) / (this.max - this.min);\n    }\n\n    @HostBinding('style.--tui-slider-segment-width.%')\n    get stepPercentage(): number {\n        return 100 / this.segments - 0.1;\n    }\n\n    @HostBinding('class._old-edge')\n    get isOldEdge(): boolean {\n        return isEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent);\n    }\n\n    constructor(\n        @Optional()\n        @Self()\n        @Inject(NgControl)\n        control: NgControl | null,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLInputElement>,\n        @Inject(USER_AGENT) private readonly userAgent: string,\n    ) {\n        if (control instanceof NgModel) {\n            /**\n             * The ValueAccessor.writeValue method is called twice on any value accessor during component initialization,\n             * when a control is bound using [(ngModel)], first time with a phantom null value.\n             * With `changeDetection: ChangeDetectionStrategy.OnPush` the second call of writeValue with real value don't re-render the view.\n             * ___\n             * See this {@link https://github.com/angular/angular/issues/14988 issue}\n             */\n            control.valueChanges?.pipe(watch(changeDetectorRef), take(1)).subscribe();\n        }\n    }\n}\n","import {DOCUMENT} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    forwardRef,\n    Inject,\n    Optional,\n    Self,\n} from '@angular/core';\nimport {NgControl} from '@angular/forms';\nimport {\n    isNativeFocused,\n    TUI_FOCUSABLE_ITEM_ACCESSOR,\n    TuiFocusableElementAccessor,\n    TuiNativeFocusableElement,\n} from '@taiga-ui/cdk';\nimport {AbstractTuiSlider} from '@taiga-ui/kit/abstract';\nimport {TUI_FROM_TO_TEXTS} from '@taiga-ui/kit/tokens';\nimport {Observable} from 'rxjs';\n\n/**\n * @deprecated use {@link TuiSliderComponent} instead\n * TODO remove in 3.0\n */\n// @dynamic\n@Component({\n    selector: 'tui-slider',\n    templateUrl: '../../abstract/slider/slider.common.template.html',\n    styleUrls: [\n        '../../abstract/slider/slider.common.style.less',\n        './slider-old.style.less',\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: TUI_FOCUSABLE_ITEM_ACCESSOR,\n            useExisting: forwardRef(() => TuiSliderOldComponent),\n        },\n    ],\n})\nexport class TuiSliderOldComponent\n    extends AbstractTuiSlider<number>\n    implements TuiFocusableElementAccessor\n{\n    constructor(\n        @Optional()\n        @Self()\n        @Inject(NgControl)\n        control: NgControl | null,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n        @Inject(DOCUMENT) documentRef: Document,\n        @Inject(TUI_FROM_TO_TEXTS) fromToTexts$: Observable<[string, string]>,\n    ) {\n        super(control, changeDetectorRef, documentRef, fromToTexts$);\n    }\n\n    get nativeFocusableElement(): TuiNativeFocusableElement | null {\n        return this.dotRight ? this.dotRight.nativeElement : null;\n    }\n\n    get focused(): boolean {\n        return isNativeFocused(this.nativeFocusableElement);\n    }\n\n    get left(): number {\n        return 0;\n    }\n\n    get right(): number {\n        return 100 - 100 * this.getFractionFromValue(this.value);\n    }\n\n    protected getFallbackValue(): number {\n        return 0;\n    }\n\n    protected processStep(increment: boolean) {\n        const fraction = this.getFractionFromValue(this.value);\n        const step = this.computedStep;\n        const value = this.getValueFromFraction(\n            increment ? fraction + step : fraction - step,\n        );\n\n        this.processValue(value);\n    }\n\n    protected processValue(value: number) {\n        this.updateValue(this.valueGuard(value));\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {\n    TuiActiveZoneModule,\n    TuiFocusableModule,\n    TuiFocusVisibleModule,\n    TuiRepeatTimesModule,\n} from '@taiga-ui/cdk';\nimport {TuiFormatNumberPipeModule} from '@taiga-ui/core';\n\nimport {TuiSliderComponent} from './slider.component';\nimport {TuiSliderOldComponent} from './slider-old.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TuiRepeatTimesModule,\n        TuiFocusableModule,\n        TuiFocusVisibleModule,\n        TuiActiveZoneModule,\n        TuiFormatNumberPipeModule,\n    ],\n    declarations: [TuiSliderComponent, TuiSliderOldComponent],\n    exports: [TuiSliderComponent, TuiSliderOldComponent],\n})\nexport class TuiSliderModule {}\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-kit-components-slider.js","sources":["ng://@taiga-ui/kit/components/slider/slider-options.ts","ng://@taiga-ui/kit/components/slider/slider.component.ts","ng://@taiga-ui/kit/components/slider/slider-key-steps.directive.ts","ng://@taiga-ui/kit/components/slider/slider-old.component.ts","ng://@taiga-ui/kit/components/slider/slider.module.ts","ng://@taiga-ui/kit/components/slider/taiga-ui-kit-components-slider.ts"],"sourcesContent":["import {InjectionToken, ValueProvider} from '@angular/core';\nimport {TuiSizeS} from '@taiga-ui/core';\n\nexport interface TuiSliderOptions {\n    readonly size: TuiSizeS;\n    readonly trackColor: string;\n}\n\nexport const TUI_SLIDER_DEFAULT_OPTIONS: TuiSliderOptions = {\n    size: 'm',\n    trackColor: 'var(--tui-base-03)',\n};\n\nexport const TUI_SLIDER_OPTIONS = new InjectionToken<TuiSliderOptions>(\n    'Default parameters for Slider component',\n    {factory: () => TUI_SLIDER_DEFAULT_OPTIONS},\n);\n\nexport const tuiSliderOptionsProvider = (\n    options: Partial<TuiSliderOptions>,\n): ValueProvider => ({\n    provide: TUI_SLIDER_OPTIONS,\n    useValue: {...TUI_SLIDER_DEFAULT_OPTIONS, ...options},\n});\n","import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    Optional,\n    Self,\n} from '@angular/core';\nimport {NgControl, NgModel} from '@angular/forms';\nimport {USER_AGENT} from '@ng-web-apis/common';\nimport {\n    CHROMIUM_EDGE_START_VERSION,\n    isEdgeOlderThan,\n    tuiDefaultProp,\n    watch,\n} from '@taiga-ui/cdk';\nimport {TuiSizeS} from '@taiga-ui/core';\nimport {take} from 'rxjs/operators';\n\nimport {TUI_SLIDER_OPTIONS, TuiSliderOptions} from './slider-options';\n\n@Component({\n    /**\n     * We have to call our component as `<input tuiSlider type=\"range\" ... />`\n     * because otherwise built-in angular\n     * {@link https://github.com/angular/angular/blob/master/packages/forms/src/directives/range_value_accessor.ts#L45 RangeValueAccessor}\n     * cannot be matched by its CSS selector.\n     */\n    selector: 'input[type=range][tuiSlider]',\n    template: ``,\n    styleUrls: ['./slider.style.less'],\n    host: {\n        /**\n         * For change detection.\n         * Webkit does not have built-in method for customization of filling progress (as Firefox).\n         * We draw filling of progress by `background: linear-gradient(...)` of the track.\n         * This function triggers change detection (for `fillPercentage` function) when we drag thumb of the input.\n         */\n        '(input)': '0',\n        '[style.--tui-slider-track-color]': 'options.trackColor',\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiSliderComponent {\n    @Input()\n    @HostBinding('attr.data-size')\n    @tuiDefaultProp()\n    size: TuiSizeS = this.options.size;\n\n    @Input()\n    @tuiDefaultProp()\n    segments = 1;\n\n    get min(): number {\n        return Number(this.elementRef.nativeElement.min);\n    }\n\n    get max(): number {\n        return Number(this.elementRef.nativeElement.max) || 100;\n    }\n\n    get step(): number {\n        return Number(this.elementRef.nativeElement.step) || 1;\n    }\n\n    get value(): number {\n        return Number(this.elementRef.nativeElement.value) || 0;\n    }\n\n    set value(newValue: number) {\n        this.elementRef.nativeElement.value = `${newValue}`;\n    }\n\n    @HostBinding('style.--tui-slider-fill-percentage.%')\n    get valuePercentage(): number {\n        return (100 * this.value) / (this.max - this.min);\n    }\n\n    @HostBinding('style.--tui-slider-segment-width.%')\n    get segmentWidth(): number {\n        return 100 / Math.max(1, this.segments);\n    }\n\n    @HostBinding('class._old-edge')\n    get isOldEdge(): boolean {\n        return isEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent);\n    }\n\n    constructor(\n        @Optional()\n        @Self()\n        @Inject(NgControl)\n        control: NgControl | null,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n        @Inject(TUI_SLIDER_OPTIONS) readonly options: TuiSliderOptions,\n        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLInputElement>,\n        @Inject(USER_AGENT) private readonly userAgent: string,\n    ) {\n        if (control instanceof NgModel) {\n            /**\n             * The ValueAccessor.writeValue method is called twice on any value accessor during component initialization,\n             * when a control is bound using [(ngModel)], first time with a phantom null value.\n             * With `changeDetection: ChangeDetectionStrategy.OnPush` the second call of writeValue with real value don't re-render the view.\n             * ___\n             * See this {@link https://github.com/angular/angular/issues/14988 issue}\n             */\n            control.valueChanges?.pipe(watch(changeDetectorRef), take(1)).subscribe();\n        }\n    }\n}\n","import {\n    ChangeDetectorRef,\n    Directive,\n    ElementRef,\n    HostListener,\n    Inject,\n    Input,\n    Optional,\n    Self,\n} from '@angular/core';\nimport {NgControl} from '@angular/forms';\nimport {\n    AbstractTuiControl,\n    isNativeFocused,\n    tuiDefaultProp,\n    TuiFocusableElementAccessor,\n} from '@taiga-ui/cdk';\nimport {TuiKeySteps} from '@taiga-ui/kit/types';\n\nimport {TuiSliderComponent} from './slider.component';\n\n// @dynamic\n@Directive({\n    selector: 'input[tuiSlider][keySteps]',\n})\nexport class TuiSliderKeyStepsDirective\n    extends AbstractTuiControl<number>\n    implements TuiFocusableElementAccessor\n{\n    @Input()\n    @tuiDefaultProp(checkHasMinMaxPercents, 'Should contain min and max values')\n    keySteps: TuiKeySteps = [];\n\n    get nativeFocusableElement(): HTMLInputElement | null {\n        return this.computedDisabled ? null : this.elementRef.nativeElement;\n    }\n\n    get focused(): boolean {\n        return isNativeFocused(this.nativeFocusableElement);\n    }\n\n    constructor(\n        @Optional()\n        @Self()\n        @Inject(NgControl)\n        control: NgControl | null,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n        @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLInputElement>,\n        @Inject(TuiSliderComponent) private readonly slider: TuiSliderComponent,\n    ) {\n        super(control, changeDetectorRef);\n    }\n\n    @HostListener('change')\n    onInput() {\n        const {valuePercentage} = this.slider;\n        const [lowerStep, upperStep] = findKeyStepsBoundariesByFn(\n            this.keySteps,\n            ([keyStepPercentage, _]) => valuePercentage <= keyStepPercentage,\n        );\n        const newControlValue = transformToControlValue(\n            valuePercentage,\n            lowerStep,\n            upperStep,\n        );\n\n        this.updateValue(newControlValue);\n    }\n\n    writeValue(controlValue: number | null) {\n        if (controlValue === null) {\n            return;\n        }\n\n        const [lowerStep, upperStep] = findKeyStepsBoundariesByFn(\n            this.keySteps,\n            ([_, keyStepValue]) => controlValue <= keyStepValue,\n        );\n\n        this.slider.value = this.transformToNativeValue(\n            controlValue,\n            lowerStep,\n            upperStep,\n        );\n    }\n\n    protected getFallbackValue(): number {\n        return 0;\n    }\n\n    private transformToNativeValue(\n        controlValue: number,\n        [upperStepPercent, upperStepValue]: [number, number],\n        [lowerStepPercent, lowerStepValue]: [number, number],\n    ): number {\n        const {min, max} = this.slider;\n        const ratio = (controlValue - lowerStepValue) / (upperStepValue - lowerStepValue);\n        const newValuePercentage =\n            (upperStepPercent - lowerStepPercent) * ratio + lowerStepPercent;\n\n        return (newValuePercentage * (max - min)) / 100;\n    }\n}\n\nfunction checkHasMinMaxPercents(steps: TuiKeySteps): boolean {\n    return !steps.length || (steps[0][0] === 0 && steps[steps.length - 1][0] === 100);\n}\n\nfunction findKeyStepsBoundariesByFn(\n    keySteps: TuiKeySteps,\n    fn: ([keyStepPercent, keyStepValue]: [number, number]) => boolean,\n): [[number, number], [number, number]] {\n    const keyStepUpperIndex = keySteps.findIndex((ketStep, i) => i && fn(ketStep));\n    const lowerStep = keySteps[keyStepUpperIndex - 1];\n    const upperStep = keySteps[keyStepUpperIndex];\n\n    return [lowerStep, upperStep];\n}\n\nfunction transformToControlValue(\n    valuePercentage: number,\n    [upperStepPercent, upperStepValue]: [number, number],\n    [lowerStepPercent, lowerStepValue]: [number, number],\n): number {\n    const ratio =\n        (valuePercentage - lowerStepPercent) / (upperStepPercent - lowerStepPercent);\n\n    return (upperStepValue - lowerStepValue) * ratio + lowerStepValue;\n}\n","import {DOCUMENT} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    forwardRef,\n    Inject,\n    Optional,\n    Self,\n} from '@angular/core';\nimport {NgControl} from '@angular/forms';\nimport {\n    isNativeFocused,\n    TUI_FOCUSABLE_ITEM_ACCESSOR,\n    TuiFocusableElementAccessor,\n    TuiNativeFocusableElement,\n} from '@taiga-ui/cdk';\nimport {AbstractTuiSlider} from '@taiga-ui/kit/abstract';\nimport {TUI_FROM_TO_TEXTS} from '@taiga-ui/kit/tokens';\nimport {Observable} from 'rxjs';\n\n/**\n * @deprecated use {@link TuiSliderComponent} instead\n * TODO remove in 3.0\n */\n// @dynamic\n@Component({\n    selector: 'tui-slider',\n    templateUrl: '../../abstract/slider/slider.common.template.html',\n    styleUrls: [\n        '../../abstract/slider/slider.common.style.less',\n        './slider-old.style.less',\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: TUI_FOCUSABLE_ITEM_ACCESSOR,\n            useExisting: forwardRef(() => TuiSliderOldComponent),\n        },\n    ],\n})\nexport class TuiSliderOldComponent\n    extends AbstractTuiSlider<number>\n    implements TuiFocusableElementAccessor\n{\n    constructor(\n        @Optional()\n        @Self()\n        @Inject(NgControl)\n        control: NgControl | null,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n        @Inject(DOCUMENT) documentRef: Document,\n        @Inject(TUI_FROM_TO_TEXTS) fromToTexts$: Observable<[string, string]>,\n    ) {\n        super(control, changeDetectorRef, documentRef, fromToTexts$);\n    }\n\n    get nativeFocusableElement(): TuiNativeFocusableElement | null {\n        return this.dotRight ? this.dotRight.nativeElement : null;\n    }\n\n    get focused(): boolean {\n        return isNativeFocused(this.nativeFocusableElement);\n    }\n\n    get left(): number {\n        return 0;\n    }\n\n    get right(): number {\n        return 100 - 100 * this.getFractionFromValue(this.value);\n    }\n\n    protected getFallbackValue(): number {\n        return 0;\n    }\n\n    protected processStep(increment: boolean) {\n        const fraction = this.getFractionFromValue(this.value);\n        const step = this.computedStep;\n        const value = this.getValueFromFraction(\n            increment ? fraction + step : fraction - step,\n        );\n\n        this.processValue(value);\n    }\n\n    protected processValue(value: number) {\n        this.updateValue(this.valueGuard(value));\n    }\n}\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {\n    TuiActiveZoneModule,\n    TuiFocusableModule,\n    TuiFocusVisibleModule,\n    TuiRepeatTimesModule,\n} from '@taiga-ui/cdk';\nimport {TuiFormatNumberPipeModule} from '@taiga-ui/core';\n\nimport {TuiSliderComponent} from './slider.component';\nimport {TuiSliderKeyStepsDirective} from './slider-key-steps.directive';\nimport {TuiSliderOldComponent} from './slider-old.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        TuiRepeatTimesModule,\n        TuiFocusableModule,\n        TuiFocusVisibleModule,\n        TuiActiveZoneModule,\n        TuiFormatNumberPipeModule,\n    ],\n    declarations: [TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderOldComponent],\n    exports: [TuiSliderComponent, TuiSliderKeyStepsDirective, TuiSliderOldComponent],\n})\nexport class TuiSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm5/taiga-ui-kit-components-text-area.js

@@ -1,8 +1,8 @@
 import { __extends, __decorate, __param } from 'tslib';
-import { forwardRef, Optional, Self, Inject, ChangeDetectorRef, ViewChild, Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { forwardRef, Optional, Self, Inject, ChangeDetectorRef, ViewChild, ContentChild, ElementRef, Input, HostBinding, HostListener, Component, ChangeDetectionStrategy, Directive, NgModule } from '@angular/core';
 import { NgControl, FormsModule } from '@angular/forms';
-import { TUI_FOCUSABLE_ITEM_ACCESSOR, isNativeFocused, setNativeFocused, TUI_IS_IOS, tuiDefaultProp, AbstractTuiControl, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule } from '@taiga-ui/cdk';
-import { TEXTFIELD_CONTROLLER_PROVIDER, HINT_CONTROLLER_PROVIDER, MODE_PROVIDER, getBorder, TUI_TEXTFIELD_APPEARANCE, TUI_MODE, TuiTextfieldController, TUI_TEXTFIELD_WATCHED_CONTROLLER, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER, TuiScrollbarModule, TuiTooltipModule, TuiWrapperModule, TuiDescribedByModule, TuiSvgModule } from '@taiga-ui/core';
+import { TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiControl, isNativeFocused, setNativeFocused, TUI_IS_IOS, tuiDefaultProp, TuiFocusableModule, TuiHoveredModule } from '@taiga-ui/cdk';
+import { TEXTFIELD_CONTROLLER_PROVIDER, HINT_CONTROLLER_PROVIDER, MODE_PROVIDER, getBorder, TUI_TEXTFIELD_APPEARANCE, TUI_MODE, TuiTextfieldController, TUI_TEXTFIELD_WATCHED_CONTROLLER, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER, TuiTextfieldComponent, TUI_TEXTFIELD_HOST, TuiAbstractTextfieldHost, TuiScrollbarModule, TuiTooltipModule, TuiWrapperModule, TuiDescribedByModule, TuiSvgModule, TuiPrimitiveTextfieldModule } from '@taiga-ui/core';
 import { Observable } from 'rxjs';
 import { CommonModule } from '@angular/common';
 
@@ -11,6 +11,10 @@ var TUI_TEXT_AREA_PROVIDERS = [
         provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
         useExisting: forwardRef(function () { return TuiTextAreaComponent; }),
     },
+    {
+        provide: AbstractTuiControl,
+        useExisting: forwardRef(function () { return TuiTextAreaComponent; }),
+    },
     TEXTFIELD_CONTROLLER_PROVIDER,
     HINT_CONTROLLER_PROVIDER,
     MODE_PROVIDER,
@@ -41,9 +45,11 @@ var TuiTextAreaComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(TuiTextAreaComponent.prototype, "nativeFocusableElement", {
         get: function () {
-            return this.computedDisabled || !this.focusableElement
-                ? null
-                : this.focusableElement.nativeElement;
+            var _a, _b;
+            if (this.computedDisabled) {
+                return null;
+            }
+            return (((_a = this.textfield) === null || _a === void 0 ? void 0 : _a.nativeElement) || ((_b = this.focusableElement) === null || _b === void 0 ? void 0 : _b.nativeElement) || null);
         },
         enumerable: true,
         configurable: true
@@ -106,10 +112,9 @@ var TuiTextAreaComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(TuiTextAreaComponent.prototype, "hasExampleText", {
         get: function () {
-            return (!!this.controller.exampleText &&
-                this.focused &&
-                !this.hasValue &&
-                !this.readOnly);
+            var _a;
+            var text = this.controller.exampleText || ((_a = this.textfield) === null || _a === void 0 ? void 0 : _a.nativeElement.placeholder);
+            return !!text && this.focused && !this.hasValue && !this.readOnly;
         },
         enumerable: true,
         configurable: true
@@ -152,7 +157,7 @@ var TuiTextAreaComponent = /** @class */ (function (_super) {
     TuiTextAreaComponent.prototype.onPressed = function (pressed) {
         this.updatePressed(pressed);
     };
-    TuiTextAreaComponent.prototype.onValue = function (value) {
+    TuiTextAreaComponent.prototype.onValueChange = function (value) {
         this.updateValue(value);
     };
     TuiTextAreaComponent.prototype.onMouseDown = function (event) {
@@ -186,6 +191,9 @@ var TuiTextAreaComponent = /** @class */ (function (_super) {
     __decorate([
         ViewChild('focusableElement')
     ], TuiTextAreaComponent.prototype, "focusableElement", void 0);
+    __decorate([
+        ContentChild(TuiTextfieldComponent, { read: ElementRef })
+    ], TuiTextAreaComponent.prototype, "textfield", void 0);
     __decorate([
         Input(),
         tuiDefaultProp()
@@ -213,17 +221,21 @@ var TuiTextAreaComponent = /** @class */ (function (_super) {
     __decorate([
         HostBinding('class._has-counter')
     ], TuiTextAreaComponent.prototype, "hasCounter", null);
+    __decorate([
+        HostListener('focusin', ['true']),
+        HostListener('focusout', ['false'])
+    ], TuiTextAreaComponent.prototype, "onFocused", null);
     TuiTextAreaComponent = __decorate([
         Component({
             selector: 'tui-text-area',
-            template: "<tui-wrapper\n    automation-id=\"tui-text-area__wrapper\"\n    class=\"outline\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [readOnly]=\"readOnly\"\n    [invalid]=\"computedInvalid\"\n>\n    <div\n        *ngIf=\"hasCounter\"\n        automation-id=\"tui-text-area__counter\"\n        class=\"counter\"\n    >\n        {{ value.length }}/{{ controller.maxLength }}\n    </div>\n</tui-wrapper>\n\n<label\n    class=\"content\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <div class=\"wrapper\">\n        <div\n            *ngIf=\"hasPlaceholder\"\n            automation-id=\"tui-text-area__placeholder\"\n            class=\"placeholder\"\n            [class.placeholder_raised]=\"placeholderRaised\"\n        >\n            <ng-content></ng-content>\n        </div>\n        <tui-scrollbar\n            automation-id=\"tui-text-area__scrollbar\"\n            class=\"box\"\n            [style.maxHeight.px]=\"computeMaxHeight\"\n        >\n            <div class=\"input-wrapper\">\n                <div class=\"relative\">\n                    <div aria-hidden=\"true\" class=\"pseudo-content\">\n                        <span\n                            [textContent]=\"fittedContent || controller.exampleText\"\n                        ></span>\n                        <span\n                            class=\"pseudo-content__extra\"\n                            [textContent]=\"extraContent\"\n                        ></span>\n                        &nbsp;\n                    </div>\n                    <textarea\n                        #focusableElement\n                        automation-id=\"tui-text-area__native\"\n                        class=\"input\"\n                        [placeholder]=\"controller.exampleText\"\n                        [id]=\"id\"\n                        [tuiDescribedBy]=\"id\"\n                        [tuiFocusable]=\"focusable\"\n                        [disabled]=\"disabled\"\n                        [ngModel]=\"value\"\n                        [readOnly]=\"readOnly\"\n                        (tuiFocusedChange)=\"onFocused($event)\"\n                        (ngModelChange)=\"onValue($event)\"\n                    ></textarea>\n                </div>\n            </div>\n        </tui-scrollbar>\n    </div>\n    <div class=\"icons\">\n        <tui-svg\n            *ngIf=\"hasCleaner\"\n            src=\"tuiIconCloseLarge\"\n            class=\"cleaner\"\n            (click.stop)=\"onValue('')\"\n        ></tui-svg>\n        <tui-tooltip\n            *ngIf=\"hasTooltip\"\n            automation-id=\"tui-text-area__tooltip\"\n            class=\"tooltip\"\n            [describeId]=\"id\"\n            [direction]=\"hintController.direction\"\n            [mode]=\"hintController.mode\"\n            [content]=\"hintController.content\"\n            [showDelay]=\"hintController.showDelay\"\n            [hideDelay]=\"hintController.hideDelay\"\n        ></tui-tooltip>\n    </div>\n</label>\n",
+            template: "<tui-wrapper\n    automation-id=\"tui-text-area__wrapper\"\n    class=\"t-outline\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [readOnly]=\"readOnly\"\n    [invalid]=\"computedInvalid\"\n>\n    <div\n        *ngIf=\"hasCounter\"\n        automation-id=\"tui-text-area__counter\"\n        class=\"t-counter\"\n    >\n        {{ value.length }}/{{ controller.maxLength }}\n    </div>\n</tui-wrapper>\n\n<label\n    class=\"t-content\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n>\n    <div class=\"t-wrapper\">\n        <div\n            *ngIf=\"hasPlaceholder\"\n            automation-id=\"tui-text-area__placeholder\"\n            class=\"t-placeholder\"\n            [class.t-placeholder_raised]=\"placeholderRaised\"\n        >\n            <ng-content></ng-content>\n        </div>\n        <tui-scrollbar\n            automation-id=\"tui-text-area__scrollbar\"\n            class=\"t-box\"\n            [style.maxHeight.px]=\"computeMaxHeight\"\n        >\n            <div class=\"t-input-wrapper\">\n                <div class=\"t-relative\">\n                    <div aria-hidden=\"true\" class=\"t-pseudo-content\">\n                        <span\n                            [textContent]=\"fittedContent || controller.exampleText\"\n                        ></span>\n                        <span\n                            class=\"t-pseudo-content__extra\"\n                            [textContent]=\"extraContent\"\n                        ></span>\n                        &nbsp;\n                    </div>\n                    <textarea\n                        #focusableElement\n                        automation-id=\"tui-text-area__native\"\n                        class=\"t-input\"\n                        [placeholder]=\"controller.exampleText\"\n                        [id]=\"id\"\n                        [tuiDescribedBy]=\"id\"\n                        [tuiFocusable]=\"computedFocusable\"\n                        [disabled]=\"computedDisabled\"\n                        [ngModel]=\"value\"\n                        [readOnly]=\"readOnly\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    ></textarea>\n                    <ng-content select=\"textarea\"></ng-content>\n                </div>\n            </div>\n        </tui-scrollbar>\n    </div>\n    <div class=\"t-icons\">\n        <tui-svg\n            *ngIf=\"hasCleaner\"\n            src=\"tuiIconCloseLarge\"\n            class=\"t-cleaner\"\n            (click.stop)=\"onValueChange('')\"\n        ></tui-svg>\n        <tui-tooltip\n            *ngIf=\"hasTooltip\"\n            automation-id=\"tui-text-area__tooltip\"\n            class=\"t-tooltip\"\n            [describeId]=\"id\"\n            [direction]=\"hintController.direction\"\n            [mode]=\"hintController.mode\"\n            [content]=\"hintController.content\"\n            [showDelay]=\"hintController.showDelay\"\n            [hideDelay]=\"hintController.hideDelay\"\n        ></tui-tooltip>\n    </div>\n</label>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             providers: TUI_TEXT_AREA_PROVIDERS,
             host: {
                 '($.data-mode.attr)': 'mode$',
                 '[class._ios]': 'isIOS',
             },
-            styles: [":host{position:relative;z-index:0;display:flex;font:var(--tui-font-text-m);flex-direction:column;min-height:6.75rem;border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-size='m']{font:var(--tui-font-text-s);min-height:5.5rem}:host[data-size='m']._has-counter{min-height:6.625rem}:host[data-size='l']._has-counter{min-height:7.875rem}.outline{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.content{margin-top:0;margin-bottom:0;min-height:inherit;width:100%;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .content{bottom:1.6875rem}.wrapper{position:relative;width:100%;height:100%;min-height:inherit;padding-bottom:.4375rem;box-sizing:border-box}:host[data-size='m']._label-outside .wrapper{padding-top:.75rem}:host[data-size='l']._label-outside .wrapper{padding-top:1rem}:host[data-size='m']:not(._label-outside) .wrapper{padding-top:1.375rem}:host[data-size='l']:not(._label-outside) .wrapper{padding-top:1.625rem}.input-wrapper{min-height:inherit;width:100%;flex:1}.relative{position:relative;min-height:inherit}.box{display:flex;min-height:100%;width:100%}:host:not(._expandable) .box{height:100%}:host._has-counter._expandable .box{margin-bottom:1.25rem}.pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:transparent;overflow:hidden;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)}:host[data-size='m'] .pseudo-content{padding:0 .75rem}:host[data-size='l'] .pseudo-content{padding:0 1rem}.pseudo-content__extra{background-color:var(--tui-error-bg-night)}.input{padding:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:0;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)}.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::-ms-input-placeholder{color:var(--tui-text-03);opacity:0}.input::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .input::-ms-input-placeholder{color:var(--tui-text-03-night)}:host[data-mode=onDark] .input::placeholder{color:var(--tui-text-03-night)}:host._focused .input:not(:read-only)::-ms-input-placeholder{opacity:1}:host._focused .input:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .input:not(:read-only)::placeholder{opacity:1}:host[data-size='m'] .input{padding:0 .75rem}:host[data-size='l'] .input{padding:0 1rem}:host._ios .input{padding-left:.8125rem}:host[data-mode=onDark]._disabled .input{color:var(--tui-text-03-night)}.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;position:absolute;left:0;max-width:100%;padding:0 1rem;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);box-sizing:border-box}.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)}:host[data-size='m'] .placeholder{top:.75rem;padding:0 .75rem}:host[data-size='l'] .placeholder{top:1rem}:host._label-outside .placeholder{overflow:initial;height:auto;white-space:initial}.icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:1rem .75rem}:host[data-size='m'] .icons{padding:.75rem}.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;pointer-events:auto}.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)}.tooltip{pointer-events:auto}.counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .counter{color:var(--tui-text-03-night)}"]
+            styles: [":host{position:relative;z-index:0;display:flex;font:var(--tui-font-text-m);flex-direction:column;min-height:6.75rem;border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host[data-size='m']{font:var(--tui-font-text-s);min-height:5.5rem}:host[data-size='m']._has-counter{min-height:6.625rem}:host[data-size='l']._has-counter{min-height:7.875rem}.t-outline{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.t-content{margin-top:0;margin-bottom:0;min-height:inherit;width:100%;box-sizing:border-box;overflow:hidden;cursor:text}:host._disabled .t-content{cursor:auto;opacity:var(--tui-disabled-opacity)}:host:not(._expandable) .t-content{position:absolute;top:0;left:0;bottom:1px;right:0;min-height:auto}:host._has-counter:not(._expandable) .t-content{bottom:1.6875rem}.t-wrapper{position:relative;width:100%;height:100%;min-height:inherit;padding-bottom:.4375rem;box-sizing:border-box}:host[data-size='m']._label-outside .t-wrapper{padding-top:.75rem}:host[data-size='l']._label-outside .t-wrapper{padding-top:1rem}:host[data-size='m']:not(._label-outside) .t-wrapper{padding-top:1.375rem}:host[data-size='l']:not(._label-outside) .t-wrapper{padding-top:1.625rem}.t-input-wrapper{min-height:inherit;width:100%;flex:1}.t-relative{position:relative;min-height:inherit}.t-box{display:flex;min-height:100%;width:100%}:host:not(._expandable) .t-box{height:100%}:host._has-counter._expandable .t-box{margin-bottom:1.25rem}.t-pseudo-content{white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:transparent;overflow:hidden;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)}:host[data-size='m'] .t-pseudo-content{padding:0 .75rem}:host[data-size='l'] .t-pseudo-content{padding:0 1rem}.t-pseudo-content__extra{background-color:var(--tui-error-bg-night)}.t-input{padding:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;resize:none;overflow:hidden;outline:0;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)}.t-input:-webkit-autofill,.t-input:-webkit-autofill:focus,.t-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}.t-input:not(:last-child){display:none}.t-input::-ms-input-placeholder{color:var(--tui-text-03);opacity:0}.t-input::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-input::-ms-input-placeholder{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-input::placeholder{color:var(--tui-text-03-night)}:host._focused .t-input:not(:read-only)::-ms-input-placeholder{opacity:1}:host._focused .t-input:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-input:not(:read-only)::placeholder{opacity:1}:host[data-size='m'] .t-input{padding:0 .75rem}:host[data-size='l'] .t-input{padding:0 1rem}:host._ios .t-input{padding-left:.8125rem}:host[data-mode=onDark]._disabled .t-input{color:var(--tui-text-03-night)}.t-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;position:absolute;left:0;max-width:100%;padding:0 1rem;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);box-sizing:border-box}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size='m'] .t-placeholder_raised{font-size:.69rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused)._hovered .t-placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size='l']._focused._label-outside .t-placeholder,:host[data-size='m']._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size='l'] .t-placeholder{font-size:.9375rem}:host[data-size='l'] .t-placeholder_raised{font-size:.8156rem}:host[data-size='l']._focused:not(._label-outside) .t-placeholder,:host[data-size='m']._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size='l'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size='l'][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}:host[data-size='m'] .t-placeholder{top:.75rem;padding:0 .75rem}:host[data-size='l'] .t-placeholder{top:1rem}:host._label-outside .t-placeholder{overflow:initial;height:auto;white-space:initial}.t-icons{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;justify-content:flex-end;pointer-events:none;padding:1rem .75rem}:host[data-size='m'] .t-icons{padding:.75rem}.t-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;pointer-events:auto}.t-cleaner:hover{color:var(--tui-text-02)}:host._disabled .t-cleaner,:host._readonly .t-cleaner{pointer-events:none}:host[data-mode=onDark] .t-cleaner{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-cleaner:hover{color:var(--tui-text-01-night)}.t-tooltip{pointer-events:auto}.t-counter{position:absolute;right:.75rem;bottom:.5rem;font:var(--tui-font-text-s);pointer-events:none;margin-top:auto;text-align:right;color:var(--tui-text-03)}:host[data-mode=onDark] .t-counter{color:var(--tui-text-03-night)}"]
         }),
         __param(0, Optional()),
         __param(0, Self()),
@@ -238,6 +250,30 @@ var TuiTextAreaComponent = /** @class */ (function (_super) {
     return TuiTextAreaComponent;
 }(AbstractTuiControl));
 
+var TuiTextAreaDirective = /** @class */ (function (_super) {
+    __extends(TuiTextAreaDirective, _super);
+    function TuiTextAreaDirective() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TuiTextAreaDirective_1 = TuiTextAreaDirective;
+    TuiTextAreaDirective.prototype.onValueChange = function (value) {
+        this.host.onValueChange(value);
+    };
+    var TuiTextAreaDirective_1;
+    TuiTextAreaDirective = TuiTextAreaDirective_1 = __decorate([
+        Directive({
+            selector: 'tui-text-area',
+            providers: [
+                {
+                    provide: TUI_TEXTFIELD_HOST,
+                    useExisting: forwardRef(function () { return TuiTextAreaDirective_1; }),
+                },
+            ],
+        })
+    ], TuiTextAreaDirective);
+    return TuiTextAreaDirective;
+}(TuiAbstractTextfieldHost));
+
 var TuiTextAreaModule = /** @class */ (function () {
     function TuiTextAreaModule() {
     }
@@ -247,16 +283,16 @@ var TuiTextAreaModule = /** @class */ (function () {
                 CommonModule,
                 FormsModule,
                 TuiFocusableModule,
-                TuiFocusedModule,
                 TuiHoveredModule,
                 TuiScrollbarModule,
                 TuiTooltipModule,
                 TuiWrapperModule,
                 TuiDescribedByModule,
                 TuiSvgModule,
+                TuiPrimitiveTextfieldModule,
             ],
-            declarations: [TuiTextAreaComponent],
-            exports: [TuiTextAreaComponent],
+            declarations: [TuiTextAreaComponent, TuiTextAreaDirective],
+            exports: [TuiTextAreaComponent, TuiTextAreaDirective, TuiTextfieldComponent],
         })
     ], TuiTextAreaModule);
     return TuiTextAreaModule;
@@ -266,5 +302,5 @@ var TuiTextAreaModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_ROWS, LINE_HEIGHT_L, LINE_HEIGHT_M, TUI_TEXT_AREA_PROVIDERS, TuiTextAreaComponent, TuiTextAreaModule };
+export { DEFAULT_ROWS, LINE_HEIGHT_L, LINE_HEIGHT_M, TUI_TEXT_AREA_PROVIDERS, TuiTextAreaComponent, TuiTextAreaDirective, TuiTextAreaModule };
 //# sourceMappingURL=taiga-ui-kit-components-text-area.js.map