@messaia/cdk 13.3.5-rc10 → 13.3.5-rc13

package/fesm2015/messaia-cdk.mjs

@@ -3137,13 +3137,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
 const formFieldsMetadataKey = 'custom::vdFormFields';
 const formFieldGroupsMetadataKey = 'custom:vdFormFieldGroups';
 
+class FormFieldGroupDefinition {
+    /**
+     * constructor
+     * @param init
+     */
+    constructor(init) {
+        this.name = 'details';
+        this.fields = [];
+        Object.assign(this, init);
+    }
+}
+
+/**
+ * Gets poperties decoarated with @FormField grouped by row
+ * @param origin
+ * @returns
+ * @deprecated
+ */
+function getFormGroupsOld(origin) {
+    return Reflect.getMetadata(formFieldsMetadataKey, origin);
+}
 /**
  * Gets poperties decoarated with @FormField grouped by row
  * @param origin
  * @returns
  */
 function getFormGroups(origin) {
-    return Reflect.getMetadata(formFieldGroupsMetadataKey, origin);
+    /* Get main fields grouped by the group name */
+    const mainFieldGroups = Utils.groupArrayBy(Reflect.getMetadata(formFieldsMetadataKey, origin), x => x.groupName);
+    /* Group the fields */
+    var groups = Array.from(mainFieldGroups).map(([_, value], i) => new FormFieldGroupDefinition({
+        name: value[0].groupName || null,
+        header: value[0].groupHeader,
+        index: i,
+        groups: Object.values((value).reduce(function (r, a) {
+            r[a.row] = (r[a.row] || []);
+            r[a.row].push(a);
+            r[a.row].forEach((x, i) => x.index = x.index || i);
+            Utils.sortArray(r[a.row], 'index');
+            return r;
+        }, Object.create(null)))
+    }));
+    /* Get object groups */
+    var objectFieldGroups = Reflect.getMetadata(formFieldGroupsMetadataKey, origin);
+    if (objectFieldGroups) {
+        groups = groups.concat(objectFieldGroups);
+    }
+    /* Sort the groups by index */
+    Utils.sortArray(groups, 'index');
+    return groups;
 }
 
 // @dynamic
@@ -4695,7 +4738,7 @@ class TableDataSource extends DataSource {
             /* Load data and return it */
             return this.service.getList(Object.assign({
                 includes: this.includes,
-                projection: this.projection,
+                projection: Array.isArray(this.projection) ? this.projection.join(',') : this.projection,
                 page: this.paginator.pageIndex + 1,
                 pageSize: this.paginator.pageSize,
                 search: this.filter.toLowerCase(),
@@ -5196,6 +5239,10 @@ class GenericListComponent extends BaseComponent {
          * The navigations to includes
          */
         this.includes = [];
+        /**
+         * projection: string | string[]
+         */
+        this.projection = [];
         /**
          * The navigations to includes
          */
@@ -5347,6 +5394,7 @@ class GenericListComponent extends BaseComponent {
         this.dataSource = new TableDataSource(this.service, this.paginator, this.sort);
         /* Set includes */
         this.dataSource.includes = this.includes;
+        this.dataSource.projection = this.projection;
         /* Load query from browser storage */
         var storredQuery = AppStorage.getObject(`${this.appSetting.projectName}.${this.router.url}`);
         if (storredQuery) {
@@ -11886,6 +11934,9 @@ class GenericReactiveFormComponent extends GenericFormBaseComponent {
         super.onAfterFormBuild();
         if (this.buildFieldGroups && !this.fieldGroups) {
             this.fieldGroups = getFormGroups(new this.entityCtor());
+            if (this.debug) {
+                console.log('Field groups', this.fieldGroups);
+            }
         }
     }
     /**
@@ -13814,12 +13865,26 @@ class VdSelectComponent extends AbstractMatFormField {
             this.filteredOptions = this.options.filter((x) => { var _a; return ((_a = x[this.text]) === null || _a === void 0 ? void 0 : _a.toLowerCase().search(searchText.toLowerCase())) > -1; });
         }
     }
+    /**
+     * Gets the values of the selected options for the trigger
+     * @param options
+     * @returns
+     */
+    getTriggerValues(options) {
+        var _a;
+        if (Array.isArray(options)) {
+            return (_a = (options || [])) === null || _a === void 0 ? void 0 : _a.map(x => this.mapper ? x.value : x.viewValue);
+        }
+        else {
+            return this.mapper ? options === null || options === void 0 ? void 0 : options.value : options === null || options === void 0 ? void 0 : options.viewValue;
+        }
+    }
 }
 /** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{select.selected?select.selected['viewValue']:''}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: (select.selected||[])['viewValue'] }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: (select.selected||[])['viewValue'] }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{select.selected?select.selected['viewValue']:''}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: (select.selected||[])['viewValue'] }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: (select.selected||[])['viewValue'] }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
+            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Optional
@@ -14507,36 +14572,24 @@ class FormFieldDefinition {
     }
 }
 
-class FormFieldGroupDefinition {
-    /**
-     * constructor
-     * @param init
-     */
-    constructor(init) {
-        this.name = 'details';
-        this.fields = [];
-        Object.assign(this, init);
-    }
-}
-
 /**
  * Property decorator to create form fields
  * @param args
  * @returns
  */
-function FormField(args = null) {
+function FormField(args) {
     return function (target, propertyKey) {
         var _a;
         /* Get property name */
-        var propertyName = (args === null || args === void 0 ? void 0 : args.name) || propertyKey;
+        var propertyName = args.name || propertyKey;
         /* Get property type */
         var propertyType = (_a = Reflect.getMetadata("design:type", target, propertyKey)) === null || _a === void 0 ? void 0 : _a.name;
         /* Create table column */
         var formField = new FormFieldDefinition(Object.assign(args, {
-            name: (args === null || args === void 0 ? void 0 : args.name) || propertyKey,
-            header: (args === null || args === void 0 ? void 0 : args.header) || Reflect.getMetadata(headerMetadataKey, target, propertyKey) || propertyName,
-            autocompleteTemplate: (args === null || args === void 0 ? void 0 : args.autocompleteTemplate) || ((option) => option[formField.autocompleteText]),
-            chipTemplate: (args === null || args === void 0 ? void 0 : args.chipTemplate) || ((chip) => chip[formField.chipText])
+            name: args.name || propertyKey,
+            header: args.header || Reflect.getMetadata(headerMetadataKey, target, propertyKey) || propertyName,
+            autocompleteTemplate: args.autocompleteTemplate || ((option) => option[formField.autocompleteText]),
+            chipTemplate: args.chipTemplate || ((chip) => chip[formField.chipText])
         }));
         /* Type enum */
         if (formField.enumType) {
@@ -14582,36 +14635,11 @@ function FormField(args = null) {
         let formFields = previousFormFields ? previousFormFields.concat([formField]) : [formField];
         /* Override the result in the metadata */
         Reflect.defineMetadata(formFieldsMetadataKey, formFields, target);
-        /* Get old form field groups */
-        const previousGroups = Reflect.getMetadata(formFieldGroupsMetadataKey, target) || [];
-        /* Get the group by group name from the previous saved groups */
-        var group = previousGroups === null || previousGroups === void 0 ? void 0 : previousGroups.filter(x => x.name == formField.groupName)[0];
-        /* If the group doesn't exist, create a new one and add it to the previous groups */
-        if (!group) {
-            group = new FormFieldGroupDefinition({ index: 0, name: formField.groupName || null, header: formField.groupHeader });
-            previousGroups.push(group);
-        }
-        /* Add the fields to the current group */
-        group.fields.push(formField);
-        /* Group the field by 'row' */
-        group.groups = Object.values((group.fields).reduce(function (r, a) {
-            r[a.row] = (r[a.row] || []);
-            r[a.row].push(a);
-            r[a.row].forEach((x, i) => x.index = x.index || i);
-            Utils.sortArray(r[a.row], 'index');
-            return r;
-        }, Object.create(null)));
-        /* Sort the groups by index */
-        Utils.sortArray(previousGroups, 'index');
-        /* Override the result in the metadata */
-        Reflect.defineMetadata(formFieldGroupsMetadataKey, previousGroups, target);
     };
 }
 /**
  * Property decorator to create form fields
- * @param type
- * @param header
- * @param init
+ * @param args
  * @returns
  */
 function FormFieldGroup(type, args = null) {
@@ -14639,12 +14667,8 @@ function FormFieldGroup(type, args = null) {
         });
         /* Get old form field groups */
         var previousGroups = Reflect.getMetadata(formFieldGroupsMetadataKey, target);
-        /* Add the current groups to the previous groups */
-        previousGroups = (previousGroups ? previousGroups.concat(groups) : groups);
-        /* Sort the groups by index */
-        Utils.sortArray(previousGroups, 'index');
         /* Override the result in the metadata */
-        Reflect.defineMetadata(formFieldGroupsMetadataKey, previousGroups, target);
+        Reflect.defineMetadata(formFieldGroupsMetadataKey, (previousGroups ? previousGroups.concat(groups) : groups), target);
     };
 }