@stemy/ngx-dynamic-form 13.1.2 → 13.1.6

package/fesm2020/stemy-ngx-dynamic-form.mjs

@@ -1,11 +1,11 @@
 import * as i2 from '@stemy/ngx-utils';
-import { ReflectUtils, ObjectUtils, StringUtils, OpenApiService, TOASTER_SERVICE, ObservableUtils, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
+import { ReflectUtils, ObjectUtils, TimerUtils, StringUtils, OpenApiService, TOASTER_SERVICE, ObservableUtils, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
+import { BehaviorSubject, of, isObservable, map, Subject, firstValueFrom, Subscription, debounceTime, groupBy, mergeMap } from 'rxjs';
 import * as i1 from '@ng-dynamic-forms/core';
-import { DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicFormService as DynamicFormService$1, DynamicFormGroupModel, DynamicInputModel, DynamicFileUploadModel, DynamicCheckboxModel, DynamicTextAreaModel, DynamicFormComponent, DynamicTemplateDirective, DynamicFormArrayComponent, DynamicFormValueControlModel, DynamicFormControlContainerComponent, DynamicFormControlComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
-export { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP, DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD, DYNAMIC_FORM_CONTROL_TYPE_GROUP, DYNAMIC_FORM_CONTROL_TYPE_INPUT, DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP, DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicCheckboxGroupModel, DynamicCheckboxModel, DynamicFileUploadModel, DynamicFormGroupModel, DynamicFormsCoreModule, DynamicInputModel, DynamicListDirective, DynamicRadioGroupModel, DynamicTemplateDirective, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
-import { of, isObservable, map, Subject, Subscription, BehaviorSubject } from 'rxjs';
+import { DynamicFormArrayGroupModel as DynamicFormArrayGroupModel$1, DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicFormService as DynamicFormService$1, DynamicFormGroupModel, DynamicInputModel, DynamicFileUploadModel, DynamicCheckboxModel, DynamicEditorModel, DynamicTextAreaModel, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormArrayComponent, DynamicFormValueControlModel, DynamicFormControlComponent, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
+export { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD, DYNAMIC_FORM_CONTROL_TYPE_GROUP, DYNAMIC_FORM_CONTROL_TYPE_INPUT, DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP, DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicCheckboxGroupModel, DynamicCheckboxModel, DynamicEditorModel, DynamicFileUploadModel, DynamicFormGroupModel, DynamicFormsCoreModule, DynamicInputModel, DynamicListDirective, DynamicRadioGroupModel, DynamicTemplateDirective, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import * as i0 from '@angular/core';
-import { EventEmitter, Injector, Injectable, Inject, Directive, Input, Output, HostBinding, HostListener, QueryList, Component, ChangeDetectionStrategy, ContentChildren, ViewChildren, ViewChild, forwardRef, ViewContainerRef, NgModule } from '@angular/core';
+import { Injector, Injectable, Inject, EventEmitter, Directive, Input, Output, HostBinding, HostListener, QueryList, Component, ChangeDetectionStrategy, ContentChildren, ViewChildren, ViewChild, ViewContainerRef, forwardRef, NgModule } from '@angular/core';
 import { FormGroup, FormArray, NgForm, FormsModule, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
 import { first } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
@@ -116,7 +116,7 @@ function findRefs(property) {
     return refs.map(t => t.split("/").pop());
 }
 function replaceSpecialChars(str, to = "-") {
-    return (str || "").replace(/[&\/\\#, +()$~%.@'":*?<>{}]/g, to);
+    return `${str}`.replace(/[&\/\\#, +()$~%.@'":*?<>{}]/g, to);
 }
 function mergeFormModels(formModels) {
     const res = [];
@@ -146,8 +146,9 @@ function collectPathAble(start, getter) {
     }
     return parts;
 }
-const MIN_INPUT_NUM = -99999999999999;
-const MAX_INPUT_NUM = 99999999999999;
+const MIN_INPUT_NUM = -999999999;
+const MAX_INPUT_NUM = 999999999;
+const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
 
 function validateJSON(control) {
     const value = control.value;
@@ -205,12 +206,31 @@ function validateItemsMaxValue(max) {
     };
 }
 
+class DynamicFormArrayGroupModel extends DynamicFormArrayGroupModel$1 {
+    constructor(context, group, index = -1) {
+        super(context, group, index);
+        this.context = context;
+        this.isHidden = false;
+    }
+    get hidden() {
+        return this.isHidden;
+    }
+    set hidden(value) {
+        if (this.isHidden == value)
+            return;
+        this.isHidden = value || false;
+        this.context?.filterGroups();
+    }
+}
 class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
     constructor(config, layout) {
         super(config, layout);
+        this.config = config;
+        this.filteredGroups = new BehaviorSubject([]);
+        this.sortable = config.sortable || false;
         this.useTabs = config.useTabs || false;
-        this.saveTab = ObjectUtils.isFunction(config.saveTab) ? config.saveTab : ((index, model) => {
-            model.tabIndex = index;
+        this.saveTab = ObjectUtils.isFunction(config.saveTab) ? config.saveTab : ((index, model, arrayModel) => {
+            arrayModel.tabIndex = index;
         });
         this.restoreTab = ObjectUtils.isFunction(config.restoreTab) ? config.restoreTab : ((model) => {
             return model.tabIndex;
@@ -219,6 +239,95 @@ class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
             return `${index + 1}`;
         });
         this.additional = config.additional || {};
+        this.tabIndex = 0;
+        this._sortBy = null;
+        this._sortDescending = false;
+        this._formArray = null;
+    }
+    get addItem() {
+        return this.config.addItem !== false;
+    }
+    get insertItem() {
+        return !this._sortBy && this.config.insertItem !== false;
+    }
+    get cloneItem() {
+        return this.config.cloneItem !== false;
+    }
+    get moveItem() {
+        return !this._sortBy && this.config.moveItem !== false;
+    }
+    get removeItem() {
+        return this.config.removeItem !== false;
+    }
+    get clearItems() {
+        return this.config.clearItems !== false;
+    }
+    get sortBy() {
+        return this._sortBy;
+    }
+    set sortBy(value) {
+        if (!this.sortable)
+            return;
+        value = value || null;
+        if (this._sortBy !== value) {
+            this._sortBy = value;
+            this._sortDescending = false;
+        }
+        else if (this._sortDescending) {
+            this._sortBy = null;
+            this._sortDescending = false;
+        }
+        else {
+            this._sortDescending = true;
+        }
+        this.filterGroups();
+    }
+    get sortDescending() {
+        return this._sortDescending;
+    }
+    get sortOrder() {
+        return this.sortDescending ? "desc" : "asc";
+    }
+    initialize(array) {
+        this._formArray = array || this._formArray;
+        this.filterGroups();
+    }
+    filterGroups() {
+        this._filterTimer = this._filterTimer || TimerUtils.createTimeout();
+        this._filterTimer.set(() => {
+            const filtered = this.groups.filter(g => !g.hidden);
+            if (this._sortBy && this._formArray) {
+                const compare = this._sortDescending
+                    ? (a, b) => this.compareModels(b, a)
+                    : (a, b) => this.compareModels(a, b);
+                filtered.sort(compare);
+            }
+            this._filteredGroups = filtered;
+            this.filteredGroups.next(filtered);
+        }, 100);
+    }
+    getFiltered(index) {
+        return !this._filteredGroups ? null : this._filteredGroups[index];
+    }
+    insertGroup(index) {
+        const group = new DynamicFormArrayGroupModel(this, this.groupFactory());
+        this.groups.splice(index, 0, group);
+        this.groups.forEach((g, index) => g.index = index);
+        this.filterGroups();
+        return group;
+    }
+    moveGroup(index, step) {
+        super.moveGroup(index, step);
+        this.filterGroups();
+    }
+    removeGroup(index) {
+        super.removeGroup(index);
+        this.filterGroups();
+    }
+    compareModels(a, b) {
+        const aGroup = this._formArray.at(a.index).get(this._sortBy)?.value || null;
+        const bGroup = this._formArray.at(b.index).get(this._sortBy)?.value || null;
+        return ObjectUtils.compare(aGroup, bGroup);
     }
 }
 
@@ -307,21 +416,24 @@ class FormSubject extends Subject {
 class FormSelectSubject extends FormSubject {
     handleNotifiedValue(controlModel, control, val) {
         val.then(options => {
-            this.next(options);
-            if (options.length == 0)
+            if (options.length == 0) {
+                this.next(options);
                 return;
+            }
             const currentVal = control.value;
             if (controlModel.multiple) {
                 const correctVal = (currentVal || []).filter(t => options.findIndex(o => o.value == t) >= 0);
                 if (correctVal.length !== currentVal?.length) {
                     control.setValue(correctVal, { onlySelf: true, emitEvent: false });
                 }
-                return;
             }
-            const option = options.find(t => t.value == currentVal);
-            if (!option) {
-                control.setValue(options[0]?.value ?? null, { onlySelf: true, emitEvent: false });
+            else {
+                const option = options.find(t => t.value == currentVal);
+                if (!option) {
+                    control.setValue(options[0]?.value ?? null, { onlySelf: true, emitEvent: false });
+                }
             }
+            this.next(options);
         });
     }
 }
@@ -331,7 +443,6 @@ class DynamicFormService extends DynamicFormService$1 {
         super(cs, vs);
         this.openApi = openApi;
         this.injector = injector;
-        this.onDetectChanges = new EventEmitter();
     }
     get api() {
         return this.openApi.api;
@@ -341,43 +452,24 @@ class DynamicFormService extends DynamicFormService$1 {
     }
     patchGroup(value, formModel, formGroup) {
         this.patchValueRecursive(value, formModel, formGroup);
-        this.detectChanges();
         formGroup.patchValue(ObjectUtils.copy(value));
+        this.detectChanges();
     }
     patchForm(value, component) {
         this.patchValueRecursive(value, component.model, component.group);
-        this.detectChanges(component);
         component.group.patchValue(value);
+        this.detectChanges(component);
     }
     serialize(formModel, formGroup) {
         return this.serializeRecursive(formModel, formGroup);
     }
-    notifyChanges(formModel, formGroup, root) {
-        this.notifyChangesRecursive(formModel, formGroup, root);
-    }
-    updateSelectOptions(formControlModel, formControl, root) {
-        if (formControlModel instanceof DynamicSelectModel) {
-            let options = formControlModel.options$;
-            if (options instanceof FormSubject) {
-                options.notify(formControlModel, formControl, root);
-                return;
-            }
-            while (options instanceof Subject && options.source) {
-                options = options.source;
-                if (options instanceof FormSubject) {
-                    options.notify(formControlModel, formControl, root);
-                }
-            }
-        }
+    notifyChanges(formModel, formGroup) {
+        this.notifyChangesRecursive(formModel, formGroup, formModel);
     }
     showErrors(form) {
         this.showErrorsForGroup(form.group);
         this.detectChanges(form);
     }
-    detectChanges(formComponent) {
-        super.detectChanges(formComponent);
-        this.onDetectChanges.emit(formComponent);
-    }
     patchValueRecursive(value, formModel, formGroup) {
         Object.keys(value).forEach(key => {
             const subModel = this.findModelById(key, formModel);
@@ -389,7 +481,7 @@ class DynamicFormService extends DynamicFormService$1 {
                 value[key] = subValue.id || subValue._id || subValue;
                 return;
             }
-            if (subModel instanceof DynamicFormArrayModel$1) {
+            if (subModel instanceof DynamicFormArrayModel) {
                 const length = Array.isArray(subValue) ? subValue.length : 0;
                 const subArray = subControl;
                 while (subModel.size > length) {
@@ -421,7 +513,7 @@ class DynamicFormService extends DynamicFormService$1 {
                 result[subModel.id] = await serializer(subModel, subControl);
                 continue;
             }
-            if (subModel instanceof DynamicFormArrayModel$1) {
+            if (subModel instanceof DynamicFormArrayModel) {
                 const length = Array.isArray(subControl.value) ? subControl.value.length : 0;
                 const subArray = subControl;
                 const resArray = [];
@@ -452,7 +544,7 @@ class DynamicFormService extends DynamicFormService$1 {
         for (const i in formModel) {
             const subModel = formModel[i];
             const subControl = this.findControlByModel(subModel, formGroup);
-            if (subModel instanceof DynamicFormArrayModel$1) {
+            if (subModel instanceof DynamicFormArrayModel) {
                 const length = Array.isArray(subControl.value) ? subControl.value.length : 0;
                 const subArray = subControl;
                 for (let i = 0; i < length; i++) {
@@ -468,6 +560,21 @@ class DynamicFormService extends DynamicFormService$1 {
             this.updateSelectOptions(subModel, subControl, root);
         }
     }
+    updateSelectOptions(formControlModel, formControl, root) {
+        if (formControlModel instanceof DynamicSelectModel) {
+            let options = formControlModel.options$;
+            if (options instanceof FormSubject) {
+                options.notify(formControlModel, formControl, root);
+                return;
+            }
+            while (options instanceof Subject && options.source) {
+                options = options.source;
+                if (options instanceof FormSubject) {
+                    options.notify(formControlModel, formControl, root);
+                }
+            }
+        }
+    }
     showErrorsForGroup(formGroup) {
         if (!formGroup)
             return;
@@ -510,6 +617,11 @@ class DynamicFormService extends DynamicFormService$1 {
         }
         return controls.filter(t => null !== t);
     }
+    checkIsEditorProperty(property) {
+        if (!property.format)
+            return false;
+        return EDITOR_FORMATS.indexOf(property.format) >= 0 || property.format.endsWith("script");
+    }
     getFormControlModels(property, schema, customizeModels) {
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum) || isStringWithVal(property.optionsPath) || isStringWithVal(property.endpoint)) {
@@ -519,9 +631,14 @@ class DynamicFormService extends DynamicFormService$1 {
             case "string":
             case "number":
             case "integer":
-                return customizeModels(property, schema, DynamicInputModel, this.getFormInputConfig(property, schema));
             case "textarea":
-                return customizeModels(property, schema, DynamicTextAreaModel, this.getFormTextareaConfig(property, schema));
+                if (this.checkIsEditorProperty(property)) {
+                    return customizeModels(property, schema, DynamicEditorModel, this.getFormEditorConfig(property, schema));
+                }
+                if (property.format == "textarea") {
+                    return customizeModels(property, schema, DynamicTextAreaModel, this.getFormTextareaConfig(property, schema));
+                }
+                return customizeModels(property, schema, DynamicInputModel, this.getFormInputConfig(property, schema));
             case "boolean":
                 return customizeModels(property, schema, DynamicCheckboxModel, this.getFormCheckboxConfig(property, schema));
             case "array":
@@ -534,7 +651,7 @@ class DynamicFormService extends DynamicFormService$1 {
             case "file":
                 return customizeModels(property, schema, DynamicFileUploadModel, this.getFormUploadConfig(property, schema));
         }
-        if (property.$ref) {
+        if (findRefs(property).length > 0) {
             return customizeModels(property, schema, DynamicFormGroupModel, this.getFormGroupConfig(property, schema, customizeModels));
         }
         return [];
@@ -546,7 +663,7 @@ class DynamicFormService extends DynamicFormService$1 {
         if (Array.isArray(parent)) {
             return this.findModelByPath(parent.find(t => t.id == next), path);
         }
-        if (parent instanceof DynamicFormGroupModel) {
+        if (parent instanceof DynamicFormGroupModel || parent instanceof DynamicFormArrayGroupModel) {
             return this.findModelByPath(parent.group.find(t => t.id == next), path);
         }
         if (parent instanceof DynamicFormArrayModel) {
@@ -574,7 +691,14 @@ class DynamicFormService extends DynamicFormService$1 {
         const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
         return Object.assign(this.getFormControlConfig(property, schema), {
             groupFactory: () => mergeFormModels(subSchemas.map(s => this.getFormModelForSchemaDef(s, customizeModels))),
-            useTabs: property.useTabs || false
+            sortable: property.sortable || false,
+            useTabs: property.useTabs || false,
+            addItem: property.addItem !== false,
+            insertItem: property.insertItem !== false,
+            cloneItem: property.cloneItem !== false,
+            moveItem: property.moveItem !== false,
+            removeItem: property.removeItem !== false,
+            clearItems: property.clearItems !== false
         });
     }
     getFormGroupConfig(property, schema, customizeModels) {
@@ -607,7 +731,22 @@ class DynamicFormService extends DynamicFormService$1 {
             step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
             min: isNaN(sub.minimum) ? MIN_INPUT_NUM : sub.minimum,
             max: isNaN(sub.maximum) ? MAX_INPUT_NUM : sub.maximum,
-            minLength: isNaN(sub.minLength) ? MIN_INPUT_NUM : sub.minLength,
+            minLength: isNaN(sub.minLength) ? 0 : sub.minLength,
+            maxLength: isNaN(sub.maxLength) ? MAX_INPUT_NUM : sub.maxLength,
+            placeholder: property.placeholder || ""
+        });
+    }
+    getFormEditorConfig(property, schema) {
+        const sub = property.type == "array" ? property.items || property : property;
+        return Object.assign(this.getFormControlConfig(property, schema), {
+            inputType: property.format,
+            autoComplete: property.autoComplete || "off",
+            multiple: property.type == "array",
+            accept: ObjectUtils.isString(property.accept) ? property.accept : null,
+            mask: ObjectUtils.isString(property.mask) ? property.mask : null,
+            pattern: ObjectUtils.isString(property.pattern) ? property.pattern : null,
+            step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
+            minLength: isNaN(sub.minLength) ? 0 : sub.minLength,
             maxLength: isNaN(sub.maxLength) ? MAX_INPUT_NUM : sub.maxLength,
             placeholder: property.placeholder || ""
         });
@@ -621,32 +760,6 @@ class DynamicFormService extends DynamicFormService$1 {
             multiple: property.type == "array"
         });
     }
-    getFormSelectConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            options: this.getFormSelectOptions(property, schema),
-            multiple: property.type == "array",
-            groupBy: property.groupBy,
-            inline: property.inline
-        });
-    }
-    getFormCheckboxConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            indeterminate: property.indeterminate === true
-        });
-    }
-    cloneFormArrayGroup(index, formArray, formArrayModel) {
-        this.insertFormArrayGroup(index, formArray, formArrayModel);
-        this.patchGroup(formArray.at(index + 1).value, formArrayModel.groups[index].group, formArray.at(index));
-    }
-    async fixSelectOptions(model, control, options) {
-        if (!options)
-            return [];
-        for (const option of options) {
-            option.classes = [option.classes, model.getClasses(option, model, control, this.injector)].filter(isStringWithVal).join(" ");
-            option.label = await this.language.getTranslation(option.label);
-        }
-        return options;
-    }
     getFormSelectOptions(property, schema) {
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum)) {
@@ -659,7 +772,7 @@ class DynamicFormService extends DynamicFormService$1 {
             });
         }
         if (isStringWithVal(property.optionsPath)) {
-            return new FormSelectSubject((selectModel, control, root, indexes) => {
+            return new FormSelectSubject(async (selectModel, control, root, indexes) => {
                 let path = property.optionsPath;
                 let target = control;
                 let model = selectModel;
@@ -681,7 +794,9 @@ class DynamicFormService extends DynamicFormService$1 {
                     path = path.replace(key, indexes[key]);
                 });
                 model = this.findModelByPath(model, path.split("."));
-                const modelOptions = (model instanceof DynamicSelectModel ? model.options : []);
+                const modelOptions = model instanceof DynamicSelectModel
+                    ? await firstValueFrom(model.options$) :
+                    [];
                 const value = ObjectUtils.getValue(target.value, path);
                 const options = (!ObjectUtils.isArray(value) ? [] : value).map(value => {
                     const modelOption = modelOptions.find(t => t.value == value);
@@ -703,6 +818,14 @@ class DynamicFormService extends DynamicFormService$1 {
             return this.fixSelectOptions(selectModel, control, options);
         });
     }
+    getFormSelectConfig(property, schema) {
+        return Object.assign(this.getFormControlConfig(property, schema), {
+            options: this.getFormSelectOptions(property, schema),
+            multiple: property.type == "array",
+            groupBy: property.groupBy,
+            inline: property.inline
+        });
+    }
     getFormUploadConfig(property, schema) {
         const url = this.api.url(property.url || "assets");
         const { accept, autoUpload, maxSize, minSize, removeUrl, showFileList } = property;
@@ -716,6 +839,25 @@ class DynamicFormService extends DynamicFormService$1 {
             showFileList
         });
     }
+    getFormCheckboxConfig(property, schema) {
+        return Object.assign(this.getFormControlConfig(property, schema), {
+            indeterminate: property.indeterminate || false
+        });
+    }
+    cloneFormArrayGroup(index, formArray, formArrayModel) {
+        this.insertFormArrayGroup(index, formArray, formArrayModel);
+        this.patchGroup(formArray.at(index + 1).value, formArrayModel.groups[index].group, formArray.at(index));
+        formArrayModel.filterGroups();
+    }
+    async fixSelectOptions(model, control, options) {
+        if (!options)
+            return [];
+        for (const option of options) {
+            option.classes = [option.classes, model.getClasses(option, model, control, this.injector)].filter(isStringWithVal).join(" ");
+            option.label = await this.language.getTranslation(option.label);
+        }
+        return options;
+    }
     getValidators(property, schema) {
         const validators = {};
         if (ObjectUtils.isArray(schema.required) && schema.required.indexOf(property.id) >= 0) {
@@ -894,6 +1036,7 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
         this.onValueChange = new EventEmitter();
         this.onStatusChange = new EventEmitter();
         this.onSubmit = new EventEmitter();
+        this.onDetectChanges = new EventEmitter();
         this.templates = new QueryList();
         this.subscription = new Subscription();
         this.groupSubscription = new Subscription();
@@ -907,9 +1050,11 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
         if (this.group) {
             this.groupSubscription = ObservableUtils.multiSubscription(this.group.statusChanges.subscribe(() => {
                 this.onStatusChange.emit(this);
-            }), this.group.valueChanges.subscribe(() => {
-                this.formService.notifyChanges(this.model, this.group, this.model);
-            }), this.change.subscribe(ev => {
+            }), this.group.valueChanges.pipe(debounceTime(500)).subscribe(() => {
+                this.formService.notifyChanges(this.model, this.group);
+            }), this.change.pipe(groupBy(ev => ev.model))
+                .pipe(mergeMap(t => t.pipe(debounceTime(500))))
+                .subscribe(ev => {
                 this.onValueChange.emit({ ...ev, form: this });
             }));
         }
@@ -922,6 +1067,7 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
                 this.templates.reset(templates);
             }
         }), this.events.languageChanged.subscribe(() => {
+            this.formService.notifyChanges(this.model, this.group);
             this.formService.detectChanges(this);
         }), this.ngForm.ngSubmit.subscribe(() => {
             this.onSubmit.emit(this);
@@ -932,25 +1078,29 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
         this.subscription.unsubscribe();
         this.groupSubscription.unsubscribe();
     }
+    detectChanges() {
+        super.detectChanges();
+        this.onDetectChanges.emit(this);
+    }
     insertFormArrayGroup(index, formArray, formArrayModel) {
         this.formService.insertFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+        this.detectChanges();
     }
     cloneFormArrayGroup(index, formArray, formArrayModel) {
         this.formService.cloneFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+        this.detectChanges();
     }
     removeFormArrayGroup(index, formArray, formArrayModel) {
         this.formService.removeFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+        this.detectChanges();
     }
     moveFormArrayGroup(index, step, formArray, formArrayModel) {
         this.formService.moveFormArrayGroup(index, step, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+        this.detectChanges();
     }
     clearFormArray(formArray, formArrayModel) {
         this.formService.clearFormArray(formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+        this.detectChanges();
     }
     getClass(model) {
         const parts = collectPathAble(model, p => p.id);
@@ -988,7 +1138,7 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
     }
 }
 DynamicBaseFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormComponent, deps: [{ token: DynamicFormService }, { token: EventsService }, { token: i0.ChangeDetectorRef }, { token: i1.DynamicFormComponentService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormComponent, selector: "dynamic-base-form", inputs: { group: "group", model: "model", layout: "layout", labelPrefix: "labelPrefix" }, outputs: { blur: "blur", change: "change", focus: "focus", onValueChange: "onValueChange", onStatusChange: "onStatusChange", onSubmit: "onSubmit" }, queries: [{ propertyName: "contentTemplates", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }, { propertyName: "viewTemplates", predicate: DynamicTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default });
+DynamicBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormComponent, selector: "dynamic-base-form", inputs: { group: "group", model: "model", layout: "layout", labelPrefix: "labelPrefix" }, outputs: { blur: "blur", change: "change", focus: "focus", onValueChange: "onValueChange", onStatusChange: "onStatusChange", onSubmit: "onSubmit", onDetectChanges: "onDetectChanges" }, queries: [{ propertyName: "contentTemplates", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }, { propertyName: "viewTemplates", predicate: DynamicTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -1028,17 +1178,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Output
             }], onSubmit: [{
                 type: Output
+            }], onDetectChanges: [{
+                type: Output
             }], ngForm: [{
                 type: ViewChild,
                 args: [NgForm]
             }] } });
 
+class DynamicBaseFormControlContainerComponent extends DynamicFormControlContainerComponent {
+    constructor(form, cdr, cfr, layoutService, validationService, componentService, relationService) {
+        super(cdr, cfr, layoutService, validationService, componentService, relationService);
+        this.form = form;
+        this.cdr = cdr;
+        this.context = null;
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    get componentType() {
+        return this.componentService.getCustomComponentType(this.model) ?? this.getComponentType(this.model);
+    }
+    get startTemplate() {
+        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
+            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_START")
+            : this.layoutService.getStartTemplate(this.model, this.templates);
+    }
+    get endTemplate() {
+        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
+            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_END")
+            : this.layoutService.getEndTemplate(this.model, this.templates);
+    }
+    get formService() {
+        return this.form.formService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.onDetectChanges = this.form.onDetectChanges.subscribe(() => {
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.onDetectChanges.unsubscribe();
+    }
+    getLabel() {
+        const label = collectPathAble(this.model, p => p.label);
+        if (label.length == 0)
+            return "";
+        if (this.form?.labelPrefix) {
+            label.unshift(this.form.labelPrefix);
+        }
+        return label.join(".");
+    }
+    getLabelIcon() {
+        if (this.context instanceof DynamicFormArrayGroupModel) {
+            const arrayModel = this.context.context;
+            if (arrayModel && arrayModel.sortBy == this.model.id) {
+                return arrayModel.sortOrder;
+            }
+        }
+        return null;
+    }
+    clickLabel() {
+        if (this.context instanceof DynamicFormArrayGroupModel) {
+            const arrayModel = this.context.context;
+            if (arrayModel) {
+                arrayModel.sortBy = this.model.id;
+            }
+        }
+    }
+    createFormControlComponent() {
+        super.createFormControlComponent();
+        const component = this.componentRef?.instance;
+        if (!component || !ObjectUtils.isFunction(component.initialize))
+            return;
+        component.initialize(this.changeDetectorRef);
+    }
+    getComponentType(model) {
+        return null;
+    }
+}
+DynamicBaseFormControlContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlContainerComponent, deps: [{ token: DynamicBaseFormComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: i1.DynamicFormComponentService }, { token: i1.DynamicFormRelationService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicBaseFormControlContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormControlContainerComponent, selector: "dynamic-base-form-control", inputs: { context: "context", group: "group", hostClass: "hostClass", inputTemplateList: ["templates", "inputTemplateList"], layout: "layout", model: "model" }, outputs: { blur: "blur", change: "change", focus: "focus" }, host: { properties: { "class": "this.klass" } }, providers: [
+        { provide: DynamicFormControlContainerComponent, useExisting: DynamicBaseFormControlContainerComponent }
+    ], queries: [{ propertyName: "contentTemplateList", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "componentViewContainerRef", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "dynamic-base-form-control",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: DynamicFormControlContainerComponent, useExisting: DynamicBaseFormControlContainerComponent }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: DynamicBaseFormComponent }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: i1.DynamicFormComponentService }, { type: i1.DynamicFormRelationService }]; }, propDecorators: { contentTemplateList: [{
+                type: ContentChildren,
+                args: [DynamicTemplateDirective]
+            }], klass: [{
+                type: HostBinding,
+                args: ["class"]
+            }], context: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], hostClass: [{
+                type: Input
+            }], inputTemplateList: [{
+                type: Input,
+                args: ["templates"]
+            }], layout: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], componentViewContainerRef: [{
+                type: ViewChild,
+                args: ["componentViewContainer", {
+                        read: ViewContainerRef,
+                        static: true
+                    }]
+            }] } });
+
 class DynamicBaseFormArrayComponent extends DynamicFormArrayComponent {
-    constructor(layoutService, validationService, injector) {
+    constructor(layoutService, validationService, form, injector, cdr) {
         super(layoutService, validationService);
-        this.layoutService = layoutService;
-        this.validationService = validationService;
+        this.form = form;
         this.injector = injector;
+        this.cdr = cdr;
         this.blur = new EventEmitter();
         this.change = new EventEmitter();
         this.customEvent = new EventEmitter();
@@ -1047,14 +1319,24 @@ class DynamicBaseFormArrayComponent extends DynamicFormArrayComponent {
     get useTabs() {
         return this.model?.useTabs;
     }
+    initialize(cdr) {
+        this.subscription = this.model.filteredGroups.subscribe(filteredGroups => {
+            this.updateGroups(filteredGroups);
+        });
+        this.model.initialize(this.array);
+    }
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
+    }
     saveTab(index) {
-        this.model.saveTab(index, this.model, this.injector);
+        this.model.saveTab(index, this.model.getFiltered(index), this.model, this.injector);
     }
     restoreTab() {
         return this.model.restoreTab(this.model, this.injector);
     }
-    getTabLabel(index) {
-        return this.model.getTabLabel(index, this.model, this.array, this.injector);
+    getTabLabel(index, model) {
+        return this.model.getTabLabel(index, model, this.model, this.array, this.injector);
     }
     getClass(context, place, model) {
         return [
@@ -1082,9 +1364,13 @@ class DynamicBaseFormArrayComponent extends DynamicFormArrayComponent {
         }
         return null;
     }
+    updateGroups(filteredGroups) {
+        this.cdr.detectChanges();
+        this.components.forEach(t => t.cdr.detectChanges());
+    }
 }
-DynamicBaseFormArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormArrayComponent, deps: [{ token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DynamicBaseFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormArrayComponent, selector: "dynamic-base-form-array", inputs: { formLayout: "formLayout", group: "group", layout: "layout", model: "model", templates: "templates" }, outputs: { blur: "blur", change: "change", customEvent: "customEvent", focus: "focus" }, viewQueries: [{ propertyName: "components", predicate: i0.forwardRef(function () { return DynamicFormControlContainerComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicBaseFormArrayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormArrayComponent, deps: [{ token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: DynamicBaseFormComponent }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DynamicBaseFormArrayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormArrayComponent, selector: "dynamic-base-form-array", inputs: { formLayout: "formLayout", group: "group", layout: "layout", model: "model", templates: "templates" }, outputs: { blur: "blur", change: "change", customEvent: "customEvent", focus: "focus" }, viewQueries: [{ propertyName: "components", predicate: i0.forwardRef(function () { return DynamicBaseFormControlContainerComponent; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormArrayComponent, decorators: [{
             type: Component,
             args: [{
@@ -1092,7 +1378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     template: "",
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: i0.Injector }]; }, propDecorators: { formLayout: [{
+        }], ctorParameters: function () { return [{ type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: DynamicBaseFormComponent }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formLayout: [{
                 type: Input
             }], group: [{
                 type: Input
@@ -1112,18 +1398,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Output
             }], components: [{
                 type: ViewChildren,
-                args: [forwardRef(() => DynamicFormControlContainerComponent)]
+                args: [forwardRef(() => DynamicBaseFormControlContainerComponent)]
             }] } });
 
 class DynamicBaseFormControlComponent extends DynamicFormControlComponent {
-    constructor(layoutService, validationService) {
+    constructor(cdr, layoutService, validationService) {
         super(layoutService, validationService);
+        this.cdr = cdr;
         this.blur = new EventEmitter();
         this.change = new EventEmitter();
         this.focus = new EventEmitter();
     }
 }
-DynamicBaseFormControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlComponent, deps: [{ token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }], target: i0.ɵɵFactoryTarget.Component });
+DynamicBaseFormControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }], target: i0.ɵɵFactoryTarget.Component });
 DynamicBaseFormControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormControlComponent, selector: "dynamic-base-form-control", inputs: { formLayout: "formLayout", group: "group", layout: "layout", model: "model" }, outputs: { blur: "blur", change: "change", focus: "focus" }, usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlComponent, decorators: [{
             type: Component,
@@ -1132,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     template: "",
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }]; }, propDecorators: { formLayout: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }]; }, propDecorators: { formLayout: [{
                 type: Input
             }], group: [{
                 type: Input
@@ -1148,108 +1435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Output
             }] } });
 
-class DynamicBaseFormControlContainerComponent extends DynamicFormControlContainerComponent {
-    constructor(form, changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService) {
-        super(changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService);
-        this.form = form;
-        this.changeDetectorRef = changeDetectorRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.layoutService = layoutService;
-        this.validationService = validationService;
-        this.componentService = componentService;
-        this.relationService = relationService;
-        this.context = null;
-        this.blur = new EventEmitter();
-        this.change = new EventEmitter();
-        this.focus = new EventEmitter();
-    }
-    get componentType() {
-        return this.componentService.getCustomComponentType(this.model) ?? this.getComponentType(this.model);
-    }
-    get startTemplate() {
-        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
-            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_START")
-            : this.layoutService.getStartTemplate(this.model, this.templates);
-    }
-    get endTemplate() {
-        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
-            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_END")
-            : this.layoutService.getEndTemplate(this.model, this.templates);
-    }
-    get formService() {
-        return this.form.formService;
-    }
-    ngOnInit() {
-        this.onDetectChanges = this.formService.onDetectChanges.subscribe(form => {
-            if (form !== this.form)
-                return;
-            this.changeDetectorRef.detectChanges();
-            this.formService.updateSelectOptions(this.model, this.control, this.form.model);
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.onDetectChanges.unsubscribe();
-    }
-    getLabel() {
-        const label = collectPathAble(this.model, p => p.label);
-        if (label.length == 0)
-            return "";
-        if (this.form?.labelPrefix) {
-            label.unshift(this.form.labelPrefix);
-        }
-        return label.join(".");
-    }
-    createFormControlComponent() {
-        super.createFormControlComponent();
-        const component = this.componentRef?.instance;
-        if (!component || !ObjectUtils.isFunction(component.onCreated))
-            return;
-        component.onCreated();
-    }
-    getComponentType(model) {
-        return null;
-    }
-}
-DynamicBaseFormControlContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlContainerComponent, deps: [{ token: DynamicBaseFormComponent }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: i1.DynamicFormComponentService }, { token: i1.DynamicFormRelationService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicBaseFormControlContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormControlContainerComponent, selector: "dynamic-base-form-control", inputs: { context: "context", group: "group", hostClass: "hostClass", inputTemplateList: ["templates", "inputTemplateList"], layout: "layout", model: "model" }, outputs: { blur: "blur", change: "change", focus: "focus" }, host: { properties: { "class": "this.klass" } }, queries: [{ propertyName: "contentTemplateList", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "componentViewContainerRef", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormControlContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dynamic-base-form-control",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: DynamicBaseFormComponent }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: i1.DynamicFormComponentService }, { type: i1.DynamicFormRelationService }]; }, propDecorators: { contentTemplateList: [{
-                type: ContentChildren,
-                args: [DynamicTemplateDirective]
-            }], klass: [{
-                type: HostBinding,
-                args: ["class"]
-            }], context: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], hostClass: [{
-                type: Input
-            }], inputTemplateList: [{
-                type: Input,
-                args: ["templates"]
-            }], layout: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], componentViewContainerRef: [{
-                type: ViewChild,
-                args: ["componentViewContainer", { read: ViewContainerRef, static: true }]
-            }] } });
-
 class DynamicBaseFormGroupComponent extends DynamicFormGroupComponent {
     constructor(layoutService, validationService) {
         super(layoutService, validationService);
@@ -1323,18 +1508,21 @@ class DynamicBaseSelectComponent extends DynamicBaseFormControlComponent {
         this.groups$ = new BehaviorSubject([]);
         this.subscription = this.model.options$.subscribe(options => {
             const groupBy = this.model.inline || !this.model.multiple ? this.model.groupBy : null;
-            const groups = options.reduce((res, option) => {
+            const grouped = options.reduce((res, option) => {
                 const key = replaceSpecialChars(groupBy ? option.props[this.model.groupBy] || "default" : "default", "-");
                 res[key] = res[key] || [];
                 res[key].push(option);
                 return res;
             }, {});
-            this.groups$.next(Object.keys(groups).map(group => {
+            const groups = Object.keys(grouped).map(group => {
                 return {
                     group,
-                    options: groups[group]
+                    options: grouped[group]
                 };
-            }));
+            });
+            this.hasOptions = groups.length > 0;
+            this.groups$.next(groups);
+            this.cdr.detectChanges();
         });
     }
     ngOnDestroy() {
@@ -1500,5 +1688,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicBaseFormArrayComponent, DynamicBaseFormComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, DynamicFormArrayModel, DynamicFormOption, DynamicFormService, DynamicSelectModel, FormFile, FormInput, FormModel, FormSelect, FormSelectSubject, FormSerializable, FormStatic, FormSubject, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormSerializer, mergeFormModels, replaceSpecialChars, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation };
+export { AsyncSubmitDirective, DynamicBaseFormArrayComponent, DynamicBaseFormComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, DynamicFormArrayGroupModel, DynamicFormArrayModel, DynamicFormOption, DynamicFormService, DynamicSelectModel, EDITOR_FORMATS, FormFile, FormInput, FormModel, FormSelect, FormSelectSubject, FormSerializable, FormStatic, FormSubject, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormSerializer, mergeFormModels, replaceSpecialChars, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map