@taiga-ui/kit
Version:
Taiga UI Angular main components kit
94 lines • 12.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, Directive, inject, Input, signal, ViewContainerRef, } from '@angular/core';
import { NG_VALIDATORS, Validators } from '@angular/forms';
import { tuiProvide } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldComponent, } from '@taiga-ui/core/components/textfield';
import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus';
import { tuiTextareaOptionsProvider } from './textarea.options';
import * as i0 from "@angular/core";
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 }); }
}
export { TuiTextareaLimitComponent };
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 }); }
}
export { TuiTextareaCounterComponent };
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 }); }
}
export { TuiTextareaLimit };
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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEtbGltaXQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvdGV4dGFyZWEvdGV4dGFyZWEtbGltaXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFNBQVMsRUFDVCxNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixnQkFBZ0IsR0FDbkIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDN0QsT0FBTyxFQUNILHFCQUFxQixFQUNyQixxQkFBcUIsR0FDeEIsTUFBTSxxQ0FBcUMsQ0FBQztBQUM3QyxPQUFPLEVBQUMsYUFBYSxFQUFFLHFCQUFxQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFFNUUsT0FBTyxFQUFDLDBCQUEwQixFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlELE1BV2EseUJBQXlCO0lBWHRDO1FBWXVCLFVBQUssR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDdkMsWUFBTyxHQUFHLGFBQWEsRUFBc0IsQ0FBQztRQUM5QyxlQUFVLEdBQ3pCLDJLQUEySyxDQUFDO0tBQ25MOytHQUxZLHlCQUF5QjttR0FBekIseUJBQXlCLHdFQVR4Qjs7Ozs7O0tBTVQ7O1NBR1EseUJBQXlCOzRGQUF6Qix5QkFBeUI7a0JBWHJDLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRTs7Ozs7O0tBTVQ7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2xEOztBQVFELE1BTWEsMkJBQTJCO0lBTnhDO1FBT29CLFVBQUssR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDbEIsV0FBTSxHQUFHLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztLQUN0QzsrR0FIWSwyQkFBMkI7bUdBQTNCLDJCQUEyQix3RUFKMUIsZ0NBQWdDOztTQUlqQywyQkFBMkI7NEZBQTNCLDJCQUEyQjtrQkFOdkMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sZ0NBQWdDLG1CQUV6Qix1QkFBdUIsQ0FBQyxNQUFNOztBQU9uRCxNQUFNLFNBQVMsR0FBRyxJQUFJLHFCQUFxQixDQUFDLHlCQUF5QixDQUFDLENBQUM7QUFFdkUsTUFXYSxnQkFBZ0I7SUFYN0I7UUFZcUIsY0FBUyxHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBQzFDLFFBQUcsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxlQUFlLENBQzNELDJCQUEyQixDQUM5QixDQUFDO1FBRWMsU0FBSSxHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUMxQyxVQUFLLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO0tBZ0JyQztJQWRHLGdDQUFnQztJQUNoQyxJQUNXLFdBQVcsQ0FBQyxLQUFhO1FBQ2hDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFTSxTQUFTO1FBQ1osSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzVELElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVNLFFBQVEsQ0FBQyxPQUF3QjtRQUNwQyxPQUFPLFVBQVUsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDdkQsQ0FBQzsrR0F0QlEsZ0JBQWdCO21HQUFoQixnQkFBZ0IsdU5BUmQ7WUFDUCxVQUFVLENBQUMsYUFBYSxFQUFFLGdCQUFnQixFQUFFLElBQUksQ0FBQztZQUNqRCwwQkFBMEIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxTQUFTLEVBQUMsQ0FBQztTQUNuRDs7U0FLUSxnQkFBZ0I7NEZBQWhCLGdCQUFnQjtrQkFYNUIsU0FBUzttQkFBQztvQkFDUCxVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsU0FBUyxFQUFFO3dCQUNQLFVBQVUsQ0FBQyxhQUFhLG9CQUFvQixJQUFJLENBQUM7d0JBQ2pELDBCQUEwQixDQUFDLEVBQUMsT0FBTyxFQUFFLFNBQVMsRUFBQyxDQUFDO3FCQUNuRDtvQkFDRCxJQUFJLEVBQUU7d0JBQ0Ysb0NBQW9DLEVBQUUsK0JBQStCO3FCQUN4RTtpQkFDSjs4QkFZYyxXQUFXO3NCQURyQixLQUFLO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7RG9DaGVja30gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBEaXJlY3RpdmUsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIHNpZ25hbCxcbiAgICBWaWV3Q29udGFpbmVyUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB0eXBlIHtBYnN0cmFjdENvbnRyb2wsIFZhbGlkYXRpb25FcnJvcnMsIFZhbGlkYXRvcn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtOR19WQUxJREFUT1JTLCBWYWxpZGF0b3JzfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgdHlwZSB7VHVpQ29udGV4dH0gZnJvbSAnQHRhaWdhLXVpL2Nkay90eXBlcyc7XG5pbXBvcnQge3R1aVByb3ZpZGV9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1xuICAgIFRVSV9URVhURklFTERfT1BUSU9OUyxcbiAgICBUdWlUZXh0ZmllbGRDb21wb25lbnQsXG59IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvdGV4dGZpZWxkJztcbmltcG9ydCB7aW5qZWN0Q29udGV4dCwgUG9seW1vcnBoZXVzQ29tcG9uZW50fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuaW1wb3J0IHt0dWlUZXh0YXJlYU9wdGlvbnNQcm92aWRlcn0gZnJvbSAnLi90ZXh0YXJlYS5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICA8c3BhbiBbdGV4dENvbnRlbnRdPVwiY29udGV4dC4kaW1wbGljaXQuc2xpY2UoMCwgbGltaXQoKSlcIj48L3NwYW4+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZF09XCJiYWNrZ3JvdW5kXCJcbiAgICAgICAgICAgIFt0ZXh0Q29udGVudF09XCJjb250ZXh0LiRpbXBsaWNpdC5zbGljZShsaW1pdCgpKVwiXG4gICAgICAgID48L3NwYW4+XG4gICAgYCxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGV4dGFyZWFMaW1pdENvbXBvbmVudCB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGxpbWl0ID0gaW5qZWN0KFR1aVRleHRhcmVhTGltaXQpLmxpbWl0O1xuICAgIHByb3RlY3RlZCByZWFkb25seSBjb250ZXh0ID0gaW5qZWN0Q29udGV4dDxUdWlDb250ZXh0PHN0cmluZz4+KCk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGJhY2tncm91bmQgPVxuICAgICAgICAnbGluZWFyLWdyYWRpZW50KHRyYW5zcGFyZW50IDAuMTI1cmVtLCB2YXIoLS10dWktc3RhdHVzLW5lZ2F0aXZlLXBhbGUpIDAuMTI1cmVtLCB2YXIoLS10dWktc3RhdHVzLW5lZ2F0aXZlLXBhbGUpIGNhbGMoMTAwJSAtIDAuMTI1cmVtKSwgdHJhbnNwYXJlbnQgY2FsYygxMDAlIC0gMC4xMjVyZW0pKSc7XG59XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgdGVtcGxhdGU6ICd7eyBsZW5ndGgoKSB9fSAvIHt7IGxpbWl0KCkgfX0nLFxuICAgIHN0eWxlVXJsczogWycuL3RleHRhcmVhLWxpbWl0LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGV4dGFyZWFDb3VudGVyQ29tcG9uZW50IHtcbiAgICBwdWJsaWMgcmVhZG9ubHkgbGltaXQgPSBzaWduYWwoMCk7XG4gICAgcHVibGljIHJlYWRvbmx5IGxlbmd0aCA9IHNpZ25hbCgwKTtcbn1cblxuY29uc3QgQ09NUE9ORU5UID0gbmV3IFBvbHltb3JwaGV1c0NvbXBvbmVudChUdWlUZXh0YXJlYUxpbWl0Q29tcG9uZW50KTtcblxuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ1t0dWlUZXh0YXJlYV1bbGltaXRdJyxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgdHVpUHJvdmlkZShOR19WQUxJREFUT1JTLCBUdWlUZXh0YXJlYUxpbWl0LCB0cnVlKSxcbiAgICAgICAgdHVpVGV4dGFyZWFPcHRpb25zUHJvdmlkZXIoe2NvbnRlbnQ6IENPTVBPTkVOVH0pLFxuICAgIF0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLmJvcmRlci1ibG9jay1lbmQtd2lkdGgucmVtXSc6ICdzaXplKCkgPT09IFwibFwiID8gMS44NzUgOiAxLjc1JyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUZXh0YXJlYUxpbWl0IGltcGxlbWVudHMgVmFsaWRhdG9yLCBEb0NoZWNrIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHRleHRmaWVsZCA9IGluamVjdChUdWlUZXh0ZmllbGRDb21wb25lbnQpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgcmVmID0gaW5qZWN0KFZpZXdDb250YWluZXJSZWYpLmNyZWF0ZUNvbXBvbmVudChcbiAgICAgICAgVHVpVGV4dGFyZWFDb3VudGVyQ29tcG9uZW50LFxuICAgICk7XG5cbiAgICBwdWJsaWMgcmVhZG9ubHkgc2l6ZSA9IGluamVjdChUVUlfVEVYVEZJRUxEX09QVElPTlMpLnNpemU7XG4gICAgcHVibGljIHJlYWRvbmx5IGxpbWl0ID0gc2lnbmFsKDApO1xuXG4gICAgLy8gVE9ETzogVXNlIHNpZ25hbCBpbnB1dHMgaW4gdjVcbiAgICBASW5wdXQoJ2xpbWl0JylcbiAgICBwdWJsaWMgc2V0IGxpbWl0U2V0dGVyKGxpbWl0OiBudW1iZXIpIHtcbiAgICAgICAgdGhpcy5saW1pdC5zZXQobGltaXQpO1xuICAgIH1cblxuICAgIHB1YmxpYyBuZ0RvQ2hlY2soKTogdm9pZCB7XG4gICAgICAgIHRoaXMucmVmLmluc3RhbmNlLmxlbmd0aC5zZXQodGhpcy50ZXh0ZmllbGQudmFsdWUoKS5sZW5ndGgpO1xuICAgICAgICB0aGlzLnJlZi5pbnN0YW5jZS5saW1pdC5zZXQodGhpcy5saW1pdCgpKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgdmFsaWRhdGUoY29udHJvbDogQWJzdHJhY3RDb250cm9sKTogVmFsaWRhdGlvbkVycm9ycyB8IG51bGwge1xuICAgICAgICByZXR1cm4gVmFsaWRhdG9ycy5tYXhMZW5ndGgodGhpcy5saW1pdCgpKShjb250cm9sKTtcbiAgICB9XG59XG4iXX0=