npm - myrta-ui - Versions diffs - 17.0.83 → 17.0.84 - Mend

myrta-ui 17.0.83 → 17.0.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/myrta-ui.mjs CHANGED Viewed

@@ -2512,7 +2512,7 @@ class SidePageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidePageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SidePageComponent, selector: "mrx-side-page", inputs: { title: "title", tooltip: "tooltip", tooltipMaxWidth: "tooltipMaxWidth", tooltipPosition: "tooltipPosition", isOpen: "isOpen", size: "size", position: "position", customClasses: "customClasses", enableHeader: "enableHeader", enableFooter: "enableFooter", headerSize: "headerSize", paddingTop: "paddingTop", okText: "okText", closeText: "closeText", isLoading: "isLoading", isBack: "isBack", backText: "backText", backRouterLink: "backRouterLink", backQueryParams: "backQueryParams", closeAfterLink: "closeAfterLink", invalid: "invalid", invalidMessage: "invalidMessage" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-side-page-content\"\r\n  [class]=\"getClasses\"\r\n  [style.top]=\"paddingTop\"\r\n  [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n  @if (enableHeader) {\r\n    @if (!headerTemplate) {\r\n      <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n        <div class=\"mrx-side-page-header__content\">\r\n          @if (isBack) {\r\n            <mrx-breadcrumbs\r\n              type=\"link\"\r\n              customClasses=\"mb-2\"\r\n              [item]=\"{\r\n                text: backText,\r\n                routerLink: backRouterLink,\r\n                queryParams: backQueryParams,\r\n                isShowArrow: true\r\n              }\"\r\n              (click)=\"closeModal()\"\r\n            ></mrx-breadcrumbs>\r\n          }\r\n\r\n          <h2 class=\"mrx-side-page-header__content--title\">\r\n            @if (title) {\r\n              <span>{{ title }}</span>\r\n            }\r\n\r\n            @if (tooltip) {\r\n              <span \r\n                class=\"mrx-icon icon-info icon-font-16\" \r\n                [mrxCdkTooltip]=\"tooltip\" \r\n                [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n                [tooltipPosition]=\"tooltipPosition\"\r\n              ></span>\r\n            }\r\n          </h2>\r\n        </div>\r\n\r\n        <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    }\r\n  }\r\n\r\n  <div class=\"mrx-side-page-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (enableFooter) {\r\n    <div class=\"mrx-side-page-footer brdt\">\r\n      @if (invalidMessage) {\r\n        <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n      }\r\n\r\n      <div class=\"mrx-side-page-footer__controls\">\r\n        @if (!footerTemplate) {\r\n          <mrx-button\r\n            [type]=\"'secondary'\"\r\n            [color]=\"'default'\"\r\n            [size]=\"'medium'\"\r\n            (click)=\"onClose()\"\r\n          >{{ closeText }}\r\n          </mrx-button>\r\n\r\n          <mrx-button\r\n            [type]=\"'primary'\"\r\n            [size]=\"'medium'\"\r\n            [color]=\"'default'\"\r\n            [isLoading]=\"isLoading\"\r\n            (click)=\"onOk()\"\r\n          >{{ okText }}\r\n          </mrx-button>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}:host::ng-deep .mrx-error-message{margin-top:0!important}.mrx-side-page-body{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { kind: "component", type: BreadcrumbsComponent, selector: "mrx-breadcrumbs", inputs: ["type", "items", "item", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SidePageComponent, selector: "mrx-side-page", inputs: { title: "title", tooltip: "tooltip", tooltipMaxWidth: "tooltipMaxWidth", tooltipPosition: "tooltipPosition", isOpen: "isOpen", size: "size", position: "position", customClasses: "customClasses", enableHeader: "enableHeader", enableFooter: "enableFooter", headerSize: "headerSize", paddingTop: "paddingTop", okText: "okText", closeText: "closeText", isLoading: "isLoading", isBack: "isBack", backText: "backText", backRouterLink: "backRouterLink", backQueryParams: "backQueryParams", closeAfterLink: "closeAfterLink", invalid: "invalid", invalidMessage: "invalidMessage" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-side-page-content\"\r\n  [class]=\"getClasses\"\r\n  [style.top]=\"paddingTop\"\r\n  [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n  @if (enableHeader) {\r\n    @if (!headerTemplate) {\r\n      <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n        <div class=\"mrx-side-page-header__content\">\r\n          @if (isBack) {\r\n            <mrx-breadcrumbs\r\n              type=\"link\"\r\n              customClasses=\"mb-2\"\r\n              [item]=\"{\r\n                text: backText,\r\n                routerLink: backRouterLink,\r\n                queryParams: backQueryParams,\r\n                isShowArrow: true\r\n              }\"\r\n              (click)=\"closeModal()\"\r\n            ></mrx-breadcrumbs>\r\n          }\r\n\r\n          <h2 class=\"mrx-side-page-header__content--title\">\r\n            @if (title) {\r\n              <span>{{ title }}</span>\r\n            }\r\n\r\n            @if (tooltip) {\r\n              <span \r\n                class=\"mrx-icon icon-info icon-font-16\" \r\n                [mrxCdkTooltip]=\"tooltip\" \r\n                [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n                [tooltipPosition]=\"tooltipPosition\"\r\n              ></span>\r\n            }\r\n          </h2>\r\n        </div>\r\n\r\n        <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    }\r\n  }\r\n\r\n  <div class=\"mrx-side-page-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (enableFooter) {\r\n    <div class=\"mrx-side-page-footer brdt\">\r\n      @if (invalidMessage) {\r\n        <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n      }\r\n\r\n      <div class=\"mrx-side-page-footer__controls\">\r\n        @if (!footerTemplate) {\r\n          <mrx-button\r\n            [type]=\"'secondary'\"\r\n            [color]=\"'default'\"\r\n            [size]=\"'medium'\"\r\n            (click)=\"onClose()\"\r\n          >{{ closeText }}\r\n          </mrx-button>\r\n\r\n          <mrx-button\r\n            [type]=\"'primary'\"\r\n            [size]=\"'medium'\"\r\n            [color]=\"'default'\"\r\n            [isLoading]=\"isLoading\"\r\n            (click)=\"onOk()\"\r\n          >{{ okText }}\r\n          </mrx-button>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}.mrx-side-page-body{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { kind: "component", type: BreadcrumbsComponent, selector: "mrx-breadcrumbs", inputs: ["type", "items", "item", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], animations: [
             trigger('animateExpand', [
                 state('open', style({
                     transform: 'translateX(0)'
@@ -2538,7 +2538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             transition('open => closed', [animate('0.5s ease')]),
                             transition('closed => open', [animate('0.5s ease')]),
                         ]),
-                    ], template: "<div\r\n  class=\"mrx-side-page-content\"\r\n  [class]=\"getClasses\"\r\n  [style.top]=\"paddingTop\"\r\n  [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n  @if (enableHeader) {\r\n    @if (!headerTemplate) {\r\n      <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n        <div class=\"mrx-side-page-header__content\">\r\n          @if (isBack) {\r\n            <mrx-breadcrumbs\r\n              type=\"link\"\r\n              customClasses=\"mb-2\"\r\n              [item]=\"{\r\n                text: backText,\r\n                routerLink: backRouterLink,\r\n                queryParams: backQueryParams,\r\n                isShowArrow: true\r\n              }\"\r\n              (click)=\"closeModal()\"\r\n            ></mrx-breadcrumbs>\r\n          }\r\n\r\n          <h2 class=\"mrx-side-page-header__content--title\">\r\n            @if (title) {\r\n              <span>{{ title }}</span>\r\n            }\r\n\r\n            @if (tooltip) {\r\n              <span \r\n                class=\"mrx-icon icon-info icon-font-16\" \r\n                [mrxCdkTooltip]=\"tooltip\" \r\n                [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n                [tooltipPosition]=\"tooltipPosition\"\r\n              ></span>\r\n            }\r\n          </h2>\r\n        </div>\r\n\r\n        <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    }\r\n  }\r\n\r\n  <div class=\"mrx-side-page-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (enableFooter) {\r\n    <div class=\"mrx-side-page-footer brdt\">\r\n      @if (invalidMessage) {\r\n        <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n      }\r\n\r\n      <div class=\"mrx-side-page-footer__controls\">\r\n        @if (!footerTemplate) {\r\n          <mrx-button\r\n            [type]=\"'secondary'\"\r\n            [color]=\"'default'\"\r\n            [size]=\"'medium'\"\r\n            (click)=\"onClose()\"\r\n          >{{ closeText }}\r\n          </mrx-button>\r\n\r\n          <mrx-button\r\n            [type]=\"'primary'\"\r\n            [size]=\"'medium'\"\r\n            [color]=\"'default'\"\r\n            [isLoading]=\"isLoading\"\r\n            (click)=\"onOk()\"\r\n          >{{ okText }}\r\n          </mrx-button>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}:host::ng-deep .mrx-error-message{margin-top:0!important}.mrx-side-page-body{flex-grow:1}\n"] }]
+                    ], template: "<div\r\n  class=\"mrx-side-page-content\"\r\n  [class]=\"getClasses\"\r\n  [style.top]=\"paddingTop\"\r\n  [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n  @if (enableHeader) {\r\n    @if (!headerTemplate) {\r\n      <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n        <div class=\"mrx-side-page-header__content\">\r\n          @if (isBack) {\r\n            <mrx-breadcrumbs\r\n              type=\"link\"\r\n              customClasses=\"mb-2\"\r\n              [item]=\"{\r\n                text: backText,\r\n                routerLink: backRouterLink,\r\n                queryParams: backQueryParams,\r\n                isShowArrow: true\r\n              }\"\r\n              (click)=\"closeModal()\"\r\n            ></mrx-breadcrumbs>\r\n          }\r\n\r\n          <h2 class=\"mrx-side-page-header__content--title\">\r\n            @if (title) {\r\n              <span>{{ title }}</span>\r\n            }\r\n\r\n            @if (tooltip) {\r\n              <span \r\n                class=\"mrx-icon icon-info icon-font-16\" \r\n                [mrxCdkTooltip]=\"tooltip\" \r\n                [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n                [tooltipPosition]=\"tooltipPosition\"\r\n              ></span>\r\n            }\r\n          </h2>\r\n        </div>\r\n\r\n        <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    }\r\n  }\r\n\r\n  <div class=\"mrx-side-page-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (enableFooter) {\r\n    <div class=\"mrx-side-page-footer brdt\">\r\n      @if (invalidMessage) {\r\n        <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n      }\r\n\r\n      <div class=\"mrx-side-page-footer__controls\">\r\n        @if (!footerTemplate) {\r\n          <mrx-button\r\n            [type]=\"'secondary'\"\r\n            [color]=\"'default'\"\r\n            [size]=\"'medium'\"\r\n            (click)=\"onClose()\"\r\n          >{{ closeText }}\r\n          </mrx-button>\r\n\r\n          <mrx-button\r\n            [type]=\"'primary'\"\r\n            [size]=\"'medium'\"\r\n            [color]=\"'default'\"\r\n            [isLoading]=\"isLoading\"\r\n            (click)=\"onOk()\"\r\n          >{{ okText }}\r\n          </mrx-button>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}.mrx-side-page-body{flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
             }], tooltip: [{
@@ -4011,7 +4011,7 @@ class InputSearchComponent {
                 useExisting: forwardRef(() => InputSearchComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-search\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"mrx-input-search__wrapper\">\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [mask]=\"mask\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n    />\r\n\r\n    <div class=\"mrx-input-search__icons\">\r\n      <span\r\n        class=\"mrx-icon icon-close mr-2\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        *ngIf=\"isShowCloseIcon\"\r\n        (click)=\"onClear()\"\r\n      ></span>\r\n\r\n      <span\r\n        class=\"mrx-icon icon-search\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        (click)=\"onSearch()\"\r\n      ></span>\r\n    </div>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-search.mrx-input-search{width:100%;position:relative}.mrx-input-search.mrx-input-search .mrx-input-search__wrapper{position:relative}.mrx-input-search.mrx-input-search:hover input{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-search.mrx-input-search input{box-sizing:border-box;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}.mrx-input-search.mrx-input-search input:focus,.mrx-input-search.mrx-input-search input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-search.mrx-input-search input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-search.mrx-input-search.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input__readonly input{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input-search-lg input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) + var(--spacing-2)) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-md input{padding:calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-sm input{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-search.mrx-input-search.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-search.mrx-input-search.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-search.mrx-input-search .mrx-input-search__icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center}.mrx-input-search.mrx-input-search .mrx-input-search__icons .mrx-icon{will-change:transform;cursor:pointer;color:var(--neutral-icon-default)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$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: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"mrx-input-search\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"mrx-input-search__wrapper\">\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [mask]=\"mask\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n    />\r\n\r\n    <div class=\"mrx-input-search__icons\">\r\n      <span\r\n        class=\"mrx-icon icon-close mr-2\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        [class.d-none]=\"!isShowCloseIcon\"\r\n        (click)=\"onClear()\"\r\n      ></span>\r\n\r\n      <span\r\n        class=\"mrx-icon icon-search\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        (click)=\"onSearch()\"\r\n      ></span>\r\n    </div>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-search.mrx-input-search{width:100%;position:relative}.mrx-input-search.mrx-input-search .mrx-input-search__wrapper{position:relative}.mrx-input-search.mrx-input-search:hover input{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-search.mrx-input-search input{box-sizing:border-box;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}.mrx-input-search.mrx-input-search input:focus,.mrx-input-search.mrx-input-search input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-search.mrx-input-search input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-search.mrx-input-search.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input__readonly input{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input-search-lg input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) + var(--spacing-2)) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-md input{padding:calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-sm input{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-search.mrx-input-search.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-search.mrx-input-search.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-search.mrx-input-search .mrx-input-search__icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center}.mrx-input-search.mrx-input-search .mrx-input-search__icons .mrx-icon{will-change:transform;cursor:pointer;color:var(--neutral-icon-default)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$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: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputSearchComponent, decorators: [{
             type: Component,
@@ -4021,7 +4021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef(() => InputSearchComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"mrx-input-search\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"mrx-input-search__wrapper\">\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [mask]=\"mask\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n    />\r\n\r\n    <div class=\"mrx-input-search__icons\">\r\n      <span\r\n        class=\"mrx-icon icon-close mr-2\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        *ngIf=\"isShowCloseIcon\"\r\n        (click)=\"onClear()\"\r\n      ></span>\r\n\r\n      <span\r\n        class=\"mrx-icon icon-search\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        (click)=\"onSearch()\"\r\n      ></span>\r\n    </div>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-search.mrx-input-search{width:100%;position:relative}.mrx-input-search.mrx-input-search .mrx-input-search__wrapper{position:relative}.mrx-input-search.mrx-input-search:hover input{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-search.mrx-input-search input{box-sizing:border-box;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}.mrx-input-search.mrx-input-search input:focus,.mrx-input-search.mrx-input-search input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-search.mrx-input-search input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-search.mrx-input-search.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input__readonly input{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input-search-lg input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) + var(--spacing-2)) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-md input{padding:calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-sm input{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-search.mrx-input-search.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-search.mrx-input-search.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-search.mrx-input-search .mrx-input-search__icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center}.mrx-input-search.mrx-input-search .mrx-input-search__icons .mrx-icon{will-change:transform;cursor:pointer;color:var(--neutral-icon-default)}\n"] }]
+                    ], template: "<div\r\n  class=\"mrx-input-search\"\r\n  [class]=\"getClasses\"\r\n  [class.mrx-input-error]=\"invalid\">\r\n  <div class=\"mrx-input-search__wrapper\">\r\n    <input\r\n      autocomplete=\"nope\"\r\n      #inputElement\r\n      [type]=\"'text'\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"updateValue($event)\"\r\n      (blur)=\"updateSelection($event)\"\r\n      [mask]=\"mask\"\r\n      [attr.title]=\"placeholder || ''\"\r\n      [disabled]=\"disabled\"\r\n      [readOnly]=\"readonly\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\"\r\n      [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [attr.placeholder]=\"!disabled && placeholder ? placeholder : ''\"\r\n    />\r\n\r\n    <div class=\"mrx-input-search__icons\">\r\n      <span\r\n        class=\"mrx-icon icon-close mr-2\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        [class.d-none]=\"!isShowCloseIcon\"\r\n        (click)=\"onClear()\"\r\n      ></span>\r\n\r\n      <span\r\n        class=\"mrx-icon icon-search\"\r\n        [class.icon-font-16]=\"size === 'small' || size === 'medium'\"\r\n        [class.icon-font-24]=\"size === 'large'\"\r\n        (click)=\"onSearch()\"\r\n      ></span>\r\n    </div>\r\n  </div>\r\n\r\n  <mrx-error-message\r\n    *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n    [invalidMessage]=\"invalidMessage\"\r\n  ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-input-search.mrx-input-search{width:100%;position:relative}.mrx-input-search.mrx-input-search .mrx-input-search__wrapper{position:relative}.mrx-input-search.mrx-input-search:hover input{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-search.mrx-input-search input{box-sizing:border-box;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}.mrx-input-search.mrx-input-search input:focus,.mrx-input-search.mrx-input-search input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-search.mrx-input-search input:disabled{background-color:var(--neutral-bg-disabled)}.mrx-input-search.mrx-input-search.mrx-input__readonly input[type=tel]:disabled{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input__readonly input{background-color:inherit}.mrx-input-search.mrx-input-search.mrx-input-search-lg input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) + var(--spacing-2)) calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-md input{padding:calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) + var(--spacing-half) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-search-sm input{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-16) - var(--spacing-1) - var(--spacing-half)) calc(var(--sizing-2) - var(--border-width-default)) var(--spacing-4);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-input-search.mrx-input-search.mrx-input-error input{border-color:var(--system-bg-controls-negative-default)}.mrx-input-search.mrx-input-search.mrx-input-checked-error input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-input-search.mrx-input-search.mrx-input-checked-success input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-input-search.mrx-input-search .mrx-input-search__icons{position:absolute;right:var(--spacing-3);top:50%;transform:translateY(-50%);display:flex;align-items:center}.mrx-input-search.mrx-input-search .mrx-input-search__icons .mrx-icon{will-change:transform;cursor:pointer;color:var(--neutral-icon-default)}\n"] }]
         }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
@@ -4254,7 +4254,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 }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    @switch (use) {\r\n      @case ('default') {\r\n        <div \r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          @if (getSelectedLabels.length) {\r\n            @if (multiple) {\r\n              <div class=\"mrx-select__input__values\">\r\n                @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n                  <div class=\"mrx-select__input__badge\">\r\n                    <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n                    @if (!disabled && !readonly) {\r\n                      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n                    @if (labelTemplate) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"labelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                      ></ng-container>\r\n                    } @else {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                      ></ng-container>\r\n                    }\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.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\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 \r\n                class=\"mrx-icon icon-close mrx-select__input__controls--icon\" \r\n                [class]=\"getIconSize\" \r\n                (click)=\"onClear($event)\"\r\n              ></div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('link') {\r\n        <div \r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\" \r\n          [popupPosition]=\"popupPosition\" \r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (sortPlaceholder) {\r\n              <p>{{ sortPlaceholder }}</p>\r\n            }\r\n\r\n            @if (sortIcon) {\r\n              <span\r\n                class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n                [class]=\"getIconSize\"\r\n              ></span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (getSelectedLabels.length) {\r\n              <div class=\"mrx-select__input-link__value\">\r\n                @for (item of getSelectedLabels; track item.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\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: item, first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: 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-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        }\r\n\r\n        @if (contentTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!addOption) {\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        }\r\n\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  @if (invalid && isInvalidMessage) {\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  }\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [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.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</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.__origin[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;height:100%;max-height:200px;overflow-y:auto}.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:5px 0;position:relative}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{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-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__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-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) 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__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{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__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__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.mrx-select-md .mrx-select__input{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-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.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;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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", "isFullWidthDropdown", "minWidthDropdown"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { kind: "component", type: InputSearchComponent, selector: "mrx-input-search", inputs: ["disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "mask", "size"], outputs: ["changed", "cleared", "searched"] }], 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 }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    @switch (use) {\r\n      @case ('default') {\r\n        <div \r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          @if (getSelectedLabels.length) {\r\n            @if (multiple) {\r\n              <div class=\"mrx-select__input__values\">\r\n                @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n                  <div class=\"mrx-select__input__badge\">\r\n                    <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n                    @if (!disabled && !readonly) {\r\n                      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n                    @if (labelTemplate) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"labelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                      ></ng-container>\r\n                    } @else {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                      ></ng-container>\r\n                    }\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.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\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 \r\n                class=\"mrx-icon icon-close mrx-select__input__controls--icon\" \r\n                [class]=\"getIconSize\" \r\n                (click)=\"onClear($event)\"\r\n              ></div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('link') {\r\n        <div \r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\" \r\n          [popupPosition]=\"popupPosition\" \r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (sortPlaceholder) {\r\n              <p>{{ sortPlaceholder }}</p>\r\n            }\r\n\r\n            @if (sortIcon) {\r\n              <span\r\n                class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n                [class]=\"getIconSize\"\r\n              ></span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (getSelectedLabels.length) {\r\n              <div class=\"mrx-select__input-link__value\">\r\n                @for (item of getSelectedLabels; track item.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\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: item, first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: 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-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        }\r\n\r\n        @if (contentTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!addOption) {\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        }\r\n\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  @if (invalid && isInvalidMessage) {\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  }\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [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.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</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.__origin[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;height:100%;max-height:200px;overflow-y:auto}.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:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{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-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__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-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) 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__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{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__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__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.mrx-select-md .mrx-select__input{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-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.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;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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", "isFullWidthDropdown", "minWidthDropdown"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { kind: "component", type: InputSearchComponent, selector: "mrx-input-search", inputs: ["disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "mask", "size"], outputs: ["changed", "cleared", "searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -4264,7 +4264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    @switch (use) {\r\n      @case ('default') {\r\n        <div \r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          @if (getSelectedLabels.length) {\r\n            @if (multiple) {\r\n              <div class=\"mrx-select__input__values\">\r\n                @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n                  <div class=\"mrx-select__input__badge\">\r\n                    <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n                    @if (!disabled && !readonly) {\r\n                      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n                    @if (labelTemplate) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"labelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                      ></ng-container>\r\n                    } @else {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                      ></ng-container>\r\n                    }\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.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\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 \r\n                class=\"mrx-icon icon-close mrx-select__input__controls--icon\" \r\n                [class]=\"getIconSize\" \r\n                (click)=\"onClear($event)\"\r\n              ></div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('link') {\r\n        <div \r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\" \r\n          [popupPosition]=\"popupPosition\" \r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (sortPlaceholder) {\r\n              <p>{{ sortPlaceholder }}</p>\r\n            }\r\n\r\n            @if (sortIcon) {\r\n              <span\r\n                class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n                [class]=\"getIconSize\"\r\n              ></span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (getSelectedLabels.length) {\r\n              <div class=\"mrx-select__input-link__value\">\r\n                @for (item of getSelectedLabels; track item.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\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: item, first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: 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-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        }\r\n\r\n        @if (contentTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!addOption) {\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        }\r\n\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  @if (invalid && isInvalidMessage) {\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  }\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [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.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</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.__origin[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;height:100%;max-height:200px;overflow-y:auto}.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:5px 0;position:relative}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{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-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__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-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) 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__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{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__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__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.mrx-select-md .mrx-select__input{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-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.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;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.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\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    @switch (use) {\r\n      @case ('default') {\r\n        <div \r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          @if (getSelectedLabels.length) {\r\n            @if (multiple) {\r\n              <div class=\"mrx-select__input__values\">\r\n                @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n                  <div class=\"mrx-select__input__badge\">\r\n                    <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n                    @if (!disabled && !readonly) {\r\n                      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n                    @if (labelTemplate) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"labelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                      ></ng-container>\r\n                    } @else {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                        [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                      ></ng-container>\r\n                    }\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.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\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 \r\n                class=\"mrx-icon icon-close mrx-select__input__controls--icon\" \r\n                [class]=\"getIconSize\" \r\n                (click)=\"onClear($event)\"\r\n              ></div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('link') {\r\n        <div \r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\" \r\n          [popupPosition]=\"popupPosition\" \r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (sortPlaceholder) {\r\n              <p>{{ sortPlaceholder }}</p>\r\n            }\r\n\r\n            @if (sortIcon) {\r\n              <span\r\n                class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n                [class]=\"getIconSize\"\r\n              ></span>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            @if (getSelectedLabels.length) {\r\n              <div class=\"mrx-select__input-link__value\">\r\n                @for (item of getSelectedLabels; track item.__id) {\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <div \r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class]=\"[getIconState, getIconSize]\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\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: item, first, last}\"\r\n            ></ng-container>\r\n          } @else {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n              [ngTemplateOutletContext]=\"{item: 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-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        }\r\n\r\n        @if (contentTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!addOption) {\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        }\r\n\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  @if (invalid && isInvalidMessage) {\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  }\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [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.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</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.__origin[bindIcon]) {\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        }\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;height:100%;max-height:200px;overflow-y:auto}.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:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{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-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__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-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) 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__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{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__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__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.mrx-select-md .mrx-select__input{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-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.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;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.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: [{