@gerandon/ngx-widgets
Version:
Angular widget (components) collection using CVA (ControlValueAccessor)
456 lines (448 loc) • 67.3 kB
JavaScript
import * as i0 from '@angular/core';
import { input, inject, Injector, ChangeDetectorRef, ViewChild, Directive, InjectionToken, viewChild, signal, Input, Optional, Inject, isDevMode, output, forwardRef, ViewEncapsulation, Component, ViewChildren } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormControl, NgControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, FormsModule } from '@angular/forms';
import { of, Subject, startWith, takeUntil, debounceTime, Observable, first, tap, switchMap, map } from 'rxjs';
import * as i3 from '@angular/material/form-field';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule, MatFormField, MatLabel, MatError } from '@angular/material/form-field';
import { isEmpty, keys, isEqual, find } from 'lodash-es';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import * as i4 from '@angular/material/input';
import { MatInput, MatInputModule } from '@angular/material/input';
import { SafeSubscriber } from 'rxjs/internal/Subscriber';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { NgxMaskDirective } from 'ngx-mask';
import * as i2$1 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { takeUntil as takeUntil$1 } from 'rxjs/operators';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import * as i5 from '@angular/cdk/text-field';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
import { AsyncPipe } from '@angular/common';
import * as i4$1 from '@angular/material/autocomplete';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i1$1 from '@angular/material/chips';
import { MatChipsModule } from '@angular/material/chips';
class BaseValueAccessor {
constructor() {
this.validator = input(of({}));
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.onChange = (value) => {
};
this.onTouched = () => {
};
this.injector = inject(Injector);
this.cdr = inject(ChangeDetectorRef);
this._defaultValidate = () => null;
this.destroy$ = new Subject();
this._validate = this._defaultValidate;
// Temporarily, AfterViewInit will handle the correct setting
this.control = new FormControl();
}
validate(control) {
control.setErrors({ ...control.errors, pending: true });
return this.validator();
}
ngAfterViewInit() {
this.controlDir = this.injector.get(NgControl);
this.control = this.controlDir.control;
// For ng-valid expression changed error workaround purposes
this.cdr.detectChanges();
}
writeValue(obj) {
this.valueAccessor?.writeValue(obj);
}
registerOnChange(fn) {
this.onChange = fn;
this.valueAccessor?.registerOnChange(fn);
}
registerOnTouched(fn) {
this.onTouched = fn;
this.valueAccessor?.registerOnTouched(fn);
}
get valueAccessor() {
return this.input ? this.input.valueAccessor : null;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: BaseValueAccessor, isStandalone: true, inputs: { validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseValueAccessor, decorators: [{
type: Directive
}], ctorParameters: () => [], propDecorators: { inputElement: [{
type: ViewChild,
args: ['inputElement']
}], input: [{
type: ViewChild,
args: ['input']
}] } });
const NGX_WIDGETS_VALIDATION_TRANSLATIONS = new InjectionToken('NGX_WIDGETS_VALIDATION_TRANSLATIONS');
/**
* @deprecated
* This token is deprecated and will be removed in Angular v21. Use MAT_FORM_FIELD_DEFAULT_OPTIONS instead.
*/
const NGX_WIDGETS_FORM_FIELD_APPEARANCE = new InjectionToken('NGX_WIDGETS_FORM_FIELD_APPEARANCE');
class BaseInput extends BaseValueAccessor {
constructor(validationTranslations = {}) {
super();
this.validationTranslations = validationTranslations;
this.appearance = input();
this.color = input();
this.translateParams = input();
this.isDisabled = input(false);
this.floatLabel = input('auto');
this.formControlName = input();
this.validatorMessages = input();
this.subscriptSizing = input('fixed');
this.hintLabel = input('');
this.ariaLabel = input('', { alias: 'aria-label' });
this.ariaPlaceholder = input('', { alias: 'aria-placeholder' });
this.ariaDescribedBy = input('', { alias: 'aria-describedby' });
this.ariaDescription = input('', { alias: 'aria-description' });
this.focusOnInit = input(false);
this.matInput = viewChild(MatInput);
this.controlErrorKeys = [];
this.liveAnnouncer = inject(LiveAnnouncer);
this.matFormFieldConfig = inject(MAT_FORM_FIELD_DEFAULT_OPTIONS);
this.announcerTranslations = input();
this.validatorMessagesArray = [];
this._appearance = signal(this.matFormFieldConfig.appearance ?? 'fill');
this._color = signal(this.matFormFieldConfig.color ?? 'primary');
}
ngOnInit() {
this.placeholder = this.placeholder === undefined ? this.label : this.placeholder;
if (!this.name) {
this.name = this.formControlName();
/*
console.warn(`name attribute is not defined for ${this.formControlName}! Please beware, that using this control multiple
times with the same control name could result in wrong focus, clicking on the label!`);
*/
}
// *ngIf seems like does not re-render component when label is used with dynamic value (e.g.: translate pipe). Strange
this.label = this.label || ' ';
}
ngOnChanges(changes) {
if (changes['validatorMessages']) {
const validatorMessages = this.validatorMessages();
if (!isEmpty(validatorMessages)) {
this.validatorMessagesArray = keys(validatorMessages).map((key) => ({
key,
value: this.validatorMessages()[key],
}));
}
}
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.control.statusChanges.pipe(startWith(this.control.status), takeUntil(this.destroy$), debounceTime(100)).subscribe(() => {
if (!this.control.hasError('server')) {
this.controlErrorKeys = keys(this.control.errors).map((key) => key);
this.cdr.detectChanges();
}
});
if (this.focusOnInit()) {
this.matInput()?.focus();
}
this.cdr.detectChanges();
}
announce(key) {
if (this._defaultAnnouncerTranslations?.[key]) {
const _key = key;
const inputTranslation = this.announcerTranslations()?.[_key];
if (inputTranslation) {
return this.liveAnnouncer.announce(inputTranslation, 'assertive');
}
else {
return this.liveAnnouncer.announce(this._defaultAnnouncerTranslations[_key], 'assertive');
}
}
else {
return this.liveAnnouncer.announce(key, 'assertive');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseInput, deps: [{ token: NGX_WIDGETS_VALIDATION_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.3", type: BaseInput, isStandalone: true, inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, translateParams: { classPropertyName: "translateParams", publicName: "translateParams", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: false, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: false, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: false, isRequired: false, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, validatorMessages: { classPropertyName: "validatorMessages", publicName: "validatorMessages", isSignal: true, isRequired: false, transformFunction: null }, subscriptSizing: { classPropertyName: "subscriptSizing", publicName: "subscriptSizing", isSignal: true, isRequired: false, transformFunction: null }, hintLabel: { classPropertyName: "hintLabel", publicName: "hintLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaPlaceholder: { classPropertyName: "ariaPlaceholder", publicName: "aria-placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "aria-description", isSignal: true, isRequired: false, transformFunction: null }, focusOnInit: { classPropertyName: "focusOnInit", publicName: "focusOnInit", isSignal: true, isRequired: false, transformFunction: null }, announcerTranslations: { classPropertyName: "announcerTranslations", publicName: "announcerTranslations", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "matInput", first: true, predicate: MatInput, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseInput, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [NGX_WIDGETS_VALIDATION_TRANSLATIONS]
}] }], propDecorators: { id: [{
type: Input
}], name: [{
type: Input
}], label: [{
type: Input
}], placeholder: [{
type: Input
}], prefixIcon: [{
type: Input
}], suffixIcon: [{
type: Input
}], suffix: [{
type: Input
}] } });
class BaseTextInput extends BaseInput {
constructor() {
super(...arguments);
this.type = input('text');
this.maxLength = input(512);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseTextInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: BaseTextInput, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseTextInput, decorators: [{
type: Directive
}] });
class BaseMaskInput extends BaseTextInput {
constructor() {
super(...arguments);
this.mask = input();
this.showMaskTyped = input(false);
this.dropSpecialCharacters = input();
this.specialCharacters = input();
this.placeHolderCharacter = input('_');
this.maskPrefix = input('');
this.maskSuffix = input('');
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.maskInput) {
this.maskInput._maskService.dropSpecialCharacters = this.dropSpecialCharacters();
this.maskInput['_applyMask']();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseMaskInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: BaseMaskInput, isStandalone: true, inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, showMaskTyped: { classPropertyName: "showMaskTyped", publicName: "showMaskTyped", isSignal: true, isRequired: false, transformFunction: null }, dropSpecialCharacters: { classPropertyName: "dropSpecialCharacters", publicName: "dropSpecialCharacters", isSignal: true, isRequired: false, transformFunction: null }, specialCharacters: { classPropertyName: "specialCharacters", publicName: "specialCharacters", isSignal: true, isRequired: false, transformFunction: null }, placeHolderCharacter: { classPropertyName: "placeHolderCharacter", publicName: "placeHolderCharacter", isSignal: true, isRequired: false, transformFunction: null }, maskPrefix: { classPropertyName: "maskPrefix", publicName: "maskPrefix", isSignal: true, isRequired: false, transformFunction: null }, maskSuffix: { classPropertyName: "maskSuffix", publicName: "maskSuffix", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "maskInput", first: true, predicate: ["maskInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BaseMaskInput, decorators: [{
type: Directive
}], propDecorators: { maskInput: [{
type: ViewChild,
args: ['maskInput']
}] } });
/**
* Automatically unsubscribe from an Observable when the view is destroyed
* Tested with checking the "complete" event of a subscribe method
* @description
* An Annotation that should be used with an Observable typed variable to handle its subscriptions
* @author gergo.asztalos
*/
function UnsubscribeOnDestroy() {
return function (target, propertyKey) {
const ngOnDestroy = target.ngOnDestroy;
const secretKey = `_${propertyKey}$`;
// Probably with function we could use own context
const destroyKey = (_this) => _this.hasOwnProperty('destroy$') ? 'destroy$' : `${_this.constructor.name}_destroy$`;
Object.defineProperty(target, secretKey, { enumerable: false, writable: true });
Object.defineProperty(target, propertyKey, {
configurable: true,
enumerable: true,
get: function () {
return this[secretKey];
},
set: function (newValue) {
if (!this[destroyKey(this)]) {
this[destroyKey(this)] = new Subject();
}
if (newValue instanceof Observable) {
this[secretKey] = newValue.pipe(takeUntil(this[destroyKey(this)]));
}
else {
this[secretKey] = newValue;
}
},
});
target.ngOnDestroy = function () {
if (this[propertyKey] instanceof SafeSubscriber) {
this[propertyKey].unsubscribe();
this[secretKey].unsubscribe();
}
else if (this.hasOwnProperty(destroyKey(this))) {
this[destroyKey(this)].next();
this[destroyKey(this)].complete();
}
delete this[secretKey];
if (isDevMode()) {
// eslint-disable-next-line no-console,max-len
console.debug(`<UnsubscribeOnDestroy> - Observable/Subscription <${propertyKey}> completed in class: ${this.constructor.name}`);
}
ngOnDestroy && ngOnDestroy.call(this);
};
};
}
class BasicInputComponent extends BaseMaskInput {
constructor() {
super(...arguments);
this.iconClick = output();
}
ngOnInit() {
super.ngOnInit();
this.id = this.id || this.name;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BasicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: BasicInputComponent, isStandalone: true, selector: "gerandon-basic-input", outputs: { iconClick: "iconClick" }, providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true },
{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true },
], usesInheritance: true, ngImport: i0, template: "<div class=\"basic-input cva-input\">\r\n <mat-form-field [appearance]=\"appearance() ?? _appearance()\"\r\n [color]=\"color() ?? _color()\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n [hintLabel]=\"hintLabel()\"\r\n [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label [class.disabled]=\"isDisabled()\">{{label}}</mat-label>\r\n }\r\n @if(mask()) {\r\n <input\r\n [id]=\"id\"\r\n #inputElement\r\n #input=\"ngForm\"\r\n #maskInput=\"ngxMask\"\r\n matInput\r\n [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n [type]=\"type()\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [readonly]=\"isDisabled()\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [maxLength]=\"maxLength()\"\r\n [name]=\"name\"\r\n [mask]=\"mask()\"\r\n [triggerOnMaskChange]=\"true\"\r\n [showMaskTyped]=\"showMaskTyped()\"\r\n [specialCharacters]=\"specialCharacters()!\"\r\n [placeHolderCharacter]=\"placeHolderCharacter()!\"\r\n [prefix]=\"maskPrefix()\"\r\n [suffix]=\"maskSuffix()\"\r\n />\r\n } @else {\r\n <input\r\n [id]=\"id\"\r\n #inputElement\r\n #input=\"ngForm\"\r\n matInput\r\n [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n [type]=\"type()\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [readonly]=\"isDisabled()\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [maxLength]=\"maxLength()\"\r\n [name]=\"name\"\r\n />\r\n }\r\n @if (prefixIcon) {\r\n <mat-icon matPrefix color=\"accent\">\r\n {{prefixIcon}}\r\n </mat-icon>\r\n }\r\n @if (suffixIcon) {\r\n <mat-icon matSuffix color=\"accent\">\r\n {{suffixIcon}}\r\n </mat-icon>\r\n }\r\n @if (suffix) {\r\n <span matSuffix style=\"margin-right: 10px\">{{suffix}}</span>\r\n }\r\n\r\n @if (control.errors?.['server']) {\r\n <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n }\r\n @for (errorKey of controlErrorKeys; track errorKey) {\r\n <mat-error>\r\n @if(validatorMessages()?.[errorKey]) {\r\n {{ validatorMessages()![errorKey] }}\r\n } @else if (!!validationTranslations?.[errorKey]) {\r\n {{ validationTranslations[errorKey] }}\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-basic-input{display:block}gerandon-basic-input .basic-input{height:inherit}gerandon-basic-input .basic-input .disabled{color:#ced4da}gerandon-basic-input .basic-input mat-form-field{width:100%}gerandon-basic-input .basic-input mat-form-field .mat-icon{padding:unset;margin-left:10px;margin-right:10px}gerandon-basic-input .basic-input mat-form-field input::placeholder{color:#adb5bd;font-style:italic}gerandon-basic-input .basic-input mat-form-field input:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: BasicInputComponent, decorators: [{
type: Component,
args: [{ selector: 'gerandon-basic-input', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
ReactiveFormsModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
NgxMaskDirective,
], providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true },
{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true },
], template: "<div class=\"basic-input cva-input\">\r\n <mat-form-field [appearance]=\"appearance() ?? _appearance()\"\r\n [color]=\"color() ?? _color()\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n [hintLabel]=\"hintLabel()\"\r\n [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label [class.disabled]=\"isDisabled()\">{{label}}</mat-label>\r\n }\r\n @if(mask()) {\r\n <input\r\n [id]=\"id\"\r\n #inputElement\r\n #input=\"ngForm\"\r\n #maskInput=\"ngxMask\"\r\n matInput\r\n [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n [type]=\"type()\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [readonly]=\"isDisabled()\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [maxLength]=\"maxLength()\"\r\n [name]=\"name\"\r\n [mask]=\"mask()\"\r\n [triggerOnMaskChange]=\"true\"\r\n [showMaskTyped]=\"showMaskTyped()\"\r\n [specialCharacters]=\"specialCharacters()!\"\r\n [placeHolderCharacter]=\"placeHolderCharacter()!\"\r\n [prefix]=\"maskPrefix()\"\r\n [suffix]=\"maskSuffix()\"\r\n />\r\n } @else {\r\n <input\r\n [id]=\"id\"\r\n #inputElement\r\n #input=\"ngForm\"\r\n matInput\r\n [style.padding-right]=\"(suffix || prefixIcon) && '35px'\"\r\n [type]=\"type()\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [readonly]=\"isDisabled()\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [maxLength]=\"maxLength()\"\r\n [name]=\"name\"\r\n />\r\n }\r\n @if (prefixIcon) {\r\n <mat-icon matPrefix color=\"accent\">\r\n {{prefixIcon}}\r\n </mat-icon>\r\n }\r\n @if (suffixIcon) {\r\n <mat-icon matSuffix color=\"accent\">\r\n {{suffixIcon}}\r\n </mat-icon>\r\n }\r\n @if (suffix) {\r\n <span matSuffix style=\"margin-right: 10px\">{{suffix}}</span>\r\n }\r\n\r\n @if (control.errors?.['server']) {\r\n <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n }\r\n @for (errorKey of controlErrorKeys; track errorKey) {\r\n <mat-error>\r\n @if(validatorMessages()?.[errorKey]) {\r\n {{ validatorMessages()![errorKey] }}\r\n } @else if (!!validationTranslations?.[errorKey]) {\r\n {{ validationTranslations[errorKey] }}\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-basic-input{display:block}gerandon-basic-input .basic-input{height:inherit}gerandon-basic-input .basic-input .disabled{color:#ced4da}gerandon-basic-input .basic-input mat-form-field{width:100%}gerandon-basic-input .basic-input mat-form-field .mat-icon{padding:unset;margin-left:10px;margin-right:10px}gerandon-basic-input .basic-input mat-form-field input::placeholder{color:#adb5bd;font-style:italic}gerandon-basic-input .basic-input mat-form-field input:disabled{cursor:not-allowed}\n"] }]
}] });
class SelectComponent extends BaseInput {
constructor() {
super(...arguments);
this.emptyOptionAriaLabel = 'Üres';
this.multiple = input();
this.options = input([]);
this.initialOptionGetFn = input();
this.asyncOptions = input();
this.lazy = input(false);
this.optionsLoading = signal(false);
this._defaultAnnouncerTranslations = {
inputReset: 'Lenyíló mező törölve!'
};
this.lastOptions = [];
this.__options = [];
/**
* Angular Material - Select component comparsion is only '===', does not work with Array values
* https://github.com/angular/components/blob/a07c0758a5ec2eb4de1bb822354be08178c66aa4/src/lib/select/select.ts#L242C48-L242C58
*/
this._isEqual = isEqual;
}
get _options() {
return this.__options;
}
set _options(value) {
this.__options = value;
if (value.length) {
this.lastOptions = value;
}
}
ngOnInit() {
this.placeholder = !this.placeholder ? (this.validationTranslations?.selectGlobalPlaceholder || this.label) : this.placeholder;
super.ngOnInit();
this.id = this.id || this.formControlName() || this.name;
this._options = this.options();
const asyncOptions = this.asyncOptions();
if (asyncOptions && !this.lazy()) {
asyncOptions.pipe(takeUntil$1(this.destroy$)).subscribe((resp) => {
this._options = resp;
this.cdr.detectChanges();
});
}
}
ngAfterViewInit() {
super.ngAfterViewInit();
if (this.lazy()) {
this.initialOptionGetFn()(this.control.value).pipe(first()).subscribe((response) => {
this._options = [response];
this.cdr.detectChanges();
});
}
}
opened(opened) {
if (opened) {
const asyncOptions = this.asyncOptions();
if (asyncOptions && this.lazy()) {
this.optionsLoading.set(true);
this.optionSubscription = asyncOptions.pipe(first()).subscribe((resp) => {
this._options = resp;
this.optionsLoading.set(false);
this.cdr.detectChanges();
});
}
}
else if (this.optionSubscription && !this.optionSubscription.closed) {
// Cancelling request if select is closed before response arrived
this.optionsLoading.set(false);
this.optionSubscription?.unsubscribe();
if (this.lazy()) {
const lastOption = this.lastOptions.find((act) => act.value === this.control.value);
if (lastOption) {
this._options = [lastOption];
this.cdr.detectChanges();
}
}
}
}
reset() {
this.control.reset();
this.announce('inputReset');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: SelectComponent, isStandalone: true, selector: "gerandon-select", inputs: { emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: false, isRequired: false, transformFunction: null }, emptyOptionAriaLabel: { classPropertyName: "emptyOptionAriaLabel", publicName: "emptyOptionAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, initialOptionGetFn: { classPropertyName: "initialOptionGetFn", publicName: "initialOptionGetFn", isSignal: true, isRequired: false, transformFunction: null }, asyncOptions: { classPropertyName: "asyncOptions", publicName: "asyncOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }
], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElements"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance() ?? _appearance()\"\r\n [color]=\"color() ?? _color()\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label>{{ label }}</mat-label>\r\n }\r\n <mat-select #inputElement\r\n #input=\"ngForm\"\r\n [multiple]=\"multiple()\"\r\n (openedChange)=\"opened($event)\"\r\n [placeholder]=\"!floatLabel() ? label : placeholder\"\r\n [formControl]=\"control\"\r\n [id]=\"id\"\r\n [class.input-disabled]=\"isDisabled() || control.disabled\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [compareWith]=\"_isEqual\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\">\r\n @if (lazy() && optionsLoading()) {\r\n <mat-option class=\"gerandon-select-spinner-option\" disabled>\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </mat-option>\r\n } @else {\r\n @if (emptyOptionLabel) {\r\n <mat-option (click)=\"reset()\" [attr.aria-label]=\"emptyOptionAriaLabel\">\r\n {{ emptyOptionLabel }}\r\n </mat-option>\r\n }\r\n }\r\n @for(option of _options; track option) {\r\n <mat-option [value]=\"option.value\"\r\n [disabled]=\"optionsLoading()\"\r\n [attr.aria-label]=\"option.label\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n @if (suffix) {\r\n <span matSuffix>{{suffix}}</span>\r\n }\r\n @if (control.errors?.['server']) {\r\n <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n }\r\n @for (errorKey of controlErrorKeys; track errorKey) {\r\n <mat-error>\r\n @if(validatorMessages()?.[errorKey]) {\r\n {{ validatorMessages()![errorKey] }}\r\n } @else if (!!validationTranslations?.[errorKey]) {\r\n {{ validationTranslations[errorKey] }}\r\n }\r\n </mat-error>\r\n }\r\n</mat-form-field>\r\n", styles: [":host mat-form-field{width:100%}::ng-deep .gerandon-select-spinner-option .mdc-list-item__primary-text{width:100%;display:flex;justify-content:center}::ng-deep .gerandon-select-spinner-option .mdc-list-item__primary-text mat-progress-spinner{height:50px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'gerandon-select', standalone: true, providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }
], imports: [
MatInputModule,
MatSelectModule,
ReactiveFormsModule,
MatTooltipModule,
MatProgressSpinner,
], template: "<mat-form-field [appearance]=\"appearance() ?? _appearance()\"\r\n [color]=\"color() ?? _color()\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label>{{ label }}</mat-label>\r\n }\r\n <mat-select #inputElement\r\n #input=\"ngForm\"\r\n [multiple]=\"multiple()\"\r\n (openedChange)=\"opened($event)\"\r\n [placeholder]=\"!floatLabel() ? label : placeholder\"\r\n [formControl]=\"control\"\r\n [id]=\"id\"\r\n [class.input-disabled]=\"isDisabled() || control.disabled\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [compareWith]=\"_isEqual\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\">\r\n @if (lazy() && optionsLoading()) {\r\n <mat-option class=\"gerandon-select-spinner-option\" disabled>\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </mat-option>\r\n } @else {\r\n @if (emptyOptionLabel) {\r\n <mat-option (click)=\"reset()\" [attr.aria-label]=\"emptyOptionAriaLabel\">\r\n {{ emptyOptionLabel }}\r\n </mat-option>\r\n }\r\n }\r\n @for(option of _options; track option) {\r\n <mat-option [value]=\"option.value\"\r\n [disabled]=\"optionsLoading()\"\r\n [attr.aria-label]=\"option.label\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n @if (suffix) {\r\n <span matSuffix>{{suffix}}</span>\r\n }\r\n @if (control.errors?.['server']) {\r\n <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n }\r\n @for (errorKey of controlErrorKeys; track errorKey) {\r\n <mat-error>\r\n @if(validatorMessages()?.[errorKey]) {\r\n {{ validatorMessages()![errorKey] }}\r\n } @else if (!!validationTranslations?.[errorKey]) {\r\n {{ validationTranslations[errorKey] }}\r\n }\r\n </mat-error>\r\n }\r\n</mat-form-field>\r\n", styles: [":host mat-form-field{width:100%}::ng-deep .gerandon-select-spinner-option .mdc-list-item__primary-text{width:100%;display:flex;justify-content:center}::ng-deep .gerandon-select-spinner-option .mdc-list-item__primary-text mat-progress-spinner{height:50px!important}\n"] }]
}], propDecorators: { emptyOptionLabel: [{
type: Input
}], emptyOptionAriaLabel: [{
type: Input
}], optionElements: [{
type: ViewChildren,
args: ['optionElements']
}] } });
class TextareaInputComponent extends BaseTextInput {
constructor() {
super(...arguments);
this.rows = input(10);
this._defaultAnnouncerTranslations = {
maxLengthReached: 'Elérte a maximális karakter számot!',
};
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
if (value && value.length !== 0 && value.length >= (this.maxLength() ?? 0)) {
this.announce('maxLengthReached');
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TextareaInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TextareaInputComponent, isStandalone: true, selector: "gerandon-textarea-input", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
], usesInheritance: true, ngImport: i0, template: "<div class=\"textarea-input cva-input\">\r\n <mat-form-field [appearance]=\"appearance() ?? _appearance()\"\r\n [color]=\"color() ?? _color()\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n }\r\n <textarea\r\n [id]=\"id\"\r\n #inputElement\r\n #input=\"ngForm\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n matInput\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"rows()\"\r\n class=\"w-100 cva-control\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.aria-description]=\"ariaDescription()\"\r\n [readonly]=\"isDisabled()\"\r\n [placeholder]=\"placeholder\"\r\n [formControl]=\"control\"\r\n [maxLength]=\"maxLength()\"\r\n [name]=\"name\">\r\n </textarea>\r\n <span class=\"counter\">{{control.value?.length || 0}} / {{ maxLength() }}</span>\r\n @if (prefixIcon) {\r\n <mat-icon matPrefix color=\"accent\">\r\n {{prefixIcon}}\r\n </mat-icon>\r\n }\r\n @if (suffixIcon) {\r\n <mat-icon matSuffix color=\"accent\">\r\n {{suffixIcon}}\r\n </mat-icon>\r\n }\r\n @if (suffix) {\r\n <span matSuffix>{{suffix}}</span>\r\n }\r\n @if (control.errors?.['server']) {\r\n <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n }\r\n @for (errorKey of controlErrorKeys; track errorKey) {\r\n <mat-error>\r\n @if(validatorMessages()?.[errorKey]) {\r\n {{ validatorMessages()![errorKey] }}\r\n } @else if (!!validationTranslations?.[errorKey]) {\r\n {{ validationTranslations[errorKey] }}\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n", styles: ["gerandon-textarea-input{display:block}gerandon-textarea-input .counter{right:20px;bottom:0;position:absolute;font-size:10px}gerandon-textarea-input .textarea-input .disabled{color:#ced4da}gerandon-textarea-input .textarea-input mat-form-field{width:100%}gerandon-textarea-input .textarea-input mat-form-field textarea{padding-top:10px}gerandon-textarea-input .textarea-input mat-form-field textarea::placeholder{color:#adb5bd;font-style:italic}gerandon-textarea-input .textarea-input mat-form-field textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TextareaInputComponent, decorators: [{
type: Component,
args: [{ selector: 'gerandon-textarea-input', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
FormsModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
ReactiveFormsModule,
], providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => TextareaInputComponent), multi: true },
], template: "<div class=\"textarea-input cva-input\">\r\n <mat-form-field [appearance]=\"appearance() ?? _appearance()\"\r\n [color]=\"color() ?? _color()\"\r\n [subscriptSizing]=\"subscriptSizing()\"\r\n [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n }\r\n <textarea\r\n [id]=\"id\"\r\n #inputElement\r\n #input=\"ngForm\"\r\n #autosize=\"cdkTextareaAutosize\"\r\n matInput\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"rows()\"\r\n class=\"w-100 cva-control\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\"\r\n [attr.aria-placeholder]=\"ariaPlaceholder() || placeholder\"\r\n [attr.aria-label]=\"ariaLabel() || label\"\r\n [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n [attr.ar