myrta-ui 17.0.61 → 17.0.62

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 (21) hide show
  1. package/esm2022/lib/components/button/button.component.mjs +17 -4
  2. package/esm2022/lib/components/button/button.enum.mjs +1 -1
  3. package/esm2022/lib/components/button/button.module.mjs +5 -4
  4. package/esm2022/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.mjs +1 -1
  5. package/esm2022/lib/components/form/select/helpers/get-inner-selected.helper.mjs +11 -0
  6. package/esm2022/lib/components/form/select/select.component.mjs +17 -11
  7. package/esm2022/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.mjs +1 -1
  8. package/esm2022/lib/components/gallery/gallery.component.mjs +1 -1
  9. package/esm2022/lib/components/modal/modal.component.mjs +2 -2
  10. package/esm2022/lib/components/side-page/side-page.component.mjs +2 -2
  11. package/esm2022/lib/components/truncate-text/truncate-text.component.mjs +3 -3
  12. package/esm2022/lib/services/modal-service/components/alert-modal/alert-modal.component.mjs +1 -1
  13. package/esm2022/lib/services/modal-service/components/confirm-modal/confirm-modal.component.mjs +2 -2
  14. package/fesm2022/myrta-ui.mjs +53 -25
  15. package/fesm2022/myrta-ui.mjs.map +1 -1
  16. package/lib/components/button/button.component.d.ts +8 -2
  17. package/lib/components/button/button.enum.d.ts +1 -0
  18. package/lib/components/button/button.module.d.ts +2 -1
  19. package/lib/components/form/select/helpers/get-inner-selected.helper.d.ts +2 -0
  20. package/lib/components/form/select/select.component.d.ts +3 -1
  21. package/package.json +1 -1
package/fesm2022/myrta-ui.mjs CHANGED
@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
2
2
  import { Input, Component, Pipe, EventEmitter, Output, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA, Injectable, forwardRef, InjectionToken, TemplateRef, Inject, Injector, HostListener, Directive, ContentChild, ViewChild, ContentChildren, HostBinding, ViewEncapsulation, ViewChildren } from '@angular/core';
3
3
  import * as i1$1 from '@angular/common';
4
4
  import { CommonModule, NgOptimizedImage, registerLocaleData, DatePipe } from '@angular/common';
5
- import * as i1 from '@angular/platform-browser';
6
5
  import * as i2 from '@angular/router';
7
6
  import { RouterModule, RouterLinkActive } from '@angular/router';
7
+ import * as i1 from '@angular/platform-browser';
8
8
  import * as i1$3 from '@angular/animations';
9
9
  import { trigger, state, transition, style, animate, group, keyframes } from '@angular/animations';
10
10
  import * as i2$1 from '@angular/forms';
@@ -160,6 +160,10 @@ class ButtonComponent {
160
160
  icon = '';
161
161
  iconClass = '';
162
162
  buttonType = 'button';
163
+ href = '';
164
+ target = '_blank';
165
+ routerLink = '';
166
+ queryParams = {};
163
167
  mrxClick = new EventEmitter();
164
168
  get getLabel() {
165
169
  return this.iconOnly ? null : this.label;
@@ -205,11 +209,11 @@ class ButtonComponent {
205
209
  }
206
210
  }
207
211
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
208
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, selector: "mrx-button", inputs: { size: "size", type: "type", color: "color", iconPosition: "iconPosition", active: "active", disabled: "disabled", isLoading: "isLoading", iconOnly: "iconOnly", customClasses: "customClasses", label: "label", icon: "icon", iconClass: "iconClass", buttonType: "buttonType" }, outputs: { mrxClick: "mrxClick" }, ngImport: i0, template: "<button\r\n class=\"mrx-btn\"\r\n [class]=\"getClasses\"\r\n [class.active]=\"active\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [disabled]=\"disabled\"\r\n [type]=\"buttonType\"\r\n (click)=\"buttonClick($event)\"\r\n>\r\n <ng-template #spinner>\r\n <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"isIconLeft && isLoading && !disabled\">\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"icon && isIconLeft && !isLoading\" [innerHTML]=\"getReplacedIcon | safe\"\r\n ></div>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"iconClass && isIconLeft && !isLoading\"\r\n >\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"iconClass && isIconRight && !isLoading\"\r\n >\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n ></span>\r\n </div>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"icon && isIconRight && !isLoading\" [innerHTML]=\"getReplacedIcon | safe\"\r\n ></div>\r\n\r\n <ng-container *ngIf=\"isIconRight && isLoading && !disabled\">\r\n <div\r\n class=\"icon-wrapper\"\r\n (click)=\"$event.preventDefault()\"\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n </ng-container>\r\n</button>\r\n", styles: [".mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
212
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonComponent, selector: "mrx-button", inputs: { size: "size", type: "type", color: "color", iconPosition: "iconPosition", active: "active", disabled: "disabled", isLoading: "isLoading", iconOnly: "iconOnly", customClasses: "customClasses", label: "label", icon: "icon", iconClass: "iconClass", buttonType: "buttonType", href: "href", target: "target", routerLink: "routerLink", queryParams: "queryParams" }, outputs: { mrxClick: "mrxClick" }, ngImport: i0, template: "<ng-template #contentTemplate>\r\n <ng-template #spinner>\r\n <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n </ng-template>\r\n\r\n @if (isIconLeft && isLoading && !disabled) {\r\n <div\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n }\r\n\r\n @if (icon && isIconLeft && !isLoading) {\r\n <div\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n ></div>\r\n }\r\n \r\n @if (iconClass && isIconLeft && !isLoading) {\r\n <div\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n >\r\n <span\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class]=\"iconClass\"\r\n class=\"mrx-icon\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (iconClass && isIconRight && !isLoading) {\r\n <div\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n >\r\n <span\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class]=\"iconClass\"\r\n class=\"mrx-icon\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n @if (icon && isIconRight && !isLoading) {\r\n <div\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n ></div>\r\n }\r\n\r\n @if (isIconRight && isLoading && !disabled) {\r\n <div\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n (click)=\"$event.preventDefault()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n@switch (true) {\r\n @case (!!href) {\r\n <a\r\n [attr.rel]=\"target === '_blank' ? 'noopener noreferrer' : null\"\r\n [class.active]=\"active\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class]=\"getClasses\"\r\n [href]=\"href\"\r\n [target]=\"target\"\r\n class=\"mrx-btn\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </a>\r\n }\r\n @case (!!routerLink) {\r\n <a\r\n [class.active]=\"active\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class]=\"getClasses\"\r\n [queryParams]=\"queryParams\"\r\n [routerLink]=\"routerLink\"\r\n class=\"mrx-btn\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </a>\r\n }\r\n @default {\r\n <button\r\n [class.active]=\"active\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class]=\"getClasses\"\r\n [disabled]=\"disabled\"\r\n [type]=\"buttonType\"\r\n class=\"mrx-btn\"\r\n (click)=\"buttonClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n }\r\n}\r\n", styles: [".mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
209
213
  }
210
214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
211
215
  type: Component,
212
- args: [{ selector: 'mrx-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n class=\"mrx-btn\"\r\n [class]=\"getClasses\"\r\n [class.active]=\"active\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [disabled]=\"disabled\"\r\n [type]=\"buttonType\"\r\n (click)=\"buttonClick($event)\"\r\n>\r\n <ng-template #spinner>\r\n <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"isIconLeft && isLoading && !disabled\">\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"icon && isIconLeft && !isLoading\" [innerHTML]=\"getReplacedIcon | safe\"\r\n ></div>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"iconClass && isIconLeft && !isLoading\"\r\n >\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"iconClass && isIconRight && !isLoading\"\r\n >\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n ></span>\r\n </div>\r\n\r\n <div\r\n class=\"icon-wrapper\"\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n *ngIf=\"icon && isIconRight && !isLoading\" [innerHTML]=\"getReplacedIcon | safe\"\r\n ></div>\r\n\r\n <ng-container *ngIf=\"isIconRight && isLoading && !disabled\">\r\n <div\r\n class=\"icon-wrapper\"\r\n (click)=\"$event.preventDefault()\"\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n </ng-container>\r\n</button>\r\n", styles: [".mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"] }]
216
+ args: [{ selector: 'mrx-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTemplate>\r\n <ng-template #spinner>\r\n <mrx-loader [color]=\"getLoaderColor\" [size]=\"getLoaderSize\"></mrx-loader>\r\n </ng-template>\r\n\r\n @if (isIconLeft && isLoading && !disabled) {\r\n <div\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n }\r\n\r\n @if (icon && isIconLeft && !isLoading) {\r\n <div\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n ></div>\r\n }\r\n \r\n @if (iconClass && isIconLeft && !isLoading) {\r\n <div\r\n [class.mr-1]=\"size === 'small' && !iconOnly\"\r\n [class.mr-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n >\r\n <span\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class]=\"iconClass\"\r\n class=\"mrx-icon\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (iconClass && isIconRight && !isLoading) {\r\n <div\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n >\r\n <span\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large' || size === 'medium'\"\r\n [class]=\"iconClass\"\r\n class=\"mrx-icon\"\r\n ></span>\r\n </div>\r\n }\r\n\r\n @if (icon && isIconRight && !isLoading) {\r\n <div\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n [innerHTML]=\"getReplacedIcon | safe\" class=\"icon-wrapper\"\r\n ></div>\r\n }\r\n\r\n @if (isIconRight && isLoading && !disabled) {\r\n <div\r\n [class.ml-1]=\"size === 'small' && !iconOnly\"\r\n [class.ml-2]=\"(size === 'large' || size === 'medium') && !iconOnly\"\r\n class=\"icon-wrapper\"\r\n (click)=\"$event.preventDefault()\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"spinner\"></ng-container>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n@switch (true) {\r\n @case (!!href) {\r\n <a\r\n [attr.rel]=\"target === '_blank' ? 'noopener noreferrer' : null\"\r\n [class.active]=\"active\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class]=\"getClasses\"\r\n [href]=\"href\"\r\n [target]=\"target\"\r\n class=\"mrx-btn\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </a>\r\n }\r\n @case (!!routerLink) {\r\n <a\r\n [class.active]=\"active\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class]=\"getClasses\"\r\n [queryParams]=\"queryParams\"\r\n [routerLink]=\"routerLink\"\r\n class=\"mrx-btn\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </a>\r\n }\r\n @default {\r\n <button\r\n [class.active]=\"active\"\r\n [class.icon-loading]=\"isLoading && !disabled\"\r\n [class.icon-only]=\"iconOnly\"\r\n [class]=\"getClasses\"\r\n [disabled]=\"disabled\"\r\n [type]=\"buttonType\"\r\n class=\"mrx-btn\"\r\n (click)=\"buttonClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n }\r\n}\r\n", styles: [".mrx-btn.mrx-btn{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--border-radius-1);outline:none;transition:background-color .2s;text-align:center;text-decoration:none}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive{background-color:var(--system-bg-controls-positive-default);border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-positive:hover{background-color:var(--system-bg-controls-positive-hover);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative{background-color:var(--system-bg-controls-negative-default);border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-negative:hover{background-color:var(--system-bg-controls-negative-hover);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention{background-color:var(--system-bg-controls-attention-default);border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.mrx-btn-color-attention:hover{background-color:var(--system-bg-controls-attention-hover);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive{background-color:transparent;border-color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.fill-rect rect{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-positive.active svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative{background-color:transparent;border-color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active{background-color:var(--system-bg-negative-secondary);border-color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.fill-rect rect{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-negative.active svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention{background-color:transparent;border-color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active{background-color:var(--system-bg-attention-secondary);border-color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.fill-rect rect{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.mrx-btn-color-attention.active svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.disabled,:host::ng-deep .mrx-btn.mrx-btn:disabled,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn[disabled]{cursor:default}:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled] .mrx-icon{color:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn:disabled:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled]:disabled .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn[disabled]:disabled .mrx-icon{color:var(--neutral-icon-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn:disabled .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] .icon-loading circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill path{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill circle{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke path{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn:disabled svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled=disabled] svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn[disabled] svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-tertiary)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary[disabled]{background-color:var(--neutral-bg-disabled)!important;border-color:var(--neutral-bg-disabled)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary[disabled]{background-color:transparent!important;border-color:var(--neutral-bg-stroke-default)!important}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:disabled,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled=disabled],:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary[disabled]{background-color:transparent!important;border-color:transparent!important}.mrx-btn.mrx-btn.icon-loading svg{transform:rotate(-40deg);animation-duration:1.2s;animation-name:icon-loading;animation-iteration-count:infinite;transition-timing-function:ease-in-out}@keyframes icon-loading{0%{transform:rotate(-40deg)}to{transform:rotate(320deg)}}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary{border:var(--border-width-default) solid var(--brand-bg-primary-default);background-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary.active{background-color:var(--brand-bg-primary-hover);border-color:var(--brand-bg-primary-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary .mrx-icon{color:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill path{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill circle{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).fill-rect rect{fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke path{stroke:transparent;fill:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke circle{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-primary svg:not(.icon-loading).stroke-rect rect{stroke:var(--neutral-text-inverse)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary{background-color:transparent;border:var(--border-width-default) solid var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active{background-color:var(--brand-bg-tertiary-hover);border-color:var(--brand-bg-primary-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-secondary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary{background-color:transparent;border:var(--border-width-default) solid transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .icon-loading circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .icon-loading circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading path{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .icon-loading circle{stroke:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.color-attention .mrx-icon{color:var(--Orange)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .icon-loading circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) .mrx-icon{color:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary:hover:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.active:not(.red,.green,.yellow,.color-positive,.color-negative,.color-attention) svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-hover)}.mrx-btn.mrx-btn.mrx-btn-lg{font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-lg:not(.icon-only){padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-6) - var(--border-width-default));min-width:var(--sizing-24)}.mrx-btn.mrx-btn.mrx-btn-lg.icon-only{padding:calc(var(--spacing-3) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-lg .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-md{font-family:var(--body-md-bold-font-family);font-size:var(--body-md-bold-font-size);font-weight:var(--body-md-bold-font-weight);line-height:var(--body-md-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-md:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));min-width:var(--sizing-20)}.mrx-btn.mrx-btn.mrx-btn-md.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-md .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-6)}.mrx-btn.mrx-btn.mrx-btn-sm{font-family:var(--body-sm-bold-font-family);font-size:var(--body-sm-bold-font-size);font-weight:var(--body-sm-bold-font-weight);line-height:var(--body-sm-bold-line-height)}.mrx-btn.mrx-btn.mrx-btn-sm:not(.icon-only){padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));min-width:var(--sizing-16)}.mrx-btn.mrx-btn.mrx-btn-sm.icon-only{padding:calc(var(--sizing-2) - var(--border-width-default)) calc(var(--sizing-2) - var(--border-width-default))}.mrx-btn.mrx-btn.mrx-btn-sm .mrx-btn-label{display:flex;align-items:center;justify-content:center;min-height:var(--sizing-4)}.mrx-btn.mrx-btn.icon-left .icon-wrapper,.mrx-btn.mrx-btn.icon-right .icon-wrapper{display:flex;align-items:center;justify-content:center}.mrx-btn.mrx-btn.icon-left .icon-wrapper svg,.mrx-btn.mrx-btn.icon-right .icon-wrapper svg{width:100%}.mrx-btn.mrx-btn.icon-left.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-lg .icon-wrapper,.mrx-btn.mrx-btn.icon-left.mrx-btn-md .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-md .icon-wrapper{width:var(--sizing-6)}.mrx-btn.mrx-btn.icon-left.mrx-btn-sm .icon-wrapper,.mrx-btn.mrx-btn.icon-right.mrx-btn-sm .icon-wrapper{width:var(--sizing-4)}\n"] }]
213
217
  }], propDecorators: { size: [{
214
218
  type: Input
215
219
  }], type: [{
@@ -236,6 +240,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
236
240
  type: Input
237
241
  }], buttonType: [{
238
242
  type: Input
243
+ }], href: [{
244
+ type: Input
245
+ }], target: [{
246
+ type: Input
247
+ }], routerLink: [{
248
+ type: Input
249
+ }], queryParams: [{
250
+ type: Input
239
251
  }], mrxClick: [{
240
252
  type: Output
241
253
  }] } });
@@ -273,14 +285,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
273
285
 
274
286
  class ButtonModule {
275
287
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
276
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SafeModule, LoaderModule], exports: [ButtonComponent] });
277
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonModule, imports: [CommonModule, SafeModule, LoaderModule] });
288
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SafeModule, LoaderModule, RouterModule], exports: [ButtonComponent] });
289
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonModule, imports: [CommonModule, SafeModule, LoaderModule, RouterModule] });
278
290
  }
279
291
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonModule, decorators: [{
280
292
  type: NgModule,
281
293
  args: [{
282
294
  declarations: [ButtonComponent],
283
- imports: [CommonModule, SafeModule, LoaderModule],
295
+ imports: [CommonModule, SafeModule, LoaderModule, RouterModule],
284
296
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
285
297
  exports: [ButtonComponent],
286
298
  }]
@@ -2138,7 +2150,7 @@ class ModalComponent {
2138
2150
  this.isEmbed = !this.isEmbed;
2139
2151
  }
2140
2152
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2141
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", alert: "alert", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isEmbed: "isEmbed", 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 class=\"mrx-modal-title\" [innerHTML]=\"title\" [style]=\"{padding: expandable ? '0 56px' : '0 24px'}\"></div>\r\n\r\n @if (expandable) {\r\n <span\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 }\r\n\r\n @if (isClose) {\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"onClose()\"></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n @if (isBack) {\r\n <div 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\r\n @if (alert && (alert.title || alert.message)) {\r\n <mrx-alert\r\n [customClasses]=\"'mb-3'\"\r\n [title]=\"alert.title || ''\"\r\n [message]=\"alert.message || ''\"\r\n [color]=\"alert.color || 'default'\"\r\n ></mrx-alert>\r\n }\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 @if (enableFooter) {\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\">\r\n @if (!footerContent) {\r\n <mrx-button\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 } @else {\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{overflow-y:auto}::ng-deep .mrx-modal>*{display:flex;align-items:center;justify-content:center;height:100%;width:100%}:host{margin:auto 0;width:100vw}.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-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-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}::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;gap:var(--spacing-4);padding:var(--spacing-6);padding-top:0}.mrx-modal-header{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;text-transform:uppercase}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse{position:absolute;top:16px;right:48px;cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover{transform:scale(1.1)}.mrx-modal-header .icon-close{position:absolute;top:16px;right:16px;cursor:pointer}.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"], 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"], outputs: ["mrxClick"] }, { kind: "component", type: AlertComponent, selector: "mrx-alert", inputs: ["customClasses", "color", "customColor", "message", "title", "closable"], outputs: ["close"] }], animations: [
2153
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ModalComponent, selector: "mrx-modal", inputs: { title: "title", message: "message", alert: "alert", okText: "okText", closeText: "closeText", size: "size", color: "color", customClasses: "customClasses", expandable: "expandable", isEmbed: "isEmbed", 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 class=\"mrx-modal-title\" [innerHTML]=\"title\" [style]=\"{padding: expandable ? '0 56px' : '0 24px'}\"></div>\r\n\r\n @if (expandable) {\r\n <span\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 }\r\n\r\n @if (isClose) {\r\n <span class=\"mrx-icon icon-close icon-font-24\" (click)=\"onClose()\"></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-modal-body\">\r\n @if (isBack) {\r\n <div 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\r\n @if (alert && (alert.title || alert.message)) {\r\n <mrx-alert\r\n [customClasses]=\"'mb-3'\"\r\n [title]=\"alert.title || ''\"\r\n [message]=\"alert.message || ''\"\r\n [color]=\"alert.color || 'default'\"\r\n ></mrx-alert>\r\n }\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 @if (enableFooter) {\r\n <div class=\"mrx-modal-footer\" [class]=\"alignButtonsClass\">\r\n @if (!footerContent) {\r\n <mrx-button\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 } @else {\r\n <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .mrx-modal{overflow-y:auto}::ng-deep .mrx-modal>*{display:flex;align-items:center;justify-content:center;height:100%;width:100%}:host{margin:auto 0;width:100vw}.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-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-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}::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;gap:var(--spacing-4);padding:var(--spacing-6);padding-top:0}.mrx-modal-header{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;text-transform:uppercase}.mrx-modal-header .icon-arrow-expand,.mrx-modal-header .icon-arrow-collapse{position:absolute;top:16px;right:48px;cursor:pointer}.mrx-modal-header .icon-arrow-expand:hover,.mrx-modal-header .icon-arrow-collapse:hover{transform:scale(1.1)}.mrx-modal-header .icon-close{position:absolute;top:16px;right:16px;cursor:pointer}.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"], 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: AlertComponent, selector: "mrx-alert", inputs: ["customClasses", "color", "customColor", "message", "title", "closable"], outputs: ["close"] }], animations: [
2142
2154
  trigger('animateExpand', [
2143
2155
  state('open', style({
2144
2156
  height: '100%',
@@ -2322,7 +2334,7 @@ class SidePageComponent {
2322
2334
  }
2323
2335
  }
2324
2336
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidePageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2325
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SidePageComponent, selector: "mrx-side-page", inputs: { title: "title", tooltip: "tooltip", 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 class=\"mrx-icon icon-info icon-font-16\" [mrxCdkTooltip]=\"tooltip\"></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"], 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: [
2337
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SidePageComponent, selector: "mrx-side-page", inputs: { title: "title", tooltip: "tooltip", 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 class=\"mrx-icon icon-info icon-font-16\" [mrxCdkTooltip]=\"tooltip\"></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: [
2326
2338
  trigger('animateExpand', [
2327
2339
  state('open', style({
2328
2340
  transform: 'translateX(0)'
@@ -2493,6 +2505,17 @@ const getInnerItems = (items, selectedItems = []) => {
2493
2505
  });
2494
2506
  };
2495
2507
 
2508
+ const getInnerSelected = (items, selected, bindValue) => {
2509
+ return items.filter(i => {
2510
+ if (bindValue) {
2511
+ return selected.includes(i[bindValue]);
2512
+ }
2513
+ else {
2514
+ return selected.includes(i);
2515
+ }
2516
+ });
2517
+ };
2518
+
2496
2519
  var InputTextSizesEnum;
2497
2520
  (function (InputTextSizesEnum) {
2498
2521
  InputTextSizesEnum["small"] = "mrx-input-text-sm";
@@ -2688,15 +2711,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2688
2711
  class SelectComponent {
2689
2712
  searchValue = '';
2690
2713
  isOpen = false;
2691
- selected = [];
2714
+ originSelected = [];
2692
2715
  originItems = [];
2716
+ selected = [];
2693
2717
  innerItems = [];
2694
2718
  // SAVE STATE
2695
2719
  uuid = v4();
2696
2720
  fields = [];
2697
2721
  set items(items) {
2698
2722
  this.originItems = items;
2699
- this.innerItems = getInnerItems(items, this.selected);
2723
+ this.updateSelected(this.originItems, this.originSelected);
2700
2724
  }
2701
2725
  multiple = false;
2702
2726
  isLoading = false;
@@ -2740,7 +2764,7 @@ class SelectComponent {
2740
2764
  get filteredItems() {
2741
2765
  return this.innerItems.filter(i => {
2742
2766
  if (this.bindLabel) {
2743
- return i[this.bindLabel].includes(this.searchValue);
2767
+ return String(i[this.bindLabel]).includes(this.searchValue);
2744
2768
  }
2745
2769
  else {
2746
2770
  return String(i).includes(this.searchValue);
@@ -2804,14 +2828,18 @@ class SelectComponent {
2804
2828
  }
2805
2829
  writeValue(selected = []) {
2806
2830
  if (selected) {
2807
- if (this.multiple && Array.isArray(selected)) {
2808
- this.selected = selected;
2809
- }
2810
- else {
2811
- this.selected = [selected];
2812
- }
2813
- this.innerItems = getInnerItems(this.originItems, this.selected);
2831
+ this.originSelected = selected;
2832
+ this.updateSelected(this.originItems, this.originSelected);
2833
+ }
2834
+ }
2835
+ updateSelected(items = [], selected = []) {
2836
+ if (this.multiple && Array.isArray(this.originSelected)) {
2837
+ this.selected = getInnerSelected(items, selected, this.bindValue);
2814
2838
  }
2839
+ else {
2840
+ this.selected = getInnerSelected(items, [selected], this.bindValue);
2841
+ }
2842
+ this.innerItems = getInnerItems(items, this.selected);
2815
2843
  }
2816
2844
  updateValue(selectedItems) {
2817
2845
  const clearedSelected = getSelectedItems(selectedItems, this.bindValue, this.bindLabel);
@@ -4165,11 +4193,11 @@ class TruncateTextComponent {
4165
4193
  this.isVisibleButton = event;
4166
4194
  }
4167
4195
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TruncateTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4168
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TruncateTextComponent, selector: "mrx-truncate-text", inputs: { count: "count", responsiveCount: "responsiveCount", isOpen: "isOpen", lineHeight: "lineHeight", onText: "onText", offText: "offText" }, ngImport: i0, template: "<div\r\n class=\"mrx-truncate-text\"\r\n mrxTruncateText\r\n [count]=\"count\"\r\n [responsiveCount]=\"responsiveCount\"\r\n [isOpen]=\"isOpen\"\r\n [lineHeight]=\"lineHeight\"\r\n [class.mb-2]=\"getGapClass\"\r\n (changeVisibleButton)=\"changeVisibleButton($event)\"\r\n>\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<mrx-link\r\n *ngIf=\"isVisibleButton\"\r\n [type]=\"'pseudo'\"\r\n [prevent]=\"true\"\r\n (clicked)=\"isOpen = !isOpen\"\r\n>\r\n {{ isOpen ? offText : onText }}\r\n</mrx-link>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "mrx-link", inputs: ["href", "target", "routerLink", "queryParams", "type", "monochrome", "customClasses", "prevent", "size"], outputs: ["clicked"] }, { kind: "directive", type: TruncateTextDirective, selector: "[mrxTruncateText]", inputs: ["count", "responsiveCount", "lineHeight", "isOpen", "truncateButtonRef"], outputs: ["changeVisibleButton"] }] });
4196
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TruncateTextComponent, selector: "mrx-truncate-text", inputs: { count: "count", responsiveCount: "responsiveCount", isOpen: "isOpen", lineHeight: "lineHeight", onText: "onText", offText: "offText" }, ngImport: i0, template: "<div\r\n class=\"mrx-truncate-text\"\r\n mrxTruncateText\r\n [count]=\"count\"\r\n [responsiveCount]=\"responsiveCount\"\r\n [isOpen]=\"isOpen\"\r\n [lineHeight]=\"lineHeight\"\r\n [class.mb-2]=\"getGapClass\"\r\n (changeVisibleButton)=\"changeVisibleButton($event)\"\r\n>\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<mrx-link\r\n *ngIf=\"isVisibleButton\"\r\n [type]=\"'pseudo'\"\r\n [prevent]=\"true\"\r\n (clicked)=\"isOpen = !isOpen\"\r\n>\r\n {{ isOpen ? offText : onText }}\r\n</mrx-link>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "mrx-link", inputs: ["href", "target", "routerLink", "queryParams", "type", "monochrome", "customClasses", "prevent", "size"], outputs: ["clicked"] }, { kind: "directive", type: TruncateTextDirective, selector: "[mrxTruncateText]", inputs: ["count", "responsiveCount", "lineHeight", "isOpen", "truncateButtonRef"], outputs: ["changeVisibleButton"] }] });
4169
4197
  }
4170
4198
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TruncateTextComponent, decorators: [{
4171
4199
  type: Component,
4172
- args: [{ selector: 'mrx-truncate-text', template: "<div\r\n class=\"mrx-truncate-text\"\r\n mrxTruncateText\r\n [count]=\"count\"\r\n [responsiveCount]=\"responsiveCount\"\r\n [isOpen]=\"isOpen\"\r\n [lineHeight]=\"lineHeight\"\r\n [class.mb-2]=\"getGapClass\"\r\n (changeVisibleButton)=\"changeVisibleButton($event)\"\r\n>\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<mrx-link\r\n *ngIf=\"isVisibleButton\"\r\n [type]=\"'pseudo'\"\r\n [prevent]=\"true\"\r\n (clicked)=\"isOpen = !isOpen\"\r\n>\r\n {{ isOpen ? offText : onText }}\r\n</mrx-link>\r\n" }]
4200
+ args: [{ selector: 'mrx-truncate-text', template: "<div\r\n class=\"mrx-truncate-text\"\r\n mrxTruncateText\r\n [count]=\"count\"\r\n [responsiveCount]=\"responsiveCount\"\r\n [isOpen]=\"isOpen\"\r\n [lineHeight]=\"lineHeight\"\r\n [class.mb-2]=\"getGapClass\"\r\n (changeVisibleButton)=\"changeVisibleButton($event)\"\r\n>\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<mrx-link\r\n *ngIf=\"isVisibleButton\"\r\n [type]=\"'pseudo'\"\r\n [prevent]=\"true\"\r\n (clicked)=\"isOpen = !isOpen\"\r\n>\r\n {{ isOpen ? offText : onText }}\r\n</mrx-link>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n" }]
4173
4201
  }], propDecorators: { count: [{
4174
4202
  type: Input
4175
4203
  }], responsiveCount: [{
@@ -4401,7 +4429,7 @@ class GalleryConfirmModalComponent extends ModalServiceComponent {
4401
4429
  this.dialogRef.close(this.result);
4402
4430
  }
4403
4431
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryConfirmModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
4404
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryConfirmModalComponent, selector: "app-gallery-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n (close)=\"close()\"\r\n size=\"small\"\r\n color=\"negative\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <p class=\"text-center\">{{message}}</p>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"ok()\"\r\n >\u0423\u0434\u0430\u043B\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }] });
4432
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryConfirmModalComponent, selector: "app-gallery-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n (close)=\"close()\"\r\n size=\"small\"\r\n color=\"negative\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col\">\r\n <p class=\"text-center\">{{message}}</p>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n color=\"negative\"\r\n (click)=\"ok()\"\r\n >\u0423\u0434\u0430\u043B\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", dependencies: [{ 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: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }] });
4405
4433
  }
4406
4434
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryConfirmModalComponent, decorators: [{
4407
4435
  type: Component,
@@ -5077,7 +5105,7 @@ class AlertModalComponent extends ModalServiceComponent {
5077
5105
  this.dialogRef.close(this.result);
5078
5106
  }
5079
5107
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }, { token: MODAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
5080
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertModalComponent, isStandalone: true, selector: "mrx-default-alert-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n size=\"small\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u041E\u043A' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }] });
5108
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AlertModalComponent, isStandalone: true, selector: "mrx-default-alert-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n size=\"small\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u041E\u043A' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "ngmodule", type: ButtonModule }, { 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"] }] });
5081
5109
  }
5082
5110
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertModalComponent, decorators: [{
5083
5111
  type: Component,
@@ -5116,7 +5144,7 @@ class ConfirmModalComponent extends ModalServiceComponent {
5116
5144
  this.dialogRef.close(this.result);
5117
5145
  }
5118
5146
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }, { token: MODAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
5119
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmModalComponent, isStandalone: true, selector: "mrx-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n [size]=\"'small'\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"cancel()\"\r\n >\r\n {{ config.cancelText || '\u041E\u0442\u043C\u0435\u043D\u0430' }}\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }] });
5147
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmModalComponent, isStandalone: true, selector: "mrx-confirm-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [customClasses]=\"config.customClasses || ''\"\r\n [title]=\"model.title\"\r\n [message]=\"model.message\"\r\n [alert]=\"model.alert\"\r\n [color]=\"config.color || 'default'\"\r\n [size]=\"'small'\"\r\n (close)=\"close()\"\r\n (ok)=\"ok()\"\r\n>\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"cancel()\"\r\n >\r\n {{ config.cancelText || '\u041E\u0442\u043C\u0435\u043D\u0430' }}\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"config.color || 'default'\"\r\n (click)=\"ok()\"\r\n >\r\n {{ config.okText || '\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C' }}\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { 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: "ngmodule", type: ModalModule }, { kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }] });
5120
5148
  }
5121
5149
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmModalComponent, decorators: [{
5122
5150
  type: Component,
@@ -5877,7 +5905,7 @@ class GalleryComponent {
5877
5905
  }, {});
5878
5906
  }
5879
5907
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, deps: [{ token: GalleryService }], target: i0.ɵɵFactoryTarget.Component });
5880
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "mrx-gallery", inputs: { data: "data", isExpandable: "isExpandable", customClasses: "customClasses", rotateEndPoint: "rotateEndPoint", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", isEditing: "isEditing", isSaveRotate: "isSaveRotate", descriptionMaxLength: "descriptionMaxLength", thumbsConfig: "thumbsConfig", toolbarConfig: "toolbarConfig" }, outputs: { deletePhoto: "deletePhoto", updatePhoto: "updatePhoto" }, ngImport: i0, template: "<div class=\"mrx-gallery\" [class]=\"getClasses\">\r\n <div class=\"mrx-gallery-row row\">\r\n <div *ngFor=\"let preview of getData; trackBy: trackByFn; let index = index\" class=\"col col-12 col-sm-6 col-md-3\">\r\n <mrx-gallery-item\r\n [preview]=\"preview\"\r\n [index]=\"index\"\r\n [isEditing]=\"isEditing\"\r\n [descriptionMaxLength]=\"descriptionMaxLength\"\r\n [rotateSlides]=\"rotateSlides\"\r\n [isLoading]=\"isLoading\"\r\n [deleteEndPoint]=\"deleteEndPoint\"\r\n [updateEndPoint]=\"updateEndPoint\"\r\n (openGalleryModal)=\"openGalleryModal($event)\"\r\n (deletePhoto)=\"deletePhoto.emit($event)\"\r\n (updatePhoto)=\"updatePhoto.emit($event)\"\r\n ></mrx-gallery-item>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mt-3\" *ngIf=\"isShowMore\">\r\n <div class=\"col d-flex justify-content-center\">\r\n <mrx-button type=\"tertiary\" (mrxClick)=\"changeExpanded()\">\r\n {{ getIsExpanded ? '\u0421\u043A\u0440\u044B\u0442\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u0438' }}\r\n <span\r\n class=\"mrx-icon icon-font-16 ml-2\"\r\n [class.icon-chevron-down]=\"!getIsExpanded\"\r\n [class.icon-chevron-up]=\"getIsExpanded\"\r\n ></span>\r\n </mrx-button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep :root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-stroke: 2.75}::ng-deep .f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}::ng-deep .f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}::ng-deep .f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}::ng-deep .f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}::ng-deep .f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{to{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}::ng-deep .f-throwOutUp{animation:var(--f-throw-out-duration, .175s) ease-out both f-throwOutUp}::ng-deep .f-throwOutDown{animation:var(--f-throw-out-duration, .175s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throw-out-distance, 150px) * -1),0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throw-out-distance, 150px),0);opacity:0}}::ng-deep .f-zoomInUp{animation:var(--f-transition-duration, .2s) ease .1s both f-zoomInUp}::ng-deep .f-zoomOutDown{animation:var(--f-transition-duration, .2s) ease both f-zoomOutDown}@keyframes f-zoomInUp{0%{transform:scale(.975) translate3d(0,16px,0);opacity:0}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(.975) translate3d(0,16px,0);opacity:0}}::ng-deep .f-fadeIn{animation:var(--f-transition-duration, .2s) ease both f-fadeIn;z-index:2}::ng-deep .f-fadeOut{animation:var(--f-transition-duration, .2s) ease both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeOut{to{opacity:0}}::ng-deep .f-fadeFastIn{animation:var(--f-transition-duration, .2s) ease-out both f-fadeFastIn;z-index:2}::ng-deep .f-fadeFastOut{animation:var(--f-transition-duration, .1s) ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}to{opacity:1}}@keyframes f-fadeFastOut{to{opacity:0}}::ng-deep .f-fadeSlowIn{animation:var(--f-transition-duration, .5s) ease both f-fadeSlowIn;z-index:2}::ng-deep .f-fadeSlowOut{animation:var(--f-transition-duration, .5s) ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeSlowOut{to{opacity:0}}::ng-deep .f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease-out both f-crossfadeIn;z-index:2}::ng-deep .f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .5) linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-crossfadeOut{to{opacity:0}}::ng-deep .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNext}::ng-deep .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrev}::ng-deep .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNext}::ng-deep .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translate(100%)}to{transform:translateZ(0)}}@keyframes f-slideInNext{0%{transform:translate(-100%)}to{transform:translateZ(0)}}@keyframes f-slideOutNext{to{transform:translate(-100%)}}@keyframes f-slideOutPrev{to{transform:translate(100%)}}::ng-deep .f-classicIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicInNext;z-index:2}::ng-deep .f-classicIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicInPrev;z-index:2}::ng-deep .f-classicOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicOutNext;z-index:1}::ng-deep .f-classicOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translate(-75px);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translate(75px);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes f-classicOutNext{to{transform:translate(-75px);opacity:0}}@keyframes f-classicOutPrev{to{transform:translate(75px);opacity:0}}::ng-deep :root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: .65}::ng-deep .f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media (hover: hover){::ng-deep .f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}::ng-deep .f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}::ng-deep .f-button:focus:not(:focus-visible){outline:none}::ng-deep .f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}::ng-deep .f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}::ng-deep .f-button[disabled]{cursor:default}::ng-deep .f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}::ng-deep .f-carousel__nav .f-button.is-prev,::ng-deep .f-carousel__nav .f-button.is-next,::ng-deep .fancybox__nav .f-button.is-prev,::ng-deep .fancybox__nav .f-button.is-next{position:absolute;z-index:1}::ng-deep .is-horizontal .f-carousel__nav .f-button.is-prev,::ng-deep .is-horizontal .f-carousel__nav .f-button.is-next,::ng-deep .is-horizontal .fancybox__nav .f-button.is-prev,::ng-deep .is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}::ng-deep .is-horizontal .f-carousel__nav .f-button.is-prev,::ng-deep .is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}::ng-deep .is-horizontal .f-carousel__nav .f-button.is-next,::ng-deep .is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}::ng-deep .is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,::ng-deep .is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}::ng-deep .is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,::ng-deep .is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-prev,::ng-deep .is-vertical .f-carousel__nav .f-button.is-next,::ng-deep .is-vertical .fancybox__nav .f-button.is-prev,::ng-deep .is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translate(-50%)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-prev,::ng-deep .is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-next,::ng-deep .is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-prev svg,::ng-deep .is-vertical .f-carousel__nav .f-button.is-next svg,::ng-deep .is-vertical .fancybox__nav .f-button.is-prev svg,::ng-deep .is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}::ng-deep html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}::ng-deep html.with-fancybox body{touch-action:none}::ng-deep html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}::ng-deep .fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, .98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, .1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;inset:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}::ng-deep .fancybox__container *,::ng-deep .fancybox__container *:before,::ng-deep .fancybox__container *:after{box-sizing:inherit}::ng-deep .fancybox__container::backdrop{background-color:#0000}::ng-deep .fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}::ng-deep .fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}::ng-deep .fancybox__viewport{width:100%;height:100%}::ng-deep .fancybox__viewport.is-draggable{cursor:move;cursor:grab}::ng-deep .fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}::ng-deep .fancybox__track{display:flex;margin:0 auto;height:100%}::ng-deep .fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translateZ(0);backface-visibility:hidden}::ng-deep .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}::ng-deep .fancybox__slide.has-iframe,::ng-deep .fancybox__slide.has-video,::ng-deep .fancybox__slide.has-html5video{overflow:hidden}::ng-deep .fancybox__slide.has-image{overflow:hidden}::ng-deep .fancybox__slide.has-image.is-animating,::ng-deep .fancybox__slide.has-image.is-selected{overflow:visible}::ng-deep .fancybox__slide:before,::ng-deep .fancybox__slide:after{content:\"\";flex:0 0 0;margin:auto}::ng-deep .fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}::ng-deep .is-loading .fancybox__content{opacity:0}::ng-deep .is-draggable .fancybox__content{cursor:move;cursor:grab}::ng-deep .can-zoom_in .fancybox__content{cursor:zoom-in}::ng-deep .can-zoom_out .fancybox__content{cursor:zoom-out}::ng-deep .is-dragging .fancybox__content{cursor:move;cursor:grabbing}::ng-deep .fancybox__content [data-selectable],::ng-deep .fancybox__content [contenteditable]{cursor:auto}::ng-deep .fancybox__slide.has-image>.fancybox__content{padding:0;background:#0000;min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translateZ(0);backface-visibility:hidden}::ng-deep .fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%}::ng-deep .is-zooming-in .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content,::ng-deep .is-zooming-out .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content{visibility:hidden}::ng-deep .is-animating .fancybox__content,::ng-deep .is-dragging .fancybox__content{filter:blur(0px);will-change:transform,width,height}::ng-deep .fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;-webkit-user-select:none;user-select:none}::ng-deep .fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}::ng-deep .is-loading .fancybox__caption,::ng-deep .is-closing .fancybox__caption{opacity:0;visibility:hidden}::ng-deep .is-compact .fancybox__caption{padding-bottom:0}::ng-deep .f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}::ng-deep .fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}::ng-deep .is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}::ng-deep .is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}::ng-deep .fancybox__content>.f-button.is-close-btn:hover{opacity:1}::ng-deep .fancybox__footer{padding:0;margin:0;position:relative}::ng-deep .fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}::ng-deep .is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:#18181b80}::ng-deep .is-compact .fancybox__footer .fancybox__caption{padding:12px}::ng-deep .is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, .6);--f-button-active-bg: rgba(0, 0, 0, .6);--f-button-hover-bg: rgba(0, 0, 0, .6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}::ng-deep .fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, .3);--f-button-active-bg: rgba(24, 24, 27, .5);--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .5));--f-button-svg-disabled-opacity: .65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}::ng-deep .fancybox__nav .f-button:before{position:absolute;content:\"\";inset:-30px -20px;z-index:1}::ng-deep .is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}::ng-deep .is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}::ng-deep .fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -.5));z-index:30;cursor:pointer}::ng-deep .fancybox-protected{position:absolute;inset:0;z-index:40;-webkit-user-select:none;user-select:none}::ng-deep .fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;-webkit-user-select:none;user-select:none;pointer-events:none}::ng-deep .fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none}::ng-deep .fancybox__container:not([aria-hidden]){opacity:0}::ng-deep .fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),::ng-deep .fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),::ng-deep .fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, .25s) ease .1s backwards f-fadeIn}::ng-deep .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, .35s) ease backwards f-fadeIn}::ng-deep .fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),::ng-deep .fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),::ng-deep .fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, .15s) ease forwards f-fadeOut}::ng-deep .fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, .35s) ease forwards f-fadeOut}::ng-deep .has-iframe .fancybox__content,::ng-deep .has-map .fancybox__content,::ng-deep .has-pdf .fancybox__content,::ng-deep .has-youtube .fancybox__content,::ng-deep .has-vimeo .fancybox__content,::ng-deep .has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}::ng-deep .has-iframe .fancybox__content,::ng-deep .has-map .fancybox__content,::ng-deep .has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}::ng-deep .fancybox__container.is-compact .has-iframe .fancybox__content,::ng-deep .fancybox__container.is-compact .has-map .fancybox__content,::ng-deep .fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%}::ng-deep .has-youtube .fancybox__content,::ng-deep .has-vimeo .fancybox__content,::ng-deep .has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}::ng-deep .has-map .fancybox__content,::ng-deep .has-pdf .fancybox__content,::ng-deep .has-youtube .fancybox__content,::ng-deep .has-vimeo .fancybox__content,::ng-deep .has-html5video .fancybox__content{padding:0;background:#18181be6;color:#fff}::ng-deep .has-map .fancybox__content{background:#e5e3df}::ng-deep .fancybox__html5video,::ng-deep .fancybox__iframe{border:0;display:block;height:100%;width:100%;background:#0000}::ng-deep .fancybox-placeholder{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}::ng-deep .f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}::ng-deep .f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: .5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}::ng-deep .f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px}::ng-deep .f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;user-select:none;perspective:1000px;transform:translateZ(0)}::ng-deep .f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2,#e2e8f0);z-index:-1}::ng-deep .f-thumbs .f-spinner svg{display:none}::ng-deep .f-thumbs.is-vertical{height:100%}::ng-deep .f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translateZ(0)}::ng-deep .f-thumbs__track{display:flex}::ng-deep .f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}::ng-deep .f-thumbs__slide.is-loading img{opacity:0}::ng-deep .is-classic .f-thumbs__viewport{height:100%}::ng-deep .is-modern .f-thumbs__track{width:max-content}::ng-deep .is-modern .f-thumbs__track:before{content:\"\";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0)) * -.5);width:calc(var(--width, 0) * 1px + var(--f-thumb-clip-width, 0));cursor:pointer}::ng-deep .is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px),0,0);transition:none;pointer-events:none}::ng-deep .is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease}::ng-deep .is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease}::ng-deep .is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}::ng-deep .f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:#0000;outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}::ng-deep .f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}::ng-deep .f-thumbs__slide__button:focus:not(:focus-visible){outline:none}::ng-deep .f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}::ng-deep .is-modern .f-thumbs__slide__button{--clip-path: inset(0 calc((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * (1 - var(--progress, 0)) * .5) round var(--f-thumb-border-radius, 0));clip-path:var(--clip-path)}::ng-deep .is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}::ng-deep .is-classic .is-nav-selected .f-thumbs__slide__button:after{content:\"\";position:absolute;inset:0;height:auto;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}::ng-deep .f-thumbs__slide__img{overflow:hidden;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)}::ng-deep .f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px}::ng-deep .f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}::ng-deep .f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px}::ng-deep .f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}::ng-deep .fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(.23,1,.32,1)}::ng-deep .fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: .5;--f-thumb-hover-opacity: 1}::ng-deep .fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(#ffffff1a,#ffffff0d)}::ng-deep .fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}::ng-deep .fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(#ffffff1a,#ffffff0d)}::ng-deep .fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}::ng-deep .fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}::ng-deep .is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}::ng-deep .fancybox__thumbs.is-masked{max-height:0px!important}::ng-deep .is-closing .fancybox__thumbs{transition:none!important}::ng-deep .fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, .94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, .65);--f-button-hover-bg: rgba(70, 70, 73, .65);--f-button-active-bg: rgba(90, 90, 93, .65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI Adjusted,Segoe UI,Liberation Sans,sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, .5));pointer-events:none;z-index:20}::ng-deep .fancybox__toolbar :focus-visible{z-index:1}::ng-deep .fancybox__toolbar.is-absolute,::ng-deep .is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}::ng-deep .is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}::ng-deep .fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}::ng-deep .fancybox__toolbar__column.is-left,::ng-deep .fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}::ng-deep .fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}::ng-deep .fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;-webkit-user-select:none;user-select:none}::ng-deep .fancybox__infobar span{padding:0 5px}::ng-deep .fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}::ng-deep [data-fancybox-toggle-slideshow]{position:relative}::ng-deep [data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}::ng-deep [data-fancybox-toggle-slideshow] svg g:first-child{display:flex}::ng-deep [data-fancybox-toggle-slideshow] svg g:last-child{display:none}::ng-deep .has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}::ng-deep .has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}::ng-deep [data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}::ng-deep [data-fancybox-toggle-fullscreen] svg g:last-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}::ng-deep .f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;-webkit-user-select:none;user-select:none;pointer-events:none}.mrx-gallery-row{row-gap:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: ["preview", "index", "isEditing", "descriptionMaxLength", "deleteEndPoint", "updateEndPoint", "rotateSlides", "isLoading"], outputs: ["openGalleryModal", "deletePhoto", "updatePhoto"] }] });
5908
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GalleryComponent, selector: "mrx-gallery", inputs: { data: "data", isExpandable: "isExpandable", customClasses: "customClasses", rotateEndPoint: "rotateEndPoint", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", isEditing: "isEditing", isSaveRotate: "isSaveRotate", descriptionMaxLength: "descriptionMaxLength", thumbsConfig: "thumbsConfig", toolbarConfig: "toolbarConfig" }, outputs: { deletePhoto: "deletePhoto", updatePhoto: "updatePhoto" }, ngImport: i0, template: "<div class=\"mrx-gallery\" [class]=\"getClasses\">\r\n <div class=\"mrx-gallery-row row\">\r\n <div *ngFor=\"let preview of getData; trackBy: trackByFn; let index = index\" class=\"col col-12 col-sm-6 col-md-3\">\r\n <mrx-gallery-item\r\n [preview]=\"preview\"\r\n [index]=\"index\"\r\n [isEditing]=\"isEditing\"\r\n [descriptionMaxLength]=\"descriptionMaxLength\"\r\n [rotateSlides]=\"rotateSlides\"\r\n [isLoading]=\"isLoading\"\r\n [deleteEndPoint]=\"deleteEndPoint\"\r\n [updateEndPoint]=\"updateEndPoint\"\r\n (openGalleryModal)=\"openGalleryModal($event)\"\r\n (deletePhoto)=\"deletePhoto.emit($event)\"\r\n (updatePhoto)=\"updatePhoto.emit($event)\"\r\n ></mrx-gallery-item>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mt-3\" *ngIf=\"isShowMore\">\r\n <div class=\"col d-flex justify-content-center\">\r\n <mrx-button type=\"tertiary\" (mrxClick)=\"changeExpanded()\">\r\n {{ getIsExpanded ? '\u0421\u043A\u0440\u044B\u0442\u044C' : '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u0438' }}\r\n <span\r\n class=\"mrx-icon icon-font-16 ml-2\"\r\n [class.icon-chevron-down]=\"!getIsExpanded\"\r\n [class.icon-chevron-up]=\"getIsExpanded\"\r\n ></span>\r\n </mrx-button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep :root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-stroke: 2.75}::ng-deep .f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}::ng-deep .f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}::ng-deep .f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}::ng-deep .f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}::ng-deep .f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{to{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}::ng-deep .f-throwOutUp{animation:var(--f-throw-out-duration, .175s) ease-out both f-throwOutUp}::ng-deep .f-throwOutDown{animation:var(--f-throw-out-duration, .175s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throw-out-distance, 150px) * -1),0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throw-out-distance, 150px),0);opacity:0}}::ng-deep .f-zoomInUp{animation:var(--f-transition-duration, .2s) ease .1s both f-zoomInUp}::ng-deep .f-zoomOutDown{animation:var(--f-transition-duration, .2s) ease both f-zoomOutDown}@keyframes f-zoomInUp{0%{transform:scale(.975) translate3d(0,16px,0);opacity:0}to{transform:scale(1) translateZ(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(.975) translate3d(0,16px,0);opacity:0}}::ng-deep .f-fadeIn{animation:var(--f-transition-duration, .2s) ease both f-fadeIn;z-index:2}::ng-deep .f-fadeOut{animation:var(--f-transition-duration, .2s) ease both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeOut{to{opacity:0}}::ng-deep .f-fadeFastIn{animation:var(--f-transition-duration, .2s) ease-out both f-fadeFastIn;z-index:2}::ng-deep .f-fadeFastOut{animation:var(--f-transition-duration, .1s) ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}to{opacity:1}}@keyframes f-fadeFastOut{to{opacity:0}}::ng-deep .f-fadeSlowIn{animation:var(--f-transition-duration, .5s) ease both f-fadeSlowIn;z-index:2}::ng-deep .f-fadeSlowOut{animation:var(--f-transition-duration, .5s) ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}to{opacity:1}}@keyframes f-fadeSlowOut{to{opacity:0}}::ng-deep .f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease-out both f-crossfadeIn;z-index:2}::ng-deep .f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .5) linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}}@keyframes f-crossfadeOut{to{opacity:0}}::ng-deep .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNext}::ng-deep .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrev}::ng-deep .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNext}::ng-deep .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translate(100%)}to{transform:translateZ(0)}}@keyframes f-slideInNext{0%{transform:translate(-100%)}to{transform:translateZ(0)}}@keyframes f-slideOutNext{to{transform:translate(-100%)}}@keyframes f-slideOutPrev{to{transform:translate(100%)}}::ng-deep .f-classicIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicInNext;z-index:2}::ng-deep .f-classicIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicInPrev;z-index:2}::ng-deep .f-classicOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicOutNext;z-index:1}::ng-deep .f-classicOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translate(-75px);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translate(75px);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes f-classicOutNext{to{transform:translate(-75px);opacity:0}}@keyframes f-classicOutPrev{to{transform:translate(75px);opacity:0}}::ng-deep :root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: .65}::ng-deep .f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media (hover: hover){::ng-deep .f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}::ng-deep .f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}::ng-deep .f-button:focus:not(:focus-visible){outline:none}::ng-deep .f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}::ng-deep .f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}::ng-deep .f-button[disabled]{cursor:default}::ng-deep .f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}::ng-deep .f-carousel__nav .f-button.is-prev,::ng-deep .f-carousel__nav .f-button.is-next,::ng-deep .fancybox__nav .f-button.is-prev,::ng-deep .fancybox__nav .f-button.is-next{position:absolute;z-index:1}::ng-deep .is-horizontal .f-carousel__nav .f-button.is-prev,::ng-deep .is-horizontal .f-carousel__nav .f-button.is-next,::ng-deep .is-horizontal .fancybox__nav .f-button.is-prev,::ng-deep .is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}::ng-deep .is-horizontal .f-carousel__nav .f-button.is-prev,::ng-deep .is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}::ng-deep .is-horizontal .f-carousel__nav .f-button.is-next,::ng-deep .is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}::ng-deep .is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,::ng-deep .is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}::ng-deep .is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,::ng-deep .is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-prev,::ng-deep .is-vertical .f-carousel__nav .f-button.is-next,::ng-deep .is-vertical .fancybox__nav .f-button.is-prev,::ng-deep .is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translate(-50%)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-prev,::ng-deep .is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-next,::ng-deep .is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}::ng-deep .is-vertical .f-carousel__nav .f-button.is-prev svg,::ng-deep .is-vertical .f-carousel__nav .f-button.is-next svg,::ng-deep .is-vertical .fancybox__nav .f-button.is-prev svg,::ng-deep .is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}::ng-deep html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}::ng-deep html.with-fancybox body{touch-action:none}::ng-deep html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none}::ng-deep .fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, .98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, .1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;inset:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}::ng-deep .fancybox__container *,::ng-deep .fancybox__container *:before,::ng-deep .fancybox__container *:after{box-sizing:inherit}::ng-deep .fancybox__container::backdrop{background-color:#0000}::ng-deep .fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}::ng-deep .fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}::ng-deep .fancybox__viewport{width:100%;height:100%}::ng-deep .fancybox__viewport.is-draggable{cursor:move;cursor:grab}::ng-deep .fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}::ng-deep .fancybox__track{display:flex;margin:0 auto;height:100%}::ng-deep .fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translateZ(0);backface-visibility:hidden}::ng-deep .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}::ng-deep .fancybox__slide.has-iframe,::ng-deep .fancybox__slide.has-video,::ng-deep .fancybox__slide.has-html5video{overflow:hidden}::ng-deep .fancybox__slide.has-image{overflow:hidden}::ng-deep .fancybox__slide.has-image.is-animating,::ng-deep .fancybox__slide.has-image.is-selected{overflow:visible}::ng-deep .fancybox__slide:before,::ng-deep .fancybox__slide:after{content:\"\";flex:0 0 0;margin:auto}::ng-deep .fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}::ng-deep .is-loading .fancybox__content{opacity:0}::ng-deep .is-draggable .fancybox__content{cursor:move;cursor:grab}::ng-deep .can-zoom_in .fancybox__content{cursor:zoom-in}::ng-deep .can-zoom_out .fancybox__content{cursor:zoom-out}::ng-deep .is-dragging .fancybox__content{cursor:move;cursor:grabbing}::ng-deep .fancybox__content [data-selectable],::ng-deep .fancybox__content [contenteditable]{cursor:auto}::ng-deep .fancybox__slide.has-image>.fancybox__content{padding:0;background:#0000;min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translateZ(0);backface-visibility:hidden}::ng-deep .fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%}::ng-deep .is-zooming-in .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content,::ng-deep .is-zooming-out .fancybox__viewport:not(.is-dragging) .fancybox__slide:not(.is-selected) .fancybox__content{visibility:hidden}::ng-deep .is-animating .fancybox__content,::ng-deep .is-dragging .fancybox__content{filter:blur(0px);will-change:transform,width,height}::ng-deep .fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;-webkit-user-select:none;user-select:none}::ng-deep .fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}::ng-deep .is-loading .fancybox__caption,::ng-deep .is-closing .fancybox__caption{opacity:0;visibility:hidden}::ng-deep .is-compact .fancybox__caption{padding-bottom:0}::ng-deep .f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}::ng-deep .fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}::ng-deep .is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}::ng-deep .is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}::ng-deep .fancybox__content>.f-button.is-close-btn:hover{opacity:1}::ng-deep .fancybox__footer{padding:0;margin:0;position:relative}::ng-deep .fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}::ng-deep .is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:#18181b80}::ng-deep .is-compact .fancybox__footer .fancybox__caption{padding:12px}::ng-deep .is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, .6);--f-button-active-bg: rgba(0, 0, 0, .6);--f-button-hover-bg: rgba(0, 0, 0, .6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}::ng-deep .fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, .3);--f-button-active-bg: rgba(24, 24, 27, .5);--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .5));--f-button-svg-disabled-opacity: .65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}::ng-deep .fancybox__nav .f-button:before{position:absolute;content:\"\";inset:-30px -20px;z-index:1}::ng-deep .is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}::ng-deep .is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}::ng-deep .fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -.5));z-index:30;cursor:pointer}::ng-deep .fancybox-protected{position:absolute;inset:0;z-index:40;-webkit-user-select:none;user-select:none}::ng-deep .fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;-webkit-user-select:none;user-select:none;pointer-events:none}::ng-deep .fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none}::ng-deep .fancybox__container:not([aria-hidden]){opacity:0}::ng-deep .fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),::ng-deep .fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),::ng-deep .fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, .25s) ease .1s backwards f-fadeIn}::ng-deep .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, .35s) ease backwards f-fadeIn}::ng-deep .fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),::ng-deep .fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),::ng-deep .fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, .15s) ease forwards f-fadeOut}::ng-deep .fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, .35s) ease forwards f-fadeOut}::ng-deep .has-iframe .fancybox__content,::ng-deep .has-map .fancybox__content,::ng-deep .has-pdf .fancybox__content,::ng-deep .has-youtube .fancybox__content,::ng-deep .has-vimeo .fancybox__content,::ng-deep .has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}::ng-deep .has-iframe .fancybox__content,::ng-deep .has-map .fancybox__content,::ng-deep .has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}::ng-deep .fancybox__container.is-compact .has-iframe .fancybox__content,::ng-deep .fancybox__container.is-compact .has-map .fancybox__content,::ng-deep .fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%}::ng-deep .has-youtube .fancybox__content,::ng-deep .has-vimeo .fancybox__content,::ng-deep .has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}::ng-deep .has-map .fancybox__content,::ng-deep .has-pdf .fancybox__content,::ng-deep .has-youtube .fancybox__content,::ng-deep .has-vimeo .fancybox__content,::ng-deep .has-html5video .fancybox__content{padding:0;background:#18181be6;color:#fff}::ng-deep .has-map .fancybox__content{background:#e5e3df}::ng-deep .fancybox__html5video,::ng-deep .fancybox__iframe{border:0;display:block;height:100%;width:100%;background:#0000}::ng-deep .fancybox-placeholder{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}::ng-deep .f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}::ng-deep .f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: .5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}::ng-deep .f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px}::ng-deep .f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;user-select:none;perspective:1000px;transform:translateZ(0)}::ng-deep .f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2,#e2e8f0);z-index:-1}::ng-deep .f-thumbs .f-spinner svg{display:none}::ng-deep .f-thumbs.is-vertical{height:100%}::ng-deep .f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translateZ(0)}::ng-deep .f-thumbs__track{display:flex}::ng-deep .f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}::ng-deep .f-thumbs__slide.is-loading img{opacity:0}::ng-deep .is-classic .f-thumbs__viewport{height:100%}::ng-deep .is-modern .f-thumbs__track{width:max-content}::ng-deep .is-modern .f-thumbs__track:before{content:\"\";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0)) * -.5);width:calc(var(--width, 0) * 1px + var(--f-thumb-clip-width, 0));cursor:pointer}::ng-deep .is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px),0,0);transition:none;pointer-events:none}::ng-deep .is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease}::ng-deep .is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease}::ng-deep .is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}::ng-deep .f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:#0000;outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}::ng-deep .f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}::ng-deep .f-thumbs__slide__button:focus:not(:focus-visible){outline:none}::ng-deep .f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}::ng-deep .is-modern .f-thumbs__slide__button{--clip-path: inset(0 calc((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * (1 - var(--progress, 0)) * .5) round var(--f-thumb-border-radius, 0));clip-path:var(--clip-path)}::ng-deep .is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}::ng-deep .is-classic .is-nav-selected .f-thumbs__slide__button:after{content:\"\";position:absolute;inset:0;height:auto;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}::ng-deep .f-thumbs__slide__img{overflow:hidden;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)}::ng-deep .f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px}::ng-deep .f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}::ng-deep .f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px}::ng-deep .f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}::ng-deep .fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(.23,1,.32,1)}::ng-deep .fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: .5;--f-thumb-hover-opacity: 1}::ng-deep .fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(#ffffff1a,#ffffff0d)}::ng-deep .fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}::ng-deep .fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(#ffffff1a,#ffffff0d)}::ng-deep .fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}::ng-deep .fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}::ng-deep .is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}::ng-deep .fancybox__thumbs.is-masked{max-height:0px!important}::ng-deep .is-closing .fancybox__thumbs{transition:none!important}::ng-deep .fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, .94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, .65);--f-button-hover-bg: rgba(70, 70, 73, .65);--f-button-active-bg: rgba(90, 90, 93, .65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI Adjusted,Segoe UI,Liberation Sans,sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, .5));pointer-events:none;z-index:20}::ng-deep .fancybox__toolbar :focus-visible{z-index:1}::ng-deep .fancybox__toolbar.is-absolute,::ng-deep .is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}::ng-deep .is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}::ng-deep .fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}::ng-deep .fancybox__toolbar__column.is-left,::ng-deep .fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}::ng-deep .fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}::ng-deep .fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;-webkit-user-select:none;user-select:none}::ng-deep .fancybox__infobar span{padding:0 5px}::ng-deep .fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}::ng-deep [data-fancybox-toggle-slideshow]{position:relative}::ng-deep [data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}::ng-deep [data-fancybox-toggle-slideshow] svg g:first-child{display:flex}::ng-deep [data-fancybox-toggle-slideshow] svg g:last-child{display:none}::ng-deep .has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}::ng-deep .has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}::ng-deep [data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}::ng-deep [data-fancybox-toggle-fullscreen] svg g:last-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}::ng-deep .f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;-webkit-user-select:none;user-select:none;pointer-events:none}.mrx-gallery-row{row-gap:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: GalleryItemComponent, selector: "mrx-gallery-item", inputs: ["preview", "index", "isEditing", "descriptionMaxLength", "deleteEndPoint", "updateEndPoint", "rotateSlides", "isLoading"], outputs: ["openGalleryModal", "deletePhoto", "updatePhoto"] }] });
5881
5909
  }
5882
5910
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GalleryComponent, decorators: [{
5883
5911
  type: Component,
@@ -10823,7 +10851,7 @@ class FileImageEditModalComponent extends ModalServiceComponent {
10823
10851
  this.dialogRef.close(this.result);
10824
10852
  }
10825
10853
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, deps: [{ token: ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
10826
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n [size]=\"'medium'\"\r\n (close)=\"close()\"\r\n>\r\n <div class=\"row\">\r\n <div class=\"col col-12\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n </div>\r\n\r\n <div class=\"col col-12\">\r\n <div class=\"mrx-input-image-cropper__wrapper\">\r\n <image-cropper\r\n format=\"png\"\r\n output=\"base64\"\r\n [alignImage]=\"'center'\"\r\n [imageFile]=\"fileImage\"\r\n [maintainAspectRatio]=\"maintainAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [backgroundColor]=\"'#000000'\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [cropperMaxWidth]=\"cropperMaxWidth\"\r\n [cropperMaxHeight]=\"cropperMaxHeight\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded($event)\"\r\n (cropperReady)=\"cropperReady()\"\r\n ></image-cropper>\r\n\r\n <div class=\"mrx-input-image-cropper__controls\">\r\n <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n\r\n <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"ok()\"\r\n >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
10854
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n [size]=\"'medium'\"\r\n (close)=\"close()\"\r\n>\r\n <div class=\"row\">\r\n <div class=\"col col-12\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n </div>\r\n\r\n <div class=\"col col-12\">\r\n <div class=\"mrx-input-image-cropper__wrapper\">\r\n <image-cropper\r\n format=\"png\"\r\n output=\"base64\"\r\n [alignImage]=\"'center'\"\r\n [imageFile]=\"fileImage\"\r\n [maintainAspectRatio]=\"maintainAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [backgroundColor]=\"'#000000'\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [cropperMaxWidth]=\"cropperMaxWidth\"\r\n [cropperMaxHeight]=\"cropperMaxHeight\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded($event)\"\r\n (cropperReady)=\"cropperReady()\"\r\n ></image-cropper>\r\n\r\n <div class=\"mrx-input-image-cropper__controls\">\r\n <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n\r\n <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"ok()\"\r\n >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { 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: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
10827
10855
  }
10828
10856
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, decorators: [{
10829
10857
  type: Component,