myrta-ui 1.1.52 → 1.1.54

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.
@@ -2226,7 +2226,7 @@ class ModalComponent {
2226
2226
  }
2227
2227
  }
2228
2228
  ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2229
- ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:1000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:0 24px 24px}.mrx-modal-header{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-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);text-align:center;width:100%;text-transform:uppercase}.mrx-modal-header .mrx-modal-title-clear{padding:0}.mrx-modal-header .mrx-modal-title-one-icon{padding-left:24px}.mrx-modal-header .mrx-modal-title-two-icon{padding-left:56px}.mrx-modal-header .mrx-modal-controls{display:flex;align-items:center;gap:var(--spacing-2);z-index:1}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse,.mrx-modal-header .icon-close{cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover,.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"], components: [{ type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
2229
+ ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isClose: "isClose", isBack: "isBack", backText: "backText", enableFooter: "enableFooter", alignButtons: "alignButtons", isLoading: "isLoading", iconPosition: "iconPosition" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "footerContent", first: true, predicate: ["footerContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:10000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:0 24px 24px}.mrx-modal-header{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-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);text-align:center;width:100%;text-transform:uppercase}.mrx-modal-header .mrx-modal-title-clear{padding:0}.mrx-modal-header .mrx-modal-title-one-icon{padding-left:24px}.mrx-modal-header .mrx-modal-title-two-icon{padding-left:56px}.mrx-modal-header .mrx-modal-controls{display:flex;align-items:center;gap:var(--spacing-2);z-index:1}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse,.mrx-modal-header .icon-close{cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover,.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"], components: [{ type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
2230
2230
  trigger('animateExpand', [
2231
2231
  state('open', style({
2232
2232
  height: '100%',
@@ -2259,7 +2259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
2259
2259
  transition('open => closed', [animate('0.5s ease')]),
2260
2260
  transition('closed => open', [animate('0.5s ease')]),
2261
2261
  ]),
2262
- ], template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:1000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:0 24px 24px}.mrx-modal-header{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-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);text-align:center;width:100%;text-transform:uppercase}.mrx-modal-header .mrx-modal-title-clear{padding:0}.mrx-modal-header .mrx-modal-title-one-icon{padding-left:24px}.mrx-modal-header .mrx-modal-title-two-icon{padding-left:56px}.mrx-modal-header .mrx-modal-controls{display:flex;align-items:center;gap:var(--spacing-2);z-index:1}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse,.mrx-modal-header .icon-close{cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover,.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"] }]
2262
+ ], template: "<div class=\"mrx-modal-content\" [class]=\"getClasses\" [@animateExpand]=\"isEmbed ? 'open' : 'closed'\">\r\n <div class=\"mrx-modal-header\">\r\n <div \r\n class=\"mrx-modal-title\" \r\n [innerHTML]=\"title\" \r\n [class]=\"getTitleClass\"\r\n ></div>\r\n\r\n <div class=\"mrx-modal-controls\" *ngIf=\"expandable || isClose\">\r\n <span\r\n *ngIf=\"expandable\"\r\n class=\"mrx-icon icon-font-24\"\r\n [class]=\"isEmbed ? 'icon-arrow-collapse' : 'icon-arrow-expand'\"\r\n (click)=\"onExpanding()\"\r\n ></span>\r\n <span class=\"mrx-icon icon-close icon-font-24\" *ngIf=\"isClose\" (click)=\"onClose()\"></span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n <div *ngIf=\"isBack\" class=\"mrx-modal__back d-flex align-items-center mb-3 mt-2\" (click)=\"onBack()\">\r\n <span class=\"mrx-icon icon-arrow-left icon-font-16 mr-1\"></span>\r\n <span>{{ backText }}</span>\r\n </div>\r\n\r\n <div class=\"mrx-modal-body__message\" [innerHTML]=\"message\"></div>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\" *ngIf=\"enableFooter\">\r\n <ng-container *ngIf=\"!footerContent; else footerContentTemplate\">\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [color]=\"getButtonColor\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{closeText}}</mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"getButtonColor\"\r\n [iconPosition]=\"iconPosition\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{okText}}</mrx-button>\r\n </ng-container>\r\n\r\n <ng-template #footerContentTemplate>\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{background-color:var(--neutral-bg-modal);height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:fixed;text-align:center;z-index:10000}::ng-deep .mrx-modal[style*=\"display: block\"]{display:flex!important;justify-content:center}::ng-deep .mrx-modal[style*=\"display: block\"]>*{display:flex;align-items:center;justify-content:center}::ng-deep .mrx-modal mrx-modal{margin:auto 0;width:100vw}::ng-deep .mrx-modal-open{overflow:hidden}.mrx-modal-content{margin:24px auto;background-color:#fff;border-radius:4px;position:relative;transition:opacity .5s ease-out;width:calc(100vw - 32px);will-change:opacity;display:flex;flex-direction:column;text-align:left}::ng-deep .mrx-modal.fade-anim{transition:opacity .4s ease-in-out;will-change:opacity;opacity:0}::ng-deep .mrx-modal.fade-anim.in{opacity:1}.mrx-modal-body{padding:var(--spacing-6, 24px) var(--spacing-4, 16px) var(--spacing-4, 16px);flex-grow:1}.mrx-modal-body .mrx-modal__back{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-body__message{color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-modal-content.type-default .mrx-modal-header{background:var(--brand-bg-primary-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-default .mrx-modal-header .icon-close,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-default .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-info .mrx-modal-header{background:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-modal-content.type-info .mrx-modal-header .icon-close,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-info .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-default)}.mrx-modal-content.type-attention .mrx-modal-header{background:var(--system-bg-controls-attention-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-attention .mrx-modal-header .icon-close,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-attention .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header{background:var(--system-bg-controls-negative-default);color:var(--neutral-icon-inverse)}.mrx-modal-content.type-negative .mrx-modal-header .icon-close,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-expand,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-collapse,.mrx-modal-content.type-negative .mrx-modal-header .icon-arrow-left{color:var(--neutral-icon-inverse)}.mrx-modal-content .mrx-modal__back{cursor:pointer;color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back .mrx-icon{color:var(--brand-text-controls-default)}.mrx-modal-content .mrx-modal__back:hover,.mrx-modal-content .mrx-modal__back:hover .mrx-icon{color:var(--brand-text-controls-hover)}.mrx-modal-footer{align-items:center;display:flex;padding:0 24px 24px}.mrx-modal-header{display:flex;align-items:flex-start;gap:var(--spacing-2);padding:16px;position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-modal-header .mrx-modal-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);text-align:center;width:100%;text-transform:uppercase}.mrx-modal-header .mrx-modal-title-clear{padding:0}.mrx-modal-header .mrx-modal-title-one-icon{padding-left:24px}.mrx-modal-header .mrx-modal-title-two-icon{padding-left:56px}.mrx-modal-header .mrx-modal-controls{display:flex;align-items:center;gap:var(--spacing-2);z-index:1}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse,.mrx-modal-header .icon-close{cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover,.mrx-modal-header .icon-close:hover{transform:scale(1.1)}.mrx-modal-content.mrx-modal-sm{max-width:440px}.mrx-modal-content.mrx-modal-md{max-width:670px}.mrx-modal-content.mrx-modal-lg{max-width:904px}.mrx-modal-content.mrx-modal-extra-lg{max-width:1024px}\n"] }]
2263
2263
  }], propDecorators: { title: [{
2264
2264
  type: Input
2265
2265
  }], message: [{
@@ -13554,7 +13554,7 @@ CheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
13554
13554
  useExisting: forwardRef(() => CheckboxGroupComponent),
13555
13555
  multi: true,
13556
13556
  },
13557
- ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13557
+ ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: CheckboxGroupHeaderComponent, selector: "mrx-checkbox-group-header", inputs: ["searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount"], outputs: ["updateCheckboxGroupSearchValue", "clearFilters"] }, { type: CheckboxGroupItemComponent, selector: "mrx-checkbox-group-item", inputs: ["displaced", "level", "animationTrigger", "isLast", "disabled", "readonly", "invalid", "item"], outputs: ["animationEnd", "checkboxChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13558
13558
  CheckboxGroupComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, providedIn: CheckboxGroupComponent });
13559
13559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
13560
13560
  type: Injectable,
@@ -13569,7 +13569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
13569
13569
  useExisting: forwardRef(() => CheckboxGroupComponent),
13570
13570
  multi: true,
13571
13571
  },
13572
- ], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
13572
+ ], template: "<div class=\"mrx-checkbox-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"checkboxGroup\"></mrx-save-state>\r\n\r\n <mrx-checkbox-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [labelText]=\"labelText\"\r\n [linkText]=\"linkText\"\r\n [checkedItemsCount]=\"checkedList.length\"\r\n (updateCheckboxGroupSearchValue)=\"updateCheckboxGroupSearchValue($event)\"\r\n (clearFilters)=\"clearFilters()\"\r\n ></mrx-checkbox-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-checkbox-group-wrapper\"\r\n [class.mrx-checkbox-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\"\r\n >\r\n <mrx-checkbox-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [invalid]=\"invalid\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (checkboxChanged)=\"checkboxChanged($event)\"\r\n ></mrx-checkbox-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-checkbox-group__empty-message\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"getInvalid && getInvalidMessage\"\r\n [invalidMessage]=\"getInvalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n</div>\r\n", styles: [".mrx-checkbox-group{position:relative}.mrx-checkbox-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar{width:8px;height:8px}.mrx-checkbox-group-wrapper--scrollable::-webkit-scrollbar-thumb{background:var(--neutral-bg-stroke-default);border-radius:8px}.mrx-checkbox-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}.mrx-checkbox-group__empty-message{padding-top:12px;padding-bottom:12px}\n"] }]
13573
13573
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fields: [{
13574
13574
  type: Input
13575
13575
  }], scrollMaxHeight: [{
@@ -14034,7 +14034,7 @@ RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
14034
14034
  useExisting: forwardRef(() => RadioGroupComponent),
14035
14035
  multi: true,
14036
14036
  },
14037
- ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-12px'\"\r\n ></mrx-error-message>\r\n </div>\r\n", styles: [".mrx-radio-group{position:relative}.mrx-radio-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-radio-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: RadioGroupHeaderComponent, selector: "mrx-radio-group-header", inputs: ["searchSize", "searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount", "required"], outputs: ["updateradioGroupSearchValue"] }, { type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "radioChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14037
+ ], viewQueries: [{ propertyName: "groupItemsWrapper", first: true, predicate: ["groupItemsWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n </div>\r\n", styles: [".mrx-radio-group{position:relative}.mrx-radio-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-radio-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}\n"], components: [{ type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { type: RadioGroupHeaderComponent, selector: "mrx-radio-group-header", inputs: ["searchSize", "searchable", "searchPlaceholder", "tooltip", "labelText", "linkText", "checkedItemsCount", "required"], outputs: ["updateradioGroupSearchValue"] }, { type: RadioGroupItemComponent, selector: "mrx-radio-group-item", inputs: ["invalid", "name", "selectedValue", "item", "displaced", "level", "bold", "animationTrigger", "isLast", "disabled", "readonly"], outputs: ["animationEnd", "radioChanged"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14038
14038
  RadioGroupComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioGroupComponent, providedIn: RadioGroupComponent });
14039
14039
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
14040
14040
  type: Injectable,
@@ -14049,7 +14049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
14049
14049
  useExisting: forwardRef(() => RadioGroupComponent),
14050
14050
  multi: true,
14051
14051
  },
14052
- ], template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-12px'\"\r\n ></mrx-error-message>\r\n </div>\r\n", styles: [".mrx-radio-group{position:relative}.mrx-radio-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-radio-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}\n"] }]
14052
+ ], template: "<div class=\"mrx-radio-group\" [class]=\"getClasses\">\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" type=\"radioGroup\"></mrx-save-state>\r\n\r\n <mrx-radio-group-header\r\n [searchable]=\"searchable\"\r\n [searchPlaceholder]=\"searchPlaceholder\"\r\n [tooltip]=\"tooltip\"\r\n [required]=\"required\"\r\n [searchSize]=\"searchSize\"\r\n [labelText]=\"labelText\"\r\n (updateradioGroupSearchValue)=\"updateRadioGroupSearchValue($event)\"\r\n ></mrx-radio-group-header>\r\n\r\n <div\r\n #groupItemsWrapper\r\n *ngIf=\"filteredList?.length; else enableMessageTemplate\"\r\n class=\"mrx-radio-group-wrapper\"\r\n [class.mrx-radio-group-wrapper--scrollable]=\"scrollable\"\r\n [class.--active]=\"getShowScroll\"\r\n [style.max-height]=\"scrollable ? scrollMaxHeight + 'px' : 'auto'\">\r\n <mrx-radio-group-item\r\n *ngFor=\"let item of filteredList; trackBy: trackByFn; let last = last\"\r\n [displaced]=\"displaced || false\"\r\n [item]=\"item\"\r\n [isLast]=\"last\"\r\n [selectedValue]=\"selectedValue\"\r\n [name]=\"name\"\r\n [bold]=\"bold\"\r\n [invalid]=\"invalid\"\r\n [disabled]=\"disabled\"\r\n [readonly]=\"readonly\"\r\n [animationTrigger]=\"!!isSearchValue\"\r\n (animationEnd)=\"checkHeightGroupWrapper()\"\r\n (radioChanged)=\"radioChanged($event)\"\r\n ></mrx-radio-group-item>\r\n </div>\r\n\r\n <ng-template #enableMessageTemplate>\r\n <p class=\"mrx-radio-group__empty-message py-12px\">{{ enableMessage }}</p>\r\n </ng-template>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n [customClasses]=\"'mt-2'\"\r\n ></mrx-error-message>\r\n </div>\r\n", styles: [".mrx-radio-group{position:relative}.mrx-radio-group-wrapper--scrollable{overflow-y:auto;border-width:1px 0 1px 0;border-style:solid;border-color:transparent;padding-top:0;padding-bottom:0;transition:boder-color .2s,padding-top .2s,padding-bottom .2s}.mrx-radio-group-wrapper--scrollable.--active{padding-top:12px;padding-bottom:12px;border-color:var(--neutral-bg-divider)}\n"] }]
14053
14053
  }], propDecorators: { fields: [{
14054
14054
  type: Input
14055
14055
  }], searchSize: [{