@messaia/cdk 21.1.0-rc.17 → 21.1.0-rc.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/messaia-cdk.mjs +7 -7
  2. package/fesm2022/messaia-cdk.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/messaia-cdk.d.ts +1 -1
package/fesm2022/messaia-cdk.mjs CHANGED
@@ -31,7 +31,7 @@ import * as i5$1 from '@angular/material/checkbox';
31
31
  import { MatCheckboxModule } from '@angular/material/checkbox';
32
32
  import * as i10 from '@angular/material/paginator';
33
33
  import { MatPaginatorModule, MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
34
- import { trigger, state, transition, style, AUTO_STYLE, group, query, animate, animateChild } from '@angular/animations';
34
+ import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';
35
35
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
36
36
  import * as i2$2 from '@angular/cdk/table';
37
37
  import { DataSource, CdkTableModule } from '@angular/cdk/table';
@@ -16257,7 +16257,7 @@ class VdSelectComponent extends AbstractSelectFormField {
16257
16257
  provide: MAT_SELECT_CONFIG,
16258
16258
  useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
16259
16259
  }
16260
- ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n <!-- #region Filter input -->\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n <div class=\"mat-mdc-form-field-flex\">\n <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n @if (filterInput?.value) {\n <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n }\n </div>\n </div>\n <div class=\"mdc-line-ripple\"></div>\n </div>\n </div>\n <!-- #endregion -->\n\n <!-- #region Trigger for launch button -->\n @if (onLaunch.observers.length > 0) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Custom trigger template -->\n @if (!onLaunch.observers.length && triggerTemplate && triggerTemplate.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Option template as trigger -->\n @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n }\n <!-- #endregion -->\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Trigger for icons -->\n @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n <mat-select-trigger>\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <ng-template #optionIconTemplate>\n <!-- #region Property icon -->\n <span class=\"option-icon\" matChipAvatar>\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon matChipAvatar [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon matChipAvatar [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon matChipAvatar [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon matChipAvatar [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon matChipAvatar [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon matChipAvatar [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n }\n <!-- #endregion -->\n </span>\n <!-- #endregion -->\n </ng-template>\n\n <ng-template #optionTextTemplate>\n <!-- #region Text -->\n <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': option.hint?.length > 0}\">\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n <!-- #endregion -->\n </ng-template>\n\n @if (multiple) {\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n </span>\n }\n <ng-container *ngTemplateOutlet=\"optionTextTemplate\"></ng-container>\n </mat-chip>\n } @else {\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"optionTextTemplate\"></ng-container>\n }\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Default option -->\n @if (!multiple && defaultOption) {\n <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n }\n <!-- #endregion -->\n\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Text -->\n <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n @if (!optionTemplate?.templateRef) {\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n }\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n <!-- #endregion -->\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n </mat-option>\n }\n <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n <div>\n @if (currentValue) {\n <div>\n <div class=\"readonly-value\">\n @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n <span>\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <ng-template #optionIconTemplate>\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n </ng-template>\n\n <span layout=\"row\" layout-align=\"start center\">\n @if(!this.multiple) {\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n <span>&nbsp;&nbsp;</span>\n }\n <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {currentValue[optionTextProperty]} other {{{currentValue[optionTextProperty]}}}}</span>\n }\n\n @else if(currentValue[i]){\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n </span>\n }\n <span i18n=\"@@selection\">{currentValue[i][optionTextProperty], select, option {option} other {{{currentValue[i][optionTextProperty]}}}}</span>\n </mat-chip>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </span>\n }\n @if (triggerTemplate && triggerTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n }\n @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n }\n </div>\n @if (onLaunch.observers.length > 0) {\n <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n }\n </div>\n }\n @if (!currentValue) {\n <div>&nbsp;</div>\n }\n </div>\n }\n <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:block!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: 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: "directive", type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.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: "directive", type: i5.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
16260
+ ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n <!-- #region Filter input -->\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n <div class=\"mat-mdc-form-field-flex\">\n <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n @if (filterInput?.value) {\n <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n }\n </div>\n </div>\n <div class=\"mdc-line-ripple\"></div>\n </div>\n </div>\n <!-- #endregion -->\n\n <!-- #region Selection template -->\n <ng-template #selectionTemplate let-label=\"label\">\n <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option template -->\n <ng-template #optionTextTemplate let-option=\"option\">\n <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': option.hint?.length > 0}\">\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option icon template -->\n <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n }\n <!-- #endregion -->\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option icon template -->\n <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n <!-- #region Property icon -->\n <span class=\"option-icon\" matChipAvatar>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n </span>\n <!-- #endregion -->\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Trigger for launch button -->\n @if (onLaunch.observed) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Custom trigger template -->\n @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Option template as trigger -->\n @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Trigger for icons -->\n @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n <mat-select-trigger>\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n @if (multiple) {\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n </span>\n }\n <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n </mat-chip>\n } @else {\n <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n }\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Default option -->\n @if (!multiple && defaultOption) {\n <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n }\n <!-- #endregion -->\n\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Text -->\n <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n @if (!optionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n }\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n <!-- #endregion -->\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n </mat-option>\n }\n <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n <div>\n @if (currentValue) {\n <div>\n <div class=\"readonly-value\">\n @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n <span>\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n @if(!this.multiple) {\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <span>&nbsp;&nbsp;</span>\n }\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n }\n\n @else if(currentValue[i]){\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n </span>\n }\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n </mat-chip>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </span>\n }\n @if (triggerTemplate && triggerTemplate.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n </span>\n }\n @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n </span>\n }\n </div>\n @if (onLaunch.observed) {\n <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n }\n </div>\n }\n @if (!currentValue) {\n <div>&nbsp;</div>\n }\n </div>\n}\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: 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: "directive", type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.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: "directive", type: i5.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
16261
16261
  }
16262
16262
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectComponent, decorators: [{
16263
16263
  type: Component,
@@ -16275,7 +16275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
16275
16275
  provide: MAT_SELECT_CONFIG,
16276
16276
  useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
16277
16277
  }
16278
- ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n <!-- #region Filter input -->\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n <div class=\"mat-mdc-form-field-flex\">\n <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n @if (filterInput?.value) {\n <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n }\n </div>\n </div>\n <div class=\"mdc-line-ripple\"></div>\n </div>\n </div>\n <!-- #endregion -->\n\n <!-- #region Trigger for launch button -->\n @if (onLaunch.observers.length > 0) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Custom trigger template -->\n @if (!onLaunch.observers.length && triggerTemplate && triggerTemplate.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Option template as trigger -->\n @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n }\n <!-- #endregion -->\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Trigger for icons -->\n @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n <mat-select-trigger>\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <ng-template #optionIconTemplate>\n <!-- #region Property icon -->\n <span class=\"option-icon\" matChipAvatar>\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon matChipAvatar [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon matChipAvatar [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon matChipAvatar [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon matChipAvatar [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon matChipAvatar [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon matChipAvatar [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n }\n <!-- #endregion -->\n </span>\n <!-- #endregion -->\n </ng-template>\n\n <ng-template #optionTextTemplate>\n <!-- #region Text -->\n <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': option.hint?.length > 0}\">\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n <!-- #endregion -->\n </ng-template>\n\n @if (multiple) {\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n </span>\n }\n <ng-container *ngTemplateOutlet=\"optionTextTemplate\"></ng-container>\n </mat-chip>\n } @else {\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"optionTextTemplate\"></ng-container>\n }\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Default option -->\n @if (!multiple && defaultOption) {\n <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n }\n <!-- #endregion -->\n\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Text -->\n <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n @if (!optionTemplate?.templateRef) {\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n }\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n <!-- #endregion -->\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n </mat-option>\n }\n <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n <div>\n @if (currentValue) {\n <div>\n <div class=\"readonly-value\">\n @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n <span>\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <ng-template #optionIconTemplate>\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n </ng-template>\n\n <span layout=\"row\" layout-align=\"start center\">\n @if(!this.multiple) {\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n <span>&nbsp;&nbsp;</span>\n }\n <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {currentValue[optionTextProperty]} other {{{currentValue[optionTextProperty]}}}}</span>\n }\n\n @else if(currentValue[i]){\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-container *ngTemplateOutlet=\"optionIconTemplate\"></ng-container>\n </span>\n }\n <span i18n=\"@@selection\">{currentValue[i][optionTextProperty], select, option {option} other {{{currentValue[i][optionTextProperty]}}}}</span>\n </mat-chip>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </span>\n }\n @if (triggerTemplate && triggerTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n }\n @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n }\n </div>\n @if (onLaunch.observers.length > 0) {\n <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n }\n </div>\n }\n @if (!currentValue) {\n <div>&nbsp;</div>\n }\n </div>\n }\n <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:block!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
16278
+ ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n <!-- #region Filter input -->\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n <div class=\"mat-mdc-form-field-flex\">\n <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n @if (filterInput?.value) {\n <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n }\n </div>\n </div>\n <div class=\"mdc-line-ripple\"></div>\n </div>\n </div>\n <!-- #endregion -->\n\n <!-- #region Selection template -->\n <ng-template #selectionTemplate let-label=\"label\">\n <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option template -->\n <ng-template #optionTextTemplate let-option=\"option\">\n <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': option.hint?.length > 0}\">\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option icon template -->\n <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n }\n <!-- #endregion -->\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option icon template -->\n <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n <!-- #region Property icon -->\n <span class=\"option-icon\" matChipAvatar>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n </span>\n <!-- #endregion -->\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Trigger for launch button -->\n @if (onLaunch.observed) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Custom trigger template -->\n @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Option template as trigger -->\n @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n <mat-select-trigger [class]=\"triggerCssClass\">\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Trigger for icons -->\n @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n <mat-select-trigger>\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n @if (multiple) {\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n </span>\n }\n <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n </mat-chip>\n } @else {\n <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n }\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Default option -->\n @if (!multiple && defaultOption) {\n <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n }\n <!-- #endregion -->\n\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n }\n @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n }\n @if (option.icon?.svgIcon) {\n <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Text -->\n <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n @if (!optionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n }\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n }\n <!-- #endregion -->\n <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n </span>\n </mat-option>\n }\n <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n <div>\n @if (currentValue) {\n <div>\n <div class=\"readonly-value\">\n @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n <span>\n <span layout=\"row\" layout-align=\"start center\">\n @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n @if(!this.multiple) {\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <span>&nbsp;&nbsp;</span>\n }\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n }\n\n @else if(currentValue[i]){\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n </span>\n }\n <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n </mat-chip>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </span>\n }\n @if (triggerTemplate && triggerTemplate.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n </span>\n }\n @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n </span>\n }\n </div>\n @if (onLaunch.observed) {\n <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n }\n </div>\n }\n @if (!currentValue) {\n <div>&nbsp;</div>\n }\n </div>\n}\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
16279
16279
  }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
16280
16280
  type: ContentChild,
16281
16281
  args: [VdSelectOptionDirective]
@@ -22327,7 +22327,7 @@ class VdChipsComponent extends AbstractMatFormField {
22327
22327
  provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
22328
22328
  useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
22329
22329
  }
22330
- ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n <!-- #region Chips -->\n @for (chip of chips; track chip; let first = $first; let index = $index) {\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n <span class=\"vd-chip-content\">\n @if (!chipTemplate?.templateRef) {\n <span>\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{ chip }}</span>\n }\n @if (autocompleteOptionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n }\n </span>\n }\n @if (chipTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n }\n </span>\n @for (button of suffixButtons; track button; let first = $first) {\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n </a>\n }\n @if ((onLaunch.observers.length) > 0) {\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n </a>\n }\n @if (!readonly) {\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n </a>\n }\n </mat-chip-row>\n }\n <!-- #endregion -->\n\n <!-- #region Search box -->\n <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n <!-- #endregion -->\n\n <!-- #region Reset button -->\n @if ((!value || empty) && !readonly && !disabled) {\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n </svg>\n </a>\n }\n <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n @if(!classType && opened)\n {\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n <mat-option [value]=\"item\">\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{item}}</span>\n }\n @if (autocompleteOptionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n }\n </mat-option>\n <mat-divider *ngIf=\"!last\"></mat-divider>\n }\n }\n @if (classType && opened) {\n <mat-option hide=\"true\"></mat-option>\n <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n }\n <div class=\"vd-chips-paginator\">\n <mat-divider></mat-divider>\n <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
22330
+ ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n <!-- #region Chips -->\n @for (chip of chips; track chip; let first = $first; let index = $index) {\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n <span class=\"vd-chip-content\">\n @if (!chipTemplate?.templateRef) {\n <span>\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{ chip }}</span>\n }\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n }\n </span>\n }\n @if (chipTemplate && chipTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n }\n </span>\n @for (button of suffixButtons; track button; let first = $first) {\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n </a>\n }\n @if ((onLaunch.observers.length) > 0) {\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n </a>\n }\n @if (!readonly) {\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n </a>\n }\n </mat-chip-row>\n }\n <!-- #endregion -->\n\n <!-- #region Search box -->\n <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n <!-- #endregion -->\n\n <!-- #region Reset button -->\n @if ((!value || empty) && !readonly && !disabled) {\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n </svg>\n </a>\n }\n <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n @if(!classType && opened)\n {\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n <mat-option [value]=\"item\">\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{item}}</span>\n }\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n }\n </mat-option>\n <mat-divider *ngIf=\"!last\"></mat-divider>\n }\n }\n @if (classType && opened) {\n <mat-option hide=\"true\"></mat-option>\n <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n }\n <div class=\"vd-chips-paginator\">\n <mat-divider></mat-divider>\n <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
22331
22331
  }
22332
22332
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipsComponent, decorators: [{
22333
22333
  type: Component,
@@ -22347,7 +22347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
22347
22347
  MatIconModule,
22348
22348
  MatInputModule,
22349
22349
  VdDynamicTableComponent,
22350
- ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n <!-- #region Chips -->\n @for (chip of chips; track chip; let first = $first; let index = $index) {\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n <span class=\"vd-chip-content\">\n @if (!chipTemplate?.templateRef) {\n <span>\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{ chip }}</span>\n }\n @if (autocompleteOptionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n }\n </span>\n }\n @if (chipTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n }\n </span>\n @for (button of suffixButtons; track button; let first = $first) {\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n </a>\n }\n @if ((onLaunch.observers.length) > 0) {\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n </a>\n }\n @if (!readonly) {\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n </a>\n }\n </mat-chip-row>\n }\n <!-- #endregion -->\n\n <!-- #region Search box -->\n <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n <!-- #endregion -->\n\n <!-- #region Reset button -->\n @if ((!value || empty) && !readonly && !disabled) {\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n </svg>\n </a>\n }\n <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n @if(!classType && opened)\n {\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n <mat-option [value]=\"item\">\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{item}}</span>\n }\n @if (autocompleteOptionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n }\n </mat-option>\n <mat-divider *ngIf=\"!last\"></mat-divider>\n }\n }\n @if (classType && opened) {\n <mat-option hide=\"true\"></mat-option>\n <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n }\n <div class=\"vd-chips-paginator\">\n <mat-divider></mat-divider>\n <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
22350
+ ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n <!-- #region Chips -->\n @for (chip of chips; track chip; let first = $first; let index = $index) {\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n <span class=\"vd-chip-content\">\n @if (!chipTemplate?.templateRef) {\n <span>\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{ chip }}</span>\n }\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n }\n </span>\n }\n @if (chipTemplate && chipTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n }\n </span>\n @for (button of suffixButtons; track button; let first = $first) {\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n </a>\n }\n @if ((onLaunch.observers.length) > 0) {\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n </a>\n }\n @if (!readonly) {\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n </a>\n }\n </mat-chip-row>\n }\n <!-- #endregion -->\n\n <!-- #region Search box -->\n <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n <!-- #endregion -->\n\n <!-- #region Reset button -->\n @if ((!value || empty) && !readonly && !disabled) {\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n </svg>\n </a>\n }\n <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n @if(!classType && opened)\n {\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n <mat-option [value]=\"item\">\n @if (!autocompleteOptionTemplate?.templateRef) {\n <span>{{item}}</span>\n }\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n }\n </mat-option>\n <mat-divider *ngIf=\"!last\"></mat-divider>\n }\n }\n @if (classType && opened) {\n <mat-option hide=\"true\"></mat-option>\n <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n }\n <div class=\"vd-chips-paginator\">\n <mat-divider></mat-divider>\n <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
22351
22351
  }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
22352
22352
  type: ViewChild,
22353
22353
  args: [VdDynamicTableComponent, { static: false }]
@@ -24044,7 +24044,7 @@ class VdGenericFormComponent {
24044
24044
  console.log(message, optionalParams);
24045
24045
  }
24046
24046
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24047
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [context]=\"context\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (option of $any(field.options); track option) {\n <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n {{option.name}}\n </mat-radio-button>\n }\n </mat-radio-group>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
24047
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [context]=\"context\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (option of $any(field.options); track option) {\n <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n {{option.name}}\n </mat-radio-button>\n }\n </mat-radio-group>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate && editorTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate && codeTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate && customTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"customTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type:
24048
24048
  //--------------------
24049
24049
  MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.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.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i11.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type:
24050
24050
  //--------------------
@@ -24093,7 +24093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
24093
24093
  RemoveWhitespaceDirective,
24094
24094
  NativeElementInjectorDirective,
24095
24095
  MatFormFieldRadioDirective
24096
- ], template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [context]=\"context\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (option of $any(field.options); track option) {\n <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n {{option.name}}\n </mat-radio-button>\n }\n </mat-radio-group>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate?.templateRef!) {\n <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
24096
+ ], template: "@if (formGroup && fieldRows) {\n <div [formGroup]=\"formGroup!\">\n <!-- #region Fields -->\n @for (fields of fieldRows; track fields; let i = $index) {\n <div layout-gt-sm=\"row\" layout=\"column\">\n @for (field of fields; track field) {\n @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n @switch (field.type) {\n <!-- #region Text input -->\n @case (FormFieldType.Text) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input matInput\n [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\"\n [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [autoFocus]=\"((field.focus | func:formValue:formGroup:context)??false)\"\n [selectText]=\"((field.selectText | func:formValue:formGroup:context)??false)\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n parseDecimal\n [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <textarea matInput\n [formControlName]=\"field.name!\"\n rows=\"field.rows||2\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n [removeWhitespace]=\"(field.removeWhitespace??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n </textarea>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [enum]=\"field.enumType\"\n [enumMetadata]=\"field.enumMetadata\"\n [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n [context]=\"context\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #enumOptionIconTemplate\n [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\"\n mat-icon-button\n (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-select [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [defaultOption]=\"field.defaultOption??true\"\n [matIconKey]=\"field.optionMatIconProperty\"\n [svgIconKey]=\"field.optionSvgIconProperty\"\n [fontSet]=\"field.optionIconFontSet\"\n [multiple]=\"field.multiple\"\n [selectFirst]=\"field.selectFirst\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [triggerCssClass]=\"field.triggerCssClass\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n layout=\"row\"\n flex>\n @if (field.triggerTemplate; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n <ng-template vd-select-trigger let-trigger=\"trigger\">\n <mat-chip-set>\n @for (item of trigger; track item) {\n <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n </mat-chip>\n }\n </mat-chip-set>\n </ng-template>\n }\n @if (field.optionTemplate; as option) {\n <ng-template vd-select-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n @if(field.optionIcon && !field.optionTemplate){\n <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n <div layout=\"row\" layout-align=\"start center\">\n <ng-template #selectOptionIconTemplate\n [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n @if (optionIcon.svgIcon) {\n <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n }\n @if (optionIcon.matIcon) {\n <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n }\n </ng-template>\n <span>{{text}}</span>\n </div>\n </ng-template>\n }\n </vd-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-list [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n [projection]=\"field.projection\"\n [mapper]=\"field.mapper\"\n [compareWith]=\"field.compareWith\"\n [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n [optionValueProperty]=\"field.optionValueProperty\"\n [optionTextProperty]=\"field.optionTextProperty\"\n [multiple]=\"field.multiple\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n [style.max-width]=\"field.maxWidth\"\n [style.max-height]=\"field.maxHeight\"\n flex>\n @if (field.optionTemplate; as option) {\n <ng-template vd-list-option let-option=\"option\">\n <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n </ng-template>\n }\n </vd-list>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n <mat-chip-row\n (removed)=\"removeChip(field, chip)\"\n [color]=\"field.chipColor\"\n selectable=\"true\"\n highlighted\n selected>\n <span>{{chip}}</span>\n <button matChipRemove>\n <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input [placeholder]=\"$any(field.label)\"\n #chipInput\n [matChipInputFor]=\"chipList\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matAutocomplete]=\"chipAutocomplete\"\n (input)=\"filterAutocomplete(field, chipInput)\"\n (matChipInputTokenEnd)=\"addChip(field, $event)\"\n (paste)=\"onPasteChips(field, $event)\"\n autocomplete=\"off\">\n </mat-chip-grid>\n <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <vd-chips #vdChip\n [formControlName]=\"field.name!\"\n [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n [params]=\"field.params || {} | func:formValue:formGroup:context\"\n [searchField]=\"field.searchField\"\n [searchFields]=\"field.searchFields\"\n [filters]=\"field.filters\"\n [selectFirst]=\"field.selectFirst\"\n [classType]=\"field.classType\"\n [projection]=\"field.projection\"\n [key]=\"field.optionValueProperty\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [removable]=\"!field.clear\"\n [context]=\"context\"\n [suffixButtons]=\"field.suffixButtons\"\n [autocompleteCssClass]=\"field.autocompleteCssClass\"\n (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n [customValue]=\"field.customValue\"\n layout=\"row\"\n flex>\n @if (field.chipTemplate; as chip) {\n <ng-template vd-chip let-chip=\"chip\">\n <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n @if (field.autocompleteTemplate; as option) {\n <ng-template vd-autocomplete-option let-option=\"option\">\n <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n </ng-template>\n }\n </vd-chips>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @if (vdChip.emptyResult) {\n <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-select [formControlName]=\"field.name!\"\n [multiple]=\"field.multiple\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n flex>\n @for (option of $any(field.options); track option) {\n <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n }\n </mat-select>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input type=\"text\"\n matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterAutocomplete(field, autocompleteInput)\"\n autocomplete=\"off\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n #autocompleteInput>\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n <mat-option [value]=\"option.id\">\n {{option.name}}\n </mat-option>\n }\n </mat-autocomplete>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <!-- Row container inside one mat-form-field -->\n <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n <!-- Date input -->\n <input matInput\n [formControlName]=\"field.name!\"\n [min]=\"field.min\"\n [max]=\"field.max\"\n autocomplete=\"off\"\n [matDatepicker]=\"datePicker\"\n [matDatepickerFilter]=\"field.dateFilter\"\n [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <!-- Time display -->\n @if(field.showTime) {\n <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n }\n </div>\n <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n <mat-calendar #calendar\n [selected]=\"formGroup.get(field.name!)?.value\"\n (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n [headerComponent]=\"datePickerHeaderComponent\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n style=\"width: 100%;\"></mat-calendar>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <input [type]=\"field.inputType ?? 'text'\"\n [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n [pattern]=\"((field.pattern | func:formValue:formGroup:context)??'')\"\n [onlyNumber]=\"(field.numbersOnly??false)\"\n (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n @if (field.hint) {\n <mat-hint>{{field.hint}}</mat-hint>\n }\n @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n <mat-checkbox [formControlName]=\"field.name!\"\n [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n {{field.label}}\n </mat-checkbox>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error layout-margin>{{errorMessage}}</mat-error>\n }\n </div>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n @for (option of $any(field.options); track option) {\n <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n {{option.name}}\n </mat-radio-button>\n }\n </mat-radio-group>\n @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n <mat-error>{{errorMessage}}</mat-error>\n }\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n @if (editorTemplate && editorTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"editorTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n @if (codeTemplate && codeTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"codeTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n <mat-label>{{field.label}}</mat-label>\n <div vd-file-input\n [formControlName]=\"field.name!\"\n (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n flex>\n </div>\n </mat-form-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n @if (customTemplate && customTemplate.templateRef) {\n <ng-template [ngTemplateOutlet]=\"customTemplate.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n }\n }\n <!-- #region Template for custom fields -->\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n </div>\n <!-- #region Template for custom fields -->\n @if (customFields) {\n <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n }\n @for (customField of customFieldsTemplates; track customField) {\n @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n <!-- #region Template for suffix buttons -->\n <ng-template #suffixButtons let-field>\n @for (suffixButton of field.suffixButtons; track suffixButton) {\n <ng-container matSuffix>\n @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n </button>\n }\n </ng-container>\n }\n </ng-template>\n <!-- #endregion -->\n <!-- #region Debug value -->\n @if (debugValue) {\n <code>\n <pre>{{formValue | json}}</pre>\n </code>\n }\n <!-- #endregion -->\n </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
24097
24097
  }], propDecorators: { formGroup: [{
24098
24098
  type: Input
24099
24099
  }], classType: [{