myrta-ui 17.0.74 → 17.0.75

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 (4) hide show
  1. package/esm2022/lib/components/alert/alert.component.mjs +2 -2
  2. package/fesm2022/myrta-ui.mjs +2 -2
  3. package/fesm2022/myrta-ui.mjs.map +1 -1
  4. package/package.json +1 -1
package/esm2022/lib/components/alert/alert.component.mjs CHANGED
@@ -19,11 +19,11 @@ export class AlertComponent {
19
19
  this.close.emit(null);
20
20
  }
21
21
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
22
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlertComponent, selector: "mrx-alert", inputs: { customClasses: "customClasses", color: "color", customColor: "customColor", message: "message", title: "title", closable: "closable" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-negative,.mrx-alert.mrx-alert.mrx-alert-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-danger .mrx-icon{color:var(--system-icon-negative)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
22
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlertComponent, selector: "mrx-alert", inputs: { customClasses: "customClasses", color: "color", customColor: "customColor", message: "message", title: "title", closable: "closable" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-color-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-color-negative,.mrx-alert.mrx-alert.mrx-alert-color-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-danger .mrx-icon{color:var(--system-icon-negative)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
23
23
  }
24
24
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, decorators: [{
25
25
  type: Component,
26
- args: [{ selector: 'mrx-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-negative,.mrx-alert.mrx-alert.mrx-alert-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-danger .mrx-icon{color:var(--system-icon-negative)}\n"] }]
26
+ args: [{ selector: 'mrx-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-color-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-color-negative,.mrx-alert.mrx-alert.mrx-alert-color-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-danger .mrx-icon{color:var(--system-icon-negative)}\n"] }]
27
27
  }], propDecorators: { customClasses: [{
28
28
  type: Input
29
29
  }], color: [{
package/fesm2022/myrta-ui.mjs CHANGED
@@ -342,11 +342,11 @@ class AlertComponent {
342
342
  this.close.emit(null);
343
343
  }
344
344
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
345
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlertComponent, selector: "mrx-alert", inputs: { customClasses: "customClasses", color: "color", customColor: "customColor", message: "message", title: "title", closable: "closable" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-negative,.mrx-alert.mrx-alert.mrx-alert-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-danger .mrx-icon{color:var(--system-icon-negative)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
345
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlertComponent, selector: "mrx-alert", inputs: { customClasses: "customClasses", color: "color", customColor: "customColor", message: "message", title: "title", closable: "closable" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-color-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-color-negative,.mrx-alert.mrx-alert.mrx-alert-color-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-danger .mrx-icon{color:var(--system-icon-negative)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
346
346
  }
347
347
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, decorators: [{
348
348
  type: Component,
349
- args: [{ selector: 'mrx-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-negative,.mrx-alert.mrx-alert.mrx-alert-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-danger .mrx-icon{color:var(--system-icon-negative)}\n"] }]
349
+ args: [{ selector: 'mrx-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;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-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-color-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-color-negative,.mrx-alert.mrx-alert.mrx-alert-color-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-danger .mrx-icon{color:var(--system-icon-negative)}\n"] }]
350
350
  }], propDecorators: { customClasses: [{
351
351
  type: Input
352
352
  }], color: [{