@taiga-ui/kit
Version:
Taiga UI Angular main components kit
155 lines (149 loc) • 15.2 kB
JavaScript
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, ElementRef, TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Input, signal, Directive } from '@angular/core';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiProvide } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiScrollControls } from '@taiga-ui/core/components/scrollbar';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldComponent, TuiWithTextfield, TUI_TEXTFIELD_OPTIONS } from '@taiga-ui/core/components/textfield';
import { TUI_SCROLL_REF } from '@taiga-ui/core/tokens';
import { PolymorpheusOutlet, injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { Validators, NG_VALIDATORS } from '@angular/forms';
const [TUI_TEXTAREA_OPTIONS, tuiTextareaOptionsProvider] = tuiCreateOptions({
min: 1,
max: 3,
content: ({ $implicit }) => $implicit,
});
class TuiTextarea {
constructor() {
this.options = inject(TUI_TEXTAREA_OPTIONS);
this.vcr = inject(ViewContainerRef);
this.el = tuiInjectElement();
this.textfield = inject((TuiTextfieldComponent));
this.isMobile = inject(TUI_IS_MOBILE);
this.min = this.options.min;
this.max = this.options.max;
this.content = this.options.content;
}
ngAfterViewInit() {
if (this.template) {
this.vcr.createEmbeddedView(this.template);
}
}
onScroll() {
this.text?.nativeElement.scrollTo({ top: this.el.scrollTop });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTextarea, isStandalone: true, selector: "textarea[tuiTextarea]", inputs: { min: "min", max: "max", content: "content" }, host: { listeners: { "scroll.zoneless": "onScroll()", "scroll.once": "onScroll()" }, properties: { "class._mobile": "isMobile" } }, providers: [tuiProvide(TUI_SCROLL_REF, ElementRef)], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "text", first: true, predicate: ["text"], descendants: true }], hostDirectives: [{ directive: i1.TuiWithTextfield }], ngImport: i0, template: "<ng-template #template>\n <tui-scroll-controls\n *ngIf=\"!isMobile\"\n class=\"t-scroll\"\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 <span class=\"t-hack\"></span>\n</ng-template>\n", styles: [":host-context(tui-textfield._with-label[data-size=\"m\"]){border-block-start-width:calc(.5rem + var(--t-height) / 3);padding-block-start:0}:host-context(tui-textfield._with-label[data-size=\"l\"]){border-block-start-width:calc(.625rem + var(--t-height) / 3);padding-block-start:0}:host-context(tui-textfield[data-size=\"s\"]){padding-block-start:.5rem;padding-block-end:.25rem}:host-context(tui-textfield[data-size=\"m\"]){padding-block-start:.875rem;padding-block-end:.25rem}:host-context(tui-textfield[data-size=\"l\"]){padding-block-start:1.125rem;padding-block-end:.375rem}:host{word-break:break-word;border:0 solid transparent}:host[data-appearance=table]{border-block-start:1px solid transparent;border-block-end:none!important}:host:not(._mobile){scrollbar-width:none;-ms-overflow-style:none}:host:not(._mobile)::-webkit-scrollbar,:host:not(._mobile)::-webkit-scrollbar-thumb{display:none}.t-scroll{position:absolute;top:0;left:0;bottom:0;right:0;top:.25rem;bottom:.25rem;min-block-size:0}::ng-deep tui-textfield._with-label[data-size=m] .t-scroll{top:calc(.5rem + var(--t-height) / 3)}::ng-deep tui-textfield._with-label[data-size=l] .t-scroll{top:calc(.625rem + var(--t-height) / 3)}.t-ghost{z-index:1;order:1;inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;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}.t-hack{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px transparent}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.12", ngImport: i0, type: TuiTextarea, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'textarea[tuiTextarea]', imports: [NgIf, PolymorpheusOutlet, TuiScrollControls], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiProvide(TUI_SCROLL_REF, ElementRef)], hostDirectives: [TuiWithTextfield], host: {
'[class._mobile]': 'isMobile',
'(scroll.zoneless)': 'onScroll()',
// To trigger CD for #text
'(scroll.once)': 'onScroll()',
}, template: "<ng-template #template>\n <tui-scroll-controls\n *ngIf=\"!isMobile\"\n class=\"t-scroll\"\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 <span class=\"t-hack\"></span>\n</ng-template>\n", styles: [":host-context(tui-textfield._with-label[data-size=\"m\"]){border-block-start-width:calc(.5rem + var(--t-height) / 3);padding-block-start:0}:host-context(tui-textfield._with-label[data-size=\"l\"]){border-block-start-width:calc(.625rem + var(--t-height) / 3);padding-block-start:0}:host-context(tui-textfield[data-size=\"s\"]){padding-block-start:.5rem;padding-block-end:.25rem}:host-context(tui-textfield[data-size=\"m\"]){padding-block-start:.875rem;padding-block-end:.25rem}:host-context(tui-textfield[data-size=\"l\"]){padding-block-start:1.125rem;padding-block-end:.375rem}:host{word-break:break-word;border:0 solid transparent}:host[data-appearance=table]{border-block-start:1px solid transparent;border-block-end:none!important}:host:not(._mobile){scrollbar-width:none;-ms-overflow-style:none}:host:not(._mobile)::-webkit-scrollbar,:host:not(._mobile)::-webkit-scrollbar-thumb{display:none}.t-scroll{position:absolute;top:0;left:0;bottom:0;right:0;top:.25rem;bottom:.25rem;min-block-size:0}::ng-deep tui-textfield._with-label[data-size=m] .t-scroll{top:calc(.5rem + var(--t-height) / 3)}::ng-deep tui-textfield._with-label[data-size=l] .t-scroll{top:calc(.625rem + var(--t-height) / 3)}.t-ghost{z-index:1;order:1;inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;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}.t-hack{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px transparent}\n"] }]
}], propDecorators: { template: [{
type: ViewChild,
args: [TemplateRef]
}], text: [{
type: ViewChild,
args: ['text']
}], min: [{
type: Input
}], max: [{
type: Input
}], content: [{
type: Input
}] } });
class TuiTextareaLimitComponent {
constructor() {
this.limit = inject(TuiTextareaLimit).limit;
this.context = injectContext();
this.background = 'linear-gradient(transparent 0.125rem, var(--tui-status-negative-pale) 0.125rem, var(--tui-status-negative-pale) calc(100% - 0.125rem), transparent calc(100% - 0.125rem))';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextareaLimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTextareaLimitComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
<span [textContent]="context.$implicit.slice(0, limit())"></span>
<span
[style.background]="background"
[textContent]="context.$implicit.slice(limit())"
></span>
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextareaLimitComponent, decorators: [{
type: Component,
args: [{
standalone: true,
template: `
<span [textContent]="context.$implicit.slice(0, limit())"></span>
<span
[style.background]="background"
[textContent]="context.$implicit.slice(limit())"
></span>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}] });
class TuiTextareaCounterComponent {
constructor() {
this.limit = signal(0);
this.length = signal(0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextareaCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTextareaCounterComponent, 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-font-text-ui-xs);color:var(--tui-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextareaCounterComponent, decorators: [{
type: Component,
args: [{ standalone: true, 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-font-text-ui-xs);color:var(--tui-text-secondary)}\n"] }]
}] });
const COMPONENT = new PolymorpheusComponent(TuiTextareaLimitComponent);
class TuiTextareaLimit {
constructor() {
this.textfield = inject(TuiTextfieldComponent);
this.ref = inject(ViewContainerRef).createComponent(TuiTextareaCounterComponent);
this.size = inject(TUI_TEXTFIELD_OPTIONS).size;
this.limit = signal(0);
}
// TODO: Use signal inputs in v5
set limitSetter(limit) {
this.limit.set(limit);
}
ngDoCheck() {
this.ref.instance.length.set(this.textfield.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: "16.2.12", ngImport: i0, type: TuiTextareaLimit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiTextareaLimit, isStandalone: true, selector: "[tuiTextarea][limit]", inputs: { limitSetter: ["limit", "limitSetter"] }, host: { properties: { "style.border-block-end-width.rem": "size() === \"l\" ? 1.875 : 1.75" } }, providers: [
tuiProvide(NG_VALIDATORS, TuiTextareaLimit, true),
tuiTextareaOptionsProvider({ content: COMPONENT }),
], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTextareaLimit, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiTextarea][limit]',
providers: [
tuiProvide(NG_VALIDATORS, TuiTextareaLimit, true),
tuiTextareaOptionsProvider({ content: COMPONENT }),
],
host: {
'[style.border-block-end-width.rem]': 'size() === "l" ? 1.875 : 1.75',
},
}]
}], propDecorators: { limitSetter: [{
type: Input,
args: ['limit']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_TEXTAREA_OPTIONS, TuiTextarea, TuiTextareaCounterComponent, TuiTextareaLimit, TuiTextareaLimitComponent, tuiTextareaOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-textarea.mjs.map