myrta-ui 13.0.7 → 13.0.9

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 (12) hide show
  1. package/esm2020/lib/components/button/button.component.mjs +2 -2
  2. package/esm2020/lib/components/gallery/components/gallery-item/gallery-item.component.mjs +24 -19
  3. package/esm2020/lib/components/gallery/gallery.component.mjs +7 -4
  4. package/esm2020/lib/components/gallery/models/gallery-item.model.mjs +3 -3
  5. package/esm2020/lib/components/gallery/services/gallery.service.mjs +2 -2
  6. package/fesm2015/myrta-ui.mjs +34 -29
  7. package/fesm2015/myrta-ui.mjs.map +1 -1
  8. package/fesm2020/myrta-ui.mjs +34 -26
  9. package/fesm2020/myrta-ui.mjs.map +1 -1
  10. package/lib/components/gallery/gallery.component.d.ts +2 -1
  11. package/lib/components/gallery/models/gallery-item.model.d.ts +8 -13
  12. package/package.json +1 -1
package/fesm2015/myrta-ui.mjs CHANGED
@@ -210,10 +210,10 @@ class ButtonComponent {
210
210
  }
211
211
  }
212
212
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
213
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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 <ng-container *ngIf=\"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 </ng-container>\r\n\r\n\r\n <div\r\n *ngIf=\"icon && isIconLeft && !isLoading\"\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 <div\r\n *ngIf=\"iconClass && isIconLeft && !isLoading\"\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 <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"iconClass && isIconRight && !isLoading\"\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 <div\r\n *ngIf=\"icon && isIconRight && !isLoading\"\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 <ng-container *ngIf=\"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 </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n <a\r\n *ngSwitchCase=\"!!href\"\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 <a\r\n *ngSwitchCase=\"!!routerLink\"\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 <button\r\n *ngSwitchDefault\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</ng-container>\r\n", styles: [":host{display:inline-flex}.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.mrx-btn-tertiary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}: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;border-left:none;border-right:none}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "safe": SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
213
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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 <ng-container *ngIf=\"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 </ng-container>\r\n\r\n\r\n <div\r\n *ngIf=\"icon && isIconLeft && !isLoading\"\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 <div\r\n *ngIf=\"iconClass && isIconLeft && !isLoading\"\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 <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"iconClass && isIconRight && !isLoading\"\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 <div\r\n *ngIf=\"icon && isIconRight && !isLoading\"\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 <ng-container *ngIf=\"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 </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n <a\r\n *ngSwitchCase=\"!!href\"\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 <a\r\n *ngSwitchCase=\"!!routerLink\"\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 <button\r\n *ngSwitchDefault\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</ng-container>\r\n", styles: [":host{display:inline-flex}.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.mrx-btn-tertiary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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: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 .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "safe": SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
214
214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, decorators: [{
215
215
  type: Component,
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 <ng-container *ngIf=\"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 </ng-container>\r\n\r\n\r\n <div\r\n *ngIf=\"icon && isIconLeft && !isLoading\"\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 <div\r\n *ngIf=\"iconClass && isIconLeft && !isLoading\"\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 <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"iconClass && isIconRight && !isLoading\"\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 <div\r\n *ngIf=\"icon && isIconRight && !isLoading\"\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 <ng-container *ngIf=\"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 </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n <a\r\n *ngSwitchCase=\"!!href\"\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 <a\r\n *ngSwitchCase=\"!!routerLink\"\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 <button\r\n *ngSwitchDefault\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</ng-container>\r\n", styles: [":host{display:inline-flex}.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.mrx-btn-tertiary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}: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;border-left:none;border-right:none}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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 <ng-container *ngIf=\"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 </ng-container>\r\n\r\n\r\n <div\r\n *ngIf=\"icon && isIconLeft && !isLoading\"\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 <div\r\n *ngIf=\"iconClass && isIconLeft && !isLoading\"\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 <div class=\"mrx-btn-label\">{{ getLabel }}\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"iconClass && isIconRight && !isLoading\"\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 <div\r\n *ngIf=\"icon && isIconRight && !isLoading\"\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 <ng-container *ngIf=\"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 </ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngSwitch]=\"true\">\r\n <a\r\n *ngSwitchCase=\"!!href\"\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 <a\r\n *ngSwitchCase=\"!!routerLink\"\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 <button\r\n *ngSwitchDefault\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</ng-container>\r\n", styles: [":host{display:inline-flex}.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.mrx-btn-tertiary.green,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive .mrx-icon{color:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill path{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill circle{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.fill-rect rect{fill:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke path{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke circle{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive svg.stroke-rect rect{stroke:var(--system-bg-controls-positive-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active .mrx-icon{color:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill path{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.fill circle{fill:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.green:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke path{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive.active svg.stroke circle{stroke:var(--system-bg-controls-positive-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-positive:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.green.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative .mrx-icon{color:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill path{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill circle{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.fill-rect rect{fill:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke path{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke circle{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative svg.stroke-rect rect{stroke:var(--system-bg-controls-negative-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active .mrx-icon{color:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill path{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.fill circle{fill:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.red:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke path{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative.active svg.stroke circle{stroke:var(--system-bg-controls-negative-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-negative:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.red.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention{background-color:transparent}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention .mrx-icon{color:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill path{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill circle{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.fill-rect rect{fill:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke path{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke circle{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention svg.stroke-rect rect{stroke:var(--system-bg-controls-attention-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-btn-label,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active .mrx-icon,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active .mrx-icon{color:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill path{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.fill circle{fill:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.fill-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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-tertiary.yellow:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke path,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke path{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke circle,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention.active svg.stroke circle{stroke:var(--system-bg-controls-attention-hover)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.mrx-btn-color-attention:hover svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.yellow.active svg.stroke-rect rect,:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary.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: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 .mrx-icon{color:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill path{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill circle{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).fill-rect rect{fill:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke path{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke circle{stroke:var(--brand-text-controls-default)}:host::ng-deep .mrx-btn.mrx-btn.mrx-btn-tertiary svg:not(.icon-loading).stroke-rect rect{stroke:var(--brand-text-controls-default)}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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-tertiary{padding-left:0;padding-right:0;min-width:auto}.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"] }]
217
217
  }], propDecorators: { size: [{
218
218
  type: Input
219
219
  }], type: [{
@@ -4685,10 +4685,7 @@ class GalleryService {
4685
4685
  return this.http.delete(`${url}/${uuid}`);
4686
4686
  }
4687
4687
  update(url, uuid, payload) {
4688
- return this.http.put(`${url}`, {
4689
- uuid: uuid,
4690
- [payload.field]: payload.value
4691
- });
4688
+ return this.http.put(`${url}`, Object.assign({ uuid: uuid }, payload));
4692
4689
  }
4693
4690
  }
4694
4691
  GalleryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4703,8 +4700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
4703
4700
  var ChangeableField;
4704
4701
  (function (ChangeableField) {
4705
4702
  ChangeableField["Description"] = "description";
4706
- ChangeableField["Date"] = "date";
4707
- ChangeableField["Counterparties"] = "counterparties";
4703
+ ChangeableField["EventDate"] = "eventDate";
4704
+ ChangeableField["Counterparties"] = "counterpartySelectedIds";
4708
4705
  })(ChangeableField || (ChangeableField = {}));
4709
4706
 
4710
4707
  class GalleryConfirmModalComponent extends SimpleModalComponent {
@@ -6147,28 +6144,28 @@ class GalleryItemComponent {
6147
6144
  return this.preview.counterparties.map(item => item.text).join(', ');
6148
6145
  }
6149
6146
  get isErrorMinDate() {
6150
- if (!this.preview.date) {
6147
+ if (!this.preview.eventDate) {
6151
6148
  return false;
6152
6149
  }
6153
- const factDate = new Date(this.preview.date);
6150
+ const factDate = new Date(this.preview.eventDate);
6154
6151
  return !!this.minDate ? new Date(this.minDate).getTime() > factDate.getTime() : false;
6155
6152
  }
6156
6153
  get isErrorMaxDate() {
6157
- if (!this.preview.date) {
6154
+ if (!this.preview.eventDate) {
6158
6155
  return false;
6159
6156
  }
6160
- const factDate = new Date(this.preview.date);
6157
+ const factDate = new Date(this.preview.eventDate);
6161
6158
  return !!this.maxDate ? new Date(this.maxDate).getTime() < factDate.getTime() : false;
6162
6159
  }
6163
6160
  get isDateInvalid() {
6164
6161
  return (this.isErrorMinDate || this.isErrorMaxDate) ||
6165
- (!this.preview.date && this.requiredDate);
6162
+ (!this.preview.eventDate && this.requiredDate);
6166
6163
  }
6167
6164
  get dateInvalidMessage() {
6168
- if (!this.preview.date) {
6165
+ if (!this.preview.eventDate) {
6169
6166
  return '';
6170
6167
  }
6171
- const factDate = new Date(this.preview.date);
6168
+ const factDate = new Date(this.preview.eventDate);
6172
6169
  const minDate = this.minDate ? new Date(this.minDate) : null;
6173
6170
  const maxDate = this.maxDate ? new Date(this.maxDate) : null;
6174
6171
  if (minDate && minDate.getTime() > factDate.getTime()) {
@@ -6205,28 +6202,33 @@ class GalleryItemComponent {
6205
6202
  }
6206
6203
  changeField(field, obj) {
6207
6204
  clearTimeout(this._timer);
6208
- this._store.dispatch(autosaveAddId({ id: obj.id }));
6209
- this._store.dispatch(autosaveStartFor({ id: obj.id }));
6205
+ this.preview[field] = obj.value;
6206
+ this._store.dispatch(autosaveAddId({ id: obj.id, groupId: this.preview.uuid }));
6207
+ this._store.dispatch(autosaveStartFor({ id: obj.id, groupId: this.preview.uuid }));
6210
6208
  this._timer = setTimeout(() => {
6211
- const updateData = { [field]: obj.value };
6212
- const payload = {
6213
- field: field,
6214
- value: obj.value
6209
+ const updateData = {
6210
+ description: this.preview.description
6215
6211
  };
6216
- this.galleryService.update(this.updateEndPoint, this.preview.uuid, payload).subscribe(res => {
6212
+ if (this.preview.eventDate) {
6213
+ updateData.eventDate = this.preview.eventDate;
6214
+ }
6215
+ if (this.preview.counterpartySelectedIds) {
6216
+ updateData.counterpartySelectedIds = this.preview.counterpartySelectedIds;
6217
+ }
6218
+ this.galleryService.update(this.updateEndPoint, this.preview.uuid, updateData).subscribe(res => {
6217
6219
  this.updatePhoto.emit(res);
6218
- this._store.dispatch(autosaveSuccessFor({ id: obj.id }));
6220
+ this._store.dispatch(autosaveSuccessFor({ id: obj.id, groupId: this.preview.uuid }));
6219
6221
  }, () => {
6220
- this._store.dispatch(autosaveErrorFor({ id: obj.id }));
6222
+ this._store.dispatch(autosaveErrorFor({ id: obj.id, groupId: this.preview.uuid }));
6221
6223
  });
6222
6224
  }, 1500);
6223
6225
  }
6224
6226
  }
6225
6227
  GalleryItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryItemComponent, deps: [{ token: GalleryService }, { token: i2$2.SimpleModalService }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Component });
6226
- GalleryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: { preview: "preview", index: "index", isEditing: "isEditing", descriptionMaxLength: "descriptionMaxLength", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", rotateSlides: "rotateSlides", showDate: "showDate", showCounterparties: "showCounterparties", minDate: "minDate", maxDate: "maxDate", requiredDate: "requiredDate", setIsLoading: ["isLoading", "setIsLoading"] }, outputs: { openGalleryModal: "openGalleryModal", deletePhoto: "deletePhoto", updatePhoto: "updatePhoto" }, providers: [MrxAutosaveService], ngImport: i0, template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.date\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.Date, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.date | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "disabled", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: ["fields", "size", "format", "locale", "customClasses", "dateLabel", "timeLabel", "datePlaceholder", "placeholder", "disabled", "readonly", "required", "timepicker", "minDate", "maxDate", "inline", "closable", "leadZeroDateTime", "mask", "container", "validationType", "disableValidation", "invalid", "invalidMessage", "checkInvalid", "isShowMessages"], outputs: ["changed", "modelChange"] }, { type: InputSelectComponent, selector: "mrx-input-select", inputs: ["fields", "size", "selected", "bindValue", "bindLabel", "customClasses", "wrapperCustomClasses", "multiple", "loading", "addTag", "clearable", "items", "groupBy", "emptyValue", "virtualScroll", "trackByFn", "displayValue", "disabledFromDisplay", "hideSelected", "maxLength", "customSearchFn", "isBottomLabel", "search", "required", "disabled", "readonly", "showEmptyFields", "placeholder", "searchable", "loadLabel", "notFoundText", "closeOnSelect", "multiCollapseCount", "invalid", "invalidMessage", "checkInvalid", "label", "labelRequiredHidden", "labelExtraClass", "tooltip", "tooltipHidden", "tooltipVisible", "maxSelectedItems"], outputs: ["changed", "modelChange", "searched", "cleared"] }, { type: InputTextareaComponent, selector: "mrx-input-textarea", inputs: ["fields", "disabled", "readonly", "autosize", "maxlength", "minlength", "rows", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput", "allowPattern"], outputs: ["changed", "blurred", "modelChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "async": i1$1.AsyncPipe, "dateFormat": DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6228
+ GalleryItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: { preview: "preview", index: "index", isEditing: "isEditing", descriptionMaxLength: "descriptionMaxLength", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", rotateSlides: "rotateSlides", showDate: "showDate", showCounterparties: "showCounterparties", minDate: "minDate", maxDate: "maxDate", requiredDate: "requiredDate", setIsLoading: ["isLoading", "setIsLoading"] }, outputs: { openGalleryModal: "openGalleryModal", deletePhoto: "deletePhoto", updatePhoto: "updatePhoto" }, providers: [MrxAutosaveService], ngImport: i0, template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.eventDate\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.EventDate, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.eventDate | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"], components: [{ type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "disabled", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: ["fields", "size", "format", "locale", "customClasses", "dateLabel", "timeLabel", "datePlaceholder", "placeholder", "disabled", "readonly", "required", "timepicker", "minDate", "maxDate", "inline", "closable", "leadZeroDateTime", "mask", "container", "validationType", "disableValidation", "invalid", "invalidMessage", "checkInvalid", "isShowMessages"], outputs: ["changed", "modelChange"] }, { type: InputSelectComponent, selector: "mrx-input-select", inputs: ["fields", "size", "selected", "bindValue", "bindLabel", "customClasses", "wrapperCustomClasses", "multiple", "loading", "addTag", "clearable", "items", "groupBy", "emptyValue", "virtualScroll", "trackByFn", "displayValue", "disabledFromDisplay", "hideSelected", "maxLength", "customSearchFn", "isBottomLabel", "search", "required", "disabled", "readonly", "showEmptyFields", "placeholder", "searchable", "loadLabel", "notFoundText", "closeOnSelect", "multiCollapseCount", "invalid", "invalidMessage", "checkInvalid", "label", "labelRequiredHidden", "labelExtraClass", "tooltip", "tooltipHidden", "tooltipVisible", "maxSelectedItems"], outputs: ["changed", "modelChange", "searched", "cleared"] }, { type: InputTextareaComponent, selector: "mrx-input-textarea", inputs: ["fields", "disabled", "readonly", "autosize", "maxlength", "minlength", "rows", "placeholder", "customClasses", "mask", "size", "invalid", "invalidMessage", "checkInvalid", "restrictInput", "allowPattern"], outputs: ["changed", "blurred", "modelChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }], pipes: { "async": i1$1.AsyncPipe, "dateFormat": DateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
6227
6229
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryItemComponent, decorators: [{
6228
6230
  type: Component,
6229
- args: [{ selector: 'mrx-gallery-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MrxAutosaveService], template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.date\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.Date, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.date | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"] }]
6231
+ args: [{ selector: 'mrx-gallery-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [MrxAutosaveService], template: "<div class=\"mrx-gallery-item\">\r\n <div class=\"mrx-gallery-item__preview\" (click)=\"onOpenGalleryModal()\">\r\n\r\n <img [src]=\"getImageUrl()\" [alt]=\"preview.imageName || 'image'\" *ngIf=\"!isLoadingImage; else skeletonTemplate\">\r\n\r\n <ng-template #skeletonTemplate>\r\n <div class=\"d-flex align-items-center justify-content-center w-100 h-100\">\r\n <mrx-loader size=\"medium\" color=\"brand\"></mrx-loader>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"mrx-gallery-item__preview-overlay\" *ngIf=\"!isLoadingImage\"></div>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls\" *ngIf=\"!isLoadingImage\">\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"yandexCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12346_12076)\">\r\n <path d=\"M8.00031 15.9838C12.4096 15.9838 15.984 12.4093 15.984 8.00006C15.984 3.59078 12.4096 0.0163574 8.00031 0.0163574C3.59103 0.0163574 0.0166016 3.59078 0.0166016 8.00006C0.0166016 12.4093 3.59103 15.9838 8.00031 15.9838Z\" fill=\"white\"/>\r\n <path d=\"M10.8893 13.0118H9.1367V4.34361H8.35596C6.92484 4.34361 6.17521 5.05916 6.17521 6.12731C6.17521 7.33916 6.69225 7.90065 7.76188 8.6162L8.64336 9.21028L6.11003 13.0103H4.22559L6.50559 9.61768C5.19447 8.68139 4.4567 7.76731 4.4567 6.22509C4.4567 4.29768 5.8004 2.98657 8.3441 2.98657H10.8774V13.0088H10.8893V13.0118Z\" fill=\"#FC3F1D\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12346_12076\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"mrx-gallery-item__preview-controls--icon\" [href]=\"googleCheckUrl\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M11.5561 4.8901H11.0997V4.86659H5.99967V7.13325H9.20219C8.73497 8.45273 7.47952 9.39992 5.99967 9.39992C4.12202 9.39992 2.59967 7.87757 2.59967 5.99992C2.59967 4.12227 4.12202 2.59992 5.99967 2.59992C6.86639 2.59992 7.65491 2.92689 8.25529 3.46097L9.85811 1.85815C8.84604 0.914935 7.49227 0.333252 5.99967 0.333252C2.87026 0.333252 0.333008 2.8705 0.333008 5.99992C0.333008 9.12934 2.87026 11.6666 5.99967 11.6666C9.12909 11.6666 11.6663 9.12934 11.6663 5.99992C11.6663 5.61997 11.6272 5.24909 11.5561 4.8901Z\" fill=\"#FBC02D\"/>\r\n <path d=\"M0.987305 3.36237L2.84909 4.72775C3.35285 3.48052 4.57289 2.59992 6.0006 2.59992C6.86732 2.59992 7.65584 2.92689 8.25622 3.46097L9.85904 1.85815C8.84697 0.914935 7.4932 0.333252 6.0006 0.333252C3.82404 0.333252 1.93647 1.56207 0.987305 3.36237Z\" fill=\"#E53935\"/>\r\n <path d=\"M6.0008 11.6665C7.4645 11.6665 8.79447 11.1063 9.80002 10.1954L8.04619 8.7113C7.47725 9.14225 6.77005 9.3998 6.0008 9.3998C4.5269 9.3998 3.27542 8.45999 2.80395 7.14844L0.956055 8.57219C1.89389 10.4073 3.79845 11.6665 6.0008 11.6665Z\" fill=\"#4CAF50\"/>\r\n <path d=\"M11.5564 4.88997L11.5519 4.86646H11.1H6V7.13312H9.20252C8.97812 7.76694 8.5704 8.31349 8.04453 8.71157C8.04482 8.71129 8.0451 8.71129 8.04538 8.71101L9.79922 10.1951C9.67512 10.3079 11.6667 8.83312 11.6667 5.99979C11.6667 5.61984 11.6276 5.24896 11.5564 4.88997Z\" fill=\"#1565C0\"/>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"mrx-gallery-item__preview-controls__button d-flex align-items-center justify-content-center\" *ngIf=\"isEditing\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"mrx-icon icon-delete icon-font-16 text-bold\" (click)=\"deleteImage()\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showDate\" class=\"mrx-gallery-item__date mb-2\">\r\n <ng-container *ngIf=\"isEditing; else dateTemplate\">\r\n <mrx-label [required]=\"requiredDate\">\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F</mrx-label>\r\n\r\n <mrx-input-datepicker\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.eventDate\"\r\n [invalid]=\"isDateInvalid\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [isShowMessages]=\"false\"\r\n [invalidMessage]=\"dateInvalidMessage\"\r\n [closable]=\"false\"\r\n [format]=\"'YYYY-MM-DD'\"\r\n [timepicker]=\"false\"\r\n [leadZeroDateTime]=\"true\"\r\n [mask]=\"'d0.M0.0000'\"\r\n (modelChange)=\"changeField(ChangeableField.EventDate, $event)\"\r\n ></mrx-input-datepicker>\r\n </ng-container>\r\n\r\n <ng-template #dateTemplate>\r\n <p>\u0414\u0430\u0442\u0430 \u043C\u0435\u0440\u043E\u043F\u0440\u0438\u044F\u0442\u0438\u044F: {{ preview.eventDate | dateFormat }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showCounterparties\" class=\"mrx-gallery-item__counterparties mb-2\">\r\n <ng-container *ngIf=\"isEditing; else counterpartiesTemplate\">\r\n <mrx-label>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430</mrx-label>\r\n\r\n <mrx-input-select\r\n [fields]=\"(fields$ | async)!\"\r\n [(ngModel)]=\"preview.counterpartySelectedIds\"\r\n [items]=\"preview.counterparties || []\"\r\n [multiple]=\"true\"\r\n [clearable]=\"false\"\r\n [bindValue]=\"'value'\"\r\n [bindLabel]=\"'text'\"\r\n [placeholder]=\"'\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430'\"\r\n (modelChange)=\"changeField(ChangeableField.Counterparties, $event)\"\r\n ></mrx-input-select>\r\n </ng-container>\r\n\r\n <ng-template #counterpartiesTemplate>\r\n <p>\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043A\u043E\u043D\u0442\u0440\u0430\u0433\u0435\u043D\u0442\u0430: {{ counterpartiesText }}</p>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"mrx-gallery-item__description\">\r\n <mrx-input-textarea\r\n *ngIf=\"isEditing; else textTemplate\"\r\n [fields]=\"(fields$ | async)!\"\r\n [ngModel]=\"preview.description\"\r\n [autosize]=\"false\"\r\n [rows]=\"2\"\r\n [maxlength]=\"descriptionMaxLength\"\r\n [placeholder]=\"'\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435'\"\r\n (modelChange)=\"changeField(ChangeableField.Description, $event)\"\r\n ></mrx-input-textarea>\r\n\r\n <ng-template #textTemplate>\r\n {{ preview.description }}\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".mrx-gallery-item{cursor:pointer}.mrx-gallery-item__preview{width:100%;height:180px;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.mrx-gallery-item__preview img{width:100%;height:100%;object-fit:cover;object-position:center top}.mrx-gallery-item__preview-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 78.93%,rgba(0,0,0,.35) 91.52%)}.mrx-gallery-item__preview-controls{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.mrx-gallery-item__preview-controls--text{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-inverse);opacity:.8}.mrx-gallery-item__preview-controls--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:50%}.mrx-gallery-item__preview-controls__button{padding:4px;border-radius:4px;background:var(--system-white, #FFF)}.mrx-gallery-item__description{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary)}.mrx-gallery-item__date p,.mrx-gallery-item__counterparties p{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);color:var(--neutral-text-primary)}\n"] }]
6230
6232
  }], ctorParameters: function () { return [{ type: GalleryService }, { type: i2$2.SimpleModalService }, { type: i2$1.Store }]; }, propDecorators: { preview: [{
6231
6233
  type: Input
6232
6234
  }], index: [{
@@ -6278,6 +6280,7 @@ class GalleryComponent {
6278
6280
  this.showDate = false;
6279
6281
  this.showCounterparties = false;
6280
6282
  this.requiredDate = false;
6283
+ this.previewCount = 8;
6281
6284
  this.deletePhoto = new EventEmitter();
6282
6285
  this.updatePhoto = new EventEmitter();
6283
6286
  this.defaultConfig = {};
@@ -6297,11 +6300,11 @@ class GalleryComponent {
6297
6300
  return `${this.customClasses}`;
6298
6301
  }
6299
6302
  get isShowMore() {
6300
- return this.data.length > 8;
6303
+ return this.data.length > this.previewCount;
6301
6304
  }
6302
6305
  get getData() {
6303
6306
  if (this.isExpandable && !this.isExpanded) {
6304
- return this.data.slice(0, 8);
6307
+ return this.data.slice(0, this.previewCount);
6305
6308
  }
6306
6309
  else {
6307
6310
  return this.data;
@@ -6414,7 +6417,7 @@ class GalleryComponent {
6414
6417
  }
6415
6418
  }
6416
6419
  GalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryComponent, deps: [{ token: GalleryService }], target: i0.ɵɵFactoryTarget.Component });
6417
- GalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GalleryComponent, selector: "mrx-gallery", inputs: { data: "data", isExpandable: "isExpandable", customClasses: "customClasses", rotateEndPoint: "rotateEndPoint", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", isEditing: "isEditing", isSaveRotate: "isSaveRotate", descriptionMaxLength: "descriptionMaxLength", showDate: "showDate", showCounterparties: "showCounterparties", minDate: "minDate", maxDate: "maxDate", requiredDate: "requiredDate", 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 [showDate]=\"showDate\"\r\n [showCounterparties]=\"showCounterparties\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [requiredDate]=\"requiredDate\"\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:translateY(calc(var(--f-throw-out-distance, 150px) * -1));opacity:0}}@keyframes f-throwOutDown{to{transform:translateY(var(--f-throw-out-distance, 150px));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) translateY(16px);opacity:0}to{transform:scale(1) translate(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(.975) translateY(16px);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:translate(0)}}@keyframes f-slideInNext{0%{transform:translate(-100%)}to{transform:translate(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:translate(0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translate(75px);opacity:0}to{transform:translate(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%;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:translate(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:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate(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:rgba(24,24,27,.5)}::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:rgba(24,24,27,.9);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:rgba(0,0,0,0)}::ng-deep .fancybox-placeholder{border:0!important;clip:rect(1px,1px,1px,1px)!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:translate(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:translate(calc(var(--shift, 0) * -1px));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:rgba(0,0,0,0);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(rgba(255,255,255,.1),rgba(255,255,255,.05))}::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(rgba(255,255,255,.1),rgba(255,255,255,.05))}::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 :-webkit-full-screen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :-webkit-full-screen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}::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"], components: [{ type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: ["preview", "index", "isEditing", "descriptionMaxLength", "deleteEndPoint", "updateEndPoint", "rotateSlides", "showDate", "showCounterparties", "minDate", "maxDate", "requiredDate", "isLoading"], outputs: ["openGalleryModal", "deletePhoto", "updatePhoto"] }, { 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"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6420
+ GalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GalleryComponent, selector: "mrx-gallery", inputs: { data: "data", isExpandable: "isExpandable", customClasses: "customClasses", rotateEndPoint: "rotateEndPoint", deleteEndPoint: "deleteEndPoint", updateEndPoint: "updateEndPoint", isEditing: "isEditing", isSaveRotate: "isSaveRotate", descriptionMaxLength: "descriptionMaxLength", showDate: "showDate", showCounterparties: "showCounterparties", minDate: "minDate", maxDate: "maxDate", requiredDate: "requiredDate", previewCount: "previewCount", 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 [showDate]=\"showDate\"\r\n [showCounterparties]=\"showCounterparties\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [requiredDate]=\"requiredDate\"\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:translateY(calc(var(--f-throw-out-distance, 150px) * -1));opacity:0}}@keyframes f-throwOutDown{to{transform:translateY(var(--f-throw-out-distance, 150px));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) translateY(16px);opacity:0}to{transform:scale(1) translate(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(.975) translateY(16px);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:translate(0)}}@keyframes f-slideInNext{0%{transform:translate(-100%)}to{transform:translate(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:translate(0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translate(75px);opacity:0}to{transform:translate(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%;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:translate(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:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate(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:rgba(24,24,27,.5)}::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:rgba(24,24,27,.9);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:rgba(0,0,0,0)}::ng-deep .fancybox-placeholder{border:0!important;clip:rect(1px,1px,1px,1px)!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:translate(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:translate(calc(var(--shift, 0) * -1px));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:rgba(0,0,0,0);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(rgba(255,255,255,.1),rgba(255,255,255,.05))}::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(rgba(255,255,255,.1),rgba(255,255,255,.05))}::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 :-webkit-full-screen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :-webkit-full-screen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}::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"], components: [{ type: GalleryItemComponent, selector: "mrx-gallery-item", inputs: ["preview", "index", "isEditing", "descriptionMaxLength", "deleteEndPoint", "updateEndPoint", "rotateSlides", "showDate", "showCounterparties", "minDate", "maxDate", "requiredDate", "isLoading"], outputs: ["openGalleryModal", "deletePhoto", "updatePhoto"] }, { 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"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6418
6421
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GalleryComponent, decorators: [{
6419
6422
  type: Component,
6420
6423
  args: [{ selector: 'mrx-gallery', 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 [showDate]=\"showDate\"\r\n [showCounterparties]=\"showCounterparties\"\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [requiredDate]=\"requiredDate\"\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:translateY(calc(var(--f-throw-out-distance, 150px) * -1));opacity:0}}@keyframes f-throwOutDown{to{transform:translateY(var(--f-throw-out-distance, 150px));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) translateY(16px);opacity:0}to{transform:scale(1) translate(0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(.975) translateY(16px);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:translate(0)}}@keyframes f-slideInNext{0%{transform:translate(-100%)}to{transform:translate(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:translate(0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translate(75px);opacity:0}to{transform:translate(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%;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:translate(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:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate(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:rgba(24,24,27,.5)}::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:rgba(24,24,27,.9);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:rgba(0,0,0,0)}::ng-deep .fancybox-placeholder{border:0!important;clip:rect(1px,1px,1px,1px)!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:translate(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:translate(calc(var(--shift, 0) * -1px));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:rgba(0,0,0,0);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(rgba(255,255,255,.1),rgba(255,255,255,.05))}::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(rgba(255,255,255,.1),rgba(255,255,255,.05))}::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 :-webkit-full-screen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}::ng-deep :-webkit-full-screen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}::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"] }]
@@ -6446,6 +6449,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
6446
6449
  type: Input
6447
6450
  }], requiredDate: [{
6448
6451
  type: Input
6452
+ }], previewCount: [{
6453
+ type: Input
6449
6454
  }], thumbsConfig: [{
6450
6455
  type: Input
6451
6456
  }], toolbarConfig: [{