myrta-ui 17.2.7 → 17.2.8

package/fesm2022/myrta-ui.mjs

@@ -14911,10 +14911,6 @@ class CheckboxGroupComponent {
     customClasses = '';
     expandable = false;
     isExpanded = false;
-    minSelected = null; // минимальное количество выбранных
-    maxSelected = null; // максимальное количество выбранных
-    minSelectedMessage = 'Выберите минимум {count} вариант(ов)';
-    maxSelectedMessage = 'Выберите максимум {count} вариант(ов)';
     // TOOLTIP
     tooltip = '';
     // LABEL
@@ -14946,33 +14942,10 @@ class CheckboxGroupComponent {
         return this.list.some((item) => item.items?.length);
     }
     get getInvalid() {
-        // Проверяем базовую валидацию
-        if (this.invalid) {
-            return true;
-        }
-        // Проверяем минимальное количество
-        if (this.minSelected !== null && this.checkedList.length < this.minSelected) {
-            return true;
-        }
-        // Проверяем максимальное количество
-        if (this.maxSelected !== null && this.checkedList.length > this.maxSelected) {
-            return true;
-        }
-        return false;
+        return this.invalid;
     }
     get getInvalidMessage() {
-        // Если есть пользовательское сообщение об ошибке, используем его
-        if (this.invalidMessage) {
-            return this.invalidMessage;
-        }
-        // Генерируем сообщение на основе нарушенного ограничения
-        if (this.minSelected !== null && this.checkedList.length < this.minSelected) {
-            return this.minSelectedMessage.replace('{count}', this.minSelected.toString());
-        }
-        if (this.maxSelected !== null && this.checkedList.length > this.maxSelected) {
-            return this.maxSelectedMessage.replace('{count}', this.maxSelected.toString());
-        }
-        return '';
+        return this.invalidMessage;
     }
     get getClasses() {
         return `${this.customClasses}`;
@@ -15010,22 +14983,6 @@ class CheckboxGroupComponent {
         const findItem = getItemInnerById(cloneList, item.id);
         let changedItem = null;
         if (findItem) {
-            // Проверяем ограничение на максимальное количество при попытке выбрать
-            if (value === true && this.maxSelected !== null) {
-                const currentCheckedCount = getCheckedItems(cloneList).length;
-                if (currentCheckedCount >= this.maxSelected) {
-                    // Не позволяем выбрать больше максимума
-                    return;
-                }
-            }
-            // Проверяем ограничение на минимальное количество при попытке снять выбор
-            if (value === false && this.minSelected !== null) {
-                const currentCheckedCount = getCheckedItems(cloneList).length;
-                if (currentCheckedCount <= this.minSelected && this.isItemChecked(findItem)) {
-                    // Не позволяем снять выбор, если будет меньше минимума
-                    return;
-                }
-            }
             changedItem = changeItemValue(findItem, value);
             changeGroupValue(cloneList, item.parentId, value);
             getSortedList(cloneList, this.sortable);
@@ -15039,30 +14996,7 @@ class CheckboxGroupComponent {
         }
         this._detector.detectChanges();
     }
-    isItemChecked(item) {
-        return item.value === true;
-    }
-    checkAll() {
-        if (this.maxSelected !== null && this.innerList.length > this.maxSelected) {
-            // Если максимум меньше общего количества, выводим ошибку
-            console.warn(`Cannot select all items. Max selected is ${this.maxSelected}, total items is ${this.innerList.length}`);
-            return;
-        }
-        const cloneList = cloneDeep(this.innerList);
-        changeListValue(cloneList, true);
-        getSortedList(cloneList, this.sortable);
-        this.innerList = cloneList;
-        this.filteredList = filterSearchGroup$1(this.innerList, this._searchValue);
-        this.checkedList = getCheckedItems(cloneList);
-        this.updateValue([], this.checkedList);
-        this._detector.detectChanges();
-    }
     clearFilters() {
-        if (this.minSelected !== null && this.minSelected > 0) {
-            // Если есть минимальное ограничение, не позволяем очистить все
-            console.warn(`Cannot clear all items. Min selected is ${this.minSelected}`);
-            return;
-        }
         const cloneList = cloneDeep(this.filteredList);
         changeListValue(cloneList, false);
         getSortedList(cloneList, this.sortable);
@@ -15092,7 +15026,7 @@ class CheckboxGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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", expandable: "expandable", isExpanded: "isExpanded", minSelected: "minSelected", maxSelected: "maxSelected", minSelectedMessage: "minSelectedMessage", maxSelectedMessage: "maxSelectedMessage", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", invalid: "invalid", invalidMessage: "invalidMessage", items: "items" }, outputs: { changed: "changed", modelChange: "modelChange", changedInner: "changedInner", modelChangeInner: "modelChangeInner", modelItemChange: "modelItemChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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", expandable: "expandable", isExpanded: "isExpanded", tooltip: "tooltip", labelText: "labelText", linkText: "linkText", invalid: "invalid", invalidMessage: "invalidMessage", items: "items" }, outputs: { changed: "changed", modelChange: "modelChange", changedInner: "changedInner", modelChangeInner: "modelChangeInner", modelItemChange: "modelItemChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxGroupComponent),
@@ -15139,14 +15073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], isExpanded: [{
                 type: Input
-            }], minSelected: [{
-                type: Input
-            }], maxSelected: [{
-                type: Input
-            }], minSelectedMessage: [{
-                type: Input
-            }], maxSelectedMessage: [{
-                type: Input
             }], tooltip: [{
                 type: Input
             }], labelText: [{
@@ -15225,6 +15151,7 @@ class RadioComponent {
     placeholder = '';
     label = '';
     customClasses = '';
+    id = '';
     invalid = false;
     _value;
     get value() {
@@ -15257,13 +15184,13 @@ class RadioComponent {
         this.onChange(this.modelValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioComponent, selector: "mrx-radio", inputs: { required: "required", type: "type", name: "name", boldLabel: "boldLabel", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", label: "label", customClasses: "customClasses", invalid: "invalid", _value: ["value", "_value"] }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioComponent, selector: "mrx-radio", inputs: { required: "required", type: "type", name: "name", boldLabel: "boldLabel", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", label: "label", customClasses: "customClasses", id: "id", invalid: "invalid", _value: ["value", "_value"] }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"mrx-radio__wrapper\">\r\n  <label\r\n    class=\"mrx-radio\"\r\n    [class]=\"getClasses\"\r\n    [class.mrx-input-error]=\"invalid\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [name]=\"name\"\r\n      [value]=\"value\"\r\n      [(ngModel)]=\"modelValue\"\r\n      [disabled]=\"disabled || readonly\"\r\n      [readonly]=\"readonly\"\r\n      (change)=\"valueChanged(value)\"\r\n    />\r\n\r\n    <span class=\"mrx-radio__mark\"><span class=\"mrx-radio__mark__inner\"></span></span>\r\n\r\n    <span class=\"ml-1\" [class]=\"boldLabel ? 'mrx-radio__label--bold' : 'mrx-radio__label'\">\r\n        {{label}}\r\n      <ng-content></ng-content>\r\n        <span *ngIf=\"required && !disabled\" class=\"required-active\">*</span>\r\n    </span>\r\n  </label>\r\n</div>\r\n", styles: [".mrx-radio.mrx-radio{display:flex!important;align-items:center;min-height:auto!important;margin-bottom:0!important;overflow:visible;background-color:transparent;cursor:pointer;box-sizing:border-box;position:relative}.mrx-radio input[type=radio]{position:absolute;z-index:-1;opacity:0;width:0;height:0;margin:0}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark{display:flex;align-items:center;justify-content:center;height:var(--sizing-4);width:var(--sizing-4);min-width:var(--sizing-4);border:var(--border-width-checkbox) solid var(--neutral-bg-stroke-default, #DBDFE5);border-radius:50%;transition:border .2s;position:relative}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark .mrx-radio__mark__inner{display:block;width:6px;height:6px;border-radius:50%;background:var(--brand-bg-primary-default, #2A6AB8);opacity:0;transition:opacity .2s}.mrx-radio.mrx-radio.mrx-radio-default:hover .mrx-radio__mark{border-color:var(--neutral-bg-stroke-hover, #0F54AA)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark{border-color:var(--brand-bg-primary-default, #2A6AB8)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark .mrx-radio__mark__inner{opacity:1}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:not(:checked):disabled+.mrx-radio__mark{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark{border-color:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark .mrx-radio__mark__inner{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-input-error.mrx-radio-default .mrx-radio__mark{border-color:var(--system-bg-controls-negative-default, #B83B15)}.mrx-radio.mrx-radio .mrx-radio__label{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:400;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .mrx-radio__label--bold{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:700;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative, #C65836);margin-left:var(--spacing-1);position:relative;display:inline-block}.mrx-radio__wrapper.mrx-radio__wrapper{display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"mrx-radio__wrapper\">\r\n  <label\r\n    class=\"mrx-radio\"\r\n    [class]=\"getClasses\"\r\n    [class.mrx-input-error]=\"invalid\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"id\"\r\n      [name]=\"name\"\r\n      [value]=\"value\"\r\n      [(ngModel)]=\"modelValue\"\r\n      [disabled]=\"disabled || readonly\"\r\n      [readonly]=\"readonly\"\r\n      (change)=\"valueChanged(value)\"\r\n    />\r\n\r\n    <span class=\"mrx-radio__mark\"><span class=\"mrx-radio__mark__inner\"></span></span>\r\n\r\n    <span class=\"ml-1\" [class]=\"boldLabel ? 'mrx-radio__label--bold' : 'mrx-radio__label'\">\r\n        {{label}}\r\n      <ng-content></ng-content>\r\n        <span *ngIf=\"required && !disabled\" class=\"required-active\">*</span>\r\n    </span>\r\n  </label>\r\n</div>\r\n", styles: [".mrx-radio.mrx-radio{display:flex!important;align-items:center;min-height:auto!important;margin-bottom:0!important;overflow:visible;background-color:transparent;cursor:pointer;box-sizing:border-box;position:relative}.mrx-radio input[type=radio]{position:absolute;z-index:-1;opacity:0;width:0;height:0;margin:0}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark{display:flex;align-items:center;justify-content:center;height:var(--sizing-4);width:var(--sizing-4);min-width:var(--sizing-4);border:var(--border-width-checkbox) solid var(--neutral-bg-stroke-default, #DBDFE5);border-radius:50%;transition:border .2s;position:relative}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark .mrx-radio__mark__inner{display:block;width:6px;height:6px;border-radius:50%;background:var(--brand-bg-primary-default, #2A6AB8);opacity:0;transition:opacity .2s}.mrx-radio.mrx-radio.mrx-radio-default:hover .mrx-radio__mark{border-color:var(--neutral-bg-stroke-hover, #0F54AA)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark{border-color:var(--brand-bg-primary-default, #2A6AB8)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark .mrx-radio__mark__inner{opacity:1}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:not(:checked):disabled+.mrx-radio__mark{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark{border-color:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark .mrx-radio__mark__inner{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-input-error.mrx-radio-default .mrx-radio__mark{border-color:var(--system-bg-controls-negative-default, #B83B15)}.mrx-radio.mrx-radio .mrx-radio__label{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:400;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .mrx-radio__label--bold{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:700;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative, #C65836);margin-left:var(--spacing-1);position:relative;display:inline-block}.mrx-radio__wrapper.mrx-radio__wrapper{display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "17.3.12", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -15273,7 +15200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef(() => RadioComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"mrx-radio__wrapper\">\r\n  <label\r\n    class=\"mrx-radio\"\r\n    [class]=\"getClasses\"\r\n    [class.mrx-input-error]=\"invalid\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [name]=\"name\"\r\n      [value]=\"value\"\r\n      [(ngModel)]=\"modelValue\"\r\n      [disabled]=\"disabled || readonly\"\r\n      [readonly]=\"readonly\"\r\n      (change)=\"valueChanged(value)\"\r\n    />\r\n\r\n    <span class=\"mrx-radio__mark\"><span class=\"mrx-radio__mark__inner\"></span></span>\r\n\r\n    <span class=\"ml-1\" [class]=\"boldLabel ? 'mrx-radio__label--bold' : 'mrx-radio__label'\">\r\n        {{label}}\r\n      <ng-content></ng-content>\r\n        <span *ngIf=\"required && !disabled\" class=\"required-active\">*</span>\r\n    </span>\r\n  </label>\r\n</div>\r\n", styles: [".mrx-radio.mrx-radio{display:flex!important;align-items:center;min-height:auto!important;margin-bottom:0!important;overflow:visible;background-color:transparent;cursor:pointer;box-sizing:border-box;position:relative}.mrx-radio input[type=radio]{position:absolute;z-index:-1;opacity:0;width:0;height:0;margin:0}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark{display:flex;align-items:center;justify-content:center;height:var(--sizing-4);width:var(--sizing-4);min-width:var(--sizing-4);border:var(--border-width-checkbox) solid var(--neutral-bg-stroke-default, #DBDFE5);border-radius:50%;transition:border .2s;position:relative}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark .mrx-radio__mark__inner{display:block;width:6px;height:6px;border-radius:50%;background:var(--brand-bg-primary-default, #2A6AB8);opacity:0;transition:opacity .2s}.mrx-radio.mrx-radio.mrx-radio-default:hover .mrx-radio__mark{border-color:var(--neutral-bg-stroke-hover, #0F54AA)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark{border-color:var(--brand-bg-primary-default, #2A6AB8)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark .mrx-radio__mark__inner{opacity:1}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:not(:checked):disabled+.mrx-radio__mark{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark{border-color:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark .mrx-radio__mark__inner{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-input-error.mrx-radio-default .mrx-radio__mark{border-color:var(--system-bg-controls-negative-default, #B83B15)}.mrx-radio.mrx-radio .mrx-radio__label{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:400;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .mrx-radio__label--bold{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:700;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative, #C65836);margin-left:var(--spacing-1);position:relative;display:inline-block}.mrx-radio__wrapper.mrx-radio__wrapper{display:flex;align-items:center;justify-content:flex-start}\n"] }]
+                    ], template: "<div class=\"mrx-radio__wrapper\">\r\n  <label\r\n    class=\"mrx-radio\"\r\n    [class]=\"getClasses\"\r\n    [class.mrx-input-error]=\"invalid\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"id\"\r\n      [name]=\"name\"\r\n      [value]=\"value\"\r\n      [(ngModel)]=\"modelValue\"\r\n      [disabled]=\"disabled || readonly\"\r\n      [readonly]=\"readonly\"\r\n      (change)=\"valueChanged(value)\"\r\n    />\r\n\r\n    <span class=\"mrx-radio__mark\"><span class=\"mrx-radio__mark__inner\"></span></span>\r\n\r\n    <span class=\"ml-1\" [class]=\"boldLabel ? 'mrx-radio__label--bold' : 'mrx-radio__label'\">\r\n        {{label}}\r\n      <ng-content></ng-content>\r\n        <span *ngIf=\"required && !disabled\" class=\"required-active\">*</span>\r\n    </span>\r\n  </label>\r\n</div>\r\n", styles: [".mrx-radio.mrx-radio{display:flex!important;align-items:center;min-height:auto!important;margin-bottom:0!important;overflow:visible;background-color:transparent;cursor:pointer;box-sizing:border-box;position:relative}.mrx-radio input[type=radio]{position:absolute;z-index:-1;opacity:0;width:0;height:0;margin:0}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark{display:flex;align-items:center;justify-content:center;height:var(--sizing-4);width:var(--sizing-4);min-width:var(--sizing-4);border:var(--border-width-checkbox) solid var(--neutral-bg-stroke-default, #DBDFE5);border-radius:50%;transition:border .2s;position:relative}.mrx-radio.mrx-radio.mrx-radio-default .mrx-radio__mark .mrx-radio__mark__inner{display:block;width:6px;height:6px;border-radius:50%;background:var(--brand-bg-primary-default, #2A6AB8);opacity:0;transition:opacity .2s}.mrx-radio.mrx-radio.mrx-radio-default:hover .mrx-radio__mark{border-color:var(--neutral-bg-stroke-hover, #0F54AA)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark{border-color:var(--brand-bg-primary-default, #2A6AB8)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:checked+.mrx-radio__mark .mrx-radio__mark__inner{opacity:1}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:not(:checked):disabled+.mrx-radio__mark{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark{border-color:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-radio-default input[type=radio]:disabled+.mrx-radio__mark .mrx-radio__mark__inner{background:var(--neutral-control-bg-accent-disabled, #71767E)}.mrx-radio.mrx-radio.mrx-input-error.mrx-radio-default .mrx-radio__mark{border-color:var(--system-bg-controls-negative-default, #B83B15)}.mrx-radio.mrx-radio .mrx-radio__label{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:400;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .mrx-radio__label--bold{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:700;line-height:var(--body-md-line-height)}.mrx-radio.mrx-radio .required-active{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height);color:var(--system-icon-negative, #C65836);margin-left:var(--spacing-1);position:relative;display:inline-block}.mrx-radio__wrapper.mrx-radio__wrapper{display:flex;align-items:center;justify-content:flex-start}\n"] }]
         }], propDecorators: { required: [{
                 type: Input
             }], type: [{
@@ -15292,6 +15219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], customClasses: [{
                 type: Input
+            }], id: [{
+                type: Input
             }], invalid: [{
                 type: Input
             }], _value: [{
@@ -15409,7 +15338,7 @@ class RadioGroupItemComponent {
         this.detector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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: { radioChanged: "radioChanged" }, ngImport: i0, template: "<div class=\"mrx-radio-group__item\" [class.mrx-radio-group__item--buttom-ident]=\"!isLast\">\r\n  @if (item.items.length && level < 10) {\r\n    <div class=\"mrx-radio-group__item--array\">\r\n      <div class=\"mrx-radio-group__item--array-head mb-12px\">\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        @for (child of item.items; track child.id) {\r\n          <mrx-radio-group-item\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        }\r\n      </div>\r\n    </div>\r\n  } @else {\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  }\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"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioComponent, selector: "mrx-radio", inputs: ["required", "type", "name", "boldLabel", "disabled", "readonly", "placeholder", "label", "customClasses", "invalid", "value"] }, { kind: "component", type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["radioChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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: { radioChanged: "radioChanged" }, ngImport: i0, template: "<div class=\"mrx-radio-group__item\" [class.mrx-radio-group__item--buttom-ident]=\"!isLast\">\r\n  @if (item.items.length && level < 10) {\r\n    <div class=\"mrx-radio-group__item--array\">\r\n      <div class=\"mrx-radio-group__item--array-head mb-12px\">\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        @for (child of item.items; track child.id) {\r\n          <mrx-radio-group-item\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        }\r\n      </div>\r\n    </div>\r\n  } @else {\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  }\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"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioComponent, selector: "mrx-radio", inputs: ["required", "type", "name", "boldLabel", "disabled", "readonly", "placeholder", "label", "customClasses", "id", "invalid", "value"] }, { kind: "component", type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["radioChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioGroupItemComponent, decorators: [{
             type: Component,
@@ -15492,7 +15421,7 @@ class RadioGroupComponent {
     uuid = v4();
     fields = [];
     searchSize = 'medium';
-    name = '';
+    name = `radio-group-${v4()}`;
     scrollMaxHeight = 200;
     searchable = false;
     bold = false;