@gerandon/ngx-widgets
Version:
Angular widget (components) collection using CVA (ControlValueAccessor)
440 lines (431 loc) • 56.8 kB
JavaScript
import * as i0 from '@angular/core';
import { input, inject, Injector, ChangeDetectorRef, ViewChild, Directive, InjectionToken, signal, Input, Optional, Inject, isDevMode, output, forwardRef, ViewEncapsulation, Component, ViewChildren, viewChild } 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, Observable, takeUntil, debounceTime, switchMap, map, tap } from 'rxjs';
import { isEmpty, keys, isEqual, find } from 'lodash-es';
import { SafeSubscriber } from 'rxjs/internal/Subscriber';
import * as i3 from '@angular/material/form-field';
import { MatFormFieldModule, MatFormField, MatLabel, MatError } from '@angular/material/form-field';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i4 from '@angular/material/input';
import { MatInputModule, MatInput } from '@angular/material/input';
import { NgIf, AsyncPipe } from '@angular/common';
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 * as i5 from '@angular/cdk/text-field';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
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.1", ngImport: i0, type: BaseValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", 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.1", 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');
const NGX_WIDGETS_FORM_FIELD_APPEARANCE = new InjectionToken('NGX_WIDGETS_FORM_FIELD_APPEARANCE');
class BaseInput extends BaseValueAccessor {
constructor(validationTranslations = {}, formFieldAppearance) {
super();
this.validationTranslations = validationTranslations;
this.formFieldAppearance = formFieldAppearance;
this.appearance = input();
// Used on Template
this._appearance = signal('outline');
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.validatorMessagesArray = [];
}
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 || ' ';
if (this.formFieldAppearance && !this.appearance()) {
this._appearance.set(this.formFieldAppearance);
}
}
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.cdr.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: BaseInput, deps: [{ token: NGX_WIDGETS_VALIDATION_TRANSLATIONS, optional: true }, { token: NGX_WIDGETS_FORM_FIELD_APPEARANCE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", type: BaseInput, isStandalone: true, inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", 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 } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: BaseInput, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [NGX_WIDGETS_VALIDATION_TRANSLATIONS]
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [NGX_WIDGETS_FORM_FIELD_APPEARANCE]
}] }], 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.1", ngImport: i0, type: BaseTextInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", 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.1", 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.1", ngImport: i0, type: BaseMaskInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.1", 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.1", 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.1", ngImport: i0, type: BasicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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()\" [subscriptSizing]=\"subscriptSizing()\" [hintLabel]=\"hintLabel()\" [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 [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 [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 } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n\r\n }\r\n @for (error of validatorMessagesArray; track error.key) {\r\n <!--\r\n this @if makes the mat-error to be placed out of subscript-wrapper\r\n that way the error message will be inside the input, not under the field as the others....\r\n\r\n @if (control.errors?.[error.key]) {\r\n }\r\n -->\r\n <mat-error *ngIf=\"control.errors?.[error.key]\">\r\n @if(!!validatorMessages()?.[error.key]) {\r\n {{ error.value }}\r\n } @else if (!!validationTranslations?.[error.key]) {\r\n {{ validationTranslations[error.key] }}\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.1", ngImport: i0, type: BasicInputComponent, decorators: [{
type: Component,
args: [{ selector: 'gerandon-basic-input', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
ReactiveFormsModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
NgIf,
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()\" [subscriptSizing]=\"subscriptSizing()\" [hintLabel]=\"hintLabel()\" [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 [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 [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 } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n\r\n }\r\n @for (error of validatorMessagesArray; track error.key) {\r\n <!--\r\n this @if makes the mat-error to be placed out of subscript-wrapper\r\n that way the error message will be inside the input, not under the field as the others....\r\n\r\n @if (control.errors?.[error.key]) {\r\n }\r\n -->\r\n <mat-error *ngIf=\"control.errors?.[error.key]\">\r\n @if(!!validatorMessages()?.[error.key]) {\r\n {{ error.value }}\r\n } @else if (!!validationTranslations?.[error.key]) {\r\n {{ validationTranslations[error.key] }}\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.multiple = input();
this.asyncOptions = input();
/**
* 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;
}
ngOnInit() {
this.placeholder = !this.placeholder ? (this.validationTranslations?.selectGlobalPlaceholder || this.label) : this.placeholder;
super.ngOnInit();
this.id = this.id || this.formControlName() || this.name;
const asyncOptions = this.asyncOptions();
if (asyncOptions) {
asyncOptions.pipe(takeUntil$1(this.destroy$)).subscribe((resp) => {
this.options = resp;
this.cdr.detectChanges();
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: SelectComponent, isStandalone: true, selector: "gerandon-select", inputs: { emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, asyncOptions: { classPropertyName: "asyncOptions", publicName: "asyncOptions", 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()\" [subscriptSizing]=\"subscriptSizing()\" [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 [placeholder]=\"!floatLabel() ? label : placeholder\"\r\n [formControl]=\"control\"\r\n [id]=\"id\"\r\n [class.input-disabled]=\"isDisabled() || control.disabled\"\r\n [compareWith]=\"_isEqual\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\">\r\n @if (emptyOptionLabel) {\r\n <mat-option (click)=\"control.reset()\">\r\n {{ emptyOptionLabel }}\r\n </mat-option>\r\n }\r\n @for(option of options; track option) {\r\n <mat-option [value]=\"option.value\">\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 } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n @for (error of validatorMessagesArray; track error) {\r\n <mat-error>{{ error.value }}</mat-error>\r\n }\r\n }\r\n</mat-form-field>\r\n", styles: ["gerandon-select mat-form-field{width:100%}\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 }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'gerandon-select', encapsulation: ViewEncapsulation.None, standalone: true, providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }
], imports: [
MatInputModule,
MatSelectModule,
ReactiveFormsModule,
MatTooltipModule,
], template: "<mat-form-field [appearance]=\"_appearance()\" [subscriptSizing]=\"subscriptSizing()\" [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 [placeholder]=\"!floatLabel() ? label : placeholder\"\r\n [formControl]=\"control\"\r\n [id]=\"id\"\r\n [class.input-disabled]=\"isDisabled() || control.disabled\"\r\n [compareWith]=\"_isEqual\"\r\n [attr.disabled]=\"isDisabled() || control.disabled ? '' : null\">\r\n @if (emptyOptionLabel) {\r\n <mat-option (click)=\"control.reset()\">\r\n {{ emptyOptionLabel }}\r\n </mat-option>\r\n }\r\n @for(option of options; track option) {\r\n <mat-option [value]=\"option.value\">\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 } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n @for (error of validatorMessagesArray; track error) {\r\n <mat-error>{{ error.value }}</mat-error>\r\n }\r\n }\r\n</mat-form-field>\r\n", styles: ["gerandon-select mat-form-field{width:100%}\n"] }]
}], propDecorators: { emptyOptionLabel: [{
type: Input
}], options: [{
type: Input
}], optionElements: [{
type: ViewChildren,
args: ['optionElements']
}] } });
class TextareaInputComponent extends BaseTextInput {
constructor() {
super(...arguments);
this.rows = input(10);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: TextareaInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", 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()\" [subscriptSizing]=\"subscriptSizing()\" [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 [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 } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n @for (error of validatorMessagesArray; track error) {\r\n <mat-error>{{ error.value }}</mat-error>\r\n }\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.1", 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()\" [subscriptSizing]=\"subscriptSizing()\" [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 [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 } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n @for (error of validatorMessagesArray; track error) {\r\n <mat-error>{{ error.value }}</mat-error>\r\n }\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"] }]
}] });
class BasicChipsComponent extends BaseInput {
constructor() {
super(...arguments);
this.tsFilterInput = viewChild('inputElement');
this.asyncFilterFn = input();
this.asyncOptions = input();
this.startTypingLabel = input('Kezdjen el gépelni...');
this.emptyListLabel = input('Nincs megjeleníthető elem!');
/**
* How much character you need to type before triggering search
*/
this.startAsyncFnAt = input(1);
this.separatorKeysCodes = [ENTER, COMMA];
this.inputChange = new Subject();
}
ngOnInit() {
super.ngOnInit();
this._hintLabel = this.hintLabel();
if (this.asyncFilterFn()) {
this.filterOptions$ = this.inputChange.pipe(debounceTime(300), switchMap((value) => {
if (value && value.length >= this.startAsyncFnAt()) {
return this.asyncFilterFn()(value).pipe(map((responseList) => {
return responseList.filter((responseListItem) => {
return !find(this.control.value, (controlAct) => isEqual(controlAct, responseListItem));
});
}));
}
return of([]);
}), tap((responseList) => {
if (!this.tsFilterInput()?.nativeElement.value && !this.control.value) {
this._hintLabel = 'Kezdjen el gépelni...';
}
else {
this._hintLabel = !responseList.length ? this.emptyListLabel() : '';
}
}));
}
else {
this.filterOptions$ = this.asyncOptions();
}
}
filter() {
const filterValue = this.tsFilterInput().nativeElement.value;
this.inputChange.next(filterValue);
}
remove(item) {
const values = this.control.value;
const index = values.indexOf(item);
if (index >= 0) {
values.splice(index, 1);
this.control.setValue(values);
}
this.mark();
}
add(event) {
const value = (event.value || '').trim();
if (value) {
this.updateValue(value);
}
event.chipInput.clear();
this.mark();
}
selected(event) {
if (!this.control.value?.includes(event.option.value)) {
this.updateValue(event.option.value);
}
this.inputElement.nativeElement.value = '';
this.mark();
}
updateValue(value) {
this.control.setValue([
...(this.control.value || []),
value,
]);
}
mark() {
if (!this.control.touched) {
this.control.markAsTouched();
this.control.markAsDirty();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: BasicChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: BasicChipsComponent, isStandalone: true, selector: "gerandon-basic-chips", inputs: { asyncFilterFn: { classPropertyName: "asyncFilterFn", publicName: "asyncFilterFn", isSignal: true, isRequired: false, transformFunction: null }, asyncOptions: { classPropertyName: "asyncOptions", publicName: "asyncOptions", isSignal: true, isRequired: false, transformFunction: null }, startTypingLabel: { classPropertyName: "startTypingLabel", publicName: "startTypingLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyListLabel: { classPropertyName: "emptyListLabel", publicName: "emptyListLabel", isSignal: true, isRequired: false, transformFunction: null }, startAsyncFnAt: { classPropertyName: "startAsyncFnAt", publicName: "startAsyncFnAt", isSignal: true, isRequired: false, transformFunction: null }, labelProperty: { classPropertyName: "labelProperty", publicName: "labelProperty", isSignal: false, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicChipsComponent), multi: true }], viewQueries: [{ propertyName: "tsFilterInput", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"_appearance()\" [subscriptSizing]=\"subscriptSizing()\" [hintLabel]=\"_hintLabel\" [floatLabel]=\"floatLabel()\">\r\n @if (label) {\r\n <mat-label [class.disabled]=\"isDisabled()\">{{ label }}</mat-label>\r\n }\r\n <mat-chip-grid #chipGrid class=\"w-100\">\r\n @for(item of control.value; track item) {\r\n <mat-chip-row (removed)=\"remove(item)\" color=\"primary\" highlighted>\r\n {{ labelProperty ? item[labelProperty] : item}}\r\n <button matChipRemove [attr.aria-label]=\"(labelProperty ? item[labelProperty] : item) + ' elt\u00E1vol\u00EDt\u00E1sa'\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input #inputElement\r\n matInput\r\n [placeholder]=\"placeholder || label\"\r\n [matAutocomplete]=\"auto\"\r\n (input)=\"filter()\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"!labelProperty && add($event)\"/>\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event)\">\r\n @for (filterItem of filterOptions$ | async; track filterItem) {\r\n <mat-option [value]=\"filterItem\">\r\n {{labelProperty ? filterItem[labelProperty] : filterItem}}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <input #input=\"ngForm\" [style.display]=\"'none'\" [formControl]=\"control\" />\r\n @if (control.errors?.['server']) {\r\n <mat-error>{{ control.errors?.['server'] }}</mat-error>\r\n } @else if (control.errors?.['required'] && validationTranslations.required) {\r\n <mat-error>{{ validationTranslations.required }}</mat-error>\r\n } @else {\r\n @for (error of validatorMessagesArray; track error) {\r\n <mat-error>{{ error.value }}</mat-error>\r\n }\r\n }\r\n</mat-form-field>\r\n", styles: ["gerandon-basic-chips{display:block}gerandon-basic-chips .mat-mdc-standard-chip{height:28px!important}gerandon-basic-chips mat-form-field{width:100%}gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,gerandon-basic-chips mat-form-field .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", ty