myrta-ui 17.0.66 → 17.0.67

package/fesm2022/myrta-ui.mjs

@@ -2469,7 +2469,7 @@ var SelectSizeEnum;
     SelectSizeEnum["large"] = "mrx-select-lg";
 })(SelectSizeEnum || (SelectSizeEnum = {}));
 
-const modifyOriginItems = (selected, bindValue, bindLabel) => {
+const modifyOriginItems = (selected, bindValue) => {
     if (bindValue) {
         const modifiedSelected = [];
         for (let item of selected) {
@@ -2483,10 +2483,10 @@ const modifyOriginItems = (selected, bindValue, bindLabel) => {
                 }
             }
         }
-        return bindLabel ? modifiedSelected.map((i) => i['label']) : modifiedSelected;
+        return modifiedSelected;
     }
     else {
-        return bindLabel ? selected.map((i) => i['label']) : selected;
+        return selected;
     }
 };
 
@@ -2495,8 +2495,8 @@ const cleanSelectItems = (innerList) => {
 };
 const cleanSelectItem = ({ __id, __selected, ...rest }) => rest;
 
-const getSelectedItems = (innerItems, bindValue, bindLabel) => {
-    return modifyOriginItems(cleanSelectItems(innerItems.filter(item => item.__selected)), bindValue, bindLabel);
+const getSelectedItems = (innerItems, bindValue) => {
+    return modifyOriginItems(cleanSelectItems(innerItems.filter(item => item.__selected)), bindValue);
 };
 
 const getInnerItems = (items, selectedItems = []) => {
@@ -2848,7 +2848,7 @@ class SelectComponent {
         this.innerItems = getInnerItems(items, this.selected);
     }
     updateValue(selectedItems) {
-        const clearedSelected = getSelectedItems(selectedItems, this.bindValue, this.bindLabel);
+        const clearedSelected = getSelectedItems(selectedItems, this.bindValue);
         const outputSelected = this.multiple ? clearedSelected : clearedSelected.length ? clearedSelected[0] : null;
         this.changed.emit(outputSelected);
         this.modelChange.emit({ value: outputSelected, id: this.uuid });
@@ -2872,7 +2872,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 }, { 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\">{{ 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\">{{ emptyText }}</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]=\"searchPlaceholder\"\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__placeholder,.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__placeholder,.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__input__placeholder{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);color:var(--neutral-text-tertiary, #71767E)}.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], 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'] || item }}\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"mrx-select__input__placeholder\">{{ 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\">{{ emptyText }}</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]=\"searchPlaceholder\"\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'] || 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'] || option }}</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__placeholder,.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__placeholder,.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__input__placeholder{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);color:var(--neutral-text-tertiary, #71767E)}.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], 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,
@@ -2882,7 +2882,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, 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\">{{ 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\">{{ emptyText }}</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]=\"searchPlaceholder\"\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__placeholder,.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__placeholder,.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__input__placeholder{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);color:var(--neutral-text-tertiary, #71767E)}.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"] }]
+                    ], 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'] || item }}\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"mrx-select__input__placeholder\">{{ 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\">{{ emptyText }}</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]=\"searchPlaceholder\"\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'] || 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'] || option }}</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__placeholder,.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__placeholder,.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__input__placeholder{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);color:var(--neutral-text-tertiary, #71767E)}.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: [{