@messaia/cdk 20.0.0 → 20.0.2
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 +22 -10
- package/fesm2022/messaia-cdk.mjs.map +1 -1
- package/index.d.ts +20 -8
- package/package.json +1 -1
package/fesm2022/messaia-cdk.mjs
CHANGED
|
@@ -22453,14 +22453,16 @@ var FormFieldType;
|
|
|
22453
22453
|
FormFieldType[FormFieldType["VdList"] = 7] = "VdList";
|
|
22454
22454
|
FormFieldType[FormFieldType["VdChips"] = 8] = "VdChips";
|
|
22455
22455
|
FormFieldType[FormFieldType["Date"] = 9] = "Date";
|
|
22456
|
-
FormFieldType[FormFieldType["
|
|
22457
|
-
FormFieldType[FormFieldType["
|
|
22458
|
-
FormFieldType[FormFieldType["
|
|
22459
|
-
FormFieldType[FormFieldType["
|
|
22460
|
-
FormFieldType[FormFieldType["
|
|
22461
|
-
FormFieldType[FormFieldType["
|
|
22462
|
-
FormFieldType[FormFieldType["
|
|
22463
|
-
FormFieldType[FormFieldType["
|
|
22456
|
+
FormFieldType[FormFieldType["Time"] = 10] = "Time";
|
|
22457
|
+
FormFieldType[FormFieldType["DateTime"] = 11] = "DateTime";
|
|
22458
|
+
FormFieldType[FormFieldType["Calendar"] = 12] = "Calendar";
|
|
22459
|
+
FormFieldType[FormFieldType["Toggle"] = 13] = "Toggle";
|
|
22460
|
+
FormFieldType[FormFieldType["Editor"] = 14] = "Editor";
|
|
22461
|
+
FormFieldType[FormFieldType["Code"] = 15] = "Code";
|
|
22462
|
+
FormFieldType[FormFieldType["File"] = 16] = "File";
|
|
22463
|
+
FormFieldType[FormFieldType["Autocomplete"] = 17] = "Autocomplete";
|
|
22464
|
+
FormFieldType[FormFieldType["Chips"] = 18] = "Chips";
|
|
22465
|
+
FormFieldType[FormFieldType["Color"] = 19] = "Color";
|
|
22464
22466
|
FormFieldType[FormFieldType["Custom"] = 100] = "Custom";
|
|
22465
22467
|
})(FormFieldType || (FormFieldType = {}));
|
|
22466
22468
|
|
|
@@ -22986,7 +22988,7 @@ class VdGenericFormComponent {
|
|
|
22986
22988
|
console.log(message, optionalParams);
|
|
22987
22989
|
}
|
|
22988
22990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22989
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", 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: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n <!-- #region Fields -->\r\n <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n <ng-container *ngIf=\"field.wrapped\">\r\n <!-- #region Text input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput\r\n [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\"\r\n [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\r\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n parseDecimal\r\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Textarea -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <textarea matInput\r\n [formControlName]=\"field.name!\"\r\n rows=\"field.rows||2\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n </textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Enum -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [enum]=\"field.enumType\"\r\n [enumMetadata]=\"field.enumMetadata\"\r\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdSelect -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [matIconKey]=\"field.optionMatIconProperty\"\r\n [svgIconKey]=\"field.optionSvgIconProperty\"\r\n [fontSet]=\"field.optionIconFontSet\"\r\n [multiple]=\"field.multiple\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n <mat-chip-set>\r\n <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n </mat-chip>\r\n </mat-chip-set>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdList -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-list [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\"\r\n [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n [style.max-width]=\"field.maxWidth\"\r\n [style.max-height]=\"field.maxHeight\"\r\n flex>\r\n <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-list>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Chips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n (removed)=\"removeChip(field, chip)\"\r\n [color]=\"field.chipColor\"\r\n selectable=\"true\"\r\n highlighted\r\n selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"$any(field.label)\"\r\n #chipInput\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matAutocomplete]=\"chipAutocomplete\"\r\n (input)=\"filterAutocomplete(field, chipInput)\"\r\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n (paste)=\"onPasteChips(field, $event)\"\r\n autocomplete=\"off\">\r\n </mat-chip-grid>\r\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdChips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-chips #vdChip\r\n [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n [searchField]=\"field.searchField\"\r\n [searchFields]=\"field.searchFields\"\r\n [filters]=\"field.filters\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [classType]=\"field.classType\"\r\n [projection]=\"field.projection\"\r\n [key]=\"field.optionValueProperty\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [removable]=\"!field.clear\"\r\n [context]=\"context\"\r\n [suffixButtons]=\"field.suffixButtons\"\r\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n [customValue]=\"field.customValue\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n </vd-chips>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Select -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-select [formControlName]=\"field.name!\"\r\n [multiple]=\"field.multiple\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Autocomplete -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input type=\"text\"\r\n matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n [matAutocomplete]=\"auto\"\r\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n autocomplete=\"off\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n #autocompleteInput>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Date -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\" [max]=\"field.max\"\r\n autocomplete=\"off\"\r\n [matDatepicker]=\"datePicker\"\r\n [matDatepickerFilter]=\"field.dateFilter\"\r\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\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>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Calendar -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n <mat-calendar #calendar\r\n [selected]=\"formGroup.get(field.name!)?.value\"\r\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n [headerComponent]=\"datePickerHeaderComponent\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n style=\"width: 100%;\"></mat-calendar>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Color input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\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>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n </ng-container>\r\n\r\n <!-- #region Checkbox -->\r\n <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name!\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n {{field.label}}\r\n </mat-checkbox>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Editor -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Code -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region File -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <div vd-file-input\r\n [formControlName]=\"field.name!\"\r\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n </div>\r\n </mat-form-field>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Template for suffix buttons -->\r\n <ng-template #suffixButtons let-field>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formValue | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", 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-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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
22991
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n <!-- #region Fields -->\r\n <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n <ng-container *ngIf=\"field.wrapped\">\r\n <!-- #region Text input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput\r\n [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\"\r\n [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\r\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n parseDecimal\r\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Textarea -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <textarea matInput\r\n [formControlName]=\"field.name!\"\r\n rows=\"field.rows||2\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n </textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Enum -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [enum]=\"field.enumType\"\r\n [enumMetadata]=\"field.enumMetadata\"\r\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdSelect -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [matIconKey]=\"field.optionMatIconProperty\"\r\n [svgIconKey]=\"field.optionSvgIconProperty\"\r\n [fontSet]=\"field.optionIconFontSet\"\r\n [multiple]=\"field.multiple\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n <mat-chip-set>\r\n <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n </mat-chip>\r\n </mat-chip-set>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdList -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-list [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\"\r\n [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n [style.max-width]=\"field.maxWidth\"\r\n [style.max-height]=\"field.maxHeight\"\r\n flex>\r\n <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-list>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Chips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n (removed)=\"removeChip(field, chip)\"\r\n [color]=\"field.chipColor\"\r\n selectable=\"true\"\r\n highlighted\r\n selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"$any(field.label)\"\r\n #chipInput\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matAutocomplete]=\"chipAutocomplete\"\r\n (input)=\"filterAutocomplete(field, chipInput)\"\r\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n (paste)=\"onPasteChips(field, $event)\"\r\n autocomplete=\"off\">\r\n </mat-chip-grid>\r\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdChips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-chips #vdChip\r\n [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n [searchField]=\"field.searchField\"\r\n [searchFields]=\"field.searchFields\"\r\n [filters]=\"field.filters\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [classType]=\"field.classType\"\r\n [projection]=\"field.projection\"\r\n [key]=\"field.optionValueProperty\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [removable]=\"!field.clear\"\r\n [context]=\"context\"\r\n [suffixButtons]=\"field.suffixButtons\"\r\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n [customValue]=\"field.customValue\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n </vd-chips>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Select -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-select [formControlName]=\"field.name!\"\r\n [multiple]=\"field.multiple\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Autocomplete -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input type=\"text\"\r\n matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n [matAutocomplete]=\"auto\"\r\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n autocomplete=\"off\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n #autocompleteInput>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Date -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <!-- Row container inside one mat-form-field -->\r\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\r\n <!-- Date input -->\r\n <input matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n autocomplete=\"off\"\r\n [matDatepicker]=\"datePicker\"\r\n [matDatepickerFilter]=\"field.dateFilter\"\r\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n\r\n <!-- Time display -->\r\n @if(field.showTime) {\r\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\r\n }\r\n </div>\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\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>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Calendar -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n <mat-calendar #calendar\r\n [selected]=\"formGroup.get(field.name!)?.value\"\r\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n [headerComponent]=\"datePickerHeaderComponent\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n style=\"width: 100%;\"></mat-calendar>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Color input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\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>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n </ng-container>\r\n\r\n <!-- #region Checkbox -->\r\n <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name!\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n {{field.label}}\r\n </mat-checkbox>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Editor -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Code -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region File -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <div vd-file-input\r\n [formControlName]=\"field.name!\"\r\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n </div>\r\n </mat-form-field>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Template for suffix buttons -->\r\n <ng-template #suffixButtons let-field>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formValue | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", 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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
|
|
22990
22992
|
//--------------------
|
|
22991
22993
|
MatAutocompleteModule }, { kind: "component", type: i4$2.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$2.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.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: i10.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:
|
|
22992
22994
|
//--------------------
|
|
@@ -23030,7 +23032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
23030
23032
|
NgxColorsModule,
|
|
23031
23033
|
OnlyNumberDirective,
|
|
23032
23034
|
ParseDecimalDirective
|
|
23033
|
-
], template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n <!-- #region Fields -->\r\n <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n <ng-container *ngIf=\"field.wrapped\">\r\n <!-- #region Text input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput\r\n [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\"\r\n [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\r\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n parseDecimal\r\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Textarea -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <textarea matInput\r\n [formControlName]=\"field.name!\"\r\n rows=\"field.rows||2\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n </textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Enum -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [enum]=\"field.enumType\"\r\n [enumMetadata]=\"field.enumMetadata\"\r\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdSelect -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [matIconKey]=\"field.optionMatIconProperty\"\r\n [svgIconKey]=\"field.optionSvgIconProperty\"\r\n [fontSet]=\"field.optionIconFontSet\"\r\n [multiple]=\"field.multiple\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n <mat-chip-set>\r\n <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n </mat-chip>\r\n </mat-chip-set>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdList -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-list [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\"\r\n [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n [style.max-width]=\"field.maxWidth\"\r\n [style.max-height]=\"field.maxHeight\"\r\n flex>\r\n <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-list>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Chips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n (removed)=\"removeChip(field, chip)\"\r\n [color]=\"field.chipColor\"\r\n selectable=\"true\"\r\n highlighted\r\n selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"$any(field.label)\"\r\n #chipInput\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matAutocomplete]=\"chipAutocomplete\"\r\n (input)=\"filterAutocomplete(field, chipInput)\"\r\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n (paste)=\"onPasteChips(field, $event)\"\r\n autocomplete=\"off\">\r\n </mat-chip-grid>\r\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdChips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-chips #vdChip\r\n [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n [searchField]=\"field.searchField\"\r\n [searchFields]=\"field.searchFields\"\r\n [filters]=\"field.filters\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [classType]=\"field.classType\"\r\n [projection]=\"field.projection\"\r\n [key]=\"field.optionValueProperty\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [removable]=\"!field.clear\"\r\n [context]=\"context\"\r\n [suffixButtons]=\"field.suffixButtons\"\r\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n [customValue]=\"field.customValue\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n </vd-chips>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Select -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-select [formControlName]=\"field.name!\"\r\n [multiple]=\"field.multiple\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Autocomplete -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input type=\"text\"\r\n matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n [matAutocomplete]=\"auto\"\r\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n autocomplete=\"off\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n #autocompleteInput>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Date -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\" [max]=\"field.max\"\r\n autocomplete=\"off\"\r\n [matDatepicker]=\"datePicker\"\r\n [matDatepickerFilter]=\"field.dateFilter\"\r\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\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>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Calendar -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n <mat-calendar #calendar\r\n [selected]=\"formGroup.get(field.name!)?.value\"\r\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n [headerComponent]=\"datePickerHeaderComponent\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n style=\"width: 100%;\"></mat-calendar>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Color input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\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>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n </ng-container>\r\n\r\n <!-- #region Checkbox -->\r\n <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name!\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n {{field.label}}\r\n </mat-checkbox>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Editor -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Code -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region File -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <div vd-file-input\r\n [formControlName]=\"field.name!\"\r\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n </div>\r\n </mat-form-field>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Template for suffix buttons -->\r\n <ng-template #suffixButtons let-field>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formValue | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", 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-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"] }]
|
|
23035
|
+
], template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n <!-- #region Fields -->\r\n <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n <ng-container *ngIf=\"field.wrapped\">\r\n <!-- #region Text input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input matInput\r\n [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\"\r\n [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\r\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n parseDecimal\r\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Textarea -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <textarea matInput\r\n [formControlName]=\"field.name!\"\r\n rows=\"field.rows||2\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n </textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Enum -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [enum]=\"field.enumType\"\r\n [enumMetadata]=\"field.enumMetadata\"\r\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\"\r\n mat-icon-button\r\n *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdSelect -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-select [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [defaultOption]=\"field.defaultOption??true\"\r\n [matIconKey]=\"field.optionMatIconProperty\"\r\n [svgIconKey]=\"field.optionSvgIconProperty\"\r\n [fontSet]=\"field.optionIconFontSet\"\r\n [multiple]=\"field.multiple\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [triggerCssClass]=\"field.triggerCssClass\"\r\n [triggerMode]=\"field.triggerMode\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n <mat-chip-set>\r\n <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n </mat-chip>\r\n </mat-chip-set>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n <div layout=\"row\" layout-align=\"start center\">\r\n <ng-template #optionIconTemplate\r\n [ngTemplateOutlet]=\"optionIconTemplate\"\r\n let-optionIcon=\"optionIcon\"\r\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n </ng-template>\r\n <span>{{text}}</span>\r\n </div>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdList -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-list [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n [projection]=\"field.projection\"\r\n [mapper]=\"field.mapper\"\r\n [compareWith]=\"field.compareWith\"\r\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n [optionValueProperty]=\"field.optionValueProperty\"\r\n [optionTextProperty]=\"field.optionTextProperty\"\r\n [multiple]=\"field.multiple\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n [style.max-width]=\"field.maxWidth\"\r\n [style.max-height]=\"field.maxHeight\"\r\n flex>\r\n <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-list>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Chips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n (removed)=\"removeChip(field, chip)\"\r\n [color]=\"field.chipColor\"\r\n selectable=\"true\"\r\n highlighted\r\n selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"$any(field.label)\"\r\n #chipInput\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matAutocomplete]=\"chipAutocomplete\"\r\n (input)=\"filterAutocomplete(field, chipInput)\"\r\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n (paste)=\"onPasteChips(field, $event)\"\r\n autocomplete=\"off\">\r\n </mat-chip-grid>\r\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region VdChips -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <vd-chips #vdChip\r\n [formControlName]=\"field.name!\"\r\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n [searchField]=\"field.searchField\"\r\n [searchFields]=\"field.searchFields\"\r\n [filters]=\"field.filters\"\r\n [selectFirst]=\"field.selectFirst\"\r\n [classType]=\"field.classType\"\r\n [projection]=\"field.projection\"\r\n [key]=\"field.optionValueProperty\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [removable]=\"!field.clear\"\r\n [context]=\"context\"\r\n [suffixButtons]=\"field.suffixButtons\"\r\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n [customValue]=\"field.customValue\"\r\n layout=\"row\"\r\n flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n </ng-template>\r\n </vd-chips>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Select -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <mat-select [formControlName]=\"field.name!\"\r\n [multiple]=\"field.multiple\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Autocomplete -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input type=\"text\"\r\n matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n [matAutocomplete]=\"auto\"\r\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n autocomplete=\"off\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n #autocompleteInput>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n {{option.name}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Date -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <!-- Row container inside one mat-form-field -->\r\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\r\n <!-- Date input -->\r\n <input matInput\r\n [formControlName]=\"field.name!\"\r\n [min]=\"field.min\"\r\n [max]=\"field.max\"\r\n autocomplete=\"off\"\r\n [matDatepicker]=\"datePicker\"\r\n [matDatepickerFilter]=\"field.dateFilter\"\r\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n\r\n <!-- Time display -->\r\n @if(field.showTime) {\r\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\r\n }\r\n </div>\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\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>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Calendar -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n <mat-calendar #calendar\r\n [selected]=\"formGroup.get(field.name!)?.value\"\r\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n [headerComponent]=\"datePickerHeaderComponent\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n style=\"width: 100%;\"></mat-calendar>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Color input -->\r\n <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <input [type]=\"field.inputType ?? 'text'\"\r\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\r\n [onlyNumber]=\"(field.numbersOnly??false)\"\r\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\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>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n </mat-form-field>\r\n <!-- #endregion -->\r\n </ng-container>\r\n\r\n <!-- #region Checkbox -->\r\n <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name!\"\r\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n {{field.label}}\r\n </mat-checkbox>\r\n <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Editor -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Code -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region File -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n <mat-label>{{field.label}}</mat-label>\r\n <div vd-file-input\r\n [formControlName]=\"field.name!\"\r\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n flex>\r\n </div>\r\n </mat-form-field>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom -->\r\n <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Template for suffix buttons -->\r\n <ng-template #suffixButtons let-field>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formValue | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", 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"] }]
|
|
23034
23036
|
}], propDecorators: { formGroup: [{
|
|
23035
23037
|
type: Input
|
|
23036
23038
|
}], classType: [{
|
|
@@ -23378,6 +23380,16 @@ class FormFieldDefinition {
|
|
|
23378
23380
|
* @param ctx The context of the generic form component.
|
|
23379
23381
|
*/
|
|
23380
23382
|
datePickerOpened;
|
|
23383
|
+
/**
|
|
23384
|
+
* Indicates whether the time should be displayed alongside the date.
|
|
23385
|
+
* Defaults to false.
|
|
23386
|
+
*/
|
|
23387
|
+
showTime = false;
|
|
23388
|
+
/**
|
|
23389
|
+
* Format for displaying time in the field.
|
|
23390
|
+
* Can be 'shortTime' or 'mediumTime', defaults to 'mediumTime'.
|
|
23391
|
+
*/
|
|
23392
|
+
timeFormat = 'shortTime';
|
|
23381
23393
|
/**
|
|
23382
23394
|
* Endpoint for retrieving data, which can be a URL or a function returning data.
|
|
23383
23395
|
*/
|