myrta-ui 1.1.34 → 1.1.37

package/fesm2015/myrta-ui.mjs

@@ -4306,7 +4306,11 @@ const patternValidation = (value, validations, key, invalidMessages) => {
 
 const maxLengthValidation = (value, validations, key, invalidMessages) => {
     const result = { isValid: true, message: null };
-    if (String(value).length > Number(validations[key])) {
+    if (Array.isArray(value) && validations.type === 'single' && value.length > Number(validations[key])) {
+        result.message = getErrorMessageHelper(key, invalidMessages, validations.messages, Number(validations[key]));
+        result.isValid = false;
+    }
+    else if (!Array.isArray(value) && String(value).length > Number(validations[key])) {
         result.message = getErrorMessageHelper(key, invalidMessages, validations.messages, Number(validations[key]));
         result.isValid = false;
     }
@@ -4315,7 +4319,11 @@ const maxLengthValidation = (value, validations, key, invalidMessages) => {
 
 const minLengthValidation = (value, validations, key, invalidMessages) => {
     const result = { isValid: true, message: null };
-    if (String(value).length < Number(validations[key]) && !!validations[ValidationTypesEnum.Required]) {
+    if (Array.isArray(value) && validations.type === 'single' && value.length < Number(validations[key])) {
+        result.message = getErrorMessageHelper(key, invalidMessages, validations.messages, Number(validations[key]));
+        result.isValid = false;
+    }
+    else if (!Array.isArray(value) && String(value).length < Number(validations[key]) && !!validations[ValidationTypesEnum.Required]) {
         result.message = getErrorMessageHelper(key, invalidMessages, validations.messages, Number(validations[key]));
         result.isValid = false;
     }
@@ -4383,7 +4391,8 @@ const getSortingValidationsHelper = (validation) => {
         }
         else {
             if (key === 'type') {
-                validation.type = 'multi';
+                validation.type = 'single';
+                sortedValidators.type = 'single';
             }
         }
     }
@@ -5487,7 +5496,7 @@ class InputTextComponent {
         return this.maxlength > ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length);
     }
     formatValue(value) {
-        return value.length === this.maskPrefix.length ? '' : value;
+        return value ? value.length === this.maskPrefix.length ? '' : value : '';
     }
     insertPositionText(tagText) {
         if (this.selectionStart && this.selectionEnd) {
@@ -12808,7 +12817,7 @@ const getSortedList = (list, sortable) => {
         const sortedList = list.sort(sortedFunc);
         sortedList.forEach((item) => {
             if (item.type === 'array') {
-                getSortedListInner(item.array);
+                getSortedListInner(item.items);
             }
         });
         return sortedList;
@@ -12824,8 +12833,8 @@ const filterSearchGroup$1 = (list, searchValue) => {
         array.forEach((item) => {
             if (item.text.toLowerCase().includes(searchValue.toLowerCase())) {
                 if (item.type === 'array') {
-                    const newArray = getIntersectionsFromString(item.array);
-                    searchArray.push(Object.assign(Object.assign({}, item), { array: newArray }));
+                    const newArray = getIntersectionsFromString(item.items || []);
+                    searchArray.push(Object.assign(Object.assign({}, item), { items: newArray }));
                 }
                 else {
                     searchArray.push(item);
@@ -12833,8 +12842,8 @@ const filterSearchGroup$1 = (list, searchValue) => {
             }
             else {
                 if (item.type === 'array') {
-                    const newArray = getIntersectionsFromString(item.array);
-                    newArray.length && searchArray.push(Object.assign(Object.assign({}, item), { array: newArray }));
+                    const newArray = getIntersectionsFromString(item.items || []);
+                    newArray.length && searchArray.push(Object.assign(Object.assign({}, item), { items: newArray }));
                 }
             }
         });
@@ -12843,21 +12852,22 @@ const filterSearchGroup$1 = (list, searchValue) => {
     return getIntersectionsFromString(list);
 };
 
-const getItemById$1 = (list, itemId) => {
+const getItemInnerById = (list, itemId) => {
     const findById = (acc, el) => {
         if ((el === null || el === void 0 ? void 0 : el.id) === itemId)
             return el;
-        if (el === null || el === void 0 ? void 0 : el.array)
-            return el.array.reduce(findById, acc);
+        if (el === null || el === void 0 ? void 0 : el.items)
+            return el.items.reduce(findById, acc);
         return acc;
     };
     return list.reduce(findById, null);
 };
 
 const changeItemValue = (item, value) => {
+    var _a;
     item.value = value;
     if (item.type === 'array') {
-        item.array.forEach((item) => {
+        (_a = item.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
             changeItemValue(item, value);
         });
     }
@@ -12872,19 +12882,18 @@ const changeListValue = (list, value) => {
 const checkUnderArrayValue = (array, value) => {
     return array.some((x) => {
         if (x.type === 'array') {
-            return checkUnderArrayValue(x.array, value);
+            return checkUnderArrayValue(x.items, value);
         }
         return x.value !== value;
     });
 };
-const changeGroupValue = (list, itemId, value) => {
-    if (!itemId) {
+const changeGroupValue = (list, parentId, value) => {
+    if (!parentId) {
         return;
     }
-    const parent = getItemById$1(list, itemId);
+    const parent = getItemInnerById(list, parentId);
     if (parent) {
-        parent.value = checkUnderArrayValue(parent.array, value) ? null : value;
-        changeGroupValue(list, parent.parentId, value);
+        parent.value = checkUnderArrayValue(parent.items, value) ? null : value;
     }
 };
 
@@ -12895,7 +12904,7 @@ const getCheckedItems = (list) => {
     const getCheckedItemsFromArray = (list) => {
         list.forEach((item) => {
             if (item.type === 'array') {
-                getCheckedItemsFromArray(item.array);
+                getCheckedItemsFromArray(item.items || []);
             }
             else {
                 if (item.value) {
@@ -12908,6 +12917,52 @@ const getCheckedItems = (list) => {
     return checkedItems;
 };
 
+const getInnerList = (list, checkedList) => {
+    const getItemValue = (item) => {
+        if (item.items) {
+            let value = false;
+            let count = 0;
+            item.items.forEach((i, idx, array) => {
+                if (i.items) {
+                    if (value === false) {
+                        value = getItemValue(i);
+                    }
+                }
+                else {
+                    if (checkedList.find(c => c.id === i.id)) {
+                        count++;
+                        if (value === false) {
+                            value = null;
+                        }
+                    }
+                }
+                if (idx === array.length - 1) {
+                    if (count === array.length) {
+                        value = true;
+                    }
+                }
+            });
+            return value;
+        }
+        else {
+            return !!checkedList.find(c => c.id === item.id);
+        }
+    };
+    const getModifiedList = (items, parentId = null) => {
+        return items.map((item, idx, array) => {
+            return {
+                id: item.id,
+                text: item.text,
+                value: getItemValue(item),
+                parentId: parentId,
+                type: item.items ? 'array' : 'single',
+                items: item.items ? getModifiedList(item.items, item.id) : []
+            };
+        });
+    };
+    return getModifiedList(list);
+};
+
 class CheckboxGroupHeaderComponent {
     constructor() {
         this.searchValue = '';
@@ -12929,10 +12984,10 @@ class CheckboxGroupHeaderComponent {
     }
 }
 CheckboxGroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxGroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: { searchable: "searchable", searchPlaceholder: "searchPlaceholder", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", checkedItemsCount: "checkedItemsCount" }, outputs: { updateCheckboxGroupSearchValue: "updateCheckboxGroupSearchValue", clearFilters: "clearFilters" }, ngImport: i0, template: "<mrx-label\r\n  *ngIf=\"labelText\"\r\n  [counter]=\"checkedItemsCount\"\r\n  [linkText]=\"linkText\"\r\n  [tooltip]=\"tooltip\"\r\n  (clickedLink)=\"onClearFilters()\"\r\n>{{ labelText }}</mrx-label>\r\n\r\n<div class=\"mrx-checkbox-group-head--search\" *ngIf=\"searchable\">\r\n  <mrx-input-search\r\n    [ngModel]=\"searchValue\"\r\n    [size]=\"'medium'\"\r\n    [placeholder]=\"searchPlaceholder\"\r\n    (ngModelChange)=\"changeSearchValue($event)\"\r\n  ></mrx-input-search>\r\n</div>\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"], components: [{ type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: InputSearchComponent, selector: "mrx-input-search", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput"], outputs: ["changed", "modelChange", "blurred", "cleared", "searched"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+CheckboxGroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: { searchable: "searchable", searchPlaceholder: "searchPlaceholder", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", checkedItemsCount: "checkedItemsCount" }, outputs: { updateCheckboxGroupSearchValue: "updateCheckboxGroupSearchValue", clearFilters: "clearFilters" }, ngImport: i0, template: "<mrx-label\r\n  *ngIf=\"labelText\"\r\n  [counter]=\"checkedItemsCount\"\r\n  [linkText]=\"linkText\"\r\n  [tooltip]=\"tooltip\"\r\n  (clickedLink)=\"onClearFilters()\"\r\n>{{ labelText }}</mrx-label>\r\n\r\n<div class=\"mrx-checkbox-group-head--search\" *ngIf=\"searchable\">\r\n  <mrx-input-search\r\n    [ngModel]=\"searchValue\"\r\n    [size]=\"'medium'\"\r\n    [placeholder]=\"searchPlaceholder\"\r\n    (ngModelChange)=\"changeSearchValue($event)\"\r\n  ></mrx-input-search>\r\n</div>\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"], components: [{ type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: InputSearchComponent, selector: "mrx-input-search", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput"], outputs: ["changed", "modelChange", "blurred", "cleared", "searched"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-checkbox-group-header', template: "<mrx-label\r\n  *ngIf=\"labelText\"\r\n  [counter]=\"checkedItemsCount\"\r\n  [linkText]=\"linkText\"\r\n  [tooltip]=\"tooltip\"\r\n  (clickedLink)=\"onClearFilters()\"\r\n>{{ labelText }}</mrx-label>\r\n\r\n<div class=\"mrx-checkbox-group-head--search\" *ngIf=\"searchable\">\r\n  <mrx-input-search\r\n    [ngModel]=\"searchValue\"\r\n    [size]=\"'medium'\"\r\n    [placeholder]=\"searchPlaceholder\"\r\n    (ngModelChange)=\"changeSearchValue($event)\"\r\n  ></mrx-input-search>\r\n</div>\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"] }]
+            args: [{ selector: 'mrx-checkbox-group-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mrx-label\r\n  *ngIf=\"labelText\"\r\n  [counter]=\"checkedItemsCount\"\r\n  [linkText]=\"linkText\"\r\n  [tooltip]=\"tooltip\"\r\n  (clickedLink)=\"onClearFilters()\"\r\n>{{ labelText }}</mrx-label>\r\n\r\n<div class=\"mrx-checkbox-group-head--search\" *ngIf=\"searchable\">\r\n  <mrx-input-search\r\n    [ngModel]=\"searchValue\"\r\n    [size]=\"'medium'\"\r\n    [placeholder]=\"searchPlaceholder\"\r\n    (ngModelChange)=\"changeSearchValue($event)\"\r\n  ></mrx-input-search>\r\n</div>\r\n", styles: [".mrx-checkbox-group-head--search{margin-bottom:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { searchable: [{
                 type: Input
             }], searchPlaceholder: [{
@@ -12952,28 +13007,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class CheckboxGroupItemComponent {
-    constructor(detector) {
-        this.detector = detector;
+    constructor(_detector) {
+        this._detector = _detector;
         this.animationState = 'close';
+        this.isOpen = false;
         this.displaced = false;
         this.level = 0;
         this.animationTrigger = null;
         this.disabled = false;
         this.readonly = false;
+        this.invalid = false;
         this.animationEnd = new EventEmitter();
         this.checkboxChanged = new EventEmitter();
     }
+    set item(value) {
+        this._item = value;
+    }
+    get item() {
+        return this._item;
+    }
     get isIndeterminate() {
         return this.item.value === null;
     }
     get translateChevron() {
-        return this.animationState === 'close' ? 'rotate(-90deg)' : 'rotate(0deg)';
-    }
-    trackByFn(index, item) {
-        return item.id;
+        return this.isOpen ? 'rotate(0deg)' : 'rotate(-90deg)';
     }
     toggleList(item) {
-        this.animationState = this.animationState === 'close' ? 'open' : 'close';
+        this.isOpen = !this.isOpen;
     }
     checkboxChangeModel(value, item) {
         if (this.isIndeterminate) {
@@ -12982,64 +13042,54 @@ class CheckboxGroupItemComponent {
         else {
             this.checkboxChanged.emit({ value: value, item });
         }
-        this.detector.detectChanges();
+        this._detector.detectChanges();
     }
     ngOnChanges(changes) {
         if (changes['item'] && (changes['item'].currentValue.value === null)) {
-            this.animationState = 'open';
+            this.isOpen = true;
         }
         else {
-            if (this.animationTrigger) {
-                this.animationState = 'open';
-            }
-            else {
-                this.animationState = 'close';
-            }
+            this.isOpen = !!this.animationTrigger;
         }
-        this.detector.detectChanges();
+        this._detector.detectChanges();
     }
     onAnimationEvent() {
         this.animationEnd.emit();
     }
+    trackByFn(index, item) {
+        return item.id;
+    }
 }
 CheckboxGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: { item: "item", displaced: "displaced", level: "level", animationTrigger: "animationTrigger", isLast: "isLast", disabled: "disabled", readonly: "readonly" }, outputs: { animationEnd: "animationEnd", checkboxChanged: "checkboxChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mrx-checkbox-group__item\" [class.mrx-checkbox-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-checkbox-group__item--array\" *ngIf=\"item.array.length && level < 10; else singleCheckboxTemplate\">\r\n    <div class=\"mrx-checkbox-group__item--array-head\">\r\n      <div class=\"mrx-checkbox-group__item--head-icon mr-1\">\r\n        <span\r\n          class=\"mrx-icon icon-chevron-down icon-font-16 cursor-pointer\"\r\n          (click)=\"toggleList(item)\"\r\n          [style.transform]=\"translateChevron\"\r\n          ></span>\r\n      </div>\r\n\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"isIndeterminate\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n\r\n    <div class=\"mrx-checkbox-group__item--array-list\" [@openList]=\"animationState\" (@openList.done)=\"onAnimationEvent()\">\r\n      <ng-container>\r\n        <mrx-checkbox-group-item\r\n            *ngFor=\"let item of item.array\"\r\n            [level]=\"level + 1\"\r\n            [item]=\"item\"\r\n            [displaced]=\"true\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            (checkboxChanged)=\"checkboxChanged.emit($event)\"\r\n        ></mrx-checkbox-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleCheckboxTemplate>\r\n    <div class=\"mrx-checkbox-group__item--single\" [class.item-displaced]=\"displaced\">\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-checkbox-group__item--single.item-displaced{margin-left:20px}.mrx-checkbox-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-checkbox-group__item--array-list{padding-left:20px}.mrx-checkbox-group__item--buttom-ident{margin-bottom:12px}\n"], components: [{ type: CheckboxComponent, selector: "mrx-checkbox", inputs: ["fields", "required", "boldLabel", "indeterminate", "disabled", "readonly", "label", "customClasses", "customWrapperClasses", "invalid", "checkInvalid", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changed", "modelChange"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["item", "displaced", "level", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "checkboxChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+CheckboxGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: { displaced: "displaced", level: "level", animationTrigger: "animationTrigger", isLast: "isLast", disabled: "disabled", readonly: "readonly", invalid: "invalid", item: "item" }, outputs: { animationEnd: "animationEnd", checkboxChanged: "checkboxChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mrx-checkbox-group__item\" [class.mrx-checkbox-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-checkbox-group__item--array\" *ngIf=\"item.items?.length && level < 10; else singleCheckboxTemplate\">\r\n    <div class=\"mrx-checkbox-group__item--array-head\">\r\n      <div class=\"mrx-checkbox-group__item--head-icon mr-1\">\r\n        <span\r\n          class=\"mrx-icon icon-chevron-down icon-font-16 cursor-pointer\"\r\n          (click)=\"toggleList(item)\"\r\n          [style.transform]=\"translateChevron\"\r\n          ></span>\r\n      </div>\r\n\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"isIndeterminate\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n\r\n    <div class=\"mrx-checkbox-group__item--array-list\" [@openList]=\"isOpen ? 'open' : 'close'\" (@openList.done)=\"onAnimationEvent()\">\r\n      <ng-container>\r\n        <mrx-checkbox-group-item\r\n            *ngFor=\"let item of item.items; trackBy: trackByFn\"\r\n            [level]=\"level + 1\"\r\n            [item]=\"item\"\r\n            [displaced]=\"true\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"invalid\"\r\n            (checkboxChanged)=\"checkboxChanged.emit($event)\"\r\n        ></mrx-checkbox-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleCheckboxTemplate>\r\n    <div class=\"mrx-checkbox-group__item--single\" [class.item-displaced]=\"displaced\">\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          [invalid]=\"invalid\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-checkbox-group__item--single.item-displaced{margin-left:20px}.mrx-checkbox-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-checkbox-group__item--array-list{padding-left:20px}.mrx-checkbox-group__item--buttom-ident{margin-bottom:12px}\n"], components: [{ type: CheckboxComponent, selector: "mrx-checkbox", inputs: ["fields", "required", "boldLabel", "indeterminate", "disabled", "readonly", "label", "customClasses", "customWrapperClasses", "invalid", "checkInvalid", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changed", "modelChange"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('openList', [
+            state('*', style({ height: '0', opacity: '0', visibility: 'hidden', marginTop: '0', overflow: 'hidden' })),
             state('open', style({ height: '*', opacity: '1', visibility: 'visible', marginTop: '12px' })),
             state('close', style({ height: '0', opacity: '0', visibility: 'hidden', marginTop: '0', overflow: 'hidden' })),
-            transition('open => close', [group([
-                    animate('200ms ease-in-out', style({ opacity: '0' })),
-                    animate('200ms ease-in-out', style({ height: '0px', marginTop: '0' })),
-                    animate('200ms ease-in-out', style({ visibility: 'hidden' }))
-                ])]),
-            transition('close => open', [group([
-                    animate('200ms ease-in-out', style({ visibility: 'visible' })),
-                    animate('200ms ease-in-out', style({ height: '*', marginTop: '12px' })),
-                    animate('200ms ease-in-out', style({ opacity: '1' }))
-                ])])
+            transition('* => open', [
+                animate(200)
+            ]),
+            transition('* => close', [
+                animate(200)
+            ]),
         ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mrx-checkbox-group-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('openList', [
+                            state('*', style({ height: '0', opacity: '0', visibility: 'hidden', marginTop: '0', overflow: 'hidden' })),
                             state('open', style({ height: '*', opacity: '1', visibility: 'visible', marginTop: '12px' })),
                             state('close', style({ height: '0', opacity: '0', visibility: 'hidden', marginTop: '0', overflow: 'hidden' })),
-                            transition('open => close', [group([
-                                    animate('200ms ease-in-out', style({ opacity: '0' })),
-                                    animate('200ms ease-in-out', style({ height: '0px', marginTop: '0' })),
-                                    animate('200ms ease-in-out', style({ visibility: 'hidden' }))
-                                ])]),
-                            transition('close => open', [group([
-                                    animate('200ms ease-in-out', style({ visibility: 'visible' })),
-                                    animate('200ms ease-in-out', style({ height: '*', marginTop: '12px' })),
-                                    animate('200ms ease-in-out', style({ opacity: '1' }))
-                                ])])
+                            transition('* => open', [
+                                animate(200)
+                            ]),
+                            transition('* => close', [
+                                animate(200)
+                            ]),
                         ])
-                    ], template: "<div class=\"mrx-checkbox-group__item\" [class.mrx-checkbox-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-checkbox-group__item--array\" *ngIf=\"item.array.length && level < 10; else singleCheckboxTemplate\">\r\n    <div class=\"mrx-checkbox-group__item--array-head\">\r\n      <div class=\"mrx-checkbox-group__item--head-icon mr-1\">\r\n        <span\r\n          class=\"mrx-icon icon-chevron-down icon-font-16 cursor-pointer\"\r\n          (click)=\"toggleList(item)\"\r\n          [style.transform]=\"translateChevron\"\r\n          ></span>\r\n      </div>\r\n\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"isIndeterminate\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n\r\n    <div class=\"mrx-checkbox-group__item--array-list\" [@openList]=\"animationState\" (@openList.done)=\"onAnimationEvent()\">\r\n      <ng-container>\r\n        <mrx-checkbox-group-item\r\n            *ngFor=\"let item of item.array\"\r\n            [level]=\"level + 1\"\r\n            [item]=\"item\"\r\n            [displaced]=\"true\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            (checkboxChanged)=\"checkboxChanged.emit($event)\"\r\n        ></mrx-checkbox-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleCheckboxTemplate>\r\n    <div class=\"mrx-checkbox-group__item--single\" [class.item-displaced]=\"displaced\">\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-checkbox-group__item--single.item-displaced{margin-left:20px}.mrx-checkbox-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-checkbox-group__item--array-list{padding-left:20px}.mrx-checkbox-group__item--buttom-ident{margin-bottom:12px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
-                type: Input
-            }], displaced: [{
+                    ], template: "<div class=\"mrx-checkbox-group__item\" [class.mrx-checkbox-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-checkbox-group__item--array\" *ngIf=\"item.items?.length && level < 10; else singleCheckboxTemplate\">\r\n    <div class=\"mrx-checkbox-group__item--array-head\">\r\n      <div class=\"mrx-checkbox-group__item--head-icon mr-1\">\r\n        <span\r\n          class=\"mrx-icon icon-chevron-down icon-font-16 cursor-pointer\"\r\n          (click)=\"toggleList(item)\"\r\n          [style.transform]=\"translateChevron\"\r\n          ></span>\r\n      </div>\r\n\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"isIndeterminate\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n\r\n    <div class=\"mrx-checkbox-group__item--array-list\" [@openList]=\"isOpen ? 'open' : 'close'\" (@openList.done)=\"onAnimationEvent()\">\r\n      <ng-container>\r\n        <mrx-checkbox-group-item\r\n            *ngFor=\"let item of item.items; trackBy: trackByFn\"\r\n            [level]=\"level + 1\"\r\n            [item]=\"item\"\r\n            [displaced]=\"true\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [invalid]=\"invalid\"\r\n            (checkboxChanged)=\"checkboxChanged.emit($event)\"\r\n        ></mrx-checkbox-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleCheckboxTemplate>\r\n    <div class=\"mrx-checkbox-group__item--single\" [class.item-displaced]=\"displaced\">\r\n      <mrx-checkbox\r\n          [ngModel]=\"item.value\"\r\n          [indeterminate]=\"false\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          [invalid]=\"invalid\"\r\n          (ngModelChange)=\"checkboxChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-checkbox>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-checkbox-group__item--single.item-displaced{margin-left:20px}.mrx-checkbox-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-checkbox-group__item--array-list{padding-left:20px}.mrx-checkbox-group__item--buttom-ident{margin-bottom:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { displaced: [{
                 type: Input
             }], level: [{
                 type: Input
@@ -13051,6 +13101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
+            }], invalid: [{
+                type: Input
+            }], item: [{
+                type: Input
             }], animationEnd: [{
                 type: Output
             }], checkboxChanged: [{
@@ -13058,17 +13112,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class CheckboxGroupComponent {
-    constructor() {
+    constructor(_detector) {
+        this._detector = _detector;
         this._isInit = false;
         this._groupItemsWrapperHeight = 0;
         this._searchValue = '';
         this.list = [];
-        this.filteredList = [];
+        this.innerList = [];
         this.checkedList = [];
+        this.filteredList = [];
         // SAVE STATE
         this.uuid = v4();
         this.fields = [];
-        this.items = [];
         this.scrollMaxHeight = 200;
         this.searchable = false;
         this.scrollable = false;
@@ -13083,19 +13138,34 @@ class CheckboxGroupComponent {
         // LABEL
         this.labelText = '';
         this.linkText = '';
+        // VALIDATE
+        this.invalid = false;
+        this.invalidMessage = '';
         this.changed = new EventEmitter();
         this.changeChecked = new EventEmitter();
         this.modelChange = new EventEmitter();
-        this.modelCheckedChange = new EventEmitter();
+        this.modelChangeInner = new EventEmitter();
         this.modelItemChange = new EventEmitter();
         this.onChange = (value) => { };
         this.onTouched = () => { };
     }
+    set items(list) {
+        this.list = list;
+    }
+    get items() {
+        return this.filteredList;
+    }
     get isSearchValue() {
         return this._searchValue;
     }
     get displaced() {
-        return this.list.some((item) => item.array.length);
+        return this.list.some((item) => { var _a; return (_a = item.items) === null || _a === void 0 ? void 0 : _a.length; });
+    }
+    get getInvalid() {
+        return this.invalid;
+    }
+    get getInvalidMessage() {
+        return this.invalidMessage;
     }
     get getClasses() {
         return `${this.customClasses}`;
@@ -13106,38 +13176,24 @@ class CheckboxGroupComponent {
     trackByFn(index, item) {
         return item.id;
     }
-    writeValue(list) {
-        if (list) {
-            this.list = list;
-            this.filteredList = getSortedList(list, this.sortable);
-            this.checkedList = getCheckedItems(list);
+    writeValue(selectedValue) {
+        if (selectedValue !== null) {
+            this.checkedList = selectedValue;
+            this.innerList = getInnerList(this.list, this.checkedList);
+            this.filteredList = getSortedList(this.innerList, this.sortable);
             this._isInit = true;
         }
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    updateValue(list, checkedList) {
-        this.changed.emit(list);
-        this.changeChecked.emit();
-        this.modelChange.emit({ value: list, id: this.uuid });
-        this.modelCheckedChange.emit({ value: checkedList, id: this.uuid });
-        this.onChange(list);
-        this.onTouched();
-    }
     checkHeightGroupWrapper() {
         this._groupItemsWrapperHeight = this.groupItemsWrapper.nativeElement.scrollHeight;
     }
     updateCheckboxGroupSearchValue(searchValue) {
         this._searchValue = searchValue;
-        this.filteredList = filterSearchGroup$1(this.list, this._searchValue);
+        this.filteredList = filterSearchGroup$1(this.innerList, this._searchValue);
     }
     checkboxChanged({ value, item }) {
         const cloneList = cloneDeep(this.filteredList);
-        const findItem = getItemById$1(cloneList, item.id);
+        const findItem = getItemInnerById(cloneList, item.id);
         let changedItem = null;
         if (findItem) {
             changedItem = changeItemValue(findItem, value);
@@ -13150,6 +13206,7 @@ class CheckboxGroupComponent {
         if (changedItem) {
             this.modelItemChange.emit(changedItem);
         }
+        this._detector.detectChanges();
     }
     clearFilters() {
         const cloneList = cloneDeep(this.filteredList);
@@ -13159,15 +13216,29 @@ class CheckboxGroupComponent {
         this.checkedList = getCheckedItems(cloneList);
         this.updateValue(this.filteredList, this.checkedList);
     }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    updateValue(list, checkedList) {
+        this.changed.emit(checkedList);
+        this.changeChecked.emit();
+        this.modelChange.emit({ value: checkedList, id: this.uuid });
+        this.modelChangeInner.emit({ value: this.innerList, id: this.uuid });
+        this.onChange(checkedList);
+        this.onTouched();
+    }
 }
-CheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CheckboxGroupComponent, selector: "mrx-checkbox-group", inputs: { fields: "fields", items: "items", scrollMaxHeight: "scrollMaxHeight", searchable: "searchable", scrollable: "scrollable", sortable: "sortable", disabled: "disabled", readonly: "readonly", enableMessage: "enableMessage", searchPlaceholder: "searchPlaceholder", customClasses: "customClasses", tooltip: "tooltip", labelText: "labelText", linkText: "linkText" }, outputs: { changed: "changed", changeChecked: "changeChecked", modelChange: "modelChange", modelCheckedChange: "modelCheckedChange", modelItemChange: "modelItemChange" }, providers: [
+CheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CheckboxGroupComponent, selector: "mrx-checkbox-group", inputs: { fields: "fields", scrollMaxHeight: "scrollMaxHeight", searchable: "searchable", scrollable: "scrollable", sortable: "sortable", disabled: "disabled", readonly: "readonly", enableMessage: "enableMessage", searchPlaceholder: "searchPlaceholder", customClasses: "customClasses", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", invalid: "invalid", invalidMessage: "invalidMessage", items: "items" }, outputs: { changed: "changed", changeChecked: "changeChecked", modelChange: "modelChange", modelChangeInner: "modelChangeInner", modelItemChange: "modelItemChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => CheckboxGroupComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n  <mrx-checkbox-group-header\r\n    [searchable]=\"searchable\"\r\n    [searchPlaceholder]=\"searchPlaceholder\"\r\n    [tooltip]=\"tooltip\"\r\n    [labelText]=\"labelText\"\r\n    [linkText]=\"linkText\"\r\n    [checkedItemsCount]=\"checkedList.length\"\r\n    (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n    (clearFilters)=\"clearFilters()\"\r\n  ></mrx-checkbox-group-header>\r\n\r\n  <div\r\n      #groupItemsWrapper\r\n      *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n      class=\"mrx-checkbox-group-wrapper\"\r\n      [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n      [class.--active]=\"getShowScroll\"\r\n      [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n  >\r\n    <mrx-checkbox-group-item\r\n        *ngFor=\"let item of filteredList; let last = last\"\r\n        [displaced]=\"displaced || false\"\r\n        [item]=\"item\"\r\n        [isLast]=\"last\"\r\n        [animationTrigger]=\"!!isSearchValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (animationEnd)=\"checkHeightGroupWrapper()\"\r\n        (checkboxChanged)=\"checkboxChanged($event)\"\r\n    ></mrx-checkbox-group-item>\r\n  </div>\r\n\r\n  <ng-template #enableMessageTemplate>\r\n    <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n  </ng-template>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["item", "displaced", "level", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "checkboxChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n  <mrx-checkbox-group-header\r\n    [searchable]=\"searchable\"\r\n    [searchPlaceholder]=\"searchPlaceholder\"\r\n    [tooltip]=\"tooltip\"\r\n    [labelText]=\"labelText\"\r\n    [linkText]=\"linkText\"\r\n    [checkedItemsCount]=\"checkedList.length\"\r\n    (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n    (clearFilters)=\"clearFilters()\"\r\n  ></mrx-checkbox-group-header>\r\n\r\n  <div\r\n      #groupItemsWrapper\r\n      *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n      class=\"mrx-checkbox-group-wrapper\"\r\n      [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n      [class.--active]=\"getShowScroll\"\r\n      [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n  >\r\n    <mrx-checkbox-group-item\r\n        *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n        [displaced]=\"displaced || false\"\r\n        [item]=\"item\"\r\n        [isLast]=\"last\"\r\n        [animationTrigger]=\"!!isSearchValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [invalid]=\"invalid\"\r\n        (animationEnd)=\"checkHeightGroupWrapper()\"\r\n        (checkboxChanged)=\"checkboxChanged($event)\"\r\n    ></mrx-checkbox-group-item>\r\n  </div>\r\n\r\n  <ng-template #enableMessageTemplate>\r\n    <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n  </ng-template>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"getInvalid && getInvalidMessage\"\r\n    [invalidMessage]=\"getInvalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CheckboxGroupComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, providedIn: CheckboxGroupComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Injectable,
@@ -13182,10 +13253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             useExisting: forwardRef(() => CheckboxGroupComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n  <mrx-checkbox-group-header\r\n    [searchable]=\"searchable\"\r\n    [searchPlaceholder]=\"searchPlaceholder\"\r\n    [tooltip]=\"tooltip\"\r\n    [labelText]=\"labelText\"\r\n    [linkText]=\"linkText\"\r\n    [checkedItemsCount]=\"checkedList.length\"\r\n    (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n    (clearFilters)=\"clearFilters()\"\r\n  ></mrx-checkbox-group-header>\r\n\r\n  <div\r\n      #groupItemsWrapper\r\n      *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n      class=\"mrx-checkbox-group-wrapper\"\r\n      [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n      [class.--active]=\"getShowScroll\"\r\n      [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n  >\r\n    <mrx-checkbox-group-item\r\n        *ngFor=\"let item of filteredList; let last = last\"\r\n        [displaced]=\"displaced || false\"\r\n        [item]=\"item\"\r\n        [isLast]=\"last\"\r\n        [animationTrigger]=\"!!isSearchValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (animationEnd)=\"checkHeightGroupWrapper()\"\r\n        (checkboxChanged)=\"checkboxChanged($event)\"\r\n    ></mrx-checkbox-group-item>\r\n  </div>\r\n\r\n  <ng-template #enableMessageTemplate>\r\n    <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n  </ng-template>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fields: [{
-                type: Input
-            }], items: [{
+                    ], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n  <mrx-checkbox-group-header\r\n    [searchable]=\"searchable\"\r\n    [searchPlaceholder]=\"searchPlaceholder\"\r\n    [tooltip]=\"tooltip\"\r\n    [labelText]=\"labelText\"\r\n    [linkText]=\"linkText\"\r\n    [checkedItemsCount]=\"checkedList.length\"\r\n    (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n    (clearFilters)=\"clearFilters()\"\r\n  ></mrx-checkbox-group-header>\r\n\r\n  <div\r\n      #groupItemsWrapper\r\n      *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n      class=\"mrx-checkbox-group-wrapper\"\r\n      [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n      [class.--active]=\"getShowScroll\"\r\n      [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n  >\r\n    <mrx-checkbox-group-item\r\n        *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n        [displaced]=\"displaced || false\"\r\n        [item]=\"item\"\r\n        [isLast]=\"last\"\r\n        [animationTrigger]=\"!!isSearchValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [invalid]=\"invalid\"\r\n        (animationEnd)=\"checkHeightGroupWrapper()\"\r\n        (checkboxChanged)=\"checkboxChanged($event)\"\r\n    ></mrx-checkbox-group-item>\r\n  </div>\r\n\r\n  <ng-template #enableMessageTemplate>\r\n    <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n  </ng-template>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"getInvalid && getInvalidMessage\"\r\n    [invalidMessage]=\"getInvalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fields: [{
                 type: Input
             }], scrollMaxHeight: [{
                 type: Input
@@ -13211,6 +13280,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], linkText: [{
                 type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidMessage: [{
+                type: Input
+            }], items: [{
+                type: Input
             }], groupItemsWrapper: [{
                 type: ViewChild,
                 args: ['groupItemsWrapper']
@@ -13220,7 +13295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], modelChange: [{
                 type: Output
-            }], modelCheckedChange: [{
+            }], modelChangeInner: [{
                 type: Output
             }], modelItemChange: [{
                 type: Output
@@ -13509,10 +13584,10 @@ class RadioGroupItemComponent {
     }
 }
 RadioGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RadioGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: { invalid: "invalid", name: "name", selectedValue: "selectedValue", item: "item", displaced: "displaced", level: "level", bold: "bold", animationTrigger: "animationTrigger", isLast: "isLast", disabled: "disabled", readonly: "readonly" }, outputs: { animationEnd: "animationEnd", radioChanged: "radioChanged" }, ngImport: i0, template: "<div class=\"mrx-radio-group__item\" [class.mrx-radio-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-radio-group__item--array\" *ngIf=\"item.array.length && level < 10; else singleradioTemplate\">\r\n    <div class=\"mrx-radio-group__item--array-head mb-12px\">\r\n\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [value]=\"item.id\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [invalid]=\"invalid\"\r\n          [indeterminate]=\"isIndeterminate\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n\r\n    <div class=\"mrx-radio-group__item--array-list\">\r\n      <ng-container>\r\n        <mrx-radio-group-item\r\n            *ngFor=\"let child of item.array; trackBy: trackByFn\"\r\n            [level]=\"level + 1\"\r\n            [selectedValue]=\"selectedValue\"\r\n            [item]=\"child\"\r\n            [invalid]=\"invalid\"\r\n            [bold]=\"bold\"\r\n            [name]=\"name\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            (radioChanged)=\"radioChanged.emit($event)\"\r\n        ></mrx-radio-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleradioTemplate>\r\n    <div class=\"mrx-radio-group__item--single\">\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [indeterminate]=\"false\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [type]=\"'default'\"\r\n          [value]=\"item.id\"\r\n          [invalid]=\"invalid\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-radio-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-radio-group__item--array-list{padding-left:20px}.mrx-radio-group__item--buttom-ident{margin-bottom:12px}\n"], components: [{ type: RadioComponent, selector: "mrx-radio", inputs: ["required", "type", "name", "boldLabel", "disabled", "readonly", "placeholder", "label", "customClasses", "invalid", "value"] }, { type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "radioChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RadioGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: { invalid: "invalid", name: "name", selectedValue: "selectedValue", item: "item", displaced: "displaced", level: "level", bold: "bold", animationTrigger: "animationTrigger", isLast: "isLast", disabled: "disabled", readonly: "readonly" }, outputs: { animationEnd: "animationEnd", radioChanged: "radioChanged" }, ngImport: i0, template: "<div class=\"mrx-radio-group__item\" [class.mrx-radio-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-radio-group__item--array\" *ngIf=\"item.array.length && level < 10; else singleradioTemplate\">\r\n    <div class=\"mrx-radio-group__item--array-head mb-12px\">\r\n\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [value]=\"item.id\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [invalid]=\"invalid\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n\r\n    <div class=\"mrx-radio-group__item--array-list\">\r\n      <ng-container>\r\n        <mrx-radio-group-item\r\n            *ngFor=\"let child of item.array; trackBy: trackByFn\"\r\n            [level]=\"level + 1\"\r\n            [selectedValue]=\"selectedValue\"\r\n            [item]=\"child\"\r\n            [invalid]=\"invalid\"\r\n            [bold]=\"bold\"\r\n            [name]=\"name\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            (radioChanged)=\"radioChanged.emit($event)\"\r\n        ></mrx-radio-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleradioTemplate>\r\n    <div class=\"mrx-radio-group__item--single\">\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [type]=\"'default'\"\r\n          [value]=\"item.id\"\r\n          [invalid]=\"invalid\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-radio-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-radio-group__item--array-list{padding-left:20px}.mrx-radio-group__item--buttom-ident{margin-bottom:12px}\n"], components: [{ type: RadioComponent, selector: "mrx-radio", inputs: ["required", "type", "name", "boldLabel", "disabled", "readonly", "placeholder", "label", "customClasses", "invalid", "value"] }, { type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "radioChanged"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioGroupItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-radio-group-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-radio-group__item\" [class.mrx-radio-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-radio-group__item--array\" *ngIf=\"item.array.length && level < 10; else singleradioTemplate\">\r\n    <div class=\"mrx-radio-group__item--array-head mb-12px\">\r\n\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [value]=\"item.id\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [invalid]=\"invalid\"\r\n          [indeterminate]=\"isIndeterminate\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n\r\n    <div class=\"mrx-radio-group__item--array-list\">\r\n      <ng-container>\r\n        <mrx-radio-group-item\r\n            *ngFor=\"let child of item.array; trackBy: trackByFn\"\r\n            [level]=\"level + 1\"\r\n            [selectedValue]=\"selectedValue\"\r\n            [item]=\"child\"\r\n            [invalid]=\"invalid\"\r\n            [bold]=\"bold\"\r\n            [name]=\"name\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            (radioChanged)=\"radioChanged.emit($event)\"\r\n        ></mrx-radio-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleradioTemplate>\r\n    <div class=\"mrx-radio-group__item--single\">\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [indeterminate]=\"false\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [type]=\"'default'\"\r\n          [value]=\"item.id\"\r\n          [invalid]=\"invalid\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-radio-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-radio-group__item--array-list{padding-left:20px}.mrx-radio-group__item--buttom-ident{margin-bottom:12px}\n"] }]
+            args: [{ selector: 'mrx-radio-group-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-radio-group__item\" [class.mrx-radio-group__item--buttom-ident]=\"!isLast\">\r\n  <div class=\"mrx-radio-group__item--array\" *ngIf=\"item.array.length && level < 10; else singleradioTemplate\">\r\n    <div class=\"mrx-radio-group__item--array-head mb-12px\">\r\n\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [value]=\"item.id\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [invalid]=\"invalid\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n\r\n    <div class=\"mrx-radio-group__item--array-list\">\r\n      <ng-container>\r\n        <mrx-radio-group-item\r\n            *ngFor=\"let child of item.array; trackBy: trackByFn\"\r\n            [level]=\"level + 1\"\r\n            [selectedValue]=\"selectedValue\"\r\n            [item]=\"child\"\r\n            [invalid]=\"invalid\"\r\n            [bold]=\"bold\"\r\n            [name]=\"name\"\r\n            [disabled]=\"disabled\"\r\n            [readonly]=\"readonly\"\r\n            [animationTrigger]=\"animationTrigger\"\r\n            (radioChanged)=\"radioChanged.emit($event)\"\r\n        ></mrx-radio-group-item>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #singleradioTemplate>\r\n    <div class=\"mrx-radio-group__item--single\">\r\n      <mrx-radio\r\n          [ngModel]=\"selectedValue?.id\"\r\n          [name]=\"name\"\r\n          [boldLabel]=\"bold\"\r\n          [type]=\"'default'\"\r\n          [value]=\"item.id\"\r\n          [invalid]=\"invalid\"\r\n          [disabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          (ngModelChange)=\"radioChangeModel($event, item)\"\r\n      >{{ item.text }}</mrx-radio>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n", styles: [".mrx-radio-group__item--array-head{display:flex;justify-content:flex-start;align-items:center}.mrx-radio-group__item--array-list{padding-left:20px}.mrx-radio-group__item--buttom-ident{margin-bottom:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { invalid: [{
                 type: Input
             }], name: [{
@@ -17480,7 +17555,8 @@ class FormulaEditorComponent {
     }
     onFocus(event) {
         this.isFocused = true;
-        this._detector.markForCheck();
+        this._detector.detectChanges();
+        this._placeCaretAtEnd();
     }
     onClear() {
         this.updateValue('');