@taiga-ui/kit
Version:
Taiga UI Angular main components kit
93 lines • 12.6 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();
}
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: linear-gradient(transparent 0.25rem, var(--tui-status-negative-pale) 0.25rem, var(--tui-status-negative-pale) 100%)"
[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: linear-gradient(transparent 0.25rem, var(--tui-status-negative-pale) 0.25rem, var(--tui-status-negative-pale) 100%)"
[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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEtbGltaXQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvdGV4dGFyZWEvdGV4dGFyZWEtbGltaXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFNBQVMsRUFFVCxNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixnQkFBZ0IsR0FDbkIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUVILGFBQWEsRUFHYixVQUFVLEdBQ2IsTUFBTSxnQkFBZ0IsQ0FBQztBQUV4QixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDN0QsT0FBTyxFQUNILHFCQUFxQixFQUNyQixxQkFBcUIsR0FDeEIsTUFBTSxxQ0FBcUMsQ0FBQztBQUM3QyxPQUFPLEVBQUMsYUFBYSxFQUFFLHFCQUFxQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFFNUUsT0FBTyxFQUFDLDBCQUEwQixFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlELE1BV2EseUJBQXlCO0lBWHRDO1FBWXVCLFVBQUssR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFDdkMsWUFBTyxHQUFHLGFBQWEsRUFBc0IsQ0FBQztLQUNwRTsrR0FIWSx5QkFBeUI7bUdBQXpCLHlCQUF5Qix3RUFUeEI7Ozs7OztLQU1UOztTQUdRLHlCQUF5Qjs0RkFBekIseUJBQXlCO2tCQVhyQyxTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUU7Ozs7OztLQU1UO29CQUNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNsRDs7QUFNRCxNQU1hLDJCQUEyQjtJQU54QztRQU9vQixVQUFLLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2xCLFdBQU0sR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7S0FDdEM7K0dBSFksMkJBQTJCO21HQUEzQiwyQkFBMkIsd0VBSjFCLGdDQUFnQzs7U0FJakMsMkJBQTJCOzRGQUEzQiwyQkFBMkI7a0JBTnZDLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGdDQUFnQyxtQkFFekIsdUJBQXVCLENBQUMsTUFBTTs7QUFPbkQsTUFBTSxTQUFTLEdBQUcsSUFBSSxxQkFBcUIsQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDO0FBRXZFLE1BV2EsZ0JBQWdCO0lBWDdCO1FBWXFCLGNBQVMsR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUMxQyxRQUFHLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUMsZUFBZSxDQUMzRCwyQkFBMkIsQ0FDOUIsQ0FBQztRQUVjLFNBQUksR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDMUMsVUFBSyxHQUFHLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztLQWdCckM7SUFkRyxnQ0FBZ0M7SUFDaEMsSUFDVyxXQUFXLENBQUMsS0FBYTtRQUNoQyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRU0sU0FBUztRQUNaLElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUM1RCxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFTSxRQUFRLENBQUMsT0FBd0I7UUFDcEMsT0FBTyxVQUFVLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3ZELENBQUM7K0dBdEJRLGdCQUFnQjttR0FBaEIsZ0JBQWdCLHVOQVJkO1lBQ1AsVUFBVSxDQUFDLGFBQWEsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLENBQUM7WUFDakQsMEJBQTBCLENBQUMsRUFBQyxPQUFPLEVBQUUsU0FBUyxFQUFDLENBQUM7U0FDbkQ7O1NBS1EsZ0JBQWdCOzRGQUFoQixnQkFBZ0I7a0JBWDVCLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxzQkFBc0I7b0JBQ2hDLFNBQVMsRUFBRTt3QkFDUCxVQUFVLENBQUMsYUFBYSxvQkFBb0IsSUFBSSxDQUFDO3dCQUNqRCwwQkFBMEIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxTQUFTLEVBQUMsQ0FBQztxQkFDbkQ7b0JBQ0QsSUFBSSxFQUFFO3dCQUNGLG9DQUFvQyxFQUFFLCtCQUErQjtxQkFDeEU7aUJBQ0o7OEJBWWMsV0FBVztzQkFEckIsS0FBSzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRGlyZWN0aXZlLFxuICAgIHR5cGUgRG9DaGVjayxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgc2lnbmFsLFxuICAgIFZpZXdDb250YWluZXJSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICB0eXBlIEFic3RyYWN0Q29udHJvbCxcbiAgICBOR19WQUxJREFUT1JTLFxuICAgIHR5cGUgVmFsaWRhdGlvbkVycm9ycyxcbiAgICB0eXBlIFZhbGlkYXRvcixcbiAgICBWYWxpZGF0b3JzLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge3R5cGUgVHVpQ29udGV4dH0gZnJvbSAnQHRhaWdhLXVpL2Nkay90eXBlcyc7XG5pbXBvcnQge3R1aVByb3ZpZGV9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1xuICAgIFRVSV9URVhURklFTERfT1BUSU9OUyxcbiAgICBUdWlUZXh0ZmllbGRDb21wb25lbnQsXG59IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvdGV4dGZpZWxkJztcbmltcG9ydCB7aW5qZWN0Q29udGV4dCwgUG9seW1vcnBoZXVzQ29tcG9uZW50fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuaW1wb3J0IHt0dWlUZXh0YXJlYU9wdGlvbnNQcm92aWRlcn0gZnJvbSAnLi90ZXh0YXJlYS5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICA8c3BhbiBbdGV4dENvbnRlbnRdPVwiY29udGV4dC4kaW1wbGljaXQuc2xpY2UoMCwgbGltaXQoKSlcIj48L3NwYW4+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgICBzdHlsZT1cImJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0cmFuc3BhcmVudCAwLjI1cmVtLCB2YXIoLS10dWktc3RhdHVzLW5lZ2F0aXZlLXBhbGUpIDAuMjVyZW0sIHZhcigtLXR1aS1zdGF0dXMtbmVnYXRpdmUtcGFsZSkgMTAwJSlcIlxuICAgICAgICAgICAgW3RleHRDb250ZW50XT1cImNvbnRleHQuJGltcGxpY2l0LnNsaWNlKGxpbWl0KCkpXCJcbiAgICAgICAgPjwvc3Bhbj5cbiAgICBgLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUZXh0YXJlYUxpbWl0Q29tcG9uZW50IHtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgbGltaXQgPSBpbmplY3QoVHVpVGV4dGFyZWFMaW1pdCkubGltaXQ7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNvbnRleHQgPSBpbmplY3RDb250ZXh0PFR1aUNvbnRleHQ8c3RyaW5nPj4oKTtcbn1cblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICB0ZW1wbGF0ZTogJ3t7IGxlbmd0aCgpIH19IC8ge3sgbGltaXQoKSB9fScsXG4gICAgc3R5bGVVcmxzOiBbJy4vdGV4dGFyZWEtbGltaXQuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUZXh0YXJlYUNvdW50ZXJDb21wb25lbnQge1xuICAgIHB1YmxpYyByZWFkb25seSBsaW1pdCA9IHNpZ25hbCgwKTtcbiAgICBwdWJsaWMgcmVhZG9ubHkgbGVuZ3RoID0gc2lnbmFsKDApO1xufVxuXG5jb25zdCBDT01QT05FTlQgPSBuZXcgUG9seW1vcnBoZXVzQ29tcG9uZW50KFR1aVRleHRhcmVhTGltaXRDb21wb25lbnQpO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAnW3R1aVRleHRhcmVhXVtsaW1pdF0nLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICB0dWlQcm92aWRlKE5HX1ZBTElEQVRPUlMsIFR1aVRleHRhcmVhTGltaXQsIHRydWUpLFxuICAgICAgICB0dWlUZXh0YXJlYU9wdGlvbnNQcm92aWRlcih7Y29udGVudDogQ09NUE9ORU5UfSksXG4gICAgXSxcbiAgICBob3N0OiB7XG4gICAgICAgICdbc3R5bGUuYm9yZGVyLWJsb2NrLWVuZC13aWR0aC5yZW1dJzogJ3NpemUoKSA9PT0gXCJsXCIgPyAxLjg3NSA6IDEuNzUnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVRleHRhcmVhTGltaXQgaW1wbGVtZW50cyBWYWxpZGF0b3IsIERvQ2hlY2sge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgdGV4dGZpZWxkID0gaW5qZWN0KFR1aVRleHRmaWVsZENvbXBvbmVudCk7XG4gICAgcHJpdmF0ZSByZWFkb25seSByZWYgPSBpbmplY3QoVmlld0NvbnRhaW5lclJlZikuY3JlYXRlQ29tcG9uZW50KFxuICAgICAgICBUdWlUZXh0YXJlYUNvdW50ZXJDb21wb25lbnQsXG4gICAgKTtcblxuICAgIHB1YmxpYyByZWFkb25seSBzaXplID0gaW5qZWN0KFRVSV9URVhURklFTERfT1BUSU9OUykuc2l6ZTtcbiAgICBwdWJsaWMgcmVhZG9ubHkgbGltaXQgPSBzaWduYWwoMCk7XG5cbiAgICAvLyBUT0RPOiBVc2Ugc2lnbmFsIGlucHV0cyBpbiB2NVxuICAgIEBJbnB1dCgnbGltaXQnKVxuICAgIHB1YmxpYyBzZXQgbGltaXRTZXR0ZXIobGltaXQ6IG51bWJlcikge1xuICAgICAgICB0aGlzLmxpbWl0LnNldChsaW1pdCk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nRG9DaGVjaygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5yZWYuaW5zdGFuY2UubGVuZ3RoLnNldCh0aGlzLnRleHRmaWVsZC52YWx1ZSgpLmxlbmd0aCk7XG4gICAgICAgIHRoaXMucmVmLmluc3RhbmNlLmxpbWl0LnNldCh0aGlzLmxpbWl0KCkpO1xuICAgIH1cblxuICAgIHB1YmxpYyB2YWxpZGF0ZShjb250cm9sOiBBYnN0cmFjdENvbnRyb2wpOiBWYWxpZGF0aW9uRXJyb3JzIHwgbnVsbCB7XG4gICAgICAgIHJldHVybiBWYWxpZGF0b3JzLm1heExlbmd0aCh0aGlzLmxpbWl0KCkpKGNvbnRyb2wpO1xuICAgIH1cbn1cbiJdfQ==