myrta-ui 17.0.34 → 17.0.36

package/fesm2022/myrta-ui.mjs

@@ -2688,6 +2688,8 @@ class SelectComponent {
     dropdown;
     optionTemplate;
     labelTemplate;
+    popupHeaderTemplate;
+    popupFooterTemplate;
     changed = new EventEmitter();
     modelChange = new EventEmitter();
     get readonlyClass() {
@@ -2731,6 +2733,9 @@ class SelectComponent {
         this.dropdown.updatePopup();
         this.updateValue(this.innerItems);
     }
+    clearItem(item) {
+        this.onUnselect(item);
+    }
     onUnselect(item) {
         this.innerItems.forEach(i => {
             if (i.__id === item.__id) {
@@ -2802,7 +2807,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\"\r\n     [class]=\"getClasses\"\r\n     [class.mrx-input-error]=\"invalid\"\r\n     [class.-disabled]=\"disabled\"\r\n     [class.-readonly]=\"readonly\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n      @if (getSelectedLabels.length) {\r\n        @if (multiple) {\r\n          <div class=\"mrx-select__input__values\">\r\n            @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n              @if (labelTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n                ></ng-container>\r\n              } @else {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n                ></ng-container>\r\n              }\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"mrx-select__input__value\">\r\n            @for (item of getSelectedLabels; track item) {\r\n              {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"mrx-select__input__placeholder\"></div>\r\n      }\r\n\r\n      <div class=\"mrx-select__input__controls\">\r\n        @if (isLoading) {\r\n          <mrx-loader\r\n            [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n            [color]=\"'brand'\"\r\n          ></mrx-loader>\r\n        }\r\n\r\n        @if (getSelectedLabels.length && clearable) {\r\n          <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n            <span\r\n              class=\"mrx-icon icon-close\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n          </div>\r\n        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n            <span\r\n              class=\"mrx-icon\"\r\n              [class.icon-chevron-up]=\"isOpen\"\r\n              [class.icon-chevron-down]=\"!isOpen\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n        <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n          @if (optionTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n            ></ng-container>\r\n          }\r\n        </mrx-popup-item>\r\n      } @empty {\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">\r\n            \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n          </div>\r\n        </mrx-popup-item>\r\n      }\r\n\r\n      <ng-template #headerTemplate>\r\n        @if (searchable) {\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-text\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-text>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"invalid && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  @if (asLabel(item); as label) {\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label[bindLabel] : label }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  @if (asOption(item); as option) {\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        @if (bindIcon && option[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n      </div>\r\n\r\n      @if (option.__selected) {\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "modelChange"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "popupHeaderTemplate", first: true, predicate: ["popupHeaderTemplate"], descendants: true }, { propertyName: "popupFooterTemplate", first: true, predicate: ["popupFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\"\r\n     [class]=\"getClasses\"\r\n     [class.mrx-input-error]=\"invalid\"\r\n     [class.-disabled]=\"disabled\"\r\n     [class.-readonly]=\"readonly\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n      @if (getSelectedLabels.length) {\r\n        @if (multiple) {\r\n          <div class=\"mrx-select__input__values\">\r\n            @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n              @if (labelTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n                ></ng-container>\r\n              } @else {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item, first, last}\"\r\n                ></ng-container>\r\n              }\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"mrx-select__input__value\">\r\n            @for (item of getSelectedLabels; track item) {\r\n              {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"mrx-select__input__placeholder\"></div>\r\n      }\r\n\r\n      <div class=\"mrx-select__input__controls\">\r\n        @if (isLoading) {\r\n          <mrx-loader\r\n            [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n            [color]=\"'brand'\"\r\n          ></mrx-loader>\r\n        }\r\n\r\n        @if (getSelectedLabels.length && clearable) {\r\n          <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n            <span\r\n              class=\"mrx-icon icon-close\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n          </div>\r\n        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n            <span\r\n              class=\"mrx-icon\"\r\n              [class.icon-chevron-up]=\"isOpen\"\r\n              [class.icon-chevron-down]=\"!isOpen\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n        <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n          @if (optionTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item, first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item, first, last}\"\r\n            ></ng-container>\r\n          }\r\n        </mrx-popup-item>\r\n      } @empty {\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">\r\n            \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n          </div>\r\n        </mrx-popup-item>\r\n      }\r\n\r\n      <ng-template #headerTemplate>\r\n        @if (searchable) {\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-text\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-text>\r\n          </div>\r\n        }\r\n\r\n        @if (popupHeaderTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n          ></ng-container>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (popupFooterTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n          ></ng-container>\r\n        }\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"invalid && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  @if (asLabel(item); as label) {\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label[bindLabel] : label['label'] }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  @if (asOption(item); as option) {\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        @if (bindIcon && option[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n      </div>\r\n\r\n      @if (option.__selected) {\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "modelChange"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -2812,7 +2817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"mrx-select\"\r\n     [class]=\"getClasses\"\r\n     [class.mrx-input-error]=\"invalid\"\r\n     [class.-disabled]=\"disabled\"\r\n     [class.-readonly]=\"readonly\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n      @if (getSelectedLabels.length) {\r\n        @if (multiple) {\r\n          <div class=\"mrx-select__input__values\">\r\n            @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n              @if (labelTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n                ></ng-container>\r\n              } @else {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n                ></ng-container>\r\n              }\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"mrx-select__input__value\">\r\n            @for (item of getSelectedLabels; track item) {\r\n              {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"mrx-select__input__placeholder\"></div>\r\n      }\r\n\r\n      <div class=\"mrx-select__input__controls\">\r\n        @if (isLoading) {\r\n          <mrx-loader\r\n            [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n            [color]=\"'brand'\"\r\n          ></mrx-loader>\r\n        }\r\n\r\n        @if (getSelectedLabels.length && clearable) {\r\n          <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n            <span\r\n              class=\"mrx-icon icon-close\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n          </div>\r\n        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n            <span\r\n              class=\"mrx-icon\"\r\n              [class.icon-chevron-up]=\"isOpen\"\r\n              [class.icon-chevron-down]=\"!isOpen\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n        <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n          @if (optionTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: getCleanSelectItem(item), first, last}\"\r\n            ></ng-container>\r\n          }\r\n        </mrx-popup-item>\r\n      } @empty {\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">\r\n            \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n          </div>\r\n        </mrx-popup-item>\r\n      }\r\n\r\n      <ng-template #headerTemplate>\r\n        @if (searchable) {\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-text\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-text>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"invalid && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  @if (asLabel(item); as label) {\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label[bindLabel] : label }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  @if (asOption(item); as option) {\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        @if (bindIcon && option[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n      </div>\r\n\r\n      @if (option.__selected) {\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"] }]
+                    ], template: "<div class=\"mrx-select\"\r\n     [class]=\"getClasses\"\r\n     [class.mrx-input-error]=\"invalid\"\r\n     [class.-disabled]=\"disabled\"\r\n     [class.-readonly]=\"readonly\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n      @if (getSelectedLabels.length) {\r\n        @if (multiple) {\r\n          <div class=\"mrx-select__input__values\">\r\n            @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n              @if (labelTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n                ></ng-container>\r\n              } @else {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                  [ngTemplateOutletContext]=\"{item, first, last}\"\r\n                ></ng-container>\r\n              }\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"mrx-select__input__value\">\r\n            @for (item of getSelectedLabels; track item) {\r\n              {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"mrx-select__input__placeholder\"></div>\r\n      }\r\n\r\n      <div class=\"mrx-select__input__controls\">\r\n        @if (isLoading) {\r\n          <mrx-loader\r\n            [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n            [color]=\"'brand'\"\r\n          ></mrx-loader>\r\n        }\r\n\r\n        @if (getSelectedLabels.length && clearable) {\r\n          <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n            <span\r\n              class=\"mrx-icon icon-close\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n          </div>\r\n        }\r\n        <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n            <span\r\n              class=\"mrx-icon\"\r\n              [class.icon-chevron-up]=\"isOpen\"\r\n              [class.icon-chevron-down]=\"!isOpen\"\r\n              [class.icon-font-24]=\"size === 'large'\"\r\n              [class.icon-font-16]=\"size === 'medium'\"\r\n            ></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n        <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n          @if (optionTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item, first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item, first, last}\"\r\n            ></ng-container>\r\n          }\r\n        </mrx-popup-item>\r\n      } @empty {\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">\r\n            \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n          </div>\r\n        </mrx-popup-item>\r\n      }\r\n\r\n      <ng-template #headerTemplate>\r\n        @if (searchable) {\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-text\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-text>\r\n          </div>\r\n        }\r\n\r\n        @if (popupHeaderTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n          ></ng-container>\r\n        }\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (popupFooterTemplate) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n          ></ng-container>\r\n        }\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"invalid && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n\r\n  <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  @if (asLabel(item); as label) {\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label[bindLabel] : label['label'] }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  @if (asOption(item); as option) {\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        @if (bindIcon && option[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n      </div>\r\n\r\n      @if (option.__selected) {\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"] }]
         }], propDecorators: { fields: [{
                 type: Input
             }], items: [{
@@ -2856,6 +2861,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], labelTemplate: [{
                 type: ContentChild,
                 args: ['labelTemplate']
+            }], popupHeaderTemplate: [{
+                type: ContentChild,
+                args: ['popupHeaderTemplate']
+            }], popupFooterTemplate: [{
+                type: ContentChild,
+                args: ['popupFooterTemplate']
             }], changed: [{
                 type: Output
             }], modelChange: [{
@@ -17232,6 +17243,43 @@ var StepperClasses;
     StepperClasses["success"] = "mrx-stepper-success";
 })(StepperClasses || (StepperClasses = {}));
 
+class ContentTitleWrapperComponent {
+    customClasses = '';
+    title = '';
+    contentTitleControls;
+    get getClasses() {
+        return `${this.customClasses}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentTitleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ContentTitleWrapperComponent, selector: "mrx-content-title-wrapper", inputs: { customClasses: "customClasses", title: "title" }, queries: [{ propertyName: "contentTitleControls", first: true, predicate: ["contentTitleControls"], descendants: true }], ngImport: i0, template: "<div class=\"brdb mb-4 px-4 py-2\" [class]=\"getClasses\">\r\n  <div class=\"content-title-wrapper\">\r\n    <div class=\"content-title-wrapper__box\">\r\n      <div class=\"content-title-wrapper__title\">\r\n        <span class=\"mrx-icon icon-burger icon-font-24\"></span>\r\n        <h1 class=\"content-title-wrapper__title--text\">{{ title }}</h1>\r\n      </div>\r\n\r\n      @if (contentTitleControls) {\r\n        <div class=\"content-title-wrapper__controls\">\r\n          <ng-container [ngTemplateOutlet]=\"contentTitleControls\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".content-title-wrapper{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}.content-title-wrapper__box{display:flex;align-items:center;justify-content:space-between;flex-grow:1;flex-wrap:nowrap;gap:24px}.content-title-wrapper__title{display:flex;align-items:center;justify-content:space-between;gap:8px}.content-title-wrapper__title .icon-burger{display:none;font-weight:700;align-self:flex-start;margin-top:4px}.content-title-wrapper__title--text{font-family:var(--headlines-lvl-3-font-family, \"PT Sans Caption\");font-weight:var(--headlines-lvl-3-font-weight, 700);line-height:var(--headlines-lvl-3-line-height, 28px);font-size:var(--headlines-lvl-3-font-size, 24px)}.content-title-wrapper__controls{display:flex;align-self:flex-start}.content-title-wrapper__controls>mrx-button::ng-deep .mrx-btn-label{white-space:nowrap}@media (max-width: 991px){.content-title-wrapper__box{flex-wrap:wrap}.content-title-wrapper__title .icon-burger{display:block}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentTitleWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mrx-content-title-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"brdb mb-4 px-4 py-2\" [class]=\"getClasses\">\r\n  <div class=\"content-title-wrapper\">\r\n    <div class=\"content-title-wrapper__box\">\r\n      <div class=\"content-title-wrapper__title\">\r\n        <span class=\"mrx-icon icon-burger icon-font-24\"></span>\r\n        <h1 class=\"content-title-wrapper__title--text\">{{ title }}</h1>\r\n      </div>\r\n\r\n      @if (contentTitleControls) {\r\n        <div class=\"content-title-wrapper__controls\">\r\n          <ng-container [ngTemplateOutlet]=\"contentTitleControls\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".content-title-wrapper{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}.content-title-wrapper__box{display:flex;align-items:center;justify-content:space-between;flex-grow:1;flex-wrap:nowrap;gap:24px}.content-title-wrapper__title{display:flex;align-items:center;justify-content:space-between;gap:8px}.content-title-wrapper__title .icon-burger{display:none;font-weight:700;align-self:flex-start;margin-top:4px}.content-title-wrapper__title--text{font-family:var(--headlines-lvl-3-font-family, \"PT Sans Caption\");font-weight:var(--headlines-lvl-3-font-weight, 700);line-height:var(--headlines-lvl-3-line-height, 28px);font-size:var(--headlines-lvl-3-font-size, 24px)}.content-title-wrapper__controls{display:flex;align-self:flex-start}.content-title-wrapper__controls>mrx-button::ng-deep .mrx-btn-label{white-space:nowrap}@media (max-width: 991px){.content-title-wrapper__box{flex-wrap:wrap}.content-title-wrapper__title .icon-burger{display:block}}\n"] }]
+        }], propDecorators: { customClasses: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], contentTitleControls: [{
+                type: ContentChild,
+                args: ['contentTitleControls']
+            }] } });
+
+class ContentTitleWrapperModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentTitleWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ContentTitleWrapperModule, declarations: [ContentTitleWrapperComponent], imports: [CommonModule], exports: [ContentTitleWrapperComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentTitleWrapperModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentTitleWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ContentTitleWrapperComponent],
+                    imports: [CommonModule],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    exports: [ContentTitleWrapperComponent]
+                }]
+        }] });
+
 class PdfViewerComponent {
     _pdfViewerService;
     _renderer;
@@ -17541,5 +17589,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertColorClasses, AlertComponent, AlertIconClasses, AlertModule, BadgeColorClassesEnum, BadgeComponent, BadgeGroupComponent, BadgeSizeEnum, BadgeTagTypeClassesEnum, BadgeTargetTypesEnum, BadgeTypeEnum, BadgesModule, BreadcrumbsComponent, BreadcrumbsModule, BreadcrumbsTypeEnum, ButtonColorsEnum, ButtonComponent, ButtonIconPositionEnum, ButtonModule, ButtonSizesEnum, ButtonTypesEnum, CdkTooltipDirective, CdkTooltipModule, CharsLeftComponent, CharsLeftModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, ColumnComponent, ContentWrapperComponent, ContentWrapperModule, ContentWrapperTypeEnum, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountryISO$1 as CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateSizesEnum$2 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDatepickerComponent, InputDatepickerModule, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, MODAL_CONFIG, MODAL_DATA, ModalAlignButtonsEnum, ModalBackdropTypeClasses, ModalColorEnum, ModalComponent, ModalModule, ModalRef, ModalService, ModalServiceComponent, ModalServiceModule, ModalSizesEnum, ModalType, ModalTypeClasses, MrxAutoSaveActionsEnum, MrxAutosaveService, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PopupComponent, PopupItemComponent, PopupModule, PopupTriggerDirective, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SaveStoreModule, SelectComponent, SelectModule, SelectSizeEnum, SidePageComponent, SidePageHeaderSizesEnum, SidePageModule, SidePagePositionEnum, SidePageSizesEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone, ToasterPosition, ToasterService, ToasterServiceModule, ToasterType, Tooltip, TooltipComponent, TooltipModule, TooltipService, TooltipTextPositionEnum, TooltipTriggerComponent, TooltipTriggerEnum, TruncateDirective, TruncateDirectiveModule, TruncateModule, TruncatePipe, TruncateTextComponent, TruncateTextModule, ValidationMethodsEnum, ValidationOptionsEnum, ValidationTypesEnum, WarningMessageComponent, WarningMessageModule, WidgetWrapperComponent, WidgetWrapperModule, autosaveAddId, autosaveError, autosaveErrorFor, autosaveStart, autosaveStartFor, autosaveStop, autosaveStopFor, autosaveSuccess, autosaveSuccessFor, convertBase64ToFile, dateTimeFormat, defaultConfig, defaultCustomConfig, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, innerListToList, sHashCode, selectFields, selectMrxAutoSaveState, sliceDate, toBytes, toDate, toNumberFormat, toastrDefaultConfig, wordForm };
+export { AlertColorClasses, AlertComponent, AlertIconClasses, AlertModule, BadgeColorClassesEnum, BadgeComponent, BadgeGroupComponent, BadgeSizeEnum, BadgeTagTypeClassesEnum, BadgeTargetTypesEnum, BadgeTypeEnum, BadgesModule, BreadcrumbsComponent, BreadcrumbsModule, BreadcrumbsTypeEnum, ButtonColorsEnum, ButtonComponent, ButtonIconPositionEnum, ButtonModule, ButtonSizesEnum, ButtonTypesEnum, CdkTooltipDirective, CdkTooltipModule, CharsLeftComponent, CharsLeftModule, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupModule, CheckboxModule, ColumnComponent, ContentTitleWrapperComponent, ContentTitleWrapperModule, ContentWrapperComponent, ContentWrapperModule, ContentWrapperTypeEnum, ControlsItemComponent, ControlsVisibilityEnum, ControlsWrapperComponent, ControlsWrapperModule, CountryISO$1 as CountryISO, CurrencyModule, CurrencyPipe, DateFormatModule, DateFormatPipe, DateTimeFormatPipe, DefaultPagerSettings, DropdownComponent, DropdownModule, EditorComponent, EditorModule, ErrorMessageComponent, ErrorMessageModule, FileUploadService, GalleryComponent, GalleryModule, HideAfterClickDirective, HintErrorMessageComponent, HintErrorMessageModule, IconButtonComponent, IconButtonModule, IconButtonSizeEnum, IconButtonStateEnum, IconButtonTypeEnum, InputDateSizesEnum$2 as InputDateSizesEnum, InputDateTimeComponent, InputDateTimeModule, InputDatepickerComponent, InputDatepickerModule, InputFileComponent, InputFileImageComponent, InputFileImageModule, InputFileImageTypeEnum, InputFileModule, InputNumberComponent, InputNumberModule, InputNumberSizesEnum, InputOptComponent, InputOptModule, InputPasswordComponent, InputPasswordModule, InputPasswordSizesEnum, InputPhoneComponent, InputPhoneModule, InputSearchComponent, InputSearchModule, InputSearchSizesEnum, InputSelectComponent, InputSelectModule, InputSelectSizeEnum, InputTelComponent, InputTelModule, InputTextComponent, InputTextIconColorEnum, InputTextModule, InputTextSizesEnum, InputTextareaComponent, InputTextareaModule, InputTextareaSizesEnum, InputTimepickerComponent, InputTimepickerModule, JsonEditorComponent, JsonEditorModule, JsonEditorOptions, LabelComponent, LabelModule, LinkComponent, LinkModule, LinkSizesEnum, LinkTargetTypesEnum, LinkTypesEnum, LoaderColorEnum, LoaderComponent, LoaderModule, LoaderSizesEnum, MODAL_CONFIG, MODAL_DATA, ModalAlignButtonsEnum, ModalBackdropTypeClasses, ModalColorEnum, ModalComponent, ModalModule, ModalRef, ModalService, ModalServiceComponent, ModalServiceModule, ModalSizesEnum, ModalType, ModalTypeClasses, MrxAutoSaveActionsEnum, MrxAutosaveService, MrxFormValidator, NgxOtpBehavior, PagesNavComponent, PagesNavEnum, PagesNavModule, PaginatorComponent, PaginatorModule, PaginatorPositionCss, PdfViewerComponent, PdfViewerComponentModule, PhoneFormatModule, PhoneFormatPipe, PopupComponent, PopupItemComponent, PopupModule, PopupTriggerDirective, PreviewEnum, ProgressClasses, ProgressComponent, ProgressModule, RadioComponent, RadioGroupComponent, RadioGroupModule, RadioModule, RadioTypesEnum, RatingComponent, RatingModule, RatingSizesEnum, RatingValueSizesEnum, RatingWrapperSizesEnum, SafeModule, SafePipe, SaveStateComponent, SaveStateModule, SaveStoreModule, SelectComponent, SelectModule, SelectSizeEnum, SidePageComponent, SidePageHeaderSizesEnum, SidePageModule, SidePagePositionEnum, SidePageSizesEnum, StepperClasses, StepperComponent, StepperModule, SwitchComponent, SwitchModule, SwitchSizeEnum, SwitchTypeEnum, TabComponent, TableComponent, TableModule, TableTypeEnum, TabsClasses, TabsGroupComponent, TabsModule, TabsTypesClasses, Timezone, ToasterPosition, ToasterService, ToasterServiceModule, ToasterType, Tooltip, TooltipComponent, TooltipModule, TooltipService, TooltipTextPositionEnum, TooltipTriggerComponent, TooltipTriggerEnum, TruncateDirective, TruncateDirectiveModule, TruncateModule, TruncatePipe, TruncateTextComponent, TruncateTextModule, ValidationMethodsEnum, ValidationOptionsEnum, ValidationTypesEnum, WarningMessageComponent, WarningMessageModule, WidgetWrapperComponent, WidgetWrapperModule, autosaveAddId, autosaveError, autosaveErrorFor, autosaveStart, autosaveStartFor, autosaveStop, autosaveStopFor, autosaveSuccess, autosaveSuccessFor, convertBase64ToFile, dateTimeFormat, defaultConfig, defaultCustomConfig, formatBytes, formattingDateRange, formattingIsoToString, getBase64FromUrl, getHashCode, innerListToList, sHashCode, selectFields, selectMrxAutoSaveState, sliceDate, toBytes, toDate, toNumberFormat, toastrDefaultConfig, wordForm };
 //# sourceMappingURL=myrta-ui.mjs.map