@messaia/cdk 15.0.0-rc13 → 15.0.0-rc15
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/esm2020/lib/forms/components/generic-form/generic-form.component.mjs +3 -3
- package/esm2020/lib/forms/models/form-field-definition.mjs +1 -1
- package/esm2020/lib/table/components/dynamic-table/dynamic-table.component.mjs +1 -2
- package/fesm2015/messaia-cdk.mjs +2 -3
- package/fesm2015/messaia-cdk.mjs.map +1 -1
- package/fesm2020/messaia-cdk.mjs +2 -3
- package/fesm2020/messaia-cdk.mjs.map +1 -1
- package/lib/forms/models/form-field-definition.d.ts +1 -1
- package/package.json +1 -1
package/fesm2020/messaia-cdk.mjs
CHANGED
|
@@ -10213,7 +10213,6 @@ class VdDynamicTableComponent {
|
|
|
10213
10213
|
return null;
|
|
10214
10214
|
}
|
|
10215
10215
|
if (typeof expression === 'function') {
|
|
10216
|
-
console.log('item', expression(item, this.context));
|
|
10217
10216
|
return expression(item, this.context);
|
|
10218
10217
|
}
|
|
10219
10218
|
return expression;
|
|
@@ -17218,10 +17217,10 @@ class VdGenericFormComponent {
|
|
|
17218
17217
|
}
|
|
17219
17218
|
}
|
|
17220
17219
|
/** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17221
|
-
/** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdGenericFormComponent, 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 }], 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.hide || !field.hide(formGroup?.value, 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.header}}</mat-label>\r\n <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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 <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-accent\">\r\n <span [innerHTML]=\"field.triggerMapper(item, formGroup.value, formGroup, context)\"></span>\r\n </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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-chip-row *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" 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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, 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, formGroup.value, 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 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.header}}</mat-label>\r\n <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of 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]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">{{field.header}}</mat-checkbox>\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.header}}</mat-label>\r\n <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change($event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex></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 </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formGroup?.value | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "triggerCssClass", "triggerMode", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
|
|
17220
|
+
/** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdGenericFormComponent, 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 }], 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.hide || !field.hide(formGroup?.value, 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.header}}</mat-label>\r\n <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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 <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-accent\">\r\n <span [innerHTML]=\"field.triggerMapper(item, formGroup.value, formGroup, context)\"></span>\r\n </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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-chip-row *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" 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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, 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, formGroup.value, 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 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.header}}</mat-label>\r\n <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of 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]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">{{field.header}}</mat-checkbox>\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.header}}</mat-label>\r\n <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex></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 </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formGroup?.value | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "triggerCssClass", "triggerMode", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
|
|
17222
17221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdGenericFormComponent, decorators: [{
|
|
17223
17222
|
type: Component,
|
|
17224
|
-
args: [{ selector: 'vd-generic-form', 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.hide || !field.hide(formGroup?.value, 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.header}}</mat-label>\r\n <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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 <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-accent\">\r\n <span [innerHTML]=\"field.triggerMapper(item, formGroup.value, formGroup, context)\"></span>\r\n </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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-chip-row *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" 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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, 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, formGroup.value, 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 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.header}}</mat-label>\r\n <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of 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]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">{{field.header}}</mat-checkbox>\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.header}}</mat-label>\r\n <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change($event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex></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 </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formGroup?.value | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>" }]
|
|
17223
|
+
args: [{ selector: 'vd-generic-form', 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.hide || !field.hide(formGroup?.value, 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.header}}</mat-label>\r\n <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, 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 <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-accent\">\r\n <span [innerHTML]=\"field.triggerMapper(item, formGroup.value, formGroup, context)\"></span>\r\n </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, formGroup.value, formGroup, context)\"></span>\r\n </ng-template>\r\n </vd-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-chip-row *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n <span>{{chip}}</span>\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" 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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, 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, formGroup.value, 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 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.header}}</mat-label>\r\n <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n </mat-select>\r\n <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\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\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n <mat-icon>{{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 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.header}}</mat-label>\r\n <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #datePicker></mat-datepicker>\r\n <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n <mat-error *ngFor=\"let errorMessage of 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]=\"field.cssClass\">\r\n <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">{{field.header}}</mat-checkbox>\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.header}}</mat-label>\r\n <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex></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 </div>\r\n\r\n <!-- #region Template for custom fields -->\r\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Form bottom -->\r\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Debug value -->\r\n <code *ngIf=\"debugValue\">\r\n <pre>{{formGroup?.value | json}}</pre>\r\n </code>\r\n <!-- #endregion -->\r\n</div>" }]
|
|
17225
17224
|
}], propDecorators: { formGroup: [{
|
|
17226
17225
|
type: Input
|
|
17227
17226
|
}], classType: [{
|