@messaia/cdk 22.0.0-rc.1 → 22.0.0-rc.10

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 +320 -370
  2. package/fesm2022/messaia-cdk.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/messaia-cdk.d.ts +3 -34
package/fesm2022/messaia-cdk.mjs CHANGED
@@ -31,7 +31,7 @@ import * as i5 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, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';
34
+ import { trigger, state, style, AUTO_STYLE, transition, animate } from '@angular/animations';
35
35
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
36
36
  import * as i2$3 from '@angular/cdk/table';
37
37
  import { DataSource, CdkTableModule } from '@angular/cdk/table';
@@ -70,10 +70,10 @@ import { MatDividerModule, MatDivider } from '@angular/material/divider';
70
70
  import { ENTER, COMMA } from '@angular/cdk/keycodes';
71
71
  import * as i3$4 from '@angular/material/radio';
72
72
  import { MatRadioModule } from '@angular/material/radio';
73
- import * as i3$3 from '@angular/cdk/platform';
74
- import * as i4$3 from '@angular/cdk/text-field';
75
73
  import * as i4$4 from '@angular/material/list';
76
74
  import { MatSelectionList, MatListOption, MatListModule } from '@angular/material/list';
75
+ import * as i3$3 from '@angular/cdk/platform';
76
+ import * as i4$3 from '@angular/cdk/text-field';
77
77
  import * as i2$7 from '@angular/material/card';
78
78
  import { MatCardModule } from '@angular/material/card';
79
79
  import * as i3$5 from '@angular/material/sidenav';
@@ -11899,38 +11899,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
11899
11899
  }]
11900
11900
  }] });
11901
11901
 
11902
- /**
11903
- * const vdCollapseAnimation
11904
- *
11905
- * Parameter Options:
11906
- * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
11907
- * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
11908
- * * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.
11909
- * * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.
11910
- *
11911
- * Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.
11912
- *
11913
- * usage: [@vdCollapse]="{ value: true | false, params: { duration: 500 }}"
11914
- */
11915
- const vdCollapseAnimation = trigger('vdCollapse', [
11916
- state('1', style({ height: '0', overflow: 'hidden' })),
11917
- state('0', style({ height: AUTO_STYLE, overflow: AUTO_STYLE })),
11918
- transition('0 => 1', [
11919
- style({ overflow: 'hidden', height: AUTO_STYLE }),
11920
- group([
11921
- query('@*', animateChild(), { optional: true }),
11922
- animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({ height: '0', overflow: 'hidden' })),
11923
- ]),
11924
- ], { params: { duration: 150, delay: '0', ease: 'ease-in' } }),
11925
- transition('1 => 0', [
11926
- style({ height: '0', overflow: 'hidden' }),
11927
- group([
11928
- query('@*', animateChild(), { optional: true }),
11929
- animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({ overflow: 'hidden', height: AUTO_STYLE })),
11930
- ]),
11931
- ], { params: { duration: 150, delay: '0', ease: 'ease-out' } }),
11932
- ]);
11933
-
11934
11902
  /** Mixin to augment a component or directive with a `disabled` property. */
11935
11903
  function mixinDisableRipple(base) {
11936
11904
  return class extends base {
@@ -12637,11 +12605,6 @@ class TableColumn {
12637
12605
  * @property
12638
12606
  */
12639
12607
  enumFilter;
12640
- /**
12641
- * Prefix for enum types.
12642
- * @property
12643
- */
12644
- enumPrefix;
12645
12608
  /**
12646
12609
  * The type of enum.
12647
12610
  * @property
@@ -16487,7 +16450,7 @@ class VdSelectComponent extends AbstractSelectFormField {
16487
16450
  provide: MAT_SELECT_CONFIG,
16488
16451
  useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
16489
16452
  }
16490
- ], 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\n [placeholder]=\"placeholder\"\n i18n-placeholder\n [(ngModel)]=\"value\"\n #select=\"matSelect\"\n (selectionChange)=\"handleChange($event)\"\n [hidden]=\"readonly\"\n [multiple]=\"multiple\"\n [compareWith]=\"compareWith??defaultCompareWith\"\n [disabled]=\"disabled\"\n flex\n>\n <!-- #region Filter input -->\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n <div\n class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\"\n >\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\n matInput\n #filterInput\n type=\"text\"\n placeholder=\"Filter...\"\n class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\"\n (keyup)=\"handleFilter($event)\"\n flex\n />\n @if (filterInput?.value) {\n <mat-icon\n (click)=\"filterInput!.value = ''; handleFilter($event);\"\n fontSet=\"material-symbols-outlined\"\n >close</mat-icon\n >\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\"\n >{ label, select, option {option} other { {{ label }} } }</span\n >\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option template -->\n <ng-template #optionTextTemplate let-option=\"option\">\n <span\n layout=\"column\"\n class=\"option-text\"\n [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n ></ng-template>\n <span\n class=\"mat-caption text-secondary option-hint\"\n [matTooltip]=\"option.hint\"\n >{{option.hint}}</span\n >\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\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n >{{option[matIconKey]}}</mat-icon\n >\n } @if (svgIconKey && !matIconKey) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [svgIcon]=\"option[svgIconKey]\"\n [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n >{{option.icon?.matIcon}}</mat-icon\n >\n } @if (option.icon?.svgIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template\n #optionIconTemplate\n [ngTemplateOutlet]=\"optionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\"\n >\n @if (optionIcon.svgIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [svgIcon]=\"optionIcon.svgIcon\"\n [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n ></mat-icon>\n } @if (optionIcon.matIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n >{{optionIcon.matIcon}}</mat-icon\n >\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\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></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 =\n $last) {\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n ></ng-template>\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n } }\n </span>\n <mat-icon\n class=\"vd-select-launch\"\n (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n >launch</mat-icon\n >\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\n [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"\n ></ng-template>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Option template as trigger -->\n @if (!onLaunch.observed && !triggerTemplate?.templateRef &&\n 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 =\n $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n ></ng-template>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\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 =\n $last) { @if (multiple) {\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n </span>\n }\n <ng-template\n [ngTemplateOutlet]=\"optionTextTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n </mat-chip>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"optionTextTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n } @if (!last) {\n <span>&nbsp;&nbsp;</span>\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\"\n >--- Please Select ---</mat-option\n >\n }\n <!-- #endregion -->\n\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option\n [value]=\"mapper ? option : option[optionValueProperty]\"\n [disabled]=\"$safeNavigationMigration(option?.disabled)\"\n >\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n >{{option[matIconKey]}}</mat-icon\n >\n } @if (svgIconKey && !matIconKey) {\n <mat-icon\n [svgIcon]=\"option[svgIconKey]\"\n [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n >{{option.icon?.matIcon}}</mat-icon\n >\n } @if (option.icon?.svgIcon) {\n <mat-icon\n [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Text -->\n <span\n layout=\"column\"\n layout-align=\"start center\"\n class=\"option-text\"\n [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\"\n >\n @if (!optionTemplate?.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n ></ng-template>\n } @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n ></ng-template>\n }\n <!-- #endregion -->\n <span\n class=\"mat-caption text-secondary option-hint\"\n [matTooltip]=\"option.hint\"\n >{{option.hint}}</span\n >\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\n last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n @if(!this.multiple) { @if(optionIcon || matIconKey || svgIconKey ||\n option.icon) {\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <span>&nbsp;&nbsp;</span>\n }\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"\n ></ng-template>\n } @else if(currentValue[i]){\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"\n ></ng-template>\n </span>\n }\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"\n ></ng-template>\n </mat-chip>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n } }\n </span>\n </span>\n } @if (triggerTemplate && triggerTemplate.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ trigger: currentValue }\"\n ></ng-template>\n </span>\n } @if (optionTemplate && optionTemplate.templateRef &&\n !triggerTemplate?.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"\n ></ng-template>\n </span>\n }\n </div>\n @if (onLaunch.observed) {\n <mat-icon\n class=\"vd-select-launch-readonly\"\n (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n >launch</mat-icon\n >\n }\n </div>\n } @if (!currentValue) {\n <div>&nbsp;</div>\n }\n</div>\n}\n<!-- #endregion -->\n", 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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.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: i7.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
16453
+ ], 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 <!-- #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 <!-- #region Option template -->\n <ng-template #optionTextTemplate let-option=\"option\">\n <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(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 <!-- #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 <!-- #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]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\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 <!-- #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 <!-- #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 @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 <!-- #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 <!-- #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 @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]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n </mat-chip>\n }\n @else\n {\n <span layout=\"row\" layout-align=\"start center\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n </span>\n }\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\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 }\n @else {\n <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n }\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\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 <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n } @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\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]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n <!-- #region Text -->\n <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(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<!-- #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 @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:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.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$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.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: i7.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
16491
16454
  }
16492
16455
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdSelectComponent, decorators: [{
16493
16456
  type: Component,
@@ -16505,7 +16468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
16505
16468
  provide: MAT_SELECT_CONFIG,
16506
16469
  useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
16507
16470
  }
16508
- ], template: "<mat-select\n [placeholder]=\"placeholder\"\n i18n-placeholder\n [(ngModel)]=\"value\"\n #select=\"matSelect\"\n (selectionChange)=\"handleChange($event)\"\n [hidden]=\"readonly\"\n [multiple]=\"multiple\"\n [compareWith]=\"compareWith??defaultCompareWith\"\n [disabled]=\"disabled\"\n flex\n>\n <!-- #region Filter input -->\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n <div\n class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\"\n >\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\n matInput\n #filterInput\n type=\"text\"\n placeholder=\"Filter...\"\n class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\"\n (keyup)=\"handleFilter($event)\"\n flex\n />\n @if (filterInput?.value) {\n <mat-icon\n (click)=\"filterInput!.value = ''; handleFilter($event);\"\n fontSet=\"material-symbols-outlined\"\n >close</mat-icon\n >\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\"\n >{ label, select, option {option} other { {{ label }} } }</span\n >\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Option template -->\n <ng-template #optionTextTemplate let-option=\"option\">\n <span\n layout=\"column\"\n class=\"option-text\"\n [ngClass]=\"{'option-has-hint': $safeNavigationMigration(option.hint?.length) > 0}\"\n >\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n ></ng-template>\n <span\n class=\"mat-caption text-secondary option-hint\"\n [matTooltip]=\"option.hint\"\n >{{option.hint}}</span\n >\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\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n >{{option[matIconKey]}}</mat-icon\n >\n } @if (svgIconKey && !matIconKey) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [svgIcon]=\"option[svgIconKey]\"\n [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n >{{option.icon?.matIcon}}</mat-icon\n >\n } @if (option.icon?.svgIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Dynamic icon -->\n @if (optionIcon; as optionIcon) {\n <ng-template\n #optionIconTemplate\n [ngTemplateOutlet]=\"optionIconTemplate\"\n let-optionIcon=\"optionIcon\"\n [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\"\n >\n @if (optionIcon.svgIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [svgIcon]=\"optionIcon.svgIcon\"\n [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n ></mat-icon>\n } @if (optionIcon.matIcon) {\n <mat-icon\n [class.mat-mdc-chip-avatar]=\"isAvatar\"\n [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"\n >{{optionIcon.matIcon}}</mat-icon\n >\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\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></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 =\n $last) {\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n ></ng-template>\n\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n } }\n </span>\n <mat-icon\n class=\"vd-select-launch\"\n (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n >launch</mat-icon\n >\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\n [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"\n ></ng-template>\n </mat-select-trigger>\n }\n <!-- #endregion -->\n\n <!-- #region Option template as trigger -->\n @if (!onLaunch.observed && !triggerTemplate?.templateRef &&\n 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 =\n $last) {\n <span layout=\"row\" layout-align=\"start center\">\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n ></ng-template>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\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 =\n $last) { @if (multiple) {\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n </span>\n }\n <ng-template\n [ngTemplateOutlet]=\"optionTextTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n </mat-chip>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"optionTextTemplate\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n } @if (!last) {\n <span>&nbsp;&nbsp;</span>\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\"\n >--- Please Select ---</mat-option\n >\n }\n <!-- #endregion -->\n\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option\n [value]=\"mapper ? option : option[optionValueProperty]\"\n [disabled]=\"$safeNavigationMigration(option?.disabled)\"\n >\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n >{{option[matIconKey]}}</mat-icon\n >\n } @if (svgIconKey && !matIconKey) {\n <mat-icon\n [svgIcon]=\"option[svgIconKey]\"\n [fontSet]=\"fontSet || 'material-symbols-outlined'\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Option icon -->\n @if (option.icon?.matIcon) {\n <mat-icon\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n >{{option.icon?.matIcon}}</mat-icon\n >\n } @if (option.icon?.svgIcon) {\n <mat-icon\n [svgIcon]=\"$safeNavigationMigration(option.icon?.svgIcon)\"\n [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\"\n [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"\n ></mat-icon>\n }\n <!-- #endregion -->\n\n <!-- #region Text -->\n <span\n layout=\"column\"\n layout-align=\"start center\"\n class=\"option-text\"\n [ngClass]=\"{'option-has-hint':$safeNavigationMigration(option.hint?.length)>0}\"\n >\n @if (!optionTemplate?.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"\n ></ng-template>\n } @if (optionTemplate && optionTemplate.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"\n ></ng-template>\n }\n <!-- #endregion -->\n <span\n class=\"mat-caption text-secondary option-hint\"\n [matTooltip]=\"option.hint\"\n >{{option.hint}}</span\n >\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\n last = $last) {\n <span layout=\"row\" layout-align=\"start center\">\n @if(!this.multiple) { @if(optionIcon || matIconKey || svgIconKey ||\n option.icon) {\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <span>&nbsp;&nbsp;</span>\n }\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"\n ></ng-template>\n } @else if(currentValue[i]){\n <mat-chip>\n @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n <span matChipAvatar>\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"\n ></ng-template>\n </span>\n }\n <ng-template\n [ngTemplateOutlet]=\"selectionTemplate\"\n [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"\n ></ng-template>\n </mat-chip>\n }\n </span>\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n } }\n </span>\n </span>\n } @if (triggerTemplate && triggerTemplate.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"triggerTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ trigger: currentValue }\"\n ></ng-template>\n </span>\n } @if (optionTemplate && optionTemplate.templateRef &&\n !triggerTemplate?.templateRef) {\n <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n <ng-template\n [ngTemplateOutlet]=\"optionIconTemplate\"\n [ngTemplateOutletContext]=\"{ option: currentValue }\"\n ></ng-template>\n <span>&nbsp;&nbsp;</span>\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate.templateRef!\"\n [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"\n ></ng-template>\n </span>\n }\n </div>\n @if (onLaunch.observed) {\n <mat-icon\n class=\"vd-select-launch-readonly\"\n (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\"\n >launch</mat-icon\n >\n }\n </div>\n } @if (!currentValue) {\n <div>&nbsp;</div>\n }\n</div>\n}\n<!-- #endregion -->\n", 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"] }]
16471
+ ], 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 <!-- #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 <!-- #region Option template -->\n <ng-template #optionTextTemplate let-option=\"option\">\n <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': $safeNavigationMigration(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 <!-- #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 <!-- #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]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\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 <!-- #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 <!-- #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 @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 <!-- #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 <!-- #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 @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]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n </mat-chip>\n }\n @else\n {\n <span layout=\"row\" layout-align=\"start center\">\n <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n </span>\n }\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\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 }\n @else {\n <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n }\n @if (!last) {\n <span>&nbsp;&nbsp;</span>\n }\n }\n </span>\n </mat-select-trigger>\n }\n <!-- #endregion -->\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 <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"$safeNavigationMigration(option?.disabled)\">\n <!-- #region Property icon -->\n @if (matIconKey && !svgIconKey) {\n <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n } @if (svgIconKey && !matIconKey) {\n <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n }\n <!-- #endregion -->\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]=\"$safeNavigationMigration(option.icon?.svgIcon)\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n }\n <!-- #endregion -->\n <!-- #region Text -->\n <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':$safeNavigationMigration(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<!-- #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 @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:4px!important;padding-bottom:4px!important}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix .mat-mdc-select-trigger{height:100%}.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"] }]
16509
16472
  }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
16510
16473
  type: ContentChild,
16511
16474
  args: [VdSelectOptionDirective]
@@ -18490,11 +18453,11 @@ class VdDynamicTableComponent {
18490
18453
  this.changeDetector.detectChanges();
18491
18454
  }
18492
18455
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
18493
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n<div class=\"loading-progress\">\n @if (dataSource?.isLoading) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n}\n\n<!-- #region Data table -->\n<div\n class=\"mat-table-container scrollbar-secondary\"\n [ngClass]=\"{'mat-table-sticky': sticky}\"\n #scrollContainer\n>\n <table\n mat-table\n #table\n [dataSource]=\"dataSource\"\n [dataSourceFilter]=\"dataSourceFilter\"\n [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\"\n [trackBy]=\"trackBy\"\n matSort\n matSortDisableClear\n [matSortActive]=\"sortActive||'id'\"\n [matSortDirection]=\"sortDirection\"\n multiTemplateDataRows\n >\n @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n <!-- #region Column def -->\n <ng-container\n [cdkColumnDef]=\"column.name\"\n [sticky]=\"column.sticky\"\n [stickyEnd]=\"column.stickyEnd\"\n >\n <ng-template\n #header\n [ngTemplateOutlet]=\"header\"\n let-headerText=\"headerText\"\n [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\"\n >\n <th\n mat-header-cell\n *cdkHeaderCellDef\n [mat-sort-header]=\"column.sortBy || column.name\"\n [hidden]=\"column.hidden\"\n [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\"\n [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\"\n [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\"\n [arrowPosition]=\"column.arrowBefore?'before':'after'\"\n >\n @if (column.type == ColumnType.Checkbox) {\n <mat-checkbox\n (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\"\n [disabled]=\"!dataSource.paginator?.length\"\n [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\"\n [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"\n ></mat-checkbox>\n } @if (column.type != ColumnType.Checkbox) {\n <span [matTooltip]=\"headerText\">{{headerText}}</span>\n }\n </th>\n </ng-template>\n <td\n mat-cell\n *cdkCellDef=\"let row; let rowIndex = dataIndex\"\n [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\"\n [matTooltipClass]=\"column.tooltipClass??''\"\n [hidden]=\"column.hidden\"\n [ngClass]=\"getRowClasses(column, row)\"\n [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\"\n >\n <ng-template\n #rowVal\n [ngTemplateOutlet]=\"rowVal\"\n let-rowValue\n [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\"\n >\n @switch (column.type) {\n <!-- #region Checkbox column -->\n @case (ColumnType.Checkbox) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n [checked]=\"dataSource.selectionModel.isSelected(row)\"\n ></mat-checkbox>\n }\n <!-- #endregion -->\n <!-- #region Enum column -->\n @case (ColumnType.Enum) {\n <span>\n @if (column.enumMetadata) { @if (column.multiple) { @for (item of\n rowValue; track item; let i = $index) { @if (i < 2) {\n <ng-template\n let-displayValue=\"displayValue\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"\n ></ng-template>\n } @if (i === 1 && rowValue?.length > 2) {\n <small\n [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\"\n matTooltipClass=\"mat-tooltip-multiline\"\n >...</small\n >\n } }\n <ng-template #template let-displayValue=\"displayValue\">\n <mat-chip-row\n disableRipple=\"true\"\n selectable=\"false\"\n [matTooltip]=\"displayValue\"\n >\n <span>{{ displayValue }}</span>\n </mat-chip-row>\n </ng-template>\n } @else { @if (rowValue >= 0) {\n <span\n class=\"na\"\n [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\"\n [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"\n ></span>\n } } } @else { @if (column.multiple) { @for (item of rowValue; track\n item; let i = $index; let last = $last) {\n <div>\n @if (i<2) {\n <small i18n=\"@@selection\"\n >{item | enum:column.enumType:column.enumPrefix, select, type\n {type} other {{{item |\n enum:column.enumType:column.enumPrefix}}}}</small\n >\n } @if (i==1 && rowValue?.length > 2) {\n <small>, ...</small>\n }\n </div>\n } } @else { @if (rowValue >= 0) {\n <span i18n=\"@@selection\"\n >{rowValue | enum:column.enumType:column.enumPrefix, select, type\n {type} other {{{rowValue |\n enum:column.enumType:column.enumPrefix}}}}</span\n >\n } } }\n </span>\n }\n <!-- #endregion -->\n <!-- #region Toggle column -->\n @case (ColumnType.Toggle) { @if (!formArray) {\n <mat-slide-toggle\n [ngModel]=\"row | property:column.name\"\n (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\"\n (click)=\"$event.stopPropagation();\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n color=\"accent\"\n ></mat-slide-toggle>\n } @if (formArray) {\n <ng-container\n [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n >\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n ></ng-container>\n </ng-container>\n } }\n <!-- #endregion -->\n <!-- #region Date column -->\n @case (ColumnType.Date) {\n <span\n >{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy\n HH:mm:ss'}}</span\n >\n }\n <!-- #endregion -->\n <!-- #region Text Input column -->\n @case (ColumnType.TextInput) { @if (!formArray) {\n <mat-form-field\n appearance=\"outline\"\n layout=\"column\"\n layout-align=\"center start\"\n subscriptSizing=\"dynamic\"\n dense-3\n (click)=\"$event.stopPropagation();\"\n >\n @if (!formArray) {\n <input\n matInput\n type=\"{{column.inputType}}\"\n autocomplete=\"none\"\n name=\"{{column.name}}{{rowIndex}}\"\n [ngModel]=\"row | property:column.name\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\"\n [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\"\n (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n />\n }\n </mat-form-field>\n } @if (formArray) {\n <ng-container\n [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n >\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n ></ng-container>\n </ng-container>\n } }\n <!-- #endregion -->\n <!-- #region VD-Select column -->\n @case (ColumnType.Select) { @if (!formArray) {\n <mat-form-field\n appearance=\"outline\"\n layout=\"column\"\n layout-align=\"center start\"\n subscriptSizing=\"dynamic\"\n dense-3\n (click)=\"$event.stopPropagation();\"\n >\n @if (!formArray) {\n <vd-select\n name=\"{{column.name}}{{rowIndex}}\"\n [enum]=\"column.enumType\"\n [enumMetadata]=\"column.enumMetadata\"\n [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\"\n [prefix]=\"column.enumPrefix\"\n [options]=\"column.options\"\n [defaultOption]=\"column.defaultOption??true\"\n [ngModel]=\"row | property:column.name\"\n (ngModelChange)=\"setNestedProperty(row, column.name, $event);\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n ></vd-select>\n }\n </mat-form-field>\n } @if (formArray) {\n <ng-container\n [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n >\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n ></ng-container>\n </ng-container>\n } }\n <!-- #endregion -->\n <!-- #region Action -->\n @case (ColumnType.Action) { @if (column.menu) { @if (menu?.matMenu &&\n !row.locked && hasVisibleRowMenuItems(row, column)) {\n <div\n id=\"menu-{{row.id}}\"\n style=\"visibility: hidden; position: fixed\"\n #contextMenuTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"menu.matMenu!\"\n ></div>\n }\n <vd-dynamic-menu\n [items]=\"[column.menu]\"\n [data]=\"row\"\n [context]=\"context\"\n #menu\n ></vd-dynamic-menu>\n } }\n <!-- #endregion -->\n <!-- #region Menu -->\n @case (ColumnType.Menu) { @if (column.menu) {\n <vd-dynamic-menu\n [items]=\"[column.menu]\"\n [data]=\"row\"\n [context]=\"context\"\n ></vd-dynamic-menu>\n } }\n <!-- #endregion -->\n <!-- #region icon -->\n @case (ColumnType.Icon) {\n <span layout=\"row\" layout-align=\"start center\">\n @if (column.icon?.matIcon) {\n <mat-icon\n fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n >{{handleExpression($safeNavigationMigration(column.icon?.matIcon)!,\n row)}}</mat-icon\n >\n } @if (column.icon?.svgIcon) {\n <mat-icon\n fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon?.svgIcon)!, row)!\"\n ></mat-icon>\n } @if (column.icon?.fontIcon) {\n <mat-icon\n fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon?.fontIcon)!, row)!\"\n ></mat-icon>\n }\n </span>\n }\n <!-- #endregion -->\n <!-- #region icon button -->\n @case (ColumnType.IconButton) {\n <a\n mat-icon-button\n (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\"\n >\n <mat-icon\n fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\"\n >{{handleExpression(column.iconButton?.icon??'radio_button_checked',\n row) || 'radio_button_checked'}}</mat-icon\n >\n </a>\n }\n <!-- #endregion -->\n <!-- #region Other column types -->\n @default {\n <span [innerHtml]=\"rowValue??''\"></span>\n }\n <!-- #endregion -->\n }\n <ng-template\n #recursiveContainer\n let-columnNameSegments=\"segments\"\n let-formGroup=\"formGroup\"\n let-parentFormGroup=\"parentFormGroup\"\n >\n @if (formGroup) {\n <ng-container [formGroup]=\"formGroup\">\n <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n @if (!columnNameSegments.length) { @switch (column.type) {\n <!-- #region Toggle column -->\n @case (ColumnType.Toggle) {\n <mat-slide-toggle\n [formControl]=\"formGroup\"\n (click)=\"$event.stopPropagation();\"\n (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\"\n [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n color=\"accent\"\n ></mat-slide-toggle>\n }\n <!-- #endregion -->\n <!-- #region Text Input column -->\n @case (ColumnType.TextInput) {\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n dense-3\n layout=\"column\"\n layout-align=\"center start\"\n (click)=\"$event.stopPropagation();\"\n >\n <input\n matInput\n [formControl]=\"formGroup\"\n type=\"{{column.inputType}}\"\n autocomplete=\"none\"\n [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\"\n [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n />\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VD-Select column -->\n @case (ColumnType.Select) {\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n dense-3\n layout=\"column\"\n layout-align=\"center start\"\n (click)=\"$event.stopPropagation();\"\n >\n <vd-select\n [formControl]=\"formGroup\"\n [enum]=\"column.enumType\"\n [enumMetadata]=\"column.enumMetadata\"\n [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\"\n [prefix]=\"column.enumPrefix\"\n [options]=\"column.options\"\n [defaultOption]=\"column.defaultOption??true\"\n [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n ></vd-select>\n </mat-form-field>\n }\n <!-- #endregion -->\n } } @else {\n <!-- If not the last segment, create a nested form group -->\n <ng-container [formGroupName]=\"columnNameSegments[0]\">\n <!-- Recursive call to handle nested segments -->\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"\n ></ng-container>\n </ng-container>\n }\n </ng-container>\n }\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n <!-- #endregion -->\n }\n\n <!-- #region Filter row -->\n @if (dataSource && filterable) { @for (column of columns$ | async; track\n column) {\n <ng-container\n cdkColumnDef=\"filter.{{column.filter || column.name}}\"\n [sticky]=\"column.sticky\"\n [stickyEnd]=\"column.stickyEnd\"\n >\n <th\n mat-header-cell\n *cdkHeaderCellDef\n [hidden]=\"column.hidden\"\n [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\"\n [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\"\n >\n <!-- #region Select filter -->\n @if(column.endpoint || column.enumType || column.options){\n <span\n filter-select\n [endpoint]=\"column.endpoint\"\n [enum]=\"column.enumType\"\n [enumMetadata]=\"column.enumMetadata\"\n [enumFilter]=\"column.enumFilter | func:{}:context\"\n [prefix]=\"column.enumPrefix\"\n [options]=\"column.options\"\n [text]=\"column.filterOptionText || 'name'\"\n ></span>\n }\n <!-- #region Text filter -->\n @else if(column.type == ColumnType.Text || column.type ==\n ColumnType.TextInput || column.type == ColumnType.Number) {\n <span\n filter-input\n [onlyNumber]=\"column.filterInputNumber??false\"\n [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\"\n [matTooltipClass]=\"column.filterTooltipClass??''\"\n [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"\n ></span>\n }\n <!-- #endregion -->\n <!-- #region Date filter -->\n @else if (column.type == ColumnType.Date) {\n <span filter-date></span>\n }\n <!-- #endregion -->\n <!-- #region Action filter (clear) -->\n @else if (column.type == ColumnType.Action) {\n <span filter-clear></span>\n }\n <!-- #endregion -->\n </th>\n </ng-container>\n } }\n <!-- #endregion -->\n\n <!-- #region Details column -->\n <ng-container cdkColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row; let index = index\"\n [attr.colspan]=\"(displayedColumns$ | async)?.length\"\n >\n <div\n class=\"row-detail\"\n [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\"\n #detailsTemplate\n >\n @if (templateRef && row === expandedRow) {\n <ng-container\n *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"\n ></ng-container>\n }\n </div>\n </td>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Filter header -->\n @if (filterable) {\n <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n }\n <!-- #endregion -->\n\n <tr\n mat-header-row\n *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"\n ></tr>\n <tr\n mat-row\n *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\"\n [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n [class.expanded-row]=\"expandedRow === row\"\n (click)=\"handleRowClick(index, row)\"\n (contextmenu)=\"handleRowRightClick($event, row)\"\n ></tr>\n\n <!-- #region Detrails row -->\n @if (detailsTemplate || templateRef) {\n <tr\n mat-row\n *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"detail-row\"\n [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n ></tr>\n }\n <!-- #endregion -->\n </table>\n\n <!-- #region Modern No Results Message -->\n @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n <div class=\"no-results-overlay\">\n <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n <div class=\"no-results-text mat-body-1\">\n <h3 i18n=\"@@noResultsFound\">No results found</h3>\n <p i18n=\"@@tryAdjustFilters\">\n Try adjusting your filters or search criteria.\n </p>\n </div>\n </div>\n }\n <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n<code>\n <pre>{{formValue | json}}</pre>\n</code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n <ng-content select=\"[table-footer]\"></ng-content>\n <span flex></span>\n @if (paginable) {\n <mat-paginator\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons=\"true\"\n ></mat-paginator>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type:
18456
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\r\n <div class=\"loading-progress\">\r\n @if (dataSource?.isLoading) {\r\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n <!-- #region Column def -->\r\n <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n @if (column.type == ColumnType.Checkbox) {\r\n <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n } @if (column.type != ColumnType.Checkbox) {\r\n <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n }\r\n </th>\r\n </ng-template>\r\n <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n @switch (column.type) {\r\n <!-- #region Checkbox column -->\r\n @case (ColumnType.Checkbox) {\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Enum column -->\r\n @case (ColumnType.Enum) {\r\n <span>\r\n @if (column.enumMetadata) {\r\n @if (column.multiple) {\r\n @for (item of rowValue; track item; let i = $index) {\r\n @if (i < 2) {\r\n <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n }\r\n @if (i === 1 && rowValue?.length > 2) {\r\n <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n }\r\n }\r\n <ng-template #template let-displayValue=\"displayValue\">\r\n <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n <span>{{ displayValue }}</span>\r\n </mat-chip-row>\r\n </ng-template>\r\n } @else {\r\n @if (rowValue >= 0) {\r\n <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n }\r\n }\r\n } @else {\r\n @if (column.multiple) {\r\n @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n <div>\r\n @if (i<2) {\r\n <small>\r\n <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n </small>\r\n } @if (i==1 && rowValue?.length > 2) {\r\n <small>, ...</small>\r\n }\r\n </div>\r\n }\r\n } @else {\r\n @if (rowValue >= 0) {\r\n <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n }\r\n }\r\n }\r\n </span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Toggle column -->\r\n @case (ColumnType.Toggle) {\r\n @if (!formArray) {\r\n <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n } @if (formArray) {\r\n <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Date column -->\r\n @case (ColumnType.Date) {\r\n <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Text Input column -->\r\n @case (ColumnType.TextInput) {\r\n @if (!formArray) {\r\n <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n @if (!formArray) {\r\n <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n }\r\n </mat-form-field>\r\n } @if (formArray) {\r\n <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region VD-Select column -->\r\n @case (ColumnType.Select) {\r\n @if (!formArray) {\r\n <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n @if (!formArray) {\r\n <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n }\r\n </mat-form-field>\r\n } @if (formArray) {\r\n <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Action -->\r\n @case (ColumnType.Action) {\r\n @if (column.menu) {\r\n @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n }\r\n <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Menu -->\r\n @case (ColumnType.Menu) {\r\n @if (column.menu) {\r\n <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region icon -->\r\n @case (ColumnType.Icon) {\r\n <span layout=\"row\" layout-align=\"start center\">\r\n @if(column && column.icon){\r\n @if ( column.icon.matIcon) {\r\n <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n }\r\n @if (column.icon.svgIcon) {\r\n <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n }\r\n @if (column.icon.fontIcon) {\r\n <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n }\r\n }\r\n </span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region icon button -->\r\n @case (ColumnType.IconButton) {\r\n <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Other column types -->\r\n @default {\r\n <span [innerHtml]=\"rowValue??''\"></span>\r\n }\r\n <!-- #endregion -->\r\n }\r\n <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n @if (formGroup) {\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n @if (!columnNameSegments.length) {\r\n @switch (column.type) {\r\n <!-- #region Toggle column -->\r\n @case (ColumnType.Toggle) {\r\n <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Text Input column -->\r\n @case (ColumnType.TextInput) {\r\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n </mat-form-field>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region VD-Select column -->\r\n @case (ColumnType.Select) {\r\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n </mat-form-field>\r\n }\r\n <!-- #endregion -->\r\n }\r\n } @else {\r\n <!-- If not the last segment, create a nested form group -->\r\n <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n <!-- Recursive call to handle nested segments -->\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n </ng-template>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <!-- #endregion -->\r\n }\r\n\r\n <!-- #region Filter row -->\r\n @if (dataSource && filterable) {\r\n @for (column of columns$ | async; track column) {\r\n <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n <!-- #region Select filter -->\r\n @if(column.endpoint || column.enumType || column.options){\r\n <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n }\r\n <!-- #region Text filter -->\r\n @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Date filter -->\r\n @else if (column.type == ColumnType.Date) {\r\n <span filter-date></span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Action filter (clear) -->\r\n @else if (column.type == ColumnType.Action) {\r\n <span filter-clear></span>\r\n }\r\n <!-- #endregion -->\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region Details column -->\r\n <ng-container cdkColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n @if (templateRef && row === expandedRow) {\r\n <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n }\r\n </div>\r\n </td>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Filter header -->\r\n @if (filterable) {\r\n <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n }\r\n <!-- #endregion -->\r\n\r\n <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n <!-- #region Detrails row -->\r\n @if (detailsTemplate || templateRef) {\r\n <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n }\r\n <!-- #endregion -->\r\n </table>\r\n\r\n <!-- #region Modern No Results Message -->\r\n @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n <div class=\"no-results-overlay\">\r\n <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n <div class=\"no-results-text mat-body-1\">\r\n <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n <p i18n=\"@@tryAdjustFilters\">\r\n Try adjusting your filters or search criteria.\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n <code>\r\n <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n <ng-content select=\"[table-footer]\"></ng-content>\r\n <span flex></span>\r\n @if (paginable) {\r\n <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type:
18494
18457
  //----------------------
18495
- DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type:
18458
+ DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "component", type: MsaEnumDisplayComponent, selector: "msa-enum-display", inputs: ["value", "enumType", "metadata", "showIcon", "entity", "context"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type:
18496
18459
  //----------------------
18497
- MapPipe, name: "map" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], animations: [
18460
+ MapPipe, name: "map" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], animations: [
18498
18461
  trigger('detailExpand', [
18499
18462
  state('collapsed', style({ height: '0px', minHeight: '0' })),
18500
18463
  state('expanded', style({ height: AUTO_STYLE })),
@@ -18527,7 +18490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
18527
18490
  //----------------------
18528
18491
  DataSourceFilterDirective,
18529
18492
  DisableControlDirective,
18530
- EnumPipe,
18531
18493
  FilterDateComponent,
18532
18494
  FilterInputComponent,
18533
18495
  FilterSelectComponent,
@@ -18538,13 +18500,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
18538
18500
  PropertyPipe,
18539
18501
  VdDynamicMenuComponent,
18540
18502
  VdSelectComponent,
18503
+ MsaEnumDisplayComponent
18541
18504
  ], changeDetection: ChangeDetectionStrategy.Eager, animations: [
18542
18505
  trigger('detailExpand', [
18543
18506
  state('collapsed', style({ height: '0px', minHeight: '0' })),
18544
18507
  state('expanded', style({ height: AUTO_STYLE })),
18545
18508
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
18546
18509
  ]),
18547
- ], template: "@if (!static) {\n<div class=\"loading-progress\">\n @if (dataSource?.isLoading) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n}\n\n<!-- #region Data table -->\n<div\n class=\"mat-table-container scrollbar-secondary\"\n [ngClass]=\"{'mat-table-sticky': sticky}\"\n #scrollContainer\n>\n <table\n mat-table\n #table\n [dataSource]=\"dataSource\"\n [dataSourceFilter]=\"dataSourceFilter\"\n [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\"\n [trackBy]=\"trackBy\"\n matSort\n matSortDisableClear\n [matSortActive]=\"sortActive||'id'\"\n [matSortDirection]=\"sortDirection\"\n multiTemplateDataRows\n >\n @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n <!-- #region Column def -->\n <ng-container\n [cdkColumnDef]=\"column.name\"\n [sticky]=\"column.sticky\"\n [stickyEnd]=\"column.stickyEnd\"\n >\n <ng-template\n #header\n [ngTemplateOutlet]=\"header\"\n let-headerText=\"headerText\"\n [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\"\n >\n <th\n mat-header-cell\n *cdkHeaderCellDef\n [mat-sort-header]=\"column.sortBy || column.name\"\n [hidden]=\"column.hidden\"\n [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\"\n [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\"\n [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\"\n [arrowPosition]=\"column.arrowBefore?'before':'after'\"\n >\n @if (column.type == ColumnType.Checkbox) {\n <mat-checkbox\n (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\"\n [disabled]=\"!dataSource.paginator?.length\"\n [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\"\n [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"\n ></mat-checkbox>\n } @if (column.type != ColumnType.Checkbox) {\n <span [matTooltip]=\"headerText\">{{headerText}}</span>\n }\n </th>\n </ng-template>\n <td\n mat-cell\n *cdkCellDef=\"let row; let rowIndex = dataIndex\"\n [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\"\n [matTooltipClass]=\"column.tooltipClass??''\"\n [hidden]=\"column.hidden\"\n [ngClass]=\"getRowClasses(column, row)\"\n [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\"\n >\n <ng-template\n #rowVal\n [ngTemplateOutlet]=\"rowVal\"\n let-rowValue\n [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\"\n >\n @switch (column.type) {\n <!-- #region Checkbox column -->\n @case (ColumnType.Checkbox) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n [checked]=\"dataSource.selectionModel.isSelected(row)\"\n ></mat-checkbox>\n }\n <!-- #endregion -->\n <!-- #region Enum column -->\n @case (ColumnType.Enum) {\n <span>\n @if (column.enumMetadata) { @if (column.multiple) { @for (item of\n rowValue; track item; let i = $index) { @if (i < 2) {\n <ng-template\n let-displayValue=\"displayValue\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"\n ></ng-template>\n } @if (i === 1 && rowValue?.length > 2) {\n <small\n [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\"\n matTooltipClass=\"mat-tooltip-multiline\"\n >...</small\n >\n } }\n <ng-template #template let-displayValue=\"displayValue\">\n <mat-chip-row\n disableRipple=\"true\"\n selectable=\"false\"\n [matTooltip]=\"displayValue\"\n >\n <span>{{ displayValue }}</span>\n </mat-chip-row>\n </ng-template>\n } @else { @if (rowValue >= 0) {\n <span\n class=\"na\"\n [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\"\n [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"\n ></span>\n } } } @else { @if (column.multiple) { @for (item of rowValue; track\n item; let i = $index; let last = $last) {\n <div>\n @if (i<2) {\n <small i18n=\"@@selection\"\n >{item | enum:column.enumType:column.enumPrefix, select, type\n {type} other {{{item |\n enum:column.enumType:column.enumPrefix}}}}</small\n >\n } @if (i==1 && rowValue?.length > 2) {\n <small>, ...</small>\n }\n </div>\n } } @else { @if (rowValue >= 0) {\n <span i18n=\"@@selection\"\n >{rowValue | enum:column.enumType:column.enumPrefix, select, type\n {type} other {{{rowValue |\n enum:column.enumType:column.enumPrefix}}}}</span\n >\n } } }\n </span>\n }\n <!-- #endregion -->\n <!-- #region Toggle column -->\n @case (ColumnType.Toggle) { @if (!formArray) {\n <mat-slide-toggle\n [ngModel]=\"row | property:column.name\"\n (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\"\n (click)=\"$event.stopPropagation();\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n color=\"accent\"\n ></mat-slide-toggle>\n } @if (formArray) {\n <ng-container\n [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n >\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n ></ng-container>\n </ng-container>\n } }\n <!-- #endregion -->\n <!-- #region Date column -->\n @case (ColumnType.Date) {\n <span\n >{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy\n HH:mm:ss'}}</span\n >\n }\n <!-- #endregion -->\n <!-- #region Text Input column -->\n @case (ColumnType.TextInput) { @if (!formArray) {\n <mat-form-field\n appearance=\"outline\"\n layout=\"column\"\n layout-align=\"center start\"\n subscriptSizing=\"dynamic\"\n dense-3\n (click)=\"$event.stopPropagation();\"\n >\n @if (!formArray) {\n <input\n matInput\n type=\"{{column.inputType}}\"\n autocomplete=\"none\"\n name=\"{{column.name}}{{rowIndex}}\"\n [ngModel]=\"row | property:column.name\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\"\n [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\"\n (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n />\n }\n </mat-form-field>\n } @if (formArray) {\n <ng-container\n [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n >\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n ></ng-container>\n </ng-container>\n } }\n <!-- #endregion -->\n <!-- #region VD-Select column -->\n @case (ColumnType.Select) { @if (!formArray) {\n <mat-form-field\n appearance=\"outline\"\n layout=\"column\"\n layout-align=\"center start\"\n subscriptSizing=\"dynamic\"\n dense-3\n (click)=\"$event.stopPropagation();\"\n >\n @if (!formArray) {\n <vd-select\n name=\"{{column.name}}{{rowIndex}}\"\n [enum]=\"column.enumType\"\n [enumMetadata]=\"column.enumMetadata\"\n [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\"\n [prefix]=\"column.enumPrefix\"\n [options]=\"column.options\"\n [defaultOption]=\"column.defaultOption??true\"\n [ngModel]=\"row | property:column.name\"\n (ngModelChange)=\"setNestedProperty(row, column.name, $event);\"\n [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\"\n (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n ></vd-select>\n }\n </mat-form-field>\n } @if (formArray) {\n <ng-container\n [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\"\n >\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"\n ></ng-container>\n </ng-container>\n } }\n <!-- #endregion -->\n <!-- #region Action -->\n @case (ColumnType.Action) { @if (column.menu) { @if (menu?.matMenu &&\n !row.locked && hasVisibleRowMenuItems(row, column)) {\n <div\n id=\"menu-{{row.id}}\"\n style=\"visibility: hidden; position: fixed\"\n #contextMenuTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"menu.matMenu!\"\n ></div>\n }\n <vd-dynamic-menu\n [items]=\"[column.menu]\"\n [data]=\"row\"\n [context]=\"context\"\n #menu\n ></vd-dynamic-menu>\n } }\n <!-- #endregion -->\n <!-- #region Menu -->\n @case (ColumnType.Menu) { @if (column.menu) {\n <vd-dynamic-menu\n [items]=\"[column.menu]\"\n [data]=\"row\"\n [context]=\"context\"\n ></vd-dynamic-menu>\n } }\n <!-- #endregion -->\n <!-- #region icon -->\n @case (ColumnType.Icon) {\n <span layout=\"row\" layout-align=\"start center\">\n @if (column.icon?.matIcon) {\n <mat-icon\n fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n >{{handleExpression($safeNavigationMigration(column.icon?.matIcon)!,\n row)}}</mat-icon\n >\n } @if (column.icon?.svgIcon) {\n <mat-icon\n fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon?.svgIcon)!, row)!\"\n ></mat-icon>\n } @if (column.icon?.fontIcon) {\n <mat-icon\n fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.icon?.cssClass??'', row)\"\n [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon?.fontIcon)!, row)!\"\n ></mat-icon>\n }\n </span>\n }\n <!-- #endregion -->\n <!-- #region icon button -->\n @case (ColumnType.IconButton) {\n <a\n mat-icon-button\n (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\"\n >\n <mat-icon\n fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\"\n [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\"\n >{{handleExpression(column.iconButton?.icon??'radio_button_checked',\n row) || 'radio_button_checked'}}</mat-icon\n >\n </a>\n }\n <!-- #endregion -->\n <!-- #region Other column types -->\n @default {\n <span [innerHtml]=\"rowValue??''\"></span>\n }\n <!-- #endregion -->\n }\n <ng-template\n #recursiveContainer\n let-columnNameSegments=\"segments\"\n let-formGroup=\"formGroup\"\n let-parentFormGroup=\"parentFormGroup\"\n >\n @if (formGroup) {\n <ng-container [formGroup]=\"formGroup\">\n <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n @if (!columnNameSegments.length) { @switch (column.type) {\n <!-- #region Toggle column -->\n @case (ColumnType.Toggle) {\n <mat-slide-toggle\n [formControl]=\"formGroup\"\n (click)=\"$event.stopPropagation();\"\n (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\"\n [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n color=\"accent\"\n ></mat-slide-toggle>\n }\n <!-- #endregion -->\n <!-- #region Text Input column -->\n @case (ColumnType.TextInput) {\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n dense-3\n layout=\"column\"\n layout-align=\"center start\"\n (click)=\"$event.stopPropagation();\"\n >\n <input\n matInput\n [formControl]=\"formGroup\"\n type=\"{{column.inputType}}\"\n autocomplete=\"none\"\n [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\"\n [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n />\n </mat-form-field>\n }\n <!-- #endregion -->\n <!-- #region VD-Select column -->\n @case (ColumnType.Select) {\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n dense-3\n layout=\"column\"\n layout-align=\"center start\"\n (click)=\"$event.stopPropagation();\"\n >\n <vd-select\n [formControl]=\"formGroup\"\n [enum]=\"column.enumType\"\n [enumMetadata]=\"column.enumMetadata\"\n [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\"\n [prefix]=\"column.enumPrefix\"\n [options]=\"column.options\"\n [defaultOption]=\"column.defaultOption??true\"\n [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\"\n (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\"\n (keydown.enter)=\"handleKeydownEnter($event)\"\n ></vd-select>\n </mat-form-field>\n }\n <!-- #endregion -->\n } } @else {\n <!-- If not the last segment, create a nested form group -->\n <ng-container [formGroupName]=\"columnNameSegments[0]\">\n <!-- Recursive call to handle nested segments -->\n <ng-container\n [ngTemplateOutlet]=\"recursiveContainer\"\n [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"\n ></ng-container>\n </ng-container>\n }\n </ng-container>\n }\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n <!-- #endregion -->\n }\n\n <!-- #region Filter row -->\n @if (dataSource && filterable) { @for (column of columns$ | async; track\n column) {\n <ng-container\n cdkColumnDef=\"filter.{{column.filter || column.name}}\"\n [sticky]=\"column.sticky\"\n [stickyEnd]=\"column.stickyEnd\"\n >\n <th\n mat-header-cell\n *cdkHeaderCellDef\n [hidden]=\"column.hidden\"\n [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\"\n [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\"\n >\n <!-- #region Select filter -->\n @if(column.endpoint || column.enumType || column.options){\n <span\n filter-select\n [endpoint]=\"column.endpoint\"\n [enum]=\"column.enumType\"\n [enumMetadata]=\"column.enumMetadata\"\n [enumFilter]=\"column.enumFilter | func:{}:context\"\n [prefix]=\"column.enumPrefix\"\n [options]=\"column.options\"\n [text]=\"column.filterOptionText || 'name'\"\n ></span>\n }\n <!-- #region Text filter -->\n @else if(column.type == ColumnType.Text || column.type ==\n ColumnType.TextInput || column.type == ColumnType.Number) {\n <span\n filter-input\n [onlyNumber]=\"column.filterInputNumber??false\"\n [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\"\n [matTooltipClass]=\"column.filterTooltipClass??''\"\n [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"\n ></span>\n }\n <!-- #endregion -->\n <!-- #region Date filter -->\n @else if (column.type == ColumnType.Date) {\n <span filter-date></span>\n }\n <!-- #endregion -->\n <!-- #region Action filter (clear) -->\n @else if (column.type == ColumnType.Action) {\n <span filter-clear></span>\n }\n <!-- #endregion -->\n </th>\n </ng-container>\n } }\n <!-- #endregion -->\n\n <!-- #region Details column -->\n <ng-container cdkColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row; let index = index\"\n [attr.colspan]=\"(displayedColumns$ | async)?.length\"\n >\n <div\n class=\"row-detail\"\n [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\"\n #detailsTemplate\n >\n @if (templateRef && row === expandedRow) {\n <ng-container\n *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"\n ></ng-container>\n }\n </div>\n </td>\n </ng-container>\n <!-- #endregion -->\n\n <!-- #region Filter header -->\n @if (filterable) {\n <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n }\n <!-- #endregion -->\n\n <tr\n mat-header-row\n *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"\n ></tr>\n <tr\n mat-row\n *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\"\n [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n [class.expanded-row]=\"expandedRow === row\"\n (click)=\"handleRowClick(index, row)\"\n (contextmenu)=\"handleRowRightClick($event, row)\"\n ></tr>\n\n <!-- #region Detrails row -->\n @if (detailsTemplate || templateRef) {\n <tr\n mat-row\n *cdkRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"detail-row\"\n [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"\n ></tr>\n }\n <!-- #endregion -->\n </table>\n\n <!-- #region Modern No Results Message -->\n @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n <div class=\"no-results-overlay\">\n <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n <div class=\"no-results-text mat-body-1\">\n <h3 i18n=\"@@noResultsFound\">No results found</h3>\n <p i18n=\"@@tryAdjustFilters\">\n Try adjusting your filters or search criteria.\n </p>\n </div>\n </div>\n }\n <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n<code>\n <pre>{{formValue | json}}</pre>\n</code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n <ng-content select=\"[table-footer]\"></ng-content>\n <span flex></span>\n @if (paginable) {\n <mat-paginator\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons=\"true\"\n ></mat-paginator>\n }\n</div>\n", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
18510
+ ], template: "@if (!static) {\r\n <div class=\"loading-progress\">\r\n @if (dataSource?.isLoading) {\r\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n }\r\n </div>\r\n}\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n @for (column of columns$ | async; track columnsTrackBy($index, column)) {\r\n <!-- #region Column def -->\r\n <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n @if (column.type == ColumnType.Checkbox) {\r\n <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n } @if (column.type != ColumnType.Checkbox) {\r\n <span [matTooltip]=\"headerText\">{{headerText}}</span>\r\n }\r\n </th>\r\n </ng-template>\r\n <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n @switch (column.type) {\r\n <!-- #region Checkbox column -->\r\n @case (ColumnType.Checkbox) {\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Enum column -->\r\n @case (ColumnType.Enum) {\r\n <span>\r\n @if (column.enumMetadata) {\r\n @if (column.multiple) {\r\n @for (item of rowValue; track item; let i = $index) {\r\n @if (i < 2) {\r\n <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n }\r\n @if (i === 1 && rowValue?.length > 2) {\r\n <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n }\r\n }\r\n <ng-template #template let-displayValue=\"displayValue\">\r\n <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n <span>{{ displayValue }}</span>\r\n </mat-chip-row>\r\n </ng-template>\r\n } @else {\r\n @if (rowValue >= 0) {\r\n <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n }\r\n }\r\n } @else {\r\n @if (column.multiple) {\r\n @for (item of rowValue; track item; let i = $index; let last = $last) {\r\n <div>\r\n @if (i<2) {\r\n <small>\r\n <msa-enum-display [value]=\"item\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n </small>\r\n } @if (i==1 && rowValue?.length > 2) {\r\n <small>, ...</small>\r\n }\r\n </div>\r\n }\r\n } @else {\r\n @if (rowValue >= 0) {\r\n <msa-enum-display [value]=\"rowValue\" [enumType]=\"column.enumType\" [metadata]=\"column.enumMetadata\"></msa-enum-display>\r\n }\r\n }\r\n }\r\n </span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Toggle column -->\r\n @case (ColumnType.Toggle) {\r\n @if (!formArray) {\r\n <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n } @if (formArray) {\r\n <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Date column -->\r\n @case (ColumnType.Date) {\r\n <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Text Input column -->\r\n @case (ColumnType.TextInput) {\r\n @if (!formArray) {\r\n <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n @if (!formArray) {\r\n <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n }\r\n </mat-form-field>\r\n } @if (formArray) {\r\n <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region VD-Select column -->\r\n @case (ColumnType.Select) {\r\n @if (!formArray) {\r\n <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n @if (!formArray) {\r\n <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"$safeNavigationMigration(column?.enumFilter) | func:row:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n }\r\n </mat-form-field>\r\n } @if (formArray) {\r\n <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Action -->\r\n @case (ColumnType.Action) {\r\n @if (column.menu) {\r\n @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\r\n <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\r\n }\r\n <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Menu -->\r\n @case (ColumnType.Menu) {\r\n @if (column.menu) {\r\n <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n }\r\n }\r\n <!-- #endregion -->\r\n <!-- #region icon -->\r\n @case (ColumnType.Icon) {\r\n <span layout=\"row\" layout-align=\"start center\">\r\n @if(column && column.icon){\r\n @if ( column.icon.matIcon) {\r\n <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\">{{handleExpression($safeNavigationMigration(column.icon.matIcon)!, row)}}</mat-icon>\r\n }\r\n @if (column.icon.svgIcon) {\r\n <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [svgIcon]=\"handleExpression($safeNavigationMigration(column.icon.svgIcon)!, row)!\"></mat-icon>\r\n }\r\n @if (column.icon.fontIcon) {\r\n <mat-icon fontSet=\"{{column.icon.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon.cssClass??'', row)\" [fontIcon]=\"handleExpression($safeNavigationMigration(column.icon.fontIcon)!, row)!\"></mat-icon>\r\n }\r\n }\r\n </span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region icon button -->\r\n @case (ColumnType.IconButton) {\r\n <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Other column types -->\r\n @default {\r\n <span [innerHtml]=\"rowValue??''\"></span>\r\n }\r\n <!-- #endregion -->\r\n }\r\n <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n @if (formGroup) {\r\n <ng-container [formGroup]=\"formGroup\">\r\n <!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n @if (!columnNameSegments.length) {\r\n @switch (column.type) {\r\n <!-- #region Toggle column -->\r\n @case (ColumnType.Toggle) {\r\n <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Text Input column -->\r\n @case (ColumnType.TextInput) {\r\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\" />\r\n </mat-form-field>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region VD-Select column -->\r\n @case (ColumnType.Select) {\r\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n </mat-form-field>\r\n }\r\n <!-- #endregion -->\r\n }\r\n } @else {\r\n <!-- If not the last segment, create a nested form group -->\r\n <ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n <!-- Recursive call to handle nested segments -->\r\n <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n </ng-template>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <!-- #endregion -->\r\n }\r\n\r\n <!-- #region Filter row -->\r\n @if (dataSource && filterable) {\r\n @for (column of columns$ | async; track column) {\r\n <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n <!-- #region Select filter -->\r\n @if(column.endpoint || column.enumType || column.options){\r\n <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n }\r\n <!-- #region Text filter -->\r\n @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\r\n <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Date filter -->\r\n @else if (column.type == ColumnType.Date) {\r\n <span filter-date></span>\r\n }\r\n <!-- #endregion -->\r\n <!-- #region Action filter (clear) -->\r\n @else if (column.type == ColumnType.Action) {\r\n <span filter-clear></span>\r\n }\r\n <!-- #endregion -->\r\n </th>\r\n </ng-container>\r\n }\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region Details column -->\r\n <ng-container cdkColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n @if (templateRef && row === expandedRow) {\r\n <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n }\r\n </div>\r\n </td>\r\n </ng-container>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Filter header -->\r\n @if (filterable) {\r\n <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n }\r\n <!-- #endregion -->\r\n\r\n <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n <!-- #region Detrails row -->\r\n @if (detailsTemplate || templateRef) {\r\n <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n }\r\n <!-- #endregion -->\r\n </table>\r\n\r\n <!-- #region Modern No Results Message -->\r\n @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\r\n <div class=\"no-results-overlay\">\r\n <mat-icon class=\"no-results-icon\">search_off</mat-icon>\r\n <div class=\"no-results-text mat-body-1\">\r\n <h3 i18n=\"@@noResultsFound\">No results found</h3>\r\n <p i18n=\"@@tryAdjustFilters\">\r\n Try adjusting your filters or search criteria.\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n <!-- #endregion -->\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n@if (debugValue) {\r\n <code>\r\n <pre>{{formValue | json}}</pre>\r\n</code>\r\n}\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n <ng-content select=\"[table-footer]\"></ng-content>\r\n <span flex></span>\r\n @if (paginable) {\r\n <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n }\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
18548
18511
  }], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
18549
18512
  type: ViewChild,
18550
18513
  args: ['table']
@@ -18698,7 +18661,6 @@ __decorate([
18698
18661
  maxWidth: 150,
18699
18662
  enumType: Grid,
18700
18663
  type: TableColumnType.Select,
18701
- enumPrefix: 'Grid_',
18702
18664
  defaultOption: false
18703
18665
  }),
18704
18666
  Display($localize `:@@display:Display`),
@@ -22536,7 +22498,7 @@ class VdChipsComponent extends AbstractMatFormField {
22536
22498
  provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
22537
22499
  useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
22538
22500
  }
22539
- ], 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\">\r\n <!-- #region Chips -->\r\n @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n <span class=\"vd-chip-content\">\r\n @if (!chipTemplate?.templateRef) {\r\n <span>\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{ chip }}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n }\r\n </span>\r\n }\r\n @if (chipTemplate && chipTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n }\r\n </span>\r\n @for (button of suffixButtons; track button; let first = $first) {\r\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n </a>\r\n }\r\n @if ((onLaunch.observers.length) > 0) {\r\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n </a>\r\n }\r\n @if (!readonly) {\r\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </a>\r\n }\r\n </mat-chip-row>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region Search box -->\r\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 />\r\n <!-- #endregion -->\r\n\r\n <!-- #region Reset button -->\r\n @if ((!value || empty) && !readonly && !disabled) {\r\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n </svg>\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n @if(!classType && opened)\r\n {\r\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n <mat-option [value]=\"item\">\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{item}}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n }\r\n </mat-option>\r\n <mat-divider *ngIf=\"!last\"></mat-divider>\r\n }\r\n }\r\n @if (classType && opened) {\r\n <mat-option hide=\"true\"></mat-option>\r\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>\r\n }\r\n <div class=\"vd-chips-paginator\">\r\n <mat-divider></mat-divider>\r\n <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.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: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
22501
+ ], 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\">\r\n <!-- #region Chips -->\r\n @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n <span class=\"vd-chip-content\">\r\n @if (!chipTemplate?.templateRef) {\r\n <span>\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{ chip }}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n }\r\n </span>\r\n }\r\n @if (chipTemplate && chipTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n }\r\n </span>\r\n @for (button of suffixButtons; track button; let first = $first) {\r\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n </a>\r\n }\r\n @if ((onLaunch.observers.length) > 0) {\r\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n </a>\r\n }\r\n @if (!readonly) {\r\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </a>\r\n }\r\n </mat-chip-row>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region Search box -->\r\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 />\r\n <!-- #endregion -->\r\n\r\n <!-- #region Reset button -->\r\n @if ((!value || empty) && !readonly && !disabled) {\r\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n </svg>\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n @if(opened){\r\n @if(!classType)\r\n {\r\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n <mat-option [value]=\"item\">\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{item}}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n }\r\n </mat-option>\r\n @if(!last){\r\n <mat-divider></mat-divider>\r\n }\r\n }\r\n }\r\n @if (classType) {\r\n <mat-option hide=\"true\"></mat-option>\r\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>\r\n }\r\n }\r\n <div class=\"vd-chips-paginator\">\r\n <mat-divider></mat-divider>\r\n <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$2.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6.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: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i7.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
22540
22502
  }
22541
22503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdChipsComponent, decorators: [{
22542
22504
  type: Component,
@@ -22556,7 +22518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
22556
22518
  MatIconModule,
22557
22519
  MatInputModule,
22558
22520
  VdDynamicTableComponent,
22559
- ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n <!-- #region Chips -->\r\n @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n <span class=\"vd-chip-content\">\r\n @if (!chipTemplate?.templateRef) {\r\n <span>\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{ chip }}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n }\r\n </span>\r\n }\r\n @if (chipTemplate && chipTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n }\r\n </span>\r\n @for (button of suffixButtons; track button; let first = $first) {\r\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n </a>\r\n }\r\n @if ((onLaunch.observers.length) > 0) {\r\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n </a>\r\n }\r\n @if (!readonly) {\r\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </a>\r\n }\r\n </mat-chip-row>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region Search box -->\r\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 />\r\n <!-- #endregion -->\r\n\r\n <!-- #region Reset button -->\r\n @if ((!value || empty) && !readonly && !disabled) {\r\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n </svg>\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n @if(!classType && opened)\r\n {\r\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n <mat-option [value]=\"item\">\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{item}}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n }\r\n </mat-option>\r\n <mat-divider *ngIf=\"!last\"></mat-divider>\r\n }\r\n }\r\n @if (classType && opened) {\r\n <mat-option hide=\"true\"></mat-option>\r\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>\r\n }\r\n <div class=\"vd-chips-paginator\">\r\n <mat-divider></mat-divider>\r\n <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\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"] }]
22521
+ ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n <!-- #region Chips -->\r\n @for (chip of chips; track chip; let first = $first; let index = $index) {\r\n <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\r\n <span class=\"vd-chip-content\">\r\n @if (!chipTemplate?.templateRef) {\r\n <span>\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{ chip }}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n }\r\n </span>\r\n }\r\n @if (chipTemplate && chipTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n }\r\n </span>\r\n @for (button of suffixButtons; track button; let first = $first) {\r\n <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\r\n </a>\r\n }\r\n @if ((onLaunch.observers.length) > 0) {\r\n <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\r\n </a>\r\n }\r\n @if (!readonly) {\r\n <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </a>\r\n }\r\n </mat-chip-row>\r\n }\r\n <!-- #endregion -->\r\n\r\n <!-- #region Search box -->\r\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 />\r\n <!-- #endregion -->\r\n\r\n <!-- #region Reset button -->\r\n @if ((!value || empty) && !readonly && !disabled) {\r\n <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\r\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\r\n <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\r\n </svg>\r\n </a>\r\n }\r\n <!-- #endregion -->\r\n</mat-chip-grid>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n @if(opened){\r\n @if(!classType)\r\n {\r\n @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\r\n <mat-option [value]=\"item\">\r\n @if (!autocompleteOptionTemplate?.templateRef) {\r\n <span>{{item}}</span>\r\n }\r\n @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\r\n <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n }\r\n </mat-option>\r\n @if(!last){\r\n <mat-divider></mat-divider>\r\n }\r\n }\r\n }\r\n @if (classType) {\r\n <mat-option hide=\"true\"></mat-option>\r\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>\r\n }\r\n }\r\n <div class=\"vd-chips-paginator\">\r\n <mat-divider></mat-divider>\r\n <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n </div>\r\n</mat-autocomplete>\r\n<!-- #endregion -->\r\n\r\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"] }]
22560
22522
  }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
22561
22523
  type: ViewChild,
22562
22524
  args: [VdDynamicTableComponent, { static: false }]
@@ -23933,7 +23895,7 @@ class MsaGenericFormAutocompleteFieldComponent extends MsaGenericFormFieldBaseCo
23933
23895
  <mat-error>{{errorMessage}}</mat-error>
23934
23896
  }
23935
23897
  </mat-form-field>
23936
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
23898
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
23937
23899
  }
23938
23900
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormAutocompleteFieldComponent, decorators: [{
23939
23901
  type: Component,
@@ -23987,7 +23949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
23987
23949
  <mat-error>{{errorMessage}}</mat-error>
23988
23950
  }
23989
23951
  </mat-form-field>
23990
- `, styles: ["mat-form-field{width:100%}\n"] }]
23952
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
23991
23953
  }], propDecorators: { autocompleteFilteredOptions: [{
23992
23954
  type: Input
23993
23955
  }], filterAutocomplete: [{
@@ -24029,7 +23991,7 @@ class MsaGenericFormCalendarFieldComponent extends MsaGenericFormFieldBaseCompon
24029
23991
  <mat-error layout-margin>{{errorMessage}}</mat-error>
24030
23992
  }
24031
23993
  </mat-form-field>
24032
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatDatepickerModule }, { kind: "component", type: i4$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"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
23994
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatDatepickerModule }, { kind: "component", type: i4$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"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24033
23995
  }
24034
23996
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormCalendarFieldComponent, decorators: [{
24035
23997
  type: Component,
@@ -24052,7 +24014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24052
24014
  <mat-error layout-margin>{{errorMessage}}</mat-error>
24053
24015
  }
24054
24016
  </mat-form-field>
24055
- `, styles: ["mat-form-field{width:100%}\n"] }]
24017
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24056
24018
  }], propDecorators: { datePickerHeaderComponent: [{
24057
24019
  type: Input
24058
24020
  }], handleCalendarFilterAsync: [{
@@ -24193,7 +24155,7 @@ class MsaGenericFormChipsFieldComponent extends MsaGenericFormFieldBaseComponent
24193
24155
  <mat-error>{{errorMessage}}</mat-error>
24194
24156
  }
24195
24157
  </mat-form-field>
24196
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24158
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24197
24159
  }
24198
24160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormChipsFieldComponent, decorators: [{
24199
24161
  type: Component,
@@ -24260,7 +24222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24260
24222
  <mat-error>{{errorMessage}}</mat-error>
24261
24223
  }
24262
24224
  </mat-form-field>
24263
- `, styles: ["mat-form-field{width:100%}\n"] }]
24225
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24264
24226
  }], propDecorators: { separatorKeysCodes: [{
24265
24227
  type: Input
24266
24228
  }], autocompleteFilteredOptions: [{
@@ -24302,20 +24264,15 @@ class MsaGenericFormCodeFieldComponent {
24302
24264
  @if (codeTemplate && codeTemplate.templateRef) {
24303
24265
  <ng-template [ngTemplateOutlet]="codeTemplate.templateRef" [ngTemplateOutletContext]="{ field: field, formGroup: formGroup }"></ng-template>
24304
24266
  }
24305
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
24267
+ `, isInline: true, styles: ["::ng-deep mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
24306
24268
  }
24307
24269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormCodeFieldComponent, decorators: [{
24308
24270
  type: Component,
24309
- args: [{
24310
- selector: 'msa-generic-form-code-field',
24311
- standalone: true,
24312
- imports: [CommonModule],
24313
- template: `
24271
+ args: [{ selector: 'msa-generic-form-code-field', standalone: true, imports: [CommonModule], template: `
24314
24272
  @if (codeTemplate && codeTemplate.templateRef) {
24315
24273
  <ng-template [ngTemplateOutlet]="codeTemplate.templateRef" [ngTemplateOutletContext]="{ field: field, formGroup: formGroup }"></ng-template>
24316
24274
  }
24317
- `
24318
- }]
24275
+ `, styles: ["::ng-deep mat-form-field{width:100%;height:100%}\n"] }]
24319
24276
  }], propDecorators: { field: [{
24320
24277
  type: Input,
24321
24278
  args: [{ required: true }]
@@ -24369,7 +24326,7 @@ class MsaGenericFormColorFieldComponent extends MsaGenericFormFieldBaseComponent
24369
24326
  <mat-error>{{errorMessage}}</mat-error>
24370
24327
  }
24371
24328
  </mat-form-field>
24372
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.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: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24329
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}.color-picker{width:1.6rem!important;height:1.6rem!important;padding:2px!important;margin:8px;display:inline-block;box-sizing:border-box;border-color:transparent!important;border-radius:100%;background:#fff;cursor:pointer;padding:3px;box-shadow:0 1px 1px #0003,0 1px 1px 1px #00000024,0 1px 1px 1px #0000001f;appearance:none;-webkit-appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}.color-picker::-moz-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.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: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24373
24330
  }
24374
24331
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormColorFieldComponent, decorators: [{
24375
24332
  type: Component,
@@ -24419,7 +24376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24419
24376
  <mat-error>{{errorMessage}}</mat-error>
24420
24377
  }
24421
24378
  </mat-form-field>
24422
- `, styles: ["mat-form-field{width:100%}\n"] }]
24379
+ `, styles: ["mat-form-field{width:100%;height:100%}.color-picker{width:1.6rem!important;height:1.6rem!important;padding:2px!important;margin:8px;display:inline-block;box-sizing:border-box;border-color:transparent!important;border-radius:100%;background:#fff;cursor:pointer;padding:3px;box-shadow:0 1px 1px #0003,0 1px 1px 1px #00000024,0 1px 1px 1px #0000001f;appearance:none;-webkit-appearance:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}.color-picker::-moz-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:999px}\n"] }]
24423
24380
  }] });
24424
24381
 
24425
24382
  /**
@@ -24447,20 +24404,15 @@ class MsaGenericFormCustomFieldComponent {
24447
24404
  @if (customTemplate && customTemplate.templateRef) {
24448
24405
  <ng-template [ngTemplateOutlet]="customTemplate.templateRef" [ngTemplateOutletContext]="{ field: field, formGroup: formGroup }"></ng-template>
24449
24406
  }
24450
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
24407
+ `, isInline: true, styles: ["::ng-deep mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
24451
24408
  }
24452
24409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormCustomFieldComponent, decorators: [{
24453
24410
  type: Component,
24454
- args: [{
24455
- selector: 'msa-generic-form-custom-field',
24456
- standalone: true,
24457
- imports: [CommonModule],
24458
- template: `
24411
+ args: [{ selector: 'msa-generic-form-custom-field', standalone: true, imports: [CommonModule], template: `
24459
24412
  @if (customTemplate && customTemplate.templateRef) {
24460
24413
  <ng-template [ngTemplateOutlet]="customTemplate.templateRef" [ngTemplateOutletContext]="{ field: field, formGroup: formGroup }"></ng-template>
24461
24414
  }
24462
- `
24463
- }]
24415
+ `, styles: ["::ng-deep mat-form-field{width:100%;height:100%}\n"] }]
24464
24416
  }], propDecorators: { field: [{
24465
24417
  type: Input,
24466
24418
  args: [{ required: true }]
@@ -24525,7 +24477,7 @@ class MsaGenericFormDateFieldComponent extends MsaGenericFormFieldBaseComponent
24525
24477
  <mat-error>{{errorMessage}}</mat-error>
24526
24478
  }
24527
24479
  </mat-form-field>
24528
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24480
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24529
24481
  }
24530
24482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormDateFieldComponent, decorators: [{
24531
24483
  type: Component,
@@ -24562,7 +24514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24562
24514
  <mat-error>{{errorMessage}}</mat-error>
24563
24515
  }
24564
24516
  </mat-form-field>
24565
- `, styles: ["mat-form-field{width:100%}\n"] }]
24517
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24566
24518
  }], propDecorators: { datePickerHeaderComponent: [{
24567
24519
  type: Input
24568
24520
  }], handleDatePickerFilterAsync: [{
@@ -24596,20 +24548,15 @@ class MsaGenericFormEditorFieldComponent {
24596
24548
  @if (editorTemplate && editorTemplate.templateRef) {
24597
24549
  <ng-template [ngTemplateOutlet]="editorTemplate.templateRef" [ngTemplateOutletContext]="{ field: field, formGroup: formGroup }"></ng-template>
24598
24550
  }
24599
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
24551
+ `, isInline: true, styles: ["::ng-deep mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
24600
24552
  }
24601
24553
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormEditorFieldComponent, decorators: [{
24602
24554
  type: Component,
24603
- args: [{
24604
- selector: 'msa-generic-form-editor-field',
24605
- standalone: true,
24606
- imports: [CommonModule],
24607
- template: `
24555
+ args: [{ selector: 'msa-generic-form-editor-field', standalone: true, imports: [CommonModule], template: `
24608
24556
  @if (editorTemplate && editorTemplate.templateRef) {
24609
24557
  <ng-template [ngTemplateOutlet]="editorTemplate.templateRef" [ngTemplateOutletContext]="{ field: field, formGroup: formGroup }"></ng-template>
24610
24558
  }
24611
- `
24612
- }]
24559
+ `, styles: ["::ng-deep mat-form-field{width:100%;height:100%}\n"] }]
24613
24560
  }], propDecorators: { field: [{
24614
24561
  type: Input,
24615
24562
  args: [{ required: true }]
@@ -24689,7 +24636,7 @@ class MsaGenericFormEnumFieldComponent extends MsaGenericFormFieldBaseComponent
24689
24636
  <mat-error>{{errorMessage}}</mat-error>
24690
24637
  }
24691
24638
  </mat-form-field>
24692
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24639
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24693
24640
  }
24694
24641
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormEnumFieldComponent, decorators: [{
24695
24642
  type: Component,
@@ -24766,7 +24713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24766
24713
  <mat-error>{{errorMessage}}</mat-error>
24767
24714
  }
24768
24715
  </mat-form-field>
24769
- `, styles: ["mat-form-field{width:100%}\n"] }]
24716
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24770
24717
  }] });
24771
24718
 
24772
24719
  /**
@@ -24776,7 +24723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24776
24723
  class MsaGenericFormFileFieldComponent extends MsaGenericFormFieldBaseComponent {
24777
24724
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormFileFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
24778
24725
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MsaGenericFormFileFieldComponent, isStandalone: true, selector: "msa-generic-form-file-field", usesInheritance: true, ngImport: i0, template: `
24779
- <mat-form-field>
24726
+ <mat-form-field [class]="field.cssClass">
24780
24727
  <mat-label>{{field.label}}</mat-label>
24781
24728
  <div vd-file-input
24782
24729
  [formControlName]="field.name!"
@@ -24786,12 +24733,12 @@ class MsaGenericFormFileFieldComponent extends MsaGenericFormFieldBaseComponent
24786
24733
  flex>
24787
24734
  </div>
24788
24735
  </mat-form-field>
24789
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24736
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24790
24737
  }
24791
24738
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormFileFieldComponent, decorators: [{
24792
24739
  type: Component,
24793
24740
  args: [{ selector: 'msa-generic-form-file-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, VdFileInputComponent, DisableControlDirective], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
24794
- <mat-form-field>
24741
+ <mat-form-field [class]="field.cssClass">
24795
24742
  <mat-label>{{field.label}}</mat-label>
24796
24743
  <div vd-file-input
24797
24744
  [formControlName]="field.name!"
@@ -24801,7 +24748,266 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24801
24748
  flex>
24802
24749
  </div>
24803
24750
  </mat-form-field>
24804
- `, styles: ["mat-form-field{width:100%}\n"] }]
24751
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24752
+ }] });
24753
+
24754
+ /**
24755
+ * @class MsaGenericFormMsaChipsFieldComponent
24756
+ * @description Renders a VdChips case for `MsaGenericFormComponent`.
24757
+ */
24758
+ class MsaGenericFormMsaChipsFieldComponent extends MsaGenericFormFieldBaseComponent {
24759
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaChipsFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
24760
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormMsaChipsFieldComponent, isStandalone: true, selector: "msa-generic-form-msa-chips-field", usesInheritance: true, ngImport: i0, template: `
24761
+ <mat-form-field [class]="field.cssClass">
24762
+ <mat-label>{{field.label}}</mat-label>
24763
+ <vd-chips #vdChip
24764
+ [formControlName]="field.name!"
24765
+ [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
24766
+ [params]="field.params || {} | func:formValue:formGroup:context"
24767
+ [searchField]="field.searchField"
24768
+ [searchFields]="field.searchFields"
24769
+ [filters]="field.filters"
24770
+ [selectFirst]="field.selectFirst"
24771
+ [classType]="field.classType"
24772
+ [projection]="field.projection"
24773
+ [key]="field.optionValueProperty"
24774
+ [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
24775
+ [removable]="!field.clear"
24776
+ [context]="context"
24777
+ [suffixButtons]="field.suffixButtons"
24778
+ [autocompleteCssClass]="field.autocompleteCssClass"
24779
+ (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
24780
+ (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
24781
+ (cleared)="field.clear && field.clear(formValue, formGroup, context);"
24782
+ [customValue]="field.customValue"
24783
+ layout="row"
24784
+ flex>
24785
+ @if (field.chipTemplate; as chip) {
24786
+ <ng-template vd-chip let-chip="chip">
24787
+ <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
24788
+ </ng-template>
24789
+ }
24790
+ @if (field.autocompleteTemplate; as option) {
24791
+ <ng-template vd-autocomplete-option let-option="option">
24792
+ <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
24793
+ </ng-template>
24794
+ }
24795
+ </vd-chips>
24796
+ @if (field.hint) {
24797
+ <mat-hint>{{field.hint}}</mat-hint>
24798
+ }
24799
+ @if (vdChip.emptyResult) {
24800
+ <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
24801
+ }
24802
+ @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
24803
+ <mat-error>{{errorMessage}}</mat-error>
24804
+ }
24805
+ </mat-form-field>
24806
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24807
+ }
24808
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaChipsFieldComponent, decorators: [{
24809
+ type: Component,
24810
+ args: [{ selector: 'msa-generic-form-msa-chips-field', standalone: true, imports: [
24811
+ CommonModule,
24812
+ ReactiveFormsModule,
24813
+ MatFormFieldModule,
24814
+ FuncPipe,
24815
+ VdChipsComponent,
24816
+ VdChipDirective,
24817
+ VdAutocompleteOptionDirective
24818
+ ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
24819
+ <mat-form-field [class]="field.cssClass">
24820
+ <mat-label>{{field.label}}</mat-label>
24821
+ <vd-chips #vdChip
24822
+ [formControlName]="field.name!"
24823
+ [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
24824
+ [params]="field.params || {} | func:formValue:formGroup:context"
24825
+ [searchField]="field.searchField"
24826
+ [searchFields]="field.searchFields"
24827
+ [filters]="field.filters"
24828
+ [selectFirst]="field.selectFirst"
24829
+ [classType]="field.classType"
24830
+ [projection]="field.projection"
24831
+ [key]="field.optionValueProperty"
24832
+ [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
24833
+ [removable]="!field.clear"
24834
+ [context]="context"
24835
+ [suffixButtons]="field.suffixButtons"
24836
+ [autocompleteCssClass]="field.autocompleteCssClass"
24837
+ (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
24838
+ (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
24839
+ (cleared)="field.clear && field.clear(formValue, formGroup, context);"
24840
+ [customValue]="field.customValue"
24841
+ layout="row"
24842
+ flex>
24843
+ @if (field.chipTemplate; as chip) {
24844
+ <ng-template vd-chip let-chip="chip">
24845
+ <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
24846
+ </ng-template>
24847
+ }
24848
+ @if (field.autocompleteTemplate; as option) {
24849
+ <ng-template vd-autocomplete-option let-option="option">
24850
+ <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
24851
+ </ng-template>
24852
+ }
24853
+ </vd-chips>
24854
+ @if (field.hint) {
24855
+ <mat-hint>{{field.hint}}</mat-hint>
24856
+ }
24857
+ @if (vdChip.emptyResult) {
24858
+ <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
24859
+ }
24860
+ @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
24861
+ <mat-error>{{errorMessage}}</mat-error>
24862
+ }
24863
+ </mat-form-field>
24864
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24865
+ }] });
24866
+
24867
+ /**
24868
+ * VdListOptionDirective class
24869
+ */
24870
+ class VdListOptionDirective extends CdkPortal {
24871
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
24872
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: VdListOptionDirective, isStandalone: true, selector: "[vd-list-option]ng-template", usesInheritance: true, ngImport: i0 });
24873
+ }
24874
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, decorators: [{
24875
+ type: Directive,
24876
+ args: [{
24877
+ selector: '[vd-list-option]ng-template'
24878
+ }]
24879
+ }] });
24880
+
24881
+ class VdListComponent extends AbstractSelectFormField {
24882
+ /**
24883
+ * Option template
24884
+ */
24885
+ optionTemplate;
24886
+ /**
24887
+ * The select element.
24888
+ */
24889
+ selectEl;
24890
+ /**
24891
+ * The select element.
24892
+ */
24893
+ filterInput;
24894
+ /**
24895
+ * Whether the select has a value.
24896
+ */
24897
+ get empty() { return this._readonly ? !this.currentValue : (this.selectEl?.selectedOptions?.isEmpty() ?? true); }
24898
+ /**
24899
+ * Constructor
24900
+ */
24901
+ constructor() {
24902
+ super("vd-list");
24903
+ }
24904
+ /**
24905
+ * Sets control focus
24906
+ */
24907
+ focus() {
24908
+ this.selectEl?.focus();
24909
+ }
24910
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24911
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n @if (!optionTemplate?.templateRef) {\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\n } @if (optionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n }\n </mat-list-option>\n }\n <!-- #endregion -->\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
24912
+ }
24913
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, decorators: [{
24914
+ type: Component,
24915
+ args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [
24916
+ CommonModule,
24917
+ MatSelectionList,
24918
+ MatListOption,
24919
+ FormsModule
24920
+ ], template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n @if (!optionTemplate?.templateRef) {\n <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other{{{option[optionTextProperty]}}}}</span>\n } @if (optionTemplate?.templateRef) {\n <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate.templateRef)!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n }\n </mat-list-option>\n }\n <!-- #endregion -->\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
24921
+ }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
24922
+ type: ContentChild,
24923
+ args: [VdListOptionDirective]
24924
+ }], selectEl: [{
24925
+ type: ViewChild,
24926
+ args: [MatSelectionList, { static: false }]
24927
+ }], filterInput: [{
24928
+ type: ViewChild,
24929
+ args: ['filterInput', { static: false }]
24930
+ }] } });
24931
+
24932
+ /**
24933
+ * @class MsaGenericFormMsaListFieldComponent
24934
+ * @description Renders a MsaList case for `MsaGenericFormComponent`.
24935
+ */
24936
+ class MsaGenericFormMsaListFieldComponent extends MsaGenericFormFieldBaseComponent {
24937
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
24938
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormMsaListFieldComponent, isStandalone: true, selector: "msa-generic-form-msa-list-field", usesInheritance: true, ngImport: i0, template: `
24939
+ <mat-form-field [class]="field.cssClass"
24940
+ floatLabel="always"
24941
+ class="form-field-type-list">
24942
+ <mat-label>{{field.label}}</mat-label>
24943
+ <vd-list [formControlName]="field.name!"
24944
+ [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
24945
+ [params]="field.params ??{} | func:formValue:formGroup:context"
24946
+ [projection]="field.projection"
24947
+ [mapper]="field.mapper"
24948
+ [compareWith]="field.compareWith"
24949
+ [loadData]="field.fetchCondition | func:formValue:formGroup:context"
24950
+ [optionValueProperty]="field.optionValueProperty"
24951
+ [optionTextProperty]="field.optionTextProperty"
24952
+ [multiple]="field.multiple"
24953
+ [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
24954
+ (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
24955
+ (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
24956
+ [style.max-width]="field.maxWidth"
24957
+ [style.max-height]="field.maxHeight"
24958
+ flex>
24959
+ @if (field.optionTemplate; as option) {
24960
+ <ng-template vd-list-option let-option="option">
24961
+ <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
24962
+ </ng-template>
24963
+ }
24964
+ </vd-list>
24965
+ @if (field.hint) {
24966
+ <mat-hint>{{field.hint}}</mat-hint>
24967
+ }
24968
+ @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
24969
+ <mat-error>{{errorMessage}}</mat-error>
24970
+ }
24971
+ </mat-form-field>
24972
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24973
+ }
24974
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaListFieldComponent, decorators: [{
24975
+ type: Component,
24976
+ args: [{ selector: 'msa-generic-form-msa-list-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, FuncPipe, VdListComponent], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
24977
+ <mat-form-field [class]="field.cssClass"
24978
+ floatLabel="always"
24979
+ class="form-field-type-list">
24980
+ <mat-label>{{field.label}}</mat-label>
24981
+ <vd-list [formControlName]="field.name!"
24982
+ [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
24983
+ [params]="field.params ??{} | func:formValue:formGroup:context"
24984
+ [projection]="field.projection"
24985
+ [mapper]="field.mapper"
24986
+ [compareWith]="field.compareWith"
24987
+ [loadData]="field.fetchCondition | func:formValue:formGroup:context"
24988
+ [optionValueProperty]="field.optionValueProperty"
24989
+ [optionTextProperty]="field.optionTextProperty"
24990
+ [multiple]="field.multiple"
24991
+ [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
24992
+ (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
24993
+ (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
24994
+ [style.max-width]="field.maxWidth"
24995
+ [style.max-height]="field.maxHeight"
24996
+ flex>
24997
+ @if (field.optionTemplate; as option) {
24998
+ <ng-template vd-list-option let-option="option">
24999
+ <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
25000
+ </ng-template>
25001
+ }
25002
+ </vd-list>
25003
+ @if (field.hint) {
25004
+ <mat-hint>{{field.hint}}</mat-hint>
25005
+ }
25006
+ @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
25007
+ <mat-error>{{errorMessage}}</mat-error>
25008
+ }
25009
+ </mat-form-field>
25010
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24805
25011
  }] });
24806
25012
 
24807
25013
  /**
@@ -24893,7 +25099,7 @@ class MsaGenericFormMsaSelectFieldComponent extends MsaGenericFormFieldBaseCompo
24893
25099
  <mat-error>{{errorMessage}}</mat-error>
24894
25100
  }
24895
25101
  </mat-form-field>
24896
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: MatChipsModule }, { kind: "component", type: i7.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: i7.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25102
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: MatChipsModule }, { kind: "component", type: i7.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: i7.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
24897
25103
  }
24898
25104
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormMsaSelectFieldComponent, decorators: [{
24899
25105
  type: Component,
@@ -24991,7 +25197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
24991
25197
  <mat-error>{{errorMessage}}</mat-error>
24992
25198
  }
24993
25199
  </mat-form-field>
24994
- `, styles: ["mat-form-field{width:100%}\n"] }]
25200
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
24995
25201
  }] });
24996
25202
 
24997
25203
  /* Unique ID counter for generating unique IDs for each instance of the directive. */
@@ -25271,7 +25477,7 @@ class MsaGenericFormRadioFieldComponent extends MsaGenericFormFieldBaseComponent
25271
25477
  <mat-error>{{errorMessage}}</mat-error>
25272
25478
  }
25273
25479
  </mat-form-field>
25274
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.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: "directive", type: MatFormFieldRadioDirective, selector: "[radioMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25480
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.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: "directive", type: MatFormFieldRadioDirective, selector: "[radioMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25275
25481
  }
25276
25482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormRadioFieldComponent, decorators: [{
25277
25483
  type: Component,
@@ -25303,7 +25509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
25303
25509
  <mat-error>{{errorMessage}}</mat-error>
25304
25510
  }
25305
25511
  </mat-form-field>
25306
- `, styles: ["mat-form-field{width:100%}\n"] }]
25512
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
25307
25513
  }] });
25308
25514
 
25309
25515
  /**
@@ -25320,7 +25526,7 @@ class MsaGenericFormSelectFieldComponent extends MsaGenericFormFieldBaseComponen
25320
25526
  [disableControl]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
25321
25527
  (selectionChange)="field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);"
25322
25528
  flex>
25323
- @for (option of ($safeNavigationMigration(field?.options) | func:formValue:formGroup:context) ?? []; track option.id) {
25529
+ @for (option of ($safeNavigationMigration(field.options) | func:formValue:formGroup:context) ?? []; track option.id) {
25324
25530
  <mat-option [value]="option.id">{{option.name}}</mat-option>
25325
25531
  }
25326
25532
  </mat-select>
@@ -25342,7 +25548,7 @@ class MsaGenericFormSelectFieldComponent extends MsaGenericFormFieldBaseComponen
25342
25548
  <mat-error>{{errorMessage}}</mat-error>
25343
25549
  }
25344
25550
  </mat-form-field>
25345
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25551
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25346
25552
  }
25347
25553
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormSelectFieldComponent, decorators: [{
25348
25554
  type: Component,
@@ -25363,7 +25569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
25363
25569
  [disableControl]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
25364
25570
  (selectionChange)="field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);"
25365
25571
  flex>
25366
- @for (option of ($safeNavigationMigration(field?.options) | func:formValue:formGroup:context) ?? []; track option.id) {
25572
+ @for (option of ($safeNavigationMigration(field.options) | func:formValue:formGroup:context) ?? []; track option.id) {
25367
25573
  <mat-option [value]="option.id">{{option.name}}</mat-option>
25368
25574
  }
25369
25575
  </mat-select>
@@ -25385,7 +25591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
25385
25591
  <mat-error>{{errorMessage}}</mat-error>
25386
25592
  }
25387
25593
  </mat-form-field>
25388
- `, styles: ["mat-form-field{width:100%}\n"] }]
25594
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
25389
25595
  }] });
25390
25596
 
25391
25597
  /**
@@ -25573,7 +25779,7 @@ class MsaGenericFormTextFieldComponent extends MsaGenericFormFieldBaseComponent
25573
25779
  <mat-error>{{errorMessage}}</mat-error>
25574
25780
  }
25575
25781
  </mat-form-field>
25576
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.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: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25782
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.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: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25577
25783
  }
25578
25784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormTextFieldComponent, decorators: [{
25579
25785
  type: Component,
@@ -25628,7 +25834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
25628
25834
  <mat-error>{{errorMessage}}</mat-error>
25629
25835
  }
25630
25836
  </mat-form-field>
25631
- `, styles: ["mat-form-field{width:100%}\n"] }]
25837
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
25632
25838
  }] });
25633
25839
 
25634
25840
  /**
@@ -25666,7 +25872,7 @@ class MsaGenericFormTextareaFieldComponent extends MsaGenericFormFieldBaseCompon
25666
25872
  <mat-error>{{errorMessage}}</mat-error>
25667
25873
  }
25668
25874
  </mat-form-field>
25669
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.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: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25875
+ `, isInline: true, styles: ["mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.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: i4.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: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25670
25876
  }
25671
25877
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormTextareaFieldComponent, decorators: [{
25672
25878
  type: Component,
@@ -25709,266 +25915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
25709
25915
  <mat-error>{{errorMessage}}</mat-error>
25710
25916
  }
25711
25917
  </mat-form-field>
25712
- `, styles: ["mat-form-field{width:100%}\n"] }]
25713
- }] });
25714
-
25715
- /**
25716
- * VdListOptionDirective class
25717
- */
25718
- class VdListOptionDirective extends CdkPortal {
25719
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
25720
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: VdListOptionDirective, isStandalone: true, selector: "[vd-list-option]ng-template", usesInheritance: true, ngImport: i0 });
25721
- }
25722
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListOptionDirective, decorators: [{
25723
- type: Directive,
25724
- args: [{
25725
- selector: '[vd-list-option]ng-template'
25726
- }]
25727
- }] });
25728
-
25729
- class VdListComponent extends AbstractSelectFormField {
25730
- /**
25731
- * Option template
25732
- */
25733
- optionTemplate;
25734
- /**
25735
- * The select element.
25736
- */
25737
- selectEl;
25738
- /**
25739
- * The select element.
25740
- */
25741
- filterInput;
25742
- /**
25743
- * Whether the select has a value.
25744
- */
25745
- get empty() { return this._readonly ? !this.currentValue : (this.selectEl?.selectedOptions?.isEmpty() ?? true); }
25746
- /**
25747
- * Constructor
25748
- */
25749
- constructor() {
25750
- super("vd-list");
25751
- }
25752
- /**
25753
- * Sets control focus
25754
- */
25755
- focus() {
25756
- this.selectEl?.focus();
25757
- }
25758
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25759
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list\n i18n-placeholder\n [(ngModel)]=\"value\"\n #select=\"matSelectionList\"\n (selectionChange)=\"handleChange($event)\"\n [multiple]=\"multiple\"\n [compareWith]=\"compareWith??defaultCompareWith\"\n [disabled]=\"disabled || readonly\"\n [hideSingleSelectionIndicator]=\"false\"\n flex\n>\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n @if (!optionTemplate?.templateRef) {\n <span i18n=\"@@selection\"\n >{option[optionTextProperty], select, option {option} other\n {{{option[optionTextProperty]}}}}</span\n >\n } @if (optionTemplate?.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate?.templateRef)!\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n }\n </mat-list-option>\n }\n <!-- #endregion -->\n</mat-selection-list>\n", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
25760
- }
25761
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdListComponent, decorators: [{
25762
- type: Component,
25763
- args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [
25764
- CommonModule,
25765
- MatSelectionList,
25766
- MatListOption,
25767
- FormsModule,
25768
- ], template: "<mat-selection-list\n i18n-placeholder\n [(ngModel)]=\"value\"\n #select=\"matSelectionList\"\n (selectionChange)=\"handleChange($event)\"\n [multiple]=\"multiple\"\n [compareWith]=\"compareWith??defaultCompareWith\"\n [disabled]=\"disabled || readonly\"\n [hideSingleSelectionIndicator]=\"false\"\n flex\n>\n <!-- #region Options -->\n @for (option of filteredOptions; track option; let first = $first) {\n <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\n @if (!optionTemplate?.templateRef) {\n <span i18n=\"@@selection\"\n >{option[optionTextProperty], select, option {option} other\n {{{option[optionTextProperty]}}}}</span\n >\n } @if (optionTemplate?.templateRef) {\n <ng-template\n [ngTemplateOutlet]=\"$safeNavigationMigration(optionTemplate?.templateRef)!\"\n [ngTemplateOutletContext]=\"{ option: option }\"\n ></ng-template>\n }\n </mat-list-option>\n }\n <!-- #endregion -->\n</mat-selection-list>\n", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"] }]
25769
- }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
25770
- type: ContentChild,
25771
- args: [VdListOptionDirective]
25772
- }], selectEl: [{
25773
- type: ViewChild,
25774
- args: [MatSelectionList, { static: false }]
25775
- }], filterInput: [{
25776
- type: ViewChild,
25777
- args: ['filterInput', { static: false }]
25778
- }] } });
25779
-
25780
- /**
25781
- * @class MsaGenericFormVdListFieldComponent
25782
- * @description Renders a VdList case for `MsaGenericFormComponent`.
25783
- */
25784
- class MsaGenericFormVdListFieldComponent extends MsaGenericFormFieldBaseComponent {
25785
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
25786
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormVdListFieldComponent, isStandalone: true, selector: "msa-generic-form-vd-list-field", usesInheritance: true, ngImport: i0, template: `
25787
- <mat-form-field [class]="field.cssClass"
25788
- floatLabel="always"
25789
- class="form-field-type-list">
25790
- <mat-label>{{field.label}}</mat-label>
25791
- <vd-list [formControlName]="field.name!"
25792
- [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
25793
- [params]="field.params ??{} | func:formValue:formGroup:context"
25794
- [projection]="field.projection"
25795
- [mapper]="field.mapper"
25796
- [compareWith]="field.compareWith"
25797
- [loadData]="field.fetchCondition | func:formValue:formGroup:context"
25798
- [optionValueProperty]="field.optionValueProperty"
25799
- [optionTextProperty]="field.optionTextProperty"
25800
- [multiple]="field.multiple"
25801
- [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
25802
- (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
25803
- (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
25804
- [style.max-width]="field.maxWidth"
25805
- [style.max-height]="field.maxHeight"
25806
- flex>
25807
- @if (field.optionTemplate; as option) {
25808
- <ng-template vd-list-option let-option="option">
25809
- <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
25810
- </ng-template>
25811
- }
25812
- </vd-list>
25813
- @if (field.hint) {
25814
- <mat-hint>{{field.hint}}</mat-hint>
25815
- }
25816
- @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
25817
- <mat-error>{{errorMessage}}</mat-error>
25818
- }
25819
- </mat-form-field>
25820
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25821
- }
25822
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdListFieldComponent, decorators: [{
25823
- type: Component,
25824
- args: [{ selector: 'msa-generic-form-vd-list-field', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, FuncPipe, VdListComponent], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
25825
- <mat-form-field [class]="field.cssClass"
25826
- floatLabel="always"
25827
- class="form-field-type-list">
25828
- <mat-label>{{field.label}}</mat-label>
25829
- <vd-list [formControlName]="field.name!"
25830
- [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
25831
- [params]="field.params ??{} | func:formValue:formGroup:context"
25832
- [projection]="field.projection"
25833
- [mapper]="field.mapper"
25834
- [compareWith]="field.compareWith"
25835
- [loadData]="field.fetchCondition | func:formValue:formGroup:context"
25836
- [optionValueProperty]="field.optionValueProperty"
25837
- [optionTextProperty]="field.optionTextProperty"
25838
- [multiple]="field.multiple"
25839
- [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
25840
- (itemSelected)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
25841
- (itemChange)="field.itemChange && field.itemChange($event, formValue, formGroup, context);"
25842
- [style.max-width]="field.maxWidth"
25843
- [style.max-height]="field.maxHeight"
25844
- flex>
25845
- @if (field.optionTemplate; as option) {
25846
- <ng-template vd-list-option let-option="option">
25847
- <span [outerHTML]="field.optionTemplate(option, formValue, formGroup, context)"></span>
25848
- </ng-template>
25849
- }
25850
- </vd-list>
25851
- @if (field.hint) {
25852
- <mat-hint>{{field.hint}}</mat-hint>
25853
- }
25854
- @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
25855
- <mat-error>{{errorMessage}}</mat-error>
25856
- }
25857
- </mat-form-field>
25858
- `, styles: ["mat-form-field{width:100%}\n"] }]
25859
- }] });
25860
-
25861
- /**
25862
- * @class MsaGenericFormVdChipsFieldComponent
25863
- * @description Renders a VdChips case for `MsaGenericFormComponent`.
25864
- */
25865
- class MsaGenericFormVdChipsFieldComponent extends MsaGenericFormFieldBaseComponent {
25866
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdChipsFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
25867
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MsaGenericFormVdChipsFieldComponent, isStandalone: true, selector: "msa-generic-form-vdchips-field", usesInheritance: true, ngImport: i0, template: `
25868
- <mat-form-field [class]="field.cssClass">
25869
- <mat-label>{{field.label}}</mat-label>
25870
- <vd-chips #vdChip
25871
- [formControlName]="field.name!"
25872
- [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
25873
- [params]="field.params || {} | func:formValue:formGroup:context"
25874
- [searchField]="field.searchField"
25875
- [searchFields]="field.searchFields"
25876
- [filters]="field.filters"
25877
- [selectFirst]="field.selectFirst"
25878
- [classType]="field.classType"
25879
- [projection]="field.projection"
25880
- [key]="field.optionValueProperty"
25881
- [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
25882
- [removable]="!field.clear"
25883
- [context]="context"
25884
- [suffixButtons]="field.suffixButtons"
25885
- [autocompleteCssClass]="field.autocompleteCssClass"
25886
- (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
25887
- (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
25888
- (cleared)="field.clear && field.clear(formValue, formGroup, context);"
25889
- [customValue]="field.customValue"
25890
- layout="row"
25891
- flex>
25892
- @if (field.chipTemplate; as chip) {
25893
- <ng-template vd-chip let-chip="chip">
25894
- <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
25895
- </ng-template>
25896
- }
25897
- @if (field.autocompleteTemplate; as option) {
25898
- <ng-template vd-autocomplete-option let-option="option">
25899
- <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
25900
- </ng-template>
25901
- }
25902
- </vd-chips>
25903
- @if (field.hint) {
25904
- <mat-hint>{{field.hint}}</mat-hint>
25905
- }
25906
- @if (vdChip.emptyResult) {
25907
- <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
25908
- }
25909
- @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
25910
- <mat-error>{{errorMessage}}</mat-error>
25911
- }
25912
- </mat-form-field>
25913
- `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "pipe", type: FuncPipe, name: "func" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
25914
- }
25915
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MsaGenericFormVdChipsFieldComponent, decorators: [{
25916
- type: Component,
25917
- args: [{ selector: 'msa-generic-form-vdchips-field', standalone: true, imports: [
25918
- CommonModule,
25919
- ReactiveFormsModule,
25920
- MatFormFieldModule,
25921
- FuncPipe,
25922
- VdChipsComponent,
25923
- VdChipDirective,
25924
- VdAutocompleteOptionDirective
25925
- ], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: `
25926
- <mat-form-field [class]="field.cssClass">
25927
- <mat-label>{{field.label}}</mat-label>
25928
- <vd-chips #vdChip
25929
- [formControlName]="field.name!"
25930
- [endpoint]="field.endpoint??'' | func:formValue:formGroup:context"
25931
- [params]="field.params || {} | func:formValue:formGroup:context"
25932
- [searchField]="field.searchField"
25933
- [searchFields]="field.searchFields"
25934
- [filters]="field.filters"
25935
- [selectFirst]="field.selectFirst"
25936
- [classType]="field.classType"
25937
- [projection]="field.projection"
25938
- [key]="field.optionValueProperty"
25939
- [readonly]="(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false"
25940
- [removable]="!field.clear"
25941
- [context]="context"
25942
- [suffixButtons]="field.suffixButtons"
25943
- [autocompleteCssClass]="field.autocompleteCssClass"
25944
- (initSelect)="field.itemSelect && field.itemSelect($event, formValue, formGroup, context);"
25945
- (selected)="!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)"
25946
- (cleared)="field.clear && field.clear(formValue, formGroup, context);"
25947
- [customValue]="field.customValue"
25948
- layout="row"
25949
- flex>
25950
- @if (field.chipTemplate; as chip) {
25951
- <ng-template vd-chip let-chip="chip">
25952
- <div [outerHTML]="field.chipTemplate(chip, formValue, formGroup, context)"></div>
25953
- </ng-template>
25954
- }
25955
- @if (field.autocompleteTemplate; as option) {
25956
- <ng-template vd-autocomplete-option let-option="option">
25957
- <div [outerHTML]="field.autocompleteTemplate(option, formValue, formGroup, context)"></div>
25958
- </ng-template>
25959
- }
25960
- </vd-chips>
25961
- @if (field.hint) {
25962
- <mat-hint>{{field.hint}}</mat-hint>
25963
- }
25964
- @if (vdChip.emptyResult) {
25965
- <mat-hint class="tc-red-400" i18n="@@noResultsFound">No results were found.</mat-hint>
25966
- }
25967
- @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {
25968
- <mat-error>{{errorMessage}}</mat-error>
25969
- }
25970
- </mat-form-field>
25971
- `, styles: ["mat-form-field{width:100%}\n"] }]
25918
+ `, styles: ["mat-form-field{width:100%;height:100%}\n"] }]
25972
25919
  }] });
25973
25920
 
25974
25921
  /**
@@ -26477,13 +26424,13 @@ class VdGenericFormComponent {
26477
26424
  console.log(message, optionalParams);
26478
26425
  }
26479
26426
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
26480
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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" }, outputs: { onInit: "init" }, 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 <msa-generic-form-text-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-text-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <msa-generic-form-textarea-field [field]=\"field\"\n [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-textarea-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-enum-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <msa-generic-form-msa-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <msa-generic-form-vd-list-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-vd-list-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <msa-generic-form-chips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [separatorKeysCodes]=\"separatorKeysCodes\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n [addChip]=\"addChip.bind(this)\"\n [onPasteChips]=\"onPasteChips.bind(this)\"\n [removeChip]=\"removeChip.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-chips-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <msa-generic-form-vdchips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-vdchips-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <msa-generic-form-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <msa-generic-form-autocomplete-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-autocomplete-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <msa-generic-form-date-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-date-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <msa-generic-form-calendar-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-calendar-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <msa-generic-form-color-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-color-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <msa-generic-form-checkbox-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\">\n </msa-generic-form-checkbox-field>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <msa-generic-form-radio-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-radio-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n <msa-generic-form-editor-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [editorTemplate]=\"editorTemplate\">\n </msa-generic-form-editor-field>\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n <msa-generic-form-code-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [codeTemplate]=\"codeTemplate\">\n </msa-generic-form-code-field>\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <msa-generic-form-file-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-file-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n <msa-generic-form-custom-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [customTemplate]=\"customTemplate\">\n </msa-generic-form-custom-field>\n }\n <!-- #endregion -->\n }\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]=\"$safeNavigationMigration(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 } @for (customField of customFieldsTemplates; track customField) {\n @if(customField?.templateRef && customField.row == ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n\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\"\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 </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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type:
26427
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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" }, outputs: { onInit: "init" }, 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 <msa-generic-form-text-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-text-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <msa-generic-form-textarea-field [field]=\"field\"\n [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-textarea-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-enum-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <msa-generic-form-msa-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <msa-generic-form-msa-list-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-list-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <msa-generic-form-chips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [separatorKeysCodes]=\"separatorKeysCodes\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n [addChip]=\"addChip.bind(this)\"\n [onPasteChips]=\"onPasteChips.bind(this)\"\n [removeChip]=\"removeChip.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-chips-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <msa-generic-form-msa-chips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-chips-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <msa-generic-form-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <msa-generic-form-autocomplete-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-autocomplete-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <msa-generic-form-date-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-date-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <msa-generic-form-calendar-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-calendar-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <msa-generic-form-color-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-color-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <msa-generic-form-checkbox-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\">\n </msa-generic-form-checkbox-field>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <msa-generic-form-radio-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-radio-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n <msa-generic-form-editor-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [editorTemplate]=\"editorTemplate\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-editor-field>\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n <msa-generic-form-code-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [codeTemplate]=\"codeTemplate\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-code-field>\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <msa-generic-form-file-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-file-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n <msa-generic-form-custom-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [customTemplate]=\"customTemplate\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-custom-field>\n }\n <!-- #endregion -->\n }\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]=\"$safeNavigationMigration(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 } @for (customField of customFieldsTemplates; track customField) {\n @if(customField?.templateRef && customField.row == ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n\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\"\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 </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: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type:
26481
26428
  //--------------------
26482
26429
  MatAutocompleteModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type:
26483
26430
  //--------------------
26484
26431
  VdFileModule }, { kind: "component", type:
26485
26432
  //--------------------
26486
- MsaGenericFormAutocompleteFieldComponent, selector: "msa-generic-form-autocomplete-field", inputs: ["autocompleteFilteredOptions", "filterAutocomplete"] }, { kind: "component", type: MsaGenericFormCalendarFieldComponent, selector: "msa-generic-form-calendar-field", inputs: ["datePickerHeaderComponent", "handleCalendarFilterAsync"] }, { kind: "component", type: MsaGenericFormCheckboxFieldComponent, selector: "msa-generic-form-checkbox-field" }, { kind: "component", type: MsaGenericFormChipsFieldComponent, selector: "msa-generic-form-chips-field", inputs: ["separatorKeysCodes", "autocompleteFilteredOptions", "filterAutocomplete", "autocompleteValueSelected", "addChip", "onPasteChips", "removeChip"] }, { kind: "component", type: MsaGenericFormCodeFieldComponent, selector: "msa-generic-form-code-field", inputs: ["field", "formGroup", "codeTemplate"] }, { kind: "component", type: MsaGenericFormColorFieldComponent, selector: "msa-generic-form-color-field" }, { kind: "component", type: MsaGenericFormCustomFieldComponent, selector: "msa-generic-form-custom-field", inputs: ["field", "formGroup", "customTemplate"] }, { kind: "component", type: MsaGenericFormDateFieldComponent, selector: "msa-generic-form-date-field", inputs: ["datePickerHeaderComponent", "handleDatePickerFilterAsync", "handleDatePickerOpened"] }, { kind: "component", type: MsaGenericFormEditorFieldComponent, selector: "msa-generic-form-editor-field", inputs: ["field", "formGroup", "editorTemplate"] }, { kind: "component", type: MsaGenericFormEnumFieldComponent, selector: "msa-generic-form-enum-field" }, { kind: "component", type: MsaGenericFormFileFieldComponent, selector: "msa-generic-form-file-field" }, { kind: "component", type: MsaGenericFormRadioFieldComponent, selector: "msa-generic-form-radio-field" }, { kind: "component", type: MsaGenericFormSelectFieldComponent, selector: "msa-generic-form-select-field" }, { kind: "component", type: MsaGenericFormTextFieldComponent, selector: "msa-generic-form-text-field" }, { kind: "component", type: MsaGenericFormTextareaFieldComponent, selector: "msa-generic-form-textarea-field" }, { kind: "component", type: MsaGenericFormMsaSelectFieldComponent, selector: "msa-generic-form-msa-select-field" }, { kind: "component", type: MsaGenericFormVdChipsFieldComponent, selector: "msa-generic-form-vdchips-field" }, { kind: "component", type: MsaGenericFormVdListFieldComponent, selector: "msa-generic-form-vd-list-field" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type:
26433
+ MsaGenericFormAutocompleteFieldComponent, selector: "msa-generic-form-autocomplete-field", inputs: ["autocompleteFilteredOptions", "filterAutocomplete"] }, { kind: "component", type: MsaGenericFormCalendarFieldComponent, selector: "msa-generic-form-calendar-field", inputs: ["datePickerHeaderComponent", "handleCalendarFilterAsync"] }, { kind: "component", type: MsaGenericFormCheckboxFieldComponent, selector: "msa-generic-form-checkbox-field" }, { kind: "component", type: MsaGenericFormChipsFieldComponent, selector: "msa-generic-form-chips-field", inputs: ["separatorKeysCodes", "autocompleteFilteredOptions", "filterAutocomplete", "autocompleteValueSelected", "addChip", "onPasteChips", "removeChip"] }, { kind: "component", type: MsaGenericFormCodeFieldComponent, selector: "msa-generic-form-code-field", inputs: ["field", "formGroup", "codeTemplate"] }, { kind: "component", type: MsaGenericFormColorFieldComponent, selector: "msa-generic-form-color-field" }, { kind: "component", type: MsaGenericFormCustomFieldComponent, selector: "msa-generic-form-custom-field", inputs: ["field", "formGroup", "customTemplate"] }, { kind: "component", type: MsaGenericFormDateFieldComponent, selector: "msa-generic-form-date-field", inputs: ["datePickerHeaderComponent", "handleDatePickerFilterAsync", "handleDatePickerOpened"] }, { kind: "component", type: MsaGenericFormEditorFieldComponent, selector: "msa-generic-form-editor-field", inputs: ["field", "formGroup", "editorTemplate"] }, { kind: "component", type: MsaGenericFormEnumFieldComponent, selector: "msa-generic-form-enum-field" }, { kind: "component", type: MsaGenericFormFileFieldComponent, selector: "msa-generic-form-file-field" }, { kind: "component", type: MsaGenericFormRadioFieldComponent, selector: "msa-generic-form-radio-field" }, { kind: "component", type: MsaGenericFormSelectFieldComponent, selector: "msa-generic-form-select-field" }, { kind: "component", type: MsaGenericFormTextFieldComponent, selector: "msa-generic-form-text-field" }, { kind: "component", type: MsaGenericFormTextareaFieldComponent, selector: "msa-generic-form-textarea-field" }, { kind: "component", type: MsaGenericFormMsaSelectFieldComponent, selector: "msa-generic-form-msa-select-field" }, { kind: "component", type: MsaGenericFormMsaChipsFieldComponent, selector: "msa-generic-form-msa-chips-field" }, { kind: "component", type: MsaGenericFormMsaListFieldComponent, selector: "msa-generic-form-msa-list-field" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type:
26487
26434
  //--------------------
26488
26435
  FuncPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
26489
26436
  }
@@ -26525,9 +26472,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
26525
26472
  MsaGenericFormTextFieldComponent,
26526
26473
  MsaGenericFormTextareaFieldComponent,
26527
26474
  MsaGenericFormMsaSelectFieldComponent,
26528
- MsaGenericFormVdChipsFieldComponent,
26529
- MsaGenericFormVdListFieldComponent,
26530
- ], 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 <msa-generic-form-text-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-text-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <msa-generic-form-textarea-field [field]=\"field\"\n [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-textarea-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-enum-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <msa-generic-form-msa-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <msa-generic-form-vd-list-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-vd-list-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <msa-generic-form-chips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [separatorKeysCodes]=\"separatorKeysCodes\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n [addChip]=\"addChip.bind(this)\"\n [onPasteChips]=\"onPasteChips.bind(this)\"\n [removeChip]=\"removeChip.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-chips-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <msa-generic-form-vdchips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-vdchips-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <msa-generic-form-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <msa-generic-form-autocomplete-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-autocomplete-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <msa-generic-form-date-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-date-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <msa-generic-form-calendar-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-calendar-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <msa-generic-form-color-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-color-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <msa-generic-form-checkbox-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\">\n </msa-generic-form-checkbox-field>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <msa-generic-form-radio-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-radio-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n <msa-generic-form-editor-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [editorTemplate]=\"editorTemplate\">\n </msa-generic-form-editor-field>\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n <msa-generic-form-code-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [codeTemplate]=\"codeTemplate\">\n </msa-generic-form-code-field>\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <msa-generic-form-file-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-file-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n <msa-generic-form-custom-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [customTemplate]=\"customTemplate\">\n </msa-generic-form-custom-field>\n }\n <!-- #endregion -->\n }\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]=\"$safeNavigationMigration(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 } @for (customField of customFieldsTemplates; track customField) {\n @if(customField?.templateRef && customField.row == ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n\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\"\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 </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"] }]
26475
+ MsaGenericFormMsaChipsFieldComponent,
26476
+ MsaGenericFormMsaListFieldComponent
26477
+ ], 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 <msa-generic-form-text-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-text-field>\n }\n <!-- #endregion -->\n\n <!-- #region Textarea -->\n @case (FormFieldType.TextArea) {\n <msa-generic-form-textarea-field [field]=\"field\"\n [formGroup]=\"formGroup\" [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-textarea-field>\n }\n <!-- #endregion -->\n\n <!-- #region Enum -->\n @case (FormFieldType.Enum) {\n <msa-generic-form-enum-field [field]=\"field\" [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-enum-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdSelect -->\n @case (FormFieldType.VdSelect) {\n <msa-generic-form-msa-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdList -->\n @case (FormFieldType.VdList) {\n <msa-generic-form-msa-list-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-list-field>\n }\n <!-- #endregion -->\n\n <!-- #region Chips -->\n @case (FormFieldType.Chips) {\n <msa-generic-form-chips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [separatorKeysCodes]=\"separatorKeysCodes\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [autocompleteValueSelected]=\"autocompleteValueSelected.bind(this)\"\n [addChip]=\"addChip.bind(this)\"\n [onPasteChips]=\"onPasteChips.bind(this)\"\n [removeChip]=\"removeChip.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-chips-field>\n }\n <!-- #endregion -->\n\n <!-- #region VdChips -->\n @case (FormFieldType.VdChips) {\n <msa-generic-form-msa-chips-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-msa-chips-field>\n }\n <!-- #endregion -->\n\n <!-- #region Select -->\n @case (FormFieldType.Select) {\n <msa-generic-form-select-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-select-field>\n }\n <!-- #endregion -->\n\n <!-- #region Autocomplete -->\n @case (FormFieldType.Autocomplete) {\n <msa-generic-form-autocomplete-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [autocompleteFilteredOptions]=\"autocompleteFilteredOptions\"\n [filterAutocomplete]=\"filterAutocomplete.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-autocomplete-field>\n }\n <!-- #endregion -->\n\n <!-- #region Date -->\n @case (FormFieldType.Date) {\n <msa-generic-form-date-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleDatePickerFilterAsync]=\"handleDatePickerFilterAsync.bind(this)\"\n [handleDatePickerOpened]=\"handleDatePickerOpened.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-date-field>\n }\n <!-- #endregion -->\n\n <!-- #region Calendar -->\n @case (FormFieldType.Calendar) {\n <msa-generic-form-calendar-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [datePickerHeaderComponent]=\"datePickerHeaderComponent\"\n [handleCalendarFilterAsync]=\"handleCalendarFilterAsync.bind(this)\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-calendar-field>\n }\n <!-- #endregion -->\n\n <!-- #region Color input -->\n @case (FormFieldType.Color) {\n <msa-generic-form-color-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-color-field>\n }\n <!-- #endregion -->\n\n <!-- #region Checkbox -->\n @case (FormFieldType.Checkbox) {\n <msa-generic-form-checkbox-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\">\n </msa-generic-form-checkbox-field>\n }\n <!-- #endregion -->\n\n <!-- #region Radio -->\n @case(FormFieldType.Radio) {\n <msa-generic-form-radio-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-radio-field>\n }\n <!-- #endregion -->\n\n <!-- #region Editor -->\n @case (FormFieldType.Editor) {\n <msa-generic-form-editor-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [editorTemplate]=\"editorTemplate\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-editor-field>\n }\n <!-- #endregion -->\n\n <!-- #region Code -->\n @case (FormFieldType.Code) {\n <msa-generic-form-code-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [codeTemplate]=\"codeTemplate\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-code-field>\n }\n <!-- #endregion -->\n\n <!-- #region File -->\n @case (FormFieldType.File) {\n <msa-generic-form-file-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [readonly]=\"readonly ?? false\"\n [context]=\"context\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-file-field>\n }\n <!-- #endregion -->\n\n <!-- #region Custom -->\n @case (FormFieldType.Custom) {\n <msa-generic-form-custom-field [field]=\"field\"\n [formGroup]=\"formGroup\"\n [customTemplate]=\"customTemplate\"\n [attr.flex]=\"field.flex||0\"\n layout-margin>\n </msa-generic-form-custom-field>\n }\n <!-- #endregion -->\n }\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]=\"$safeNavigationMigration(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 } @for (customField of customFieldsTemplates; track customField) {\n @if(customField?.templateRef && customField.row == ((($safeNavigationMigration(fields[0]?.row) | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n <ng-template [ngTemplateOutlet]=\"$safeNavigationMigration(customField?.templateRef)!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n }\n }\n <!-- #endregion -->\n }\n <!-- #endregion -->\n\n <!-- #region Form bottom -->\n @if (bottom) {\n <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n }\n <!-- #endregion -->\n\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\"\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 </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"] }]
26531
26478
  }], propDecorators: { formGroup: [{
26532
26479
  type: Input
26533
26480
  }], classType: [{
@@ -26975,6 +26922,9 @@ function FormField(args) {
26975
26922
  return function (target, propertyKey) {
26976
26923
  /* Get property name */
26977
26924
  var propertyName = args.name || propertyKey;
26925
+ /* Get property type */
26926
+ var propertyType = Reflect.getMetadata("design:type", target, propertyKey)?.name;
26927
+ console.log('propertyType', Reflect.getMetadata("design:type", target, propertyKey));
26978
26928
  /* Get old form fields */
26979
26929
  let previousFormFields = Reflect.getMetadata(formFieldsMetadataKey, target);
26980
26930
  /* Override the field with the args, if exists */
@@ -30190,16 +30140,16 @@ class VdNavigationDrawerComponent {
30190
30140
  }
30191
30141
  }
30192
30142
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$6.Router, optional: true }, { token: i1$3.DomSanitizer }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
30193
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n @if (!isCustomToolbar && !mini) {\r\n @if (email && name) {\r\n <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n }\r\n @if (email || name) {\r\n <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n @if (isMenuAvailable) {\r\n <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n @if (!menuToggled) {\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n }\r\n @if (menuToggled) {\r\n <mat-icon>arrow_drop_up</mat-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (mini && !expanded) {\r\n <div layout=\"column\" layout-align=\"center center\" flex>\r\n <button mat-icon-button (click)=\"toggleMenu()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n</mat-toolbar>\r\n\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary\" [@vdCollapse]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: 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"] }], animations: [vdCollapseAnimation], changeDetection: i0.ChangeDetectionStrategy.Eager });
30143
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n @if (!isCustomToolbar && !mini) {\r\n @if (email && name) {\r\n <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n }\r\n @if (email || name) {\r\n <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n @if (isMenuAvailable) {\r\n <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n @if (!menuToggled) {\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n }\r\n @if (menuToggled) {\r\n <mat-icon>arrow_drop_up</mat-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (mini && !expanded) {\r\n <div layout=\"column\" layout-align=\"center center\" flex>\r\n <button mat-icon-button (click)=\"toggleMenu()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n</mat-toolbar>\r\n\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\"\r\n [class.is-expanded]=\"!menuToggled\"\r\n [ngClass]=\"{'drawer-mini': mini}\">\r\n <div class=\"vd-collapse-inner\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\"\r\n [class.is-expanded]=\"menuToggled\"\r\n [ngClass]=\"{'drawer-mini': mini}\">\r\n <div class=\"vd-collapse-inner\">\r\n <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
30194
30144
  }
30195
30145
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
30196
30146
  type: Component,
30197
- args: [{ selector: 'vd-navigation-drawer', animations: [vdCollapseAnimation], changeDetection: ChangeDetectionStrategy.Eager, imports: [
30147
+ args: [{ selector: 'vd-navigation-drawer', changeDetection: ChangeDetectionStrategy.Eager, imports: [
30198
30148
  CommonModule,
30199
30149
  MatToolbarModule,
30200
30150
  MatIcon,
30201
30151
  MatIconButton
30202
- ], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n @if (!isCustomToolbar && !mini) {\r\n @if (email && name) {\r\n <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n }\r\n @if (email || name) {\r\n <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n @if (isMenuAvailable) {\r\n <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n @if (!menuToggled) {\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n }\r\n @if (menuToggled) {\r\n <mat-icon>arrow_drop_up</mat-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (mini && !expanded) {\r\n <div layout=\"column\" layout-align=\"center center\" flex>\r\n <button mat-icon-button (click)=\"toggleMenu()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n</mat-toolbar>\r\n\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary\" [@vdCollapse]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"] }]
30152
+ ], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n @if (!isCustomToolbar && !mini) {\r\n @if (email && name) {\r\n <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n }\r\n @if (email || name) {\r\n <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n @if (isMenuAvailable) {\r\n <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n @if (!menuToggled) {\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n }\r\n @if (menuToggled) {\r\n <mat-icon>arrow_drop_up</mat-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n }\r\n @if (mini && !expanded) {\r\n <div layout=\"column\" layout-align=\"center center\" flex>\r\n <button mat-icon-button (click)=\"toggleMenu()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n</mat-toolbar>\r\n\r\n<!-- Main Content: Expands when menu is NOT toggled -->\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary vd-collapse-container\"\r\n [class.is-expanded]=\"!menuToggled\"\r\n [ngClass]=\"{'drawer-mini': mini}\">\r\n <div class=\"vd-collapse-inner\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n\r\n<!-- Menu Content: Expands when menu IS toggled -->\r\n<div class=\"vd-navigation-drawer-menu-content vd-collapse-container\"\r\n [class.is-expanded]=\"menuToggled\"\r\n [ngClass]=\"{'drawer-mini': mini}\">\r\n <div class=\"vd-collapse-inner\">\r\n <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .vd-collapse-container{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease-in-out}:host .vd-collapse-container.is-expanded{grid-template-rows:1fr}:host .vd-collapse-inner{min-height:0;overflow:hidden}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"] }]
30203
30153
  }], ctorParameters: () => [{ type: VdLayoutComponent, decorators: [{
30204
30154
  type: Inject,
30205
30155
  args: [forwardRef(() => VdLayoutComponent)]
@@ -30568,5 +30518,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
30568
30518
  * Generated bundle index. Do not edit.
30569
30519
  */
30570
30520
 
30571
- export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, whitelist };
30521
+ export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, MsaEditFormActionsComponent, MsaEnumDisplayComponent, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, graphql, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, parseProjectionString, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
30572
30522
  //# sourceMappingURL=messaia-cdk.mjs.map