@messaia/cdk 21.0.0-rc.18 → 21.0.0-rc.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/messaia-cdk.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { Location, getLocaleNumberSymbol, NumberSymbol, CommonModule, DecimalPip
|
|
|
3
3
|
import * as i1$6 from '@angular/common/http';
|
|
4
4
|
import { HttpHeaders, HttpParams, HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, forwardRef, LOCALE_ID, NgModule, Pipe, HostListener, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy,
|
|
6
|
+
import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, forwardRef, LOCALE_ID, NgModule, Pipe, HostListener, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, Self, SimpleChange, Attribute, SecurityContext } from '@angular/core';
|
|
7
7
|
import * as i1 from '@angular/material/dialog';
|
|
8
8
|
import { MatDialogModule, MatDialogConfig, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
9
9
|
import * as i6$3 from '@angular/material/expansion';
|
|
@@ -22666,6 +22666,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
22666
22666
|
args: ['keydown', ['$event']]
|
|
22667
22667
|
}] } });
|
|
22668
22668
|
|
|
22669
|
+
class RemoveWhitespaceDirective {
|
|
22670
|
+
ngControl;
|
|
22671
|
+
/**
|
|
22672
|
+
* Optional condition to enable or disable the whitespace removal.
|
|
22673
|
+
* Use as [removeWhitespace]="condition" or simply removeWhitespace.
|
|
22674
|
+
*/
|
|
22675
|
+
IsEnabled = true;
|
|
22676
|
+
/**
|
|
22677
|
+
* Directive to remove all types of whitespace (spaces, tabs, newlines) from the input value.
|
|
22678
|
+
* @param ngControl The Angular form control associated with the input element.
|
|
22679
|
+
*/
|
|
22680
|
+
constructor(ngControl) {
|
|
22681
|
+
this.ngControl = ngControl;
|
|
22682
|
+
}
|
|
22683
|
+
/**
|
|
22684
|
+
* Event handler for the input event, removing all types of whitespace from the input value.
|
|
22685
|
+
* @param value The current value of the input element.
|
|
22686
|
+
*/
|
|
22687
|
+
OnInput(value) {
|
|
22688
|
+
/* If the directive is explicitly set to false, do nothing */
|
|
22689
|
+
if (this.IsEnabled === false || this.IsEnabled === 'false') {
|
|
22690
|
+
return;
|
|
22691
|
+
}
|
|
22692
|
+
/* Remove all types of whitespace (spaces, tabs, newlines) from the input value */
|
|
22693
|
+
const strippedValue = value.replace(/\s+/g, '');
|
|
22694
|
+
/* Only update if a change actually occurred to avoid unnecessary processing */
|
|
22695
|
+
if (value !== strippedValue) {
|
|
22696
|
+
/* Update the form control value without emitting an event to avoid triggering validation or other side effects */
|
|
22697
|
+
if (this.ngControl?.control) {
|
|
22698
|
+
/* Update the form control value without emitting an event to avoid triggering validation or other side effects */
|
|
22699
|
+
this.ngControl.control.setValue(strippedValue, { emitEvent: false });
|
|
22700
|
+
}
|
|
22701
|
+
/* If the value accessor is available, update the view value as well to reflect the changes in the input field */
|
|
22702
|
+
if (this.ngControl?.valueAccessor) {
|
|
22703
|
+
this.ngControl.valueAccessor.writeValue(strippedValue);
|
|
22704
|
+
}
|
|
22705
|
+
}
|
|
22706
|
+
}
|
|
22707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RemoveWhitespaceDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
22708
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: RemoveWhitespaceDirective, isStandalone: true, selector: "[removeWhitespace]", inputs: { IsEnabled: ["removeWhitespace", "IsEnabled"] }, host: { listeners: { "input": "OnInput($event.target.value)" } }, ngImport: i0 });
|
|
22709
|
+
}
|
|
22710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RemoveWhitespaceDirective, decorators: [{
|
|
22711
|
+
type: Directive,
|
|
22712
|
+
args: [{
|
|
22713
|
+
selector: '[removeWhitespace]'
|
|
22714
|
+
}]
|
|
22715
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
22716
|
+
type: Optional
|
|
22717
|
+
}, {
|
|
22718
|
+
type: Self
|
|
22719
|
+
}] }], propDecorators: { IsEnabled: [{
|
|
22720
|
+
type: Input,
|
|
22721
|
+
args: ['removeWhitespace']
|
|
22722
|
+
}], OnInput: [{
|
|
22723
|
+
type: HostListener,
|
|
22724
|
+
args: ['input', ['$event.target.value']]
|
|
22725
|
+
}] } });
|
|
22726
|
+
|
|
22669
22727
|
/**
|
|
22670
22728
|
* VdGenericFormCustomFieldDirective class
|
|
22671
22729
|
*/
|
|
@@ -23247,7 +23305,7 @@ class VdGenericFormComponent {
|
|
|
23247
23305
|
console.log(message, optionalParams);
|
|
23248
23306
|
}
|
|
23249
23307
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23250
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
23308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
23251
23309
|
//--------------------
|
|
23252
23310
|
MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: "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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type:
|
|
23253
23311
|
//--------------------
|
|
@@ -23255,7 +23313,7 @@ class VdGenericFormComponent {
|
|
|
23255
23313
|
//--------------------
|
|
23256
23314
|
AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "ngmodule", type:
|
|
23257
23315
|
//--------------------
|
|
23258
|
-
NgxColorsModule }, { kind: "component", type: i11.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i11.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
|
|
23316
|
+
NgxColorsModule }, { kind: "component", type: i11.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i11.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
|
|
23259
23317
|
}
|
|
23260
23318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdGenericFormComponent, decorators: [{
|
|
23261
23319
|
type: Component,
|
|
@@ -23291,8 +23349,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
23291
23349
|
NgxColorsModule,
|
|
23292
23350
|
OnlyNumberDirective,
|
|
23293
23351
|
ParseDecimalDirective,
|
|
23294
|
-
PrefixDirective
|
|
23295
|
-
], template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
|
|
23352
|
+
PrefixDirective,
|
|
23353
|
+
RemoveWhitespaceDirective
|
|
23354
|
+
], template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [triggerMode]=\"field.triggerMode\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
|
|
23296
23355
|
}], propDecorators: { formGroup: [{
|
|
23297
23356
|
type: Input
|
|
23298
23357
|
}], classType: [{
|
|
@@ -23924,6 +23983,19 @@ class FormFieldDefinition {
|
|
|
23924
23983
|
* @param ctx The context of the generic form component.
|
|
23925
23984
|
*/
|
|
23926
23985
|
prefix;
|
|
23986
|
+
/**
|
|
23987
|
+
* Suffix text displayed after the input field.
|
|
23988
|
+
* Can be a string or a function that returns a string.
|
|
23989
|
+
* @param x The entity associated with the field.
|
|
23990
|
+
* @param f The FormGroup containing this field.
|
|
23991
|
+
* @param ctx The context of the generic form component.
|
|
23992
|
+
*/
|
|
23993
|
+
suffix;
|
|
23994
|
+
/**
|
|
23995
|
+
* Flag indicating whether whitespace should be removed from the input value.
|
|
23996
|
+
* Defaults to false.
|
|
23997
|
+
*/
|
|
23998
|
+
removeWhitespace = false;
|
|
23927
23999
|
/**
|
|
23928
24000
|
* Projection specification for data retrieval.
|
|
23929
24001
|
* Can be a string or an array of strings.
|
|
@@ -27703,5 +27775,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
27703
27775
|
* Generated bundle index. Do not edit.
|
|
27704
27776
|
*/
|
|
27705
27777
|
|
|
27706
|
-
export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, whitelist };
|
|
27778
|
+
export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, whitelist };
|
|
27707
27779
|
//# sourceMappingURL=messaia-cdk.mjs.map
|