myrta-ui 17.0.0-beta.2 → 17.0.0-beta.20

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 (109) hide show
  1. package/esm2022/lib/components/badges/components/badge/badge.component.mjs +2 -2
  2. package/esm2022/lib/components/form/editor/editor.component.mjs +13 -6
  3. package/esm2022/lib/components/form/editor/editor.enum.mjs +2 -0
  4. package/esm2022/lib/components/form/input-date-time/input-date-time.component.mjs +2 -2
  5. package/esm2022/lib/components/form/input-datepicker/input-datepicker.component.mjs +2 -2
  6. package/esm2022/lib/components/form/input-file/input-file.component.mjs +42 -46
  7. package/esm2022/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.mjs +8 -8
  8. package/esm2022/lib/components/form/input-file-image/input-file-image.component.mjs +196 -210
  9. package/esm2022/lib/components/form/input-file-image/input-file-image.enum.mjs +3 -3
  10. package/esm2022/lib/components/form/input-file-image/input-file-image.module.mjs +6 -4
  11. package/esm2022/lib/components/form/input-number/input-number.component.mjs +2 -2
  12. package/esm2022/lib/components/form/input-password/input-password.component.mjs +2 -2
  13. package/esm2022/lib/components/form/input-phone/input-phone.component.mjs +2 -2
  14. package/esm2022/lib/components/form/input-search/input-search.component.mjs +2 -2
  15. package/esm2022/lib/components/form/input-select/input-select.component.mjs +3 -3
  16. package/esm2022/lib/components/form/input-tel/input-tel.component.mjs +2 -2
  17. package/esm2022/lib/components/form/input-text/input-text.component.mjs +2 -2
  18. package/esm2022/lib/components/form/switch/switch.component.mjs +2 -2
  19. package/esm2022/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.mjs +3 -5
  20. package/esm2022/lib/components/icon-button/icon-button.component.mjs +9 -3
  21. package/esm2022/lib/components/icon-button/icon-button.enum.mjs +2 -1
  22. package/esm2022/lib/components/label/label.component.mjs +2 -2
  23. package/esm2022/lib/components/link/link.component.mjs +22 -10
  24. package/esm2022/lib/components/link/link.module.mjs +5 -4
  25. package/esm2022/lib/components/pdf-viewer/pdf-viewer.component.mjs +269 -0
  26. package/esm2022/lib/components/pdf-viewer/pdf-viewer.module.mjs +59 -0
  27. package/esm2022/lib/components/progress/progress.component.mjs +2 -2
  28. package/esm2022/lib/components/table/table.component.mjs +3 -3
  29. package/esm2022/lib/components/tabs/tabs-group/tabs-group.component.mjs +2 -2
  30. package/esm2022/lib/components/tooltip/tooltip-trigger/tooltip-trigger.component.mjs +2 -2
  31. package/esm2022/lib/components/truncate-text/truncate-text.component.mjs +1 -1
  32. package/esm2022/lib/models/input-file/input-file.model.mjs +1 -1
  33. package/esm2022/lib/services/file-upload/file-upload.service.mjs +5 -5
  34. package/esm2022/lib/services/index.mjs +9 -1
  35. package/esm2022/lib/services/modal-service/components/alert-modal/alert-modal.component.mjs +3 -5
  36. package/esm2022/lib/services/modal-service/components/confirm-modal/confirm-modal.component.mjs +3 -5
  37. package/esm2022/lib/services/modal-service/helpers/index.mjs +5 -0
  38. package/esm2022/lib/services/modal-service/helpers/modal.component.mjs +2 -3
  39. package/esm2022/lib/services/modal-service/modal-service.module.mjs +25 -0
  40. package/esm2022/lib/services/modal-service/modal-service.service.mjs +1 -1
  41. package/esm2022/lib/services/mrx-form-validator/constants/invalid-messages.mjs +10 -0
  42. package/esm2022/lib/services/mrx-form-validator/helpers/get-error-message.helper.mjs +10 -0
  43. package/esm2022/lib/services/mrx-form-validator/helpers/get-sorting-validations.helper.mjs +29 -0
  44. package/esm2022/lib/services/mrx-form-validator/models/index.mjs +4 -0
  45. package/esm2022/lib/services/mrx-form-validator/models/validations-options.model.mjs +2 -0
  46. package/esm2022/lib/services/mrx-form-validator/models/validations-settings.model.mjs +2 -0
  47. package/esm2022/lib/services/mrx-form-validator/models/validations-types.model.mjs +22 -0
  48. package/esm2022/lib/services/mrx-form-validator/mrx-form-validator.mjs +97 -183
  49. package/esm2022/lib/services/mrx-form-validator/validations/callback.validation.mjs +15 -0
  50. package/esm2022/lib/services/mrx-form-validator/validations/email.validation.mjs +11 -0
  51. package/esm2022/lib/services/mrx-form-validator/validations/max-length.validation.mjs +14 -0
  52. package/esm2022/lib/services/mrx-form-validator/validations/max-value.validation.mjs +10 -0
  53. package/esm2022/lib/services/mrx-form-validator/validations/min-length.validation.mjs +15 -0
  54. package/esm2022/lib/services/mrx-form-validator/validations/min-value.validation.mjs +10 -0
  55. package/esm2022/lib/services/mrx-form-validator/validations/pattern.validation.mjs +11 -0
  56. package/esm2022/lib/services/mrx-form-validator/validations/required.validation.mjs +22 -0
  57. package/esm2022/lib/services/toaster-service/components/toaster/toaster.component.mjs +27 -0
  58. package/esm2022/lib/services/toaster-service/models/toaster.model.mjs +15 -0
  59. package/esm2022/lib/services/toaster-service/toaster-service.module.mjs +52 -0
  60. package/esm2022/lib/services/toaster-service/toaster-service.service.mjs +48 -0
  61. package/esm2022/public-api.mjs +3 -1
  62. package/fesm2022/myrta-ui.mjs +1183 -656
  63. package/fesm2022/myrta-ui.mjs.map +1 -1
  64. package/lib/components/form/editor/editor.component.d.ts +4 -2
  65. package/lib/components/form/editor/editor.enum.d.ts +5 -0
  66. package/lib/components/form/input-file/input-file.component.d.ts +6 -4
  67. package/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.d.ts +5 -4
  68. package/lib/components/form/input-file-image/input-file-image.component.d.ts +21 -26
  69. package/lib/components/form/input-file-image/input-file-image.enum.d.ts +2 -2
  70. package/lib/components/form/input-file-image/input-file-image.module.d.ts +1 -1
  71. package/lib/components/form/input-select/input-select.component.d.ts +16 -5
  72. package/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.d.ts +2 -3
  73. package/lib/components/icon-button/icon-button.component.d.ts +4 -1
  74. package/lib/components/icon-button/icon-button.enum.d.ts +2 -1
  75. package/lib/components/link/link.component.d.ts +10 -3
  76. package/lib/components/link/link.module.d.ts +2 -1
  77. package/lib/components/pdf-viewer/pdf-viewer.component.d.ts +70 -0
  78. package/lib/components/pdf-viewer/pdf-viewer.module.d.ts +16 -0
  79. package/lib/models/input-file/input-file.model.d.ts +5 -4
  80. package/lib/services/file-upload/file-upload.service.d.ts +2 -2
  81. package/lib/services/index.d.ts +8 -0
  82. package/lib/services/modal-service/components/alert-modal/alert-modal.component.d.ts +2 -3
  83. package/lib/services/modal-service/components/confirm-modal/confirm-modal.component.d.ts +2 -3
  84. package/lib/services/modal-service/helpers/index.d.ts +4 -0
  85. package/lib/services/modal-service/helpers/modal.component.d.ts +1 -2
  86. package/lib/services/modal-service/modal-service.module.d.ts +9 -0
  87. package/lib/services/modal-service/modal-service.service.d.ts +4 -4
  88. package/lib/services/mrx-form-validator/constants/invalid-messages.d.ts +9 -0
  89. package/lib/services/mrx-form-validator/helpers/get-error-message.helper.d.ts +3 -0
  90. package/lib/services/mrx-form-validator/helpers/get-sorting-validations.helper.d.ts +2 -0
  91. package/lib/services/mrx-form-validator/models/index.d.ts +3 -0
  92. package/lib/services/mrx-form-validator/models/validations-options.model.d.ts +31 -0
  93. package/lib/services/mrx-form-validator/models/validations-settings.model.d.ts +7 -0
  94. package/lib/services/mrx-form-validator/models/validations-types.model.d.ts +19 -0
  95. package/lib/services/mrx-form-validator/mrx-form-validator.d.ts +6 -33
  96. package/lib/services/mrx-form-validator/validations/callback.validation.d.ts +5 -0
  97. package/lib/services/mrx-form-validator/validations/email.validation.d.ts +5 -0
  98. package/lib/services/mrx-form-validator/validations/max-length.validation.d.ts +5 -0
  99. package/lib/services/mrx-form-validator/validations/max-value.validation.d.ts +5 -0
  100. package/lib/services/mrx-form-validator/validations/min-length.validation.d.ts +5 -0
  101. package/lib/services/mrx-form-validator/validations/min-value.validation.d.ts +5 -0
  102. package/lib/services/mrx-form-validator/validations/pattern.validation.d.ts +5 -0
  103. package/lib/services/mrx-form-validator/validations/required.validation.d.ts +5 -0
  104. package/lib/services/toaster-service/components/toaster/toaster.component.d.ts +10 -0
  105. package/lib/services/toaster-service/models/toaster.model.d.ts +12 -0
  106. package/lib/services/toaster-service/toaster-service.module.d.ts +10 -0
  107. package/lib/services/toaster-service/toaster-service.service.d.ts +15 -0
  108. package/package.json +5 -1
  109. package/public-api.d.ts +2 -0
package/esm2022/lib/components/badges/components/badge/badge.component.mjs CHANGED
@@ -32,11 +32,11 @@ export class BadgeComponent {
32
32
  });
33
33
  }
34
34
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
35
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: BadgeComponent, selector: "mrx-badge", inputs: { type: "type", tag: "tag", size: "size", color: "color", customColor: "customColor", text: "text", path: "path", customClasses: "customClasses", target: "target" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;font-family:var(--body-sm-font-famil);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-helf) var(--spacing-1);min-width:var(--sizing-5)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
35
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: BadgeComponent, selector: "mrx-badge", inputs: { type: "type", tag: "tag", size: "size", color: "color", customColor: "customColor", text: "text", path: "path", customClasses: "customClasses", target: "target" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;font-family:var(--body-sm-font-famil);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-half) var(--spacing-1);min-width:var(--sizing-5)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
36
36
  }
37
37
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BadgeComponent, decorators: [{
38
38
  type: Component,
39
- args: [{ selector: 'mrx-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;font-family:var(--body-sm-font-famil);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-helf) var(--spacing-1);min-width:var(--sizing-5)}\n"] }]
39
+ args: [{ selector: 'mrx-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"tag\">\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button\r\n class=\"mrx-badge\"\r\n [class]=\"getClasses\"\r\n [style]=\"{ backgroundColor: getCustomColor }\"\r\n (click)=\"onClick($event)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"path\" class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\" [target]=\"getTarget\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <span class=\"mrx-badge\" [class]=\"getClasses\" [style]=\"{ backgroundColor: getCustomColor }\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>{{text}}\r\n </span>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [".mrx-badge.mrx-badge{display:block;font-family:var(--body-sm-font-famil);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-badge.mrx-badge.mrx-badge-color-positive{background-color:var(--system-bg-positive-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-positive.mrx-badge-link:hover{background-color:var(--system-bg-positive-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-negative{background-color:var(--system-bg-negative-primary);color:var(--neutral-text-primary)!important}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-negative.mrx-badge-link:hover{background-color:var(--system-bg-negative-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-attention{background-color:var(--system-bg-attention-primary);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-attention.mrx-badge-link:hover{background-color:var(--system-bg-attention-primary-hover)}.mrx-badge.mrx-badge.mrx-badge-color-neutral{background-color:var(--neutral-bg-island-default);color:var(--neutral-text-primary)}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-neutral.mrx-badge-link:hover{background-color:var(--neutral-bg-island-hover)}.mrx-badge.mrx-badge.mrx-badge-color-brand{background-color:var(--brand-bg-secondary-default);color:var(--brand-text-accent)}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link{transition:background-color .2s}.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-button:hover,.mrx-badge.mrx-badge.mrx-badge-color-brand.mrx-badge-link:hover{background-color:var(--brand-bg-secondary-hover)}.mrx-badge.mrx-badge.mrx-badge-button{border:none;outline:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-badge-link{text-decoration:none;cursor:pointer}.mrx-badge.mrx-badge.mrx-type-default{border-radius:var(--border-radius-1)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-default{padding:var(--spacing-1) var(--spacing-3)}.mrx-badge.mrx-badge.mrx-type-default.mrx-size-small{padding:1px var(--spacing-2)}.mrx-badge.mrx-badge.mrx-type-circle{border-radius:var(--border-radius-3);text-align:center}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-default{padding:var(--spacing-1) var(--spacing-2);min-width:var(--sizing-6)}.mrx-badge.mrx-badge.mrx-type-circle.mrx-size-small{padding:var(--sizing-half) var(--spacing-1);min-width:var(--sizing-5)}\n"] }]
40
40
  }], propDecorators: { type: [{
41
41
  type: Input
42
42
  }], tag: [{