@taiga-ui/kit/fesm2022/taiga-ui-kit-components-textarea.mjs

Taiga UI Angular main components kit

import { TuiLabel } from '@taiga-ui/core/components/label';
import { TuiTextfieldComponent, TUI_TEXTFIELD_OPTIONS, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import * as i0 from '@angular/core';
import { viewChild, TemplateRef, inject, ViewContainerRef, ElementRef, input, ChangeDetectionStrategy, Component, signal, Directive } from '@angular/core';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import * as i1 from '@taiga-ui/core/components/input';
import { TuiWithInput } from '@taiga-ui/core/components/input';
import { TuiScrollControls, TUI_SCROLL_REF } from '@taiga-ui/core/components/scrollbar';
import { PolymorpheusOutlet, injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
import { Validators, NG_VALIDATORS } from '@angular/forms';
import { TUI_TEXTFIELD_VALUE } from '@taiga-ui/core/tokens';

const [TUI_TEXTAREA_OPTIONS, tuiTextareaOptionsProvider] = tuiCreateOptions({
    min: 1,
    max: 3,
    content: ({ $implicit }) => $implicit,
});

class TuiTextareaComponent {
    constructor() {
        this.template = viewChild.required(TemplateRef);
        this.options = inject(TUI_TEXTAREA_OPTIONS);
        this.vcr = inject(ViewContainerRef);
        this.text = viewChild('text', { read: ElementRef });
        this.el = tuiInjectElement();
        this.textfield = inject((TuiTextfieldComponent));
        this.isMobile = inject(WA_IS_MOBILE);
        this.min = input(this.options.min);
        this.max = input(this.options.max);
        this.content = input(this.options.content);
    }
    ngAfterViewInit() {
        this.vcr.createEmbeddedView(this.template());
    }
    onScroll() {
        this.text()?.nativeElement.scrollTo({ top: this.el.scrollTop });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiTextareaComponent, isStandalone: true, selector: "textarea[tuiTextarea]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "scroll.once": "onScroll()", "scroll.zoneless": "onScroll()" }, properties: { "class._mobile": "isMobile" } }, providers: [tuiProvide(TUI_SCROLL_REF, ElementRef)], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "text", first: true, predicate: ["text"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.TuiWithInput }], ngImport: i0, template: "<ng-template>\n    @if (!isMobile) {\n        <tui-scroll-controls\n            class=\"t-scroll\"\n            (click.prevent)=\"(0)\"\n        />\n    }\n    <span\n        #text\n        aria-hidden=\"true\"\n        class=\"t-ghost\"\n        [style.max-height.em]=\"1.25 * max()\"\n        [style.min-height.em]=\"1.25 * min()\"\n    >\n        <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: el.value}\">{{ text }}</ng-container>\n    </span>\n</ng-template>\n", styles: [":host-context(tui-textfield._with-label[data-size=\"m\"]._with-label[data-size=\"m\"]){border-block-start-width:calc(.5rem + var(--t-height) / 3);padding-block:0}:host-context(tui-textfield._with-label[data-size=\"l\"]._with-label[data-size=\"l\"]){border-block-start-width:calc(.625rem + var(--t-height) / 3);padding-block:0}:host-context(tui-textfield[data-size=\"s\"]){padding-block:.5rem .25rem}:host-context(tui-textfield[data-size=\"m\"]){padding-block:.875rem .25rem}:host-context(tui-textfield[data-size=\"l\"]){padding-block:1.125rem .375rem}:host:host{block-size:100%;white-space:pre-wrap;overflow:auto;word-break:break-word;border:0 solid transparent}:host:host:not(._mobile){scrollbar-width:none;-ms-overflow-style:none}:host:host:not(._mobile)::-webkit-scrollbar,:host:host:not(._mobile)::-webkit-scrollbar-thumb{display:none}.t-scroll{position:absolute;inset:.25rem 0;min-block-size:0}::ng-deep tui-textfield._with-label[data-size=m] .t-scroll{inset-block-start:calc(.5rem + var(--t-height) / 3)}::ng-deep tui-textfield._with-label[data-size=l] .t-scroll{inset-block-start:calc(.625rem + var(--t-height) / 3)}.t-ghost{position:relative;z-index:1;order:1;inline-size:calc(100% - var(--t-start) - var(--t-end) - var(--t-side));white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;padding-inline-start:var(--t-start);padding-inline-end:calc(var(--t-end) + var(--t-side));pointer-events:none;box-sizing:content-box;overflow:hidden;color:transparent}.t-ghost:after{content:\" \"}::ng-deep tui-textfield._with-label[data-size=m] textarea~.t-ghost{margin-block-start:-1.375rem;padding-block-end:.3125rem}::ng-deep tui-textfield._with-label[data-size=l] textarea~.t-ghost{margin-block-start:-1.75rem;padding-block-end:.5rem}::ng-deep tui-textfield[data-size=s] textarea~.t-ghost{margin-block-start:-1.5rem;padding-block-end:.5rem}::ng-deep tui-textfield[data-size=m] textarea~.t-ghost{margin-block-start:-2rem;padding-block-end:.875rem}::ng-deep tui-textfield[data-size=l] textarea~.t-ghost{margin-block-start:-2.5rem;padding-block-end:1rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollControls, selector: "tui-scroll-controls" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'textarea[tuiTextarea]', imports: [PolymorpheusOutlet, TuiScrollControls], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiProvide(TUI_SCROLL_REF, ElementRef)], hostDirectives: [TuiWithInput], host: {
                        ngSkipHydration: 'true',
                        '[class._mobile]': 'isMobile',
                        // To trigger CD for #text
                        '(scroll.once)': 'onScroll()',
                        '(scroll.zoneless)': 'onScroll()',
                    }, template: "<ng-template>\n    @if (!isMobile) {\n        <tui-scroll-controls\n            class=\"t-scroll\"\n            (click.prevent)=\"(0)\"\n        />\n    }\n    <span\n        #text\n        aria-hidden=\"true\"\n        class=\"t-ghost\"\n        [style.max-height.em]=\"1.25 * max()\"\n        [style.min-height.em]=\"1.25 * min()\"\n    >\n        <ng-container *polymorpheusOutlet=\"content() as text; context: {$implicit: el.value}\">{{ text }}</ng-container>\n    </span>\n</ng-template>\n", styles: [":host-context(tui-textfield._with-label[data-size=\"m\"]._with-label[data-size=\"m\"]){border-block-start-width:calc(.5rem + var(--t-height) / 3);padding-block:0}:host-context(tui-textfield._with-label[data-size=\"l\"]._with-label[data-size=\"l\"]){border-block-start-width:calc(.625rem + var(--t-height) / 3);padding-block:0}:host-context(tui-textfield[data-size=\"s\"]){padding-block:.5rem .25rem}:host-context(tui-textfield[data-size=\"m\"]){padding-block:.875rem .25rem}:host-context(tui-textfield[data-size=\"l\"]){padding-block:1.125rem .375rem}:host:host{block-size:100%;white-space:pre-wrap;overflow:auto;word-break:break-word;border:0 solid transparent}:host:host:not(._mobile){scrollbar-width:none;-ms-overflow-style:none}:host:host:not(._mobile)::-webkit-scrollbar,:host:host:not(._mobile)::-webkit-scrollbar-thumb{display:none}.t-scroll{position:absolute;inset:.25rem 0;min-block-size:0}::ng-deep tui-textfield._with-label[data-size=m] .t-scroll{inset-block-start:calc(.5rem + var(--t-height) / 3)}::ng-deep tui-textfield._with-label[data-size=l] .t-scroll{inset-block-start:calc(.625rem + var(--t-height) / 3)}.t-ghost{position:relative;z-index:1;order:1;inline-size:calc(100% - var(--t-start) - var(--t-end) - var(--t-side));white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;padding-inline-start:var(--t-start);padding-inline-end:calc(var(--t-end) + var(--t-side));pointer-events:none;box-sizing:content-box;overflow:hidden;color:transparent}.t-ghost:after{content:\" \"}::ng-deep tui-textfield._with-label[data-size=m] textarea~.t-ghost{margin-block-start:-1.375rem;padding-block-end:.3125rem}::ng-deep tui-textfield._with-label[data-size=l] textarea~.t-ghost{margin-block-start:-1.75rem;padding-block-end:.5rem}::ng-deep tui-textfield[data-size=s] textarea~.t-ghost{margin-block-start:-1.5rem;padding-block-end:.5rem}::ng-deep tui-textfield[data-size=m] textarea~.t-ghost{margin-block-start:-2rem;padding-block-end:.875rem}::ng-deep tui-textfield[data-size=l] textarea~.t-ghost{margin-block-start:-2.5rem;padding-block-end:1rem}\n"] }]
        }] });

class TuiTextareaCounter {
    constructor() {
        this.limit = signal(0);
        this.length = signal(0);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaCounter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TuiTextareaCounter, isStandalone: true, selector: "ng-component", ngImport: i0, template: '{{ length() }} / {{ limit() }}', isInline: true, styles: [":host{z-index:1;inline-size:100%;order:2;text-align:end;pointer-events:none;padding-block-end:.75rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaCounter, decorators: [{
            type: Component,
            args: [{ template: '{{ length() }} / {{ limit() }}', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{z-index:1;inline-size:100%;order:2;text-align:end;pointer-events:none;padding-block-end:.75rem;font:var(--tui-typography-ui-2xs);color:var(--tui-text-secondary)}\n"] }]
        }] });
class TuiTextareaLimit {
    constructor() {
        this.limit = inject(TuiTextareaDirective).limit;
        this.context = injectContext();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaLimit, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: TuiTextareaLimit, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
        <span [textContent]="context.$implicit.slice(0, limit())"></span>
        <span [textContent]="context.$implicit.slice(limit())"></span>
    `, isInline: true, styles: ["span:last-child{background:linear-gradient(transparent .25rem,var(--tui-status-negative-pale) .25rem,var(--tui-status-negative-pale) 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaLimit, decorators: [{
            type: Component,
            args: [{ template: `
        <span [textContent]="context.$implicit.slice(0, limit())"></span>
        <span [textContent]="context.$implicit.slice(limit())"></span>
    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["span:last-child{background:linear-gradient(transparent .25rem,var(--tui-status-negative-pale) .25rem,var(--tui-status-negative-pale) 100%)}\n"] }]
        }] });
const COMPONENT = new PolymorpheusComponent(TuiTextareaLimit);
class TuiTextareaDirective {
    constructor() {
        this.value = inject(TUI_TEXTFIELD_VALUE);
        this.ref = inject(ViewContainerRef).createComponent(TuiTextareaCounter);
        this.size = inject(TUI_TEXTFIELD_OPTIONS).size;
        this.limit = input(0);
    }
    ngDoCheck() {
        this.ref.instance.length.set(this.value().length);
        this.ref.instance.limit.set(this.limit());
    }
    validate(control) {
        return Validators.maxLength(this.limit())(control);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiTextareaDirective, isStandalone: true, selector: "[tuiTextarea][limit]", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-block-end-width.rem": "size() === \"l\" ? 1.875 : 1.75" } }, providers: [
            tuiProvide(NG_VALIDATORS, TuiTextareaDirective, true),
            tuiTextareaOptionsProvider({ content: COMPONENT }),
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTextareaDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tuiTextarea][limit]',
                    providers: [
                        tuiProvide(NG_VALIDATORS, TuiTextareaDirective, true),
                        tuiTextareaOptionsProvider({ content: COMPONENT }),
                    ],
                    host: { '[style.border-block-end-width.rem]': 'size() === "l" ? 1.875 : 1.75' },
                }]
        }] });

const TuiTextarea = [
    TuiTextareaComponent,
    TuiTextareaDirective,
    TuiLabel,
    TuiTextfieldComponent,
    TuiTextfieldOptionsDirective,
    TuiDropdownContent,
];

/**
 * Generated bundle index. Do not edit.
 */

export { TUI_TEXTAREA_OPTIONS, TuiTextarea, TuiTextareaComponent, TuiTextareaDirective, tuiTextareaOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-textarea.mjs.map