npm - @sarasanalytics-com/design-system - Versions diffs - 0.0.61 → 0.0.62 - Mend

@sarasanalytics-com/design-system 0.0.61 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/esm2022/lib/button/button.component.mjs +3 -3
package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +79 -55
package/fesm2022/sarasanalytics-com-design-system.mjs +80 -57
package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
package/lib/message-banner-v2/message-banner-v2.component.d.ts +28 -22
package/package.json +1 -1
package/styles/styles.css +1 -0

package/esm2022/lib/button/button.component.mjs CHANGED Viewed

@@ -57,11 +57,11 @@ export class ButtonComponent {
         this.onMouseOutEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
+            args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -97,4 +97,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }], onMouseOutEvent: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRWhFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7O0FBRW5ELElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFJLGlEQUFpRDtBQVdwRSxNQUFNLE9BQU8sZUFBZTtJQVQ1QjtRQXFCVyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLGdCQUFXLEdBQVksS0FBSyxDQUFDO1FBRTVCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNsQyxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDcEMsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRS9DLGFBQVEsR0FBRyxFQUFFLENBQUE7UUFDYixvQkFBZSxHQUFHLEVBQUUsQ0FBQTtRQUNwQixTQUFJLEdBQVcsTUFBTSxFQUFFLENBQUM7S0FvQ3pCO0lBbENDLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLENBQUMsUUFBUSxHQUFHO1lBQ2Qsb0JBQW9CLEVBQUUsT0FBTyxJQUFJLENBQUMsU0FBUyxHQUFHO1lBQzlDLFlBQVksRUFBRSxPQUFPLElBQUksQ0FBQyxTQUFTLEdBQUc7U0FDdkMsQ0FBQTtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUc7WUFDckIsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFO1NBQ1osQ0FBQTtRQUNELElBQUksT0FBTyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDakUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDekIsQ0FBQztJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsR0FBVTtRQUN0QixJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksVUFBVTtZQUFFLE9BQU87UUFDckMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDckIsR0FBRyxJQUFJLENBQUMsZUFBZTtZQUN2QixHQUFHO1NBQ0osQ0FBQyxDQUFDO1FBQ0gsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQ3BCLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxPQUFPO2dCQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2lCQUNsRCxJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksTUFBTTtnQkFBRSxRQUFRLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDaEUsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLFVBQVU7WUFBRSxPQUFPO1FBQ3JDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksVUFBVTtZQUFFLE9BQU87UUFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM5QixDQUFDOzhHQTFEVSxlQUFlO2tHQUFmLGVBQWUseWNBTGYsQ0FBQyxXQUFXLENBQUMsK0NDakIxQiw4d0NBd0JRLHdpSERSVSxPQUFPLDJFQUFFLGdCQUFnQixtRkFBRSxnQkFBZ0IsK0JBQUUsYUFBYTs7MkZBTS9ELGVBQWU7a0JBVDNCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsZ0JBQWdCLEVBQUUsYUFBYSxDQUFDLGFBQ2hFLENBQUMsV0FBVyxDQUFDOzhCQU1mLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTTtnQkFDRyxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLGVBQWU7c0JBQXhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ1N0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFNwaW5uZXJDb21wb25lbnQgfSBmcm9tICcuLi9zcGlubmVyL3NwaW5uZXIuY29tcG9uZW50JztcbmltcG9ydCB7IEljb25OYW1lIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9pY29uLWludGVyZmFjZSc7XG5pbXBvcnQgeyBIdHRwQ2xpZW50TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvblNlcnZpY2UgfSBmcm9tICcuLi9pY29uL2ljb24uc2VydmljZSc7XG5cbmxldCBuZXh0SWQgPSAwOyAgICAvLyB1c2VkIHRvIGdpdmUgdW5pcXVlIGlkcyB0byBpbnB1dHMgdXNlZCBpbiBodG1sXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLWJ1dHRvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0lmLCBOZ1N0eWxlLCBTcGlubmVyQ29tcG9uZW50LCBIdHRwQ2xpZW50TW9kdWxlLCBJY29uQ29tcG9uZW50XSxcbiAgcHJvdmlkZXJzOiBbSWNvblNlcnZpY2VdLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuY3NzJ1xufSlcblxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGlkOiBzdHJpbmcgfCBudW1iZXI7XG4gIEBJbnB1dCgpIHR5cGU6IHN0cmluZztcbiAgQElucHV0KCkgc3RhdGU6IHN0cmluZztcbiAgQElucHV0KCkgc2l6ZTogc3RyaW5nO1xuICBASW5wdXQoKSB0ZXh0OiBzdHJpbmcgfCBudW1iZXI7XG4gIEBJbnB1dCgpIEltYWdlUGF0aDogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uOiBJY29uTmFtZTtcbiAgQElucHV0KCkgaWNvblBvc2l0aW9uOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGhyZWY6IHN0cmluZztcbiAgQElucHV0KCkgaHJlZlRhcmdldDogc3RyaW5nO1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nO1xuICBASW5wdXQoKSBpc1N1Ym1pdDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBidXR0b25JY29uU2l6ZTogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIHNob3dTcGlubmVyOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIG9uQ2xpY2tFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIG9uTW91c2VJbkV2ZW50ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgb25Nb3VzZU91dEV2ZW50ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIHN2Z1N0eWxlID0ge31cbiAgZXZlbnRFbWl0T2JqZWN0ID0ge31cbiAgdXVpZDogbnVtYmVyID0gbmV4dElkKys7XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIHRoaXMuc3ZnU3R5bGUgPSB7XG4gICAgICAnLXdlYmtpdC1tYXNrLWltYWdlJzogYHVybCgke3RoaXMuSW1hZ2VQYXRofSlgLFxuICAgICAgJ21hc2staW1hZ2UnOiBgdXJsKCR7dGhpcy5JbWFnZVBhdGh9KWAsXG4gICAgfVxuICAgIHRoaXMuZXZlbnRFbWl0T2JqZWN0ID0ge1xuICAgICAgaWQ6IHRoaXMuaWRcbiAgICB9XG4gICAgaWYgKGNoYW5nZXMgJiYgY2hhbmdlc1snd2lkdGgnXSAmJiBjaGFuZ2VzWyd3aWR0aCddLmN1cnJlbnRWYWx1ZSkge1xuICAgICAgY29uc29sZS5sb2codGhpcy53aWR0aClcbiAgICB9XG4gIH1cblxuICBidXR0b25DbGlja2VkKGV2dDogRXZlbnQpIHtcbiAgICBpZiAodGhpcy5zdGF0ZSA9PSBcImRpc2FibGVkXCIpIHJldHVybjtcbiAgICB0aGlzLm9uQ2xpY2tFdmVudC5lbWl0KHtcbiAgICAgIC4uLnRoaXMuZXZlbnRFbWl0T2JqZWN0LFxuICAgICAgZXZ0XG4gICAgfSk7XG4gICAgaWYgKHRoaXMuaHJlZiAhPSBcIlwiKSB7XG4gICAgICBpZiAodGhpcy5ocmVmVGFyZ2V0ID09IFwiYmxhbmtcIikgd2luZG93Lm9wZW4odGhpcy5ocmVmKTtcbiAgICAgIGVsc2UgaWYgKHRoaXMuaHJlZlRhcmdldCA9PSBcInNlbGZcIikgbG9jYXRpb24uaHJlZiA9IHRoaXMuaHJlZjtcbiAgICB9XG4gIH1cblxuICBtb3VzZUluKCkge1xuICAgIGlmICh0aGlzLnN0YXRlID09IFwiZGlzYWJsZWRcIikgcmV0dXJuO1xuICAgIHRoaXMub25Nb3VzZUluRXZlbnQuZW1pdCgpO1xuICB9XG5cbiAgbW91c2VPdXQoKSB7XG4gICAgaWYgKHRoaXMuc3RhdGUgPT0gXCJkaXNhYmxlZFwiKSByZXR1cm47XG4gICAgdGhpcy5vbk1vdXNlT3V0RXZlbnQuZW1pdCgpO1xuICB9XG59XG4iLCI8YnV0dG9uIChjbGljayk9XCJidXR0b25DbGlja2VkKCRldmVudClcIiBpZD1cInNhLWJ1dHRvbi17e3V1aWR9fVwiIGNsYXNzPVwiYnRuLWhpZGVcIlxuICBbdHlwZV09XCJpc1N1Ym1pdCA/ICdzdWJtaXQnIDogJ2J1dHRvbidcIj48L2J1dHRvbj5cbjwhLS0gKGNsaWNrKT1cImJ1dHRvbkNsaWNrZWQoKVwiIG9uIGJ1dHRvbiBpbnN0ZWFkIG9mIGxhYmVsIGJyZWFrcyB3aG9sZSB0aGluZyAtLT5cbjxsYWJlbCBmb3I9XCJzYS1idXR0b24te3t1dWlkfX1cIiBbbmdTdHlsZV09XCJ7J3dpZHRoJzp3aWR0aH1cIiByb2xlPVwiYnV0dG9uXCIgdGFiaW5kZXg9XCIwXCIgKG1vdXNlZW50ZXIpPVwibW91c2VJbigpXCJcbiAgKG1vdXNlbGVhdmUpPVwibW91c2VPdXQoKVwiIChrZXlkb3duLmVudGVyKT1cImJ1dHRvbkNsaWNrZWQoJGV2ZW50KVwiIGZvcj1cInNhLWJ1dHRvblwiXG4gIGNsYXNzPVwic2EtYnV0dG9uIHt7c3RhdGV9fSB7e3R5cGV9fSB7e3NpemV9fVwiPlxuICBAaWYoc2hvd1NwaW5uZXIpe1xuICA8c2Etc3Bpbm5lciBbZGVmYXVsdF09XCJ0cnVlXCI+PC9zYS1zcGlubmVyPlxuICB9XG4gIEBpZihJbWFnZVBhdGgpIHtcbiAgPGRpdiBjbGFzcz1cInN2Zy1pY29uXCIgW3N0eWxlXT1cInN2Z1N0eWxlXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoaWNvblBvc2l0aW9uID09ICdsZWZ0JyB8fCBpY29uUG9zaXRpb24gPT0gJ2JvdGgnKSA/ICdibG9jaycgOiAnbm9uZSdcIj48L2Rpdj5cbiAge3t0ZXh0fX1cbiAgPGRpdiBjbGFzcz1cInN2Zy1pY29uXCIgW3N0eWxlXT1cInN2Z1N0eWxlXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoaWNvblBvc2l0aW9uID09ICdyaWdodCcgfHwgaWNvblBvc2l0aW9uID09ICdib3RoJykgPyAnYmxvY2snIDogJ25vbmUnXCI+PC9kaXY+XG4gIH0gQGVsc2UgaWYgKGljb24pIHtcbiAgPHNhLWljb24gW2ljb25dPVwiaWNvblwiIFtzaXplXT1cImJ1dHRvbkljb25TaXplXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoaWNvblBvc2l0aW9uID09ICdsZWZ0JyB8fCBpY29uUG9zaXRpb24gPT0gJ2JvdGgnKSA/ICdmbGV4JyA6ICdub25lJ1wiPjwvc2EtaWNvbj5cbiAge3t0ZXh0fX1cbiAgPHNhLWljb24gW2ljb25dPVwiaWNvblwiIFtzaXplXT1cImJ1dHRvbkljb25TaXplXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoaWNvblBvc2l0aW9uID09ICdyaWdodCcgfHwgaWNvblBvc2l0aW9uID09ICdib3RoJykgPyAnZmxleCcgOiAnbm9uZSdcIj48L3NhLWljb24+XG4gIH0gQGVsc2Uge1xuICB7e3RleHR9fVxuICB9XG48L2xhYmVsPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRWhFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7O0FBRW5ELElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFJLGlEQUFpRDtBQVdwRSxNQUFNLE9BQU8sZUFBZTtJQVQ1QjtRQXFCVyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLGdCQUFXLEdBQVksS0FBSyxDQUFDO1FBRTVCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNsQyxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDcEMsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRS9DLGFBQVEsR0FBRyxFQUFFLENBQUE7UUFDYixvQkFBZSxHQUFHLEVBQUUsQ0FBQTtRQUNwQixTQUFJLEdBQVcsTUFBTSxFQUFFLENBQUM7S0FvQ3pCO0lBbENDLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLENBQUMsUUFBUSxHQUFHO1lBQ2Qsb0JBQW9CLEVBQUUsT0FBTyxJQUFJLENBQUMsU0FBUyxHQUFHO1lBQzlDLFlBQVksRUFBRSxPQUFPLElBQUksQ0FBQyxTQUFTLEdBQUc7U0FDdkMsQ0FBQTtRQUNELElBQUksQ0FBQyxlQUFlLEdBQUc7WUFDckIsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFO1NBQ1osQ0FBQTtRQUNELElBQUksT0FBTyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDakUsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDekIsQ0FBQztJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsR0FBVTtRQUN0QixJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksVUFBVTtZQUFFLE9BQU87UUFDckMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDckIsR0FBRyxJQUFJLENBQUMsZUFBZTtZQUN2QixHQUFHO1NBQ0osQ0FBQyxDQUFDO1FBQ0gsSUFBSSxJQUFJLENBQUMsSUFBSSxJQUFJLEVBQUUsRUFBRSxDQUFDO1lBQ3BCLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxPQUFPO2dCQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2lCQUNsRCxJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksTUFBTTtnQkFBRSxRQUFRLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDaEUsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLFVBQVU7WUFBRSxPQUFPO1FBQ3JDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksVUFBVTtZQUFFLE9BQU87UUFDckMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM5QixDQUFDOzhHQTFEVSxlQUFlO2tHQUFmLGVBQWUseWNBTGYsQ0FBQyxXQUFXLENBQUMsK0NDakIxQixneENBeUJBLHdpSERUa0IsT0FBTywyRUFBRSxnQkFBZ0IsbUZBQUUsZ0JBQWdCLCtCQUFFLGFBQWE7OzJGQU0vRCxlQUFlO2tCQVQzQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1AsQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGdCQUFnQixFQUFFLGFBQWEsQ0FBQyxhQUNoRSxDQUFDLFdBQVcsQ0FBQzs4QkFNZixFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFFRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVJLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csY0FBYztzQkFBdkIsTUFBTTtnQkFDRyxlQUFlO3NCQUF4QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nSWYgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdTdHlsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBTcGlubmVyQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Bpbm5lci9zcGlubmVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJY29uTmFtZSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvaWNvbi1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgSHR0cENsaWVudE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IEljb25TZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLnNlcnZpY2UnO1xuXG5sZXQgbmV4dElkID0gMDsgICAgLy8gdXNlZCB0byBnaXZlIHVuaXF1ZSBpZHMgdG8gaW5wdXRzIHVzZWQgaW4gaHRtbFxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYS1idXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZiwgTmdTdHlsZSwgU3Bpbm5lckNvbXBvbmVudCwgSHR0cENsaWVudE1vZHVsZSwgSWNvbkNvbXBvbmVudF0sXG4gIHByb3ZpZGVyczogW0ljb25TZXJ2aWNlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9idXR0b24uY29tcG9uZW50LmNzcydcbn0pXG5cbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSBpZDogc3RyaW5nIHwgbnVtYmVyO1xuICBASW5wdXQoKSB0eXBlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN0YXRlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNpemU6IHN0cmluZztcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nIHwgbnVtYmVyO1xuICBASW5wdXQoKSBJbWFnZVBhdGg6IHN0cmluZztcbiAgQElucHV0KCkgaWNvbjogSWNvbk5hbWU7XG4gIEBJbnB1dCgpIGljb25Qb3NpdGlvbjogc3RyaW5nO1xuICBASW5wdXQoKSBocmVmOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGhyZWZUYXJnZXQ6IHN0cmluZztcbiAgQElucHV0KCkgd2lkdGg6IHN0cmluZztcbiAgQElucHV0KCkgaXNTdWJtaXQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgYnV0dG9uSWNvblNpemU6IHN0cmluZztcblxuICBASW5wdXQoKSBzaG93U3Bpbm5lcjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBvbkNsaWNrRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBvbk1vdXNlSW5FdmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIG9uTW91c2VPdXRFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBzdmdTdHlsZSA9IHt9XG4gIGV2ZW50RW1pdE9iamVjdCA9IHt9XG4gIHV1aWQ6IG51bWJlciA9IG5leHRJZCsrO1xuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICB0aGlzLnN2Z1N0eWxlID0ge1xuICAgICAgJy13ZWJraXQtbWFzay1pbWFnZSc6IGB1cmwoJHt0aGlzLkltYWdlUGF0aH0pYCxcbiAgICAgICdtYXNrLWltYWdlJzogYHVybCgke3RoaXMuSW1hZ2VQYXRofSlgLFxuICAgIH1cbiAgICB0aGlzLmV2ZW50RW1pdE9iamVjdCA9IHtcbiAgICAgIGlkOiB0aGlzLmlkXG4gICAgfVxuICAgIGlmIChjaGFuZ2VzICYmIGNoYW5nZXNbJ3dpZHRoJ10gJiYgY2hhbmdlc1snd2lkdGgnXS5jdXJyZW50VmFsdWUpIHtcbiAgICAgIGNvbnNvbGUubG9nKHRoaXMud2lkdGgpXG4gICAgfVxuICB9XG5cbiAgYnV0dG9uQ2xpY2tlZChldnQ6IEV2ZW50KSB7XG4gICAgaWYgKHRoaXMuc3RhdGUgPT0gXCJkaXNhYmxlZFwiKSByZXR1cm47XG4gICAgdGhpcy5vbkNsaWNrRXZlbnQuZW1pdCh7XG4gICAgICAuLi50aGlzLmV2ZW50RW1pdE9iamVjdCxcbiAgICAgIGV2dFxuICAgIH0pO1xuICAgIGlmICh0aGlzLmhyZWYgIT0gXCJcIikge1xuICAgICAgaWYgKHRoaXMuaHJlZlRhcmdldCA9PSBcImJsYW5rXCIpIHdpbmRvdy5vcGVuKHRoaXMuaHJlZik7XG4gICAgICBlbHNlIGlmICh0aGlzLmhyZWZUYXJnZXQgPT0gXCJzZWxmXCIpIGxvY2F0aW9uLmhyZWYgPSB0aGlzLmhyZWY7XG4gICAgfVxuICB9XG5cbiAgbW91c2VJbigpIHtcbiAgICBpZiAodGhpcy5zdGF0ZSA9PSBcImRpc2FibGVkXCIpIHJldHVybjtcbiAgICB0aGlzLm9uTW91c2VJbkV2ZW50LmVtaXQoKTtcbiAgfVxuXG4gIG1vdXNlT3V0KCkge1xuICAgIGlmICh0aGlzLnN0YXRlID09IFwiZGlzYWJsZWRcIikgcmV0dXJuO1xuICAgIHRoaXMub25Nb3VzZU91dEV2ZW50LmVtaXQoKTtcbiAgfVxufVxuIiwiPGJ1dHRvbiAoY2xpY2spPVwiYnV0dG9uQ2xpY2tlZCgkZXZlbnQpXCIgaWQ9XCJzYS1idXR0b24te3t1dWlkfX1cIiBjbGFzcz1cImJ0bi1oaWRlXCJcbiAgW3R5cGVdPVwiaXNTdWJtaXQgPyAnc3VibWl0JyA6ICdidXR0b24nXCI+PC9idXR0b24+XG48IS0tIChjbGljayk9XCJidXR0b25DbGlja2VkKClcIiBvbiBidXR0b24gaW5zdGVhZCBvZiBsYWJlbCBicmVha3Mgd2hvbGUgdGhpbmcgLS0+XG48bGFiZWwgZm9yPVwic2EtYnV0dG9uLXt7dXVpZH19XCIgW25nU3R5bGVdPVwieyd3aWR0aCc6d2lkdGh9XCIgcm9sZT1cImJ1dHRvblwiIHRhYmluZGV4PVwiMFwiIChtb3VzZWVudGVyKT1cIm1vdXNlSW4oKVwiXG4gIChtb3VzZWxlYXZlKT1cIm1vdXNlT3V0KClcIiAoa2V5ZG93bi5lbnRlcik9XCJidXR0b25DbGlja2VkKCRldmVudClcIiBmb3I9XCJzYS1idXR0b25cIlxuICBjbGFzcz1cInNhLWJ1dHRvbiB7e3N0YXRlfX0ge3t0eXBlfX0ge3tzaXplfX1cIj5cbiAgQGlmKHNob3dTcGlubmVyKXtcbiAgPHNhLXNwaW5uZXIgW2RlZmF1bHRdPVwidHJ1ZVwiPjwvc2Etc3Bpbm5lcj5cbiAgfVxuICBAaWYoSW1hZ2VQYXRoKSB7XG4gIDxkaXYgY2xhc3M9XCJzdmctaWNvblwiIFtzdHlsZV09XCJzdmdTdHlsZVwiXG4gICAgW3N0eWxlLmRpc3BsYXldPVwiKGljb25Qb3NpdGlvbiA9PSAnbGVmdCcgfHwgaWNvblBvc2l0aW9uID09ICdib3RoJykgPyAnYmxvY2snIDogJ25vbmUnXCI+PC9kaXY+XG4gIHt7dGV4dH19XG4gIDxkaXYgY2xhc3M9XCJzdmctaWNvblwiIFtzdHlsZV09XCJzdmdTdHlsZVwiXG4gICAgW3N0eWxlLmRpc3BsYXldPVwiKGljb25Qb3NpdGlvbiA9PSAncmlnaHQnIHx8IGljb25Qb3NpdGlvbiA9PSAnYm90aCcpID8gJ2Jsb2NrJyA6ICdub25lJ1wiPjwvZGl2PlxuICB9IEBlbHNlIGlmIChpY29uKSB7XG4gIDxzYS1pY29uIFtpY29uXT1cImljb25cIiBbc2l6ZV09XCJidXR0b25JY29uU2l6ZVwiXG4gICAgW3N0eWxlLmRpc3BsYXldPVwiKGljb25Qb3NpdGlvbiA9PSAnbGVmdCcgfHwgaWNvblBvc2l0aW9uID09ICdib3RoJykgPyAnZmxleCcgOiAnbm9uZSdcIj48L3NhLWljb24+XG4gIHt7dGV4dH19XG4gIDxzYS1pY29uIFtpY29uXT1cImljb25cIiBbc2l6ZV09XCJidXR0b25JY29uU2l6ZVwiXG4gICAgW3N0eWxlLmRpc3BsYXldPVwiKGljb25Qb3NpdGlvbiA9PSAncmlnaHQnIHx8IGljb25Qb3NpdGlvbiA9PSAnYm90aCcpID8gJ2ZsZXgnIDogJ25vbmUnXCI+PC9zYS1pY29uPlxuICB9IEBlbHNlIHtcbiAge3t0ZXh0fX1cbiAgfVxuPC9sYWJlbD5cbiJdfQ==

package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs CHANGED Viewed

@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, computed, signal, EventEmitter, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { IconService } from '../icon/icon.service';
 import { ButtonComponent } from '../button/button.component';
 import { HttpClientModule } from '@angular/common/http';
@@ -6,73 +7,96 @@ import { IconComponent } from '../icon/icon.component';
 import * as i0 from "@angular/core";
 export class MessageBannerV2Component {
     constructor() {
-        this.messageType = 'default';
-        this.title = '';
-        this.description = '';
-        this.content = '';
-        this.bannerIconSize = '';
-        this.onAction = () => { };
-        // title: string = '';
-        // description: string = '';
-        this.imageSrc = '';
+        // State management using signals
+        this.state = signal({
+            type: 'default',
+            title: '',
+            description: '',
+            messageIcon: '',
+            messageIconSize: {
+                height: '12.5rem'
+            }
+        });
+        // Computed properties
+        this.bannerContent = computed(() => {
+            const currentState = this.state();
+            return {
+                ...currentState,
+                description: this.sanitizeDescription(currentState.description)
+            };
+        });
+        this.buttons = [];
+        this.buttonClick = new EventEmitter();
     }
-    ngOnInit() {
-        // this.setErrorContent();
+    // Input properties
+    set messageType(value) {
+        this.state.update(s => ({ ...s, type: value }));
+        this.updateContentBasedOnType(value);
     }
-    setErrorContent() {
-        // Set error content based on error or message type
-        switch (this.messageType) {
-            case 'connection':
-                this.title = 'We’re having trouble connecting. Please check your internet connection and try again';
-                this.description =
-                    'You can also reach out to our support team at <span class="support-email">support@sarasanalytics.com</span> for assistance';
-                this.imageSrc = '/assets/lost-connection.gif';
-                break;
-            case 'access':
-                this.title = 'This is taking a bit longer than usual. Please hold on!';
-                this.description =
-                    'If the delay continues, check your connection and try refreshing the page.';
-                this.imageSrc = '/assets/long-loading.gif';
-                break;
-            default:
-                this.title = 'Oops! Something went wrong. Please try again or try after some time';
-                this.description =
-                    'If the issue persists, contact our support team at <span class="support-email">support@sarasanalytics.com</span>';
-                this.imageSrc = '/assets/error.gif';
-                break;
-        }
+    set messageIcon(value) {
+        this.state.update(s => ({ ...s, messageIcon: value }));
+    }
+    set messageIconSize(value) {
+        this.state.update(s => ({ ...s, messageIconSize: value }));
+    }
+    set title(value) {
+        this.state.update(s => ({ ...s, title: value }));
+    }
+    set description(value) {
+        this.state.update(s => ({ ...s, description: value }));
+    }
+    updateContentBasedOnType(type) {
+        const content = {
+            default: {
+                title: 'Oops! Something went wrong. Please try again or try after some time',
+                description: 'If the issue persists, contact our support team at <span class="support-email">support@sarasanalytics.com</span>',
+                messageIcon: '/assets/error.gif'
+            },
+            connection: {
+                title: 'We\'re having trouble connecting. Please check your internet connection and try again',
+                description: 'You can also reach out to our support team at <span class="support-email">support@sarasanalytics.com</span> for assistance',
+                messageIcon: '/assets/lost-connection.gif'
+            },
+            access: {
+                title: 'This is taking a bit longer than usual. Please hold on!',
+                description: 'If the delay continues, check your connection and try refreshing the page.',
+                messageIcon: '/assets/long-loading.gif'
+            }
+        };
+        this.state.update(s => ({
+            ...s,
+            ...content[type]
+        }));
+    }
+    sanitizeDescription(description) {
+        return description.replace(/support@sarasanalytics\.com/g, '<span class="support-email">support@sarassanalytics.com</span>');
+    }
+    onButtonClick(button, event) {
+        this.buttonClick.emit({
+            type: button.type,
+            button,
+            originalEvent: event
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", messageIcon: "messageIcon", title: "title", description: "description", actionText: "actionText", content: "content", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", onAction: "onAction" }, providers: [IconService], ngImport: i0, template: "<div class=\"error-page\">\n    <div class=\"content-container\">\n        <div class=\"image-container\">\n            <img [src]=\"messageIcon\" alt=\"Error Image\" />\n        </div>\n        <div class='details'>\n            <div class='title-description'>\n                <div class=\"title-class\">{{ title }}</div>\n                <p class=\"description\" [innerHTML]='description'></p>\n            </div>\n            <sa-button [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n                [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n                (click)=\"onAction()\">{{\n                actionText\n                }}</sa-button>\n        </div>\n    </div>", styles: [".error-page{display:flex;justify-content:center;align-items:center;height:87.5vh;background-color:#fff;padding:1rem;box-sizing:border-box}.title-class{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;background-color:#fff;padding:1rem}.image-container img{width:150px;height:150px}.details{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;background-color:#fff;padding:1rem}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "@if (bannerContent(); as content) {\n  <div class=\"error-page message-banner-v2\">\n    <div class=\"content-container\">\n      <div class=\"image-container\">\n        <img [src]=\"content.messageIcon\" \n             [alt]=\"content.type + ' image'\"\n             [style.--message-icon-height]=\"content.messageIconSize?.height\"\n             [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n      </div>\n      <div class=\"details\">\n        <div class=\"title-description\">\n          <div class=\"title-class\" [innerHTML]=\"content.title\"></div>\n          <p class=\"description\" [innerHTML]=\"content.description\"></p>\n        </div>\n        <div class=\"button-group\">\n          @for (button of buttons; track button.text) {\n            <sa-button \n              [text]=\"button.text\"\n              [icon]=\"button.icon\"\n              [size]=\"button.size\"\n              [type]=\"button.type\"\n              [iconPosition]=\"button.iconPosition\"\n              [buttonIconSize]=\"button.buttonIconSize\"\n              (onClickEvent)=\"onButtonClick(button, $event)\"\n              role=\"button\"\n              [attr.aria-label]=\"button.text\">\n            </sa-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], template: "<div class=\"error-page\">\n    <div class=\"content-container\">\n        <div class=\"image-container\">\n            <img [src]=\"messageIcon\" alt=\"Error Image\" />\n        </div>\n        <div class='details'>\n            <div class='title-description'>\n                <div class=\"title-class\">{{ title }}</div>\n                <p class=\"description\" [innerHTML]='description'></p>\n            </div>\n            <sa-button [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n                [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n                (click)=\"onAction()\">{{\n                actionText\n                }}</sa-button>\n        </div>\n    </div>", styles: [".error-page{display:flex;justify-content:center;align-items:center;height:87.5vh;background-color:#fff;padding:1rem;box-sizing:border-box}.title-class{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;background-color:#fff;padding:1rem}.image-container img{width:150px;height:150px}.details{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;background-color:#fff;padding:1rem}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { messageType: [{
+            args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\n  <div class=\"error-page message-banner-v2\">\n    <div class=\"content-container\">\n      <div class=\"image-container\">\n        <img [src]=\"content.messageIcon\" \n             [alt]=\"content.type + ' image'\"\n             [style.--message-icon-height]=\"content.messageIconSize?.height\"\n             [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n      </div>\n      <div class=\"details\">\n        <div class=\"title-description\">\n          <div class=\"title-class\" [innerHTML]=\"content.title\"></div>\n          <p class=\"description\" [innerHTML]=\"content.description\"></p>\n        </div>\n        <div class=\"button-group\">\n          @for (button of buttons; track button.text) {\n            <sa-button \n              [text]=\"button.text\"\n              [icon]=\"button.icon\"\n              [size]=\"button.size\"\n              [type]=\"button.type\"\n              [iconPosition]=\"button.iconPosition\"\n              [buttonIconSize]=\"button.buttonIconSize\"\n              (onClickEvent)=\"onButtonClick(button, $event)\"\n              role=\"button\"\n              [attr.aria-label]=\"button.text\">\n            </sa-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}\n"] }]
+        }], propDecorators: { messageType: [{
                 type: Input
             }], messageIcon: [{
                 type: Input
+            }], messageIconSize: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
                 type: Input
-            }], actionText: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], bannerIconSize: [{
-                type: Input
-            }], buttonIcon: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], buttonIconPosition: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], buttonIconSize: [{
-                type: Input
-            }], onAction: [{
+            }], buttons: [{
                 type: Input
+            }], buttonClick: [{
+                type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS1iYW5uZXItdjIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tZXNzYWdlLWJhbm5lci12Mi9tZXNzYWdlLWJhbm5lci12Mi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21lc3NhZ2UtYmFubmVyLXYyL21lc3NhZ2UtYmFubmVyLXYyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFHN0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQVN2RCxNQUFNLE9BQU8sd0JBQXdCO0lBQ25DO1FBQ1MsZ0JBQVcsR0FBVyxTQUFTLENBQUM7UUFFaEMsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUV6QixZQUFPLEdBQVksRUFBRSxDQUFDO1FBQ3RCLG1CQUFjLEdBQVksRUFBRSxDQUFDO1FBTTdCLGFBQVEsR0FBZSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFFMUMsc0JBQXNCO1FBQ3RCLDRCQUE0QjtRQUM1QixhQUFRLEdBQVcsRUFBRSxDQUFDO0lBakJOLENBQUM7SUFrQmpCLFFBQVE7UUFDTiwwQkFBMEI7SUFDNUIsQ0FBQztJQUVPLGVBQWU7UUFDckIsbURBQW1EO1FBQ25ELFFBQVEsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3pCLEtBQUssWUFBWTtnQkFDZixJQUFJLENBQUMsS0FBSyxHQUFHLHNGQUFzRixDQUFDO2dCQUNwRyxJQUFJLENBQUMsV0FBVztvQkFDZCw0SEFBNEgsQ0FBQztnQkFDL0gsSUFBSSxDQUFDLFFBQVEsR0FBRyw2QkFBNkIsQ0FBQztnQkFDOUMsTUFBTTtZQUVSLEtBQUssUUFBUTtnQkFDWCxJQUFJLENBQUMsS0FBSyxHQUFHLHlEQUF5RCxDQUFDO2dCQUN2RSxJQUFJLENBQUMsV0FBVztvQkFDZCw0RUFBNEUsQ0FBQztnQkFDL0UsSUFBSSxDQUFDLFFBQVEsR0FBRywwQkFBMEIsQ0FBQztnQkFDM0MsTUFBTTtZQUVSO2dCQUNFLElBQUksQ0FBQyxLQUFLLEdBQUcscUVBQXFFLENBQUM7Z0JBQ25GLElBQUksQ0FBQyxXQUFXO29CQUNkLGtIQUFrSCxDQUFDO2dCQUNySCxJQUFJLENBQUMsUUFBUSxHQUFHLG1CQUFtQixDQUFDO2dCQUNwQyxNQUFNO1FBQ1YsQ0FBQztJQUNILENBQUM7OEdBL0NVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLG1iQUh4QixDQUFDLFdBQVcsQ0FBQywwQkNaMUIsc3dCQWdCVSw0a0NETEUsZ0JBQWdCLCtCQUFpQixlQUFlOzsyRkFJL0Msd0JBQXdCO2tCQVBwQyxTQUFTOytCQUNFLHNCQUFzQixjQUNwQixJQUFJLFdBQ1AsQ0FBQyxnQkFBZ0IsRUFBRSxhQUFhLEVBQUUsZUFBZSxDQUFDLGFBQ2hELENBQUMsV0FBVyxDQUFDO3dEQUtmLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25TZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLnNlcnZpY2UnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvbk5hbWUgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2ljb24taW50ZXJmYWNlJztcbmltcG9ydCB7IEJ1dHRvbkljb25Qb3NpdGlvbiwgQnV0dG9uU2l6ZSwgQnV0dG9uVHlwZSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvYnV0dG9uLWludGVyZmFjZSc7XG5pbXBvcnQgeyBIdHRwQ2xpZW50TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYS1tZXNzYWdlLWJhbm5lci12MicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtIdHRwQ2xpZW50TW9kdWxlLCBJY29uQ29tcG9uZW50LCBCdXR0b25Db21wb25lbnRdLFxuICBwcm92aWRlcnM6IFtJY29uU2VydmljZV0sIHRlbXBsYXRlVXJsOiAnLi9tZXNzYWdlLWJhbm5lci12Mi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9tZXNzYWdlLWJhbm5lci12Mi5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBNZXNzYWdlQmFubmVyVjJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBjb25zdHJ1Y3RvcigpIHsgfVxuICBASW5wdXQoKSBtZXNzYWdlVHlwZTogc3RyaW5nID0gJ2RlZmF1bHQnO1xuICBASW5wdXQoKSBtZXNzYWdlSWNvbjogSWNvbk5hbWU7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBhY3Rpb25UZXh0Pzogc3RyaW5nO1xuICBASW5wdXQoKSBjb250ZW50Pzogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGJhbm5lckljb25TaXplPzogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGJ1dHRvbkljb24/OiBJY29uTmFtZTtcbiAgQElucHV0KCkgYnV0dG9uVHlwZT86IEJ1dHRvblR5cGU7XG4gIEBJbnB1dCgpIGJ1dHRvbkljb25Qb3NpdGlvbj86IEJ1dHRvbkljb25Qb3NpdGlvbjtcbiAgQElucHV0KCkgYnV0dG9uU2l6ZT86IEJ1dHRvblNpemU7XG4gIEBJbnB1dCgpIGJ1dHRvbkljb25TaXplPzogc3RyaW5nO1xuICBASW5wdXQoKSBvbkFjdGlvbjogKCkgPT4gdm9pZCA9ICgpID0+IHsgfTtcblxuICAvLyB0aXRsZTogc3RyaW5nID0gJyc7XG4gIC8vIGRlc2NyaXB0aW9uOiBzdHJpbmcgPSAnJztcbiAgaW1hZ2VTcmM6IHN0cmluZyA9ICcnO1xuICBuZ09uSW5pdCgpIHtcbiAgICAvLyB0aGlzLnNldEVycm9yQ29udGVudCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRFcnJvckNvbnRlbnQoKSB7XG4gICAgLy8gU2V0IGVycm9yIGNvbnRlbnQgYmFzZWQgb24gZXJyb3Igb3IgbWVzc2FnZSB0eXBlXG4gICAgc3dpdGNoICh0aGlzLm1lc3NhZ2VUeXBlKSB7XG4gICAgICBjYXNlICdjb25uZWN0aW9uJzpcbiAgICAgICAgdGhpcy50aXRsZSA9ICdXZeKAmXJlIGhhdmluZyB0cm91YmxlIGNvbm5lY3RpbmcuIFBsZWFzZSBjaGVjayB5b3VyIGludGVybmV0IGNvbm5lY3Rpb24gYW5kIHRyeSBhZ2Fpbic7XG4gICAgICAgIHRoaXMuZGVzY3JpcHRpb24gPVxuICAgICAgICAgICdZb3UgY2FuIGFsc28gcmVhY2ggb3V0IHRvIG91ciBzdXBwb3J0IHRlYW0gYXQgPHNwYW4gY2xhc3M9XCJzdXBwb3J0LWVtYWlsXCI+c3VwcG9ydEBzYXJhc2FuYWx5dGljcy5jb208L3NwYW4+IGZvciBhc3Npc3RhbmNlJztcbiAgICAgICAgdGhpcy5pbWFnZVNyYyA9ICcvYXNzZXRzL2xvc3QtY29ubmVjdGlvbi5naWYnO1xuICAgICAgICBicmVhaztcblxuICAgICAgY2FzZSAnYWNjZXNzJzpcbiAgICAgICAgdGhpcy50aXRsZSA9ICdUaGlzIGlzIHRha2luZyBhIGJpdCBsb25nZXIgdGhhbiB1c3VhbC4gUGxlYXNlIGhvbGQgb24hJztcbiAgICAgICAgdGhpcy5kZXNjcmlwdGlvbiA9XG4gICAgICAgICAgJ0lmIHRoZSBkZWxheSBjb250aW51ZXMsIGNoZWNrIHlvdXIgY29ubmVjdGlvbiBhbmQgdHJ5IHJlZnJlc2hpbmcgdGhlIHBhZ2UuJztcbiAgICAgICAgdGhpcy5pbWFnZVNyYyA9ICcvYXNzZXRzL2xvbmctbG9hZGluZy5naWYnO1xuICAgICAgICBicmVhaztcblxuICAgICAgZGVmYXVsdDpcbiAgICAgICAgdGhpcy50aXRsZSA9ICdPb3BzISBTb21ldGhpbmcgd2VudCB3cm9uZy4gUGxlYXNlIHRyeSBhZ2FpbiBvciB0cnkgYWZ0ZXIgc29tZSB0aW1lJztcbiAgICAgICAgdGhpcy5kZXNjcmlwdGlvbiA9XG4gICAgICAgICAgJ0lmIHRoZSBpc3N1ZSBwZXJzaXN0cywgY29udGFjdCBvdXIgc3VwcG9ydCB0ZWFtIGF0IDxzcGFuIGNsYXNzPVwic3VwcG9ydC1lbWFpbFwiPnN1cHBvcnRAc2FyYXNhbmFseXRpY3MuY29tPC9zcGFuPic7XG4gICAgICAgIHRoaXMuaW1hZ2VTcmMgPSAnL2Fzc2V0cy9lcnJvci5naWYnO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cImVycm9yLXBhZ2VcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY29udGVudC1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImltYWdlLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPGltZyBbc3JjXT1cIm1lc3NhZ2VJY29uXCIgYWx0PVwiRXJyb3IgSW1hZ2VcIiAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz0nZGV0YWlscyc+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPSd0aXRsZS1kZXNjcmlwdGlvbic+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlLWNsYXNzXCI+e3sgdGl0bGUgfX08L2Rpdj5cbiAgICAgICAgICAgICAgICA8cCBjbGFzcz1cImRlc2NyaXB0aW9uXCIgW2lubmVySFRNTF09J2Rlc2NyaXB0aW9uJz48L3A+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxzYS1idXR0b24gW3RleHRdPVwiYWN0aW9uVGV4dFwiIFtpY29uXT1cImJ1dHRvbkljb25cIiBbc2l6ZV09XCJidXR0b25TaXplXCIgW3R5cGVdPVwiYnV0dG9uVHlwZVwiXG4gICAgICAgICAgICAgICAgW2ljb25Qb3NpdGlvbl09XCJidXR0b25JY29uUG9zaXRpb25cIiBbc2l6ZV09XCJidXR0b25TaXplXCIgW2J1dHRvbkljb25TaXplXT1cImJ1dHRvbkljb25TaXplXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25BY3Rpb24oKVwiPnt7XG4gICAgICAgICAgICAgICAgYWN0aW9uVGV4dFxuICAgICAgICAgICAgICAgIH19PC9zYS1idXR0b24+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS1iYW5uZXItdjIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tZXNzYWdlLWJhbm5lci12Mi9tZXNzYWdlLWJhbm5lci12Mi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21lc3NhZ2UtYmFubmVyLXYyL21lc3NhZ2UtYmFubmVyLXYyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQVUsWUFBWSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUc3RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBcUJ2RCxNQUFNLE9BQU8sd0JBQXdCO0lBUnJDO1FBU0UsaUNBQWlDO1FBQ3pCLFVBQUssR0FBRyxNQUFNLENBQXFCO1lBQ3pDLElBQUksRUFBRSxTQUFTO1lBQ2YsS0FBSyxFQUFFLEVBQUU7WUFDVCxXQUFXLEVBQUUsRUFBRTtZQUNmLFdBQVcsRUFBRSxFQUFFO1lBQ2YsZUFBZSxFQUFFO2dCQUNmLE1BQU0sRUFBRSxTQUFTO2FBQ2xCO1NBQ0YsQ0FBQyxDQUFDO1FBRUgsc0JBQXNCO1FBQ1osa0JBQWEsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3RDLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNsQyxPQUFPO2dCQUNMLEdBQUcsWUFBWTtnQkFDZixXQUFXLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUM7YUFDaEUsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO1FBd0JNLFlBQU8sR0FBc0IsRUFBRSxDQUFDO1FBQy9CLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7S0F5QzlEO0lBaEVDLG1CQUFtQjtJQUNuQixJQUFhLFdBQVcsQ0FBQyxLQUEwQztRQUNqRSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2hELElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsSUFBYSxXQUFXLENBQUMsS0FBYTtRQUNwQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3pELENBQUM7SUFFRCxJQUFhLGVBQWUsQ0FBQyxLQUEwQztRQUNyRSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzdELENBQUM7SUFFRCxJQUFhLEtBQUssQ0FBQyxLQUFhO1FBQzlCLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVELElBQWEsV0FBVyxDQUFDLEtBQWE7UUFDcEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUN6RCxDQUFDO0lBS08sd0JBQXdCLENBQUMsSUFBeUM7UUFDeEUsTUFBTSxPQUFPLEdBQUc7WUFDZCxPQUFPLEVBQUU7Z0JBQ1AsS0FBSyxFQUFFLHFFQUFxRTtnQkFDNUUsV0FBVyxFQUFFLGtIQUFrSDtnQkFDL0gsV0FBVyxFQUFFLG1CQUFtQjthQUNqQztZQUNELFVBQVUsRUFBRTtnQkFDVixLQUFLLEVBQUUsdUZBQXVGO2dCQUM5RixXQUFXLEVBQUUsNEhBQTRIO2dCQUN6SSxXQUFXLEVBQUUsNkJBQTZCO2FBQzNDO1lBQ0QsTUFBTSxFQUFFO2dCQUNOLEtBQUssRUFBRSx5REFBeUQ7Z0JBQ2hFLFdBQVcsRUFBRSw0RUFBNEU7Z0JBQ3pGLFdBQVcsRUFBRSwwQkFBMEI7YUFDeEM7U0FDRixDQUFDO1FBRUYsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ3RCLEdBQUcsQ0FBQztZQUNKLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQztTQUNqQixDQUFDLENBQUMsQ0FBQztJQUNOLENBQUM7SUFFTyxtQkFBbUIsQ0FBQyxXQUFtQjtRQUM3QyxPQUFPLFdBQVcsQ0FBQyxPQUFPLENBQ3hCLDhCQUE4QixFQUM5QixnRUFBZ0UsQ0FDakUsQ0FBQztJQUNKLENBQUM7SUFFRCxhQUFhLENBQUMsTUFBdUIsRUFBRSxLQUFZO1FBQ2pELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDO1lBQ3BCLElBQUksRUFBRSxNQUFNLENBQUMsSUFBK0I7WUFDNUMsTUFBTTtZQUNOLGFBQWEsRUFBRSxLQUFLO1NBQ3JCLENBQUMsQ0FBQztJQUNMLENBQUM7OEdBcEZVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLG9SQUp4QixDQUFDLFdBQVcsQ0FBQywwQkN4QjFCLGt4Q0FpQ0EsKzJDRFZZLFlBQVksK0JBQWlCLGVBQWUsdVJBQUUsZ0JBQWdCOzsyRkFLN0Qsd0JBQXdCO2tCQVJwQyxTQUFTOytCQUNFLHNCQUFzQixjQUNwQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsYUFBYSxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsQ0FBQyxhQUM5RCxDQUFDLFdBQVcsQ0FBQzs4QkEwQlgsV0FBVztzQkFBdkIsS0FBSztnQkFLTyxXQUFXO3NCQUF2QixLQUFLO2dCQUlPLGVBQWU7c0JBQTNCLEtBQUs7Z0JBSU8sS0FBSztzQkFBakIsS0FBSztnQkFJTyxXQUFXO3NCQUF2QixLQUFLO2dCQUlHLE9BQU87c0JBQWYsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgY29tcHV0ZWQsIHNpZ25hbCwgZWZmZWN0LCBFdmVudEVtaXR0ZXIsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEljb25TZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLnNlcnZpY2UnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvbk5hbWUgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2ljb24taW50ZXJmYWNlJztcbmltcG9ydCB7IEJ1dHRvbkljb25Qb3NpdGlvbiwgQnV0dG9uU2l6ZSwgQnV0dG9uVHlwZSwgQnV0dG9uSW50ZXJmYWNlLCBCdXR0b25DbGlja0V2ZW50IH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9idXR0b24taW50ZXJmYWNlJztcbmltcG9ydCB7IEh0dHBDbGllbnRNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5cbmludGVyZmFjZSBNZXNzYWdlQmFubmVyU3RhdGUge1xuICB0eXBlOiAnZGVmYXVsdCcgfCAnY29ubmVjdGlvbicgfCAnYWNjZXNzJztcbiAgdGl0bGU6IHN0cmluZztcbiAgZGVzY3JpcHRpb246IHN0cmluZztcbiAgbWVzc2FnZUljb246IHN0cmluZztcbiAgbWVzc2FnZUljb25TaXplPzoge1xuICAgIHdpZHRoPzogc3RyaW5nO1xuICAgIGhlaWdodD86IHN0cmluZztcbiAgfTtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtbWVzc2FnZS1iYW5uZXItdjInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJY29uQ29tcG9uZW50LCBCdXR0b25Db21wb25lbnQsIEh0dHBDbGllbnRNb2R1bGVdLFxuICBwcm92aWRlcnM6IFtJY29uU2VydmljZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9tZXNzYWdlLWJhbm5lci12Mi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21lc3NhZ2UtYmFubmVyLXYyLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBNZXNzYWdlQmFubmVyVjJDb21wb25lbnQge1xuICAvLyBTdGF0ZSBtYW5hZ2VtZW50IHVzaW5nIHNpZ25hbHNcbiAgcHJpdmF0ZSBzdGF0ZSA9IHNpZ25hbDxNZXNzYWdlQmFubmVyU3RhdGU+KHtcbiAgICB0eXBlOiAnZGVmYXVsdCcsXG4gICAgdGl0bGU6ICcnLFxuICAgIGRlc2NyaXB0aW9uOiAnJyxcbiAgICBtZXNzYWdlSWNvbjogJycsXG4gICAgbWVzc2FnZUljb25TaXplOiB7XG4gICAgICBoZWlnaHQ6ICcxMi41cmVtJ1xuICAgIH1cbiAgfSk7XG5cbiAgLy8gQ29tcHV0ZWQgcHJvcGVydGllc1xuICBwcm90ZWN0ZWQgYmFubmVyQ29udGVudCA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50U3RhdGUgPSB0aGlzLnN0YXRlKCk7XG4gICAgcmV0dXJuIHtcbiAgICAgIC4uLmN1cnJlbnRTdGF0ZSxcbiAgICAgIGRlc2NyaXB0aW9uOiB0aGlzLnNhbml0aXplRGVzY3JpcHRpb24oY3VycmVudFN0YXRlLmRlc2NyaXB0aW9uKVxuICAgIH07XG4gIH0pO1xuXG4gIC8vIElucHV0IHByb3BlcnRpZXNcbiAgQElucHV0KCkgc2V0IG1lc3NhZ2VUeXBlKHZhbHVlOiAnZGVmYXVsdCcgfCAnY29ubmVjdGlvbicgfCAnYWNjZXNzJykge1xuICAgIHRoaXMuc3RhdGUudXBkYXRlKHMgPT4gKHsgLi4ucywgdHlwZTogdmFsdWUgfSkpO1xuICAgIHRoaXMudXBkYXRlQ29udGVudEJhc2VkT25UeXBlKHZhbHVlKTtcbiAgfVxuXG4gIEBJbnB1dCgpIHNldCBtZXNzYWdlSWNvbih2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5zdGF0ZS51cGRhdGUocyA9PiAoeyAuLi5zLCBtZXNzYWdlSWNvbjogdmFsdWUgfSkpO1xuICB9XG5cbiAgQElucHV0KCkgc2V0IG1lc3NhZ2VJY29uU2l6ZSh2YWx1ZTogeyB3aWR0aD86IHN0cmluZzsgaGVpZ2h0Pzogc3RyaW5nIH0pIHtcbiAgICB0aGlzLnN0YXRlLnVwZGF0ZShzID0+ICh7IC4uLnMsIG1lc3NhZ2VJY29uU2l6ZTogdmFsdWUgfSkpO1xuICB9XG5cbiAgQElucHV0KCkgc2V0IHRpdGxlKHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLnN0YXRlLnVwZGF0ZShzID0+ICh7IC4uLnMsIHRpdGxlOiB2YWx1ZSB9KSk7XG4gIH1cblxuICBASW5wdXQoKSBzZXQgZGVzY3JpcHRpb24odmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuc3RhdGUudXBkYXRlKHMgPT4gKHsgLi4ucywgZGVzY3JpcHRpb246IHZhbHVlIH0pKTtcbiAgfVxuXG4gIEBJbnB1dCgpIGJ1dHRvbnM6IEJ1dHRvbkludGVyZmFjZVtdID0gW107XG4gIEBPdXRwdXQoKSBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8QnV0dG9uQ2xpY2tFdmVudD4oKTtcblxuICBwcml2YXRlIHVwZGF0ZUNvbnRlbnRCYXNlZE9uVHlwZSh0eXBlOiAnZGVmYXVsdCcgfCAnY29ubmVjdGlvbicgfCAnYWNjZXNzJykge1xuICAgIGNvbnN0IGNvbnRlbnQgPSB7XG4gICAgICBkZWZhdWx0OiB7XG4gICAgICAgIHRpdGxlOiAnT29wcyEgU29tZXRoaW5nIHdlbnQgd3JvbmcuIFBsZWFzZSB0cnkgYWdhaW4gb3IgdHJ5IGFmdGVyIHNvbWUgdGltZScsXG4gICAgICAgIGRlc2NyaXB0aW9uOiAnSWYgdGhlIGlzc3VlIHBlcnNpc3RzLCBjb250YWN0IG91ciBzdXBwb3J0IHRlYW0gYXQgPHNwYW4gY2xhc3M9XCJzdXBwb3J0LWVtYWlsXCI+c3VwcG9ydEBzYXJhc2FuYWx5dGljcy5jb208L3NwYW4+JyxcbiAgICAgICAgbWVzc2FnZUljb246ICcvYXNzZXRzL2Vycm9yLmdpZidcbiAgICAgIH0sXG4gICAgICBjb25uZWN0aW9uOiB7XG4gICAgICAgIHRpdGxlOiAnV2VcXCdyZSBoYXZpbmcgdHJvdWJsZSBjb25uZWN0aW5nLiBQbGVhc2UgY2hlY2sgeW91ciBpbnRlcm5ldCBjb25uZWN0aW9uIGFuZCB0cnkgYWdhaW4nLFxuICAgICAgICBkZXNjcmlwdGlvbjogJ1lvdSBjYW4gYWxzbyByZWFjaCBvdXQgdG8gb3VyIHN1cHBvcnQgdGVhbSBhdCA8c3BhbiBjbGFzcz1cInN1cHBvcnQtZW1haWxcIj5zdXBwb3J0QHNhcmFzYW5hbHl0aWNzLmNvbTwvc3Bhbj4gZm9yIGFzc2lzdGFuY2UnLFxuICAgICAgICBtZXNzYWdlSWNvbjogJy9hc3NldHMvbG9zdC1jb25uZWN0aW9uLmdpZidcbiAgICAgIH0sXG4gICAgICBhY2Nlc3M6IHtcbiAgICAgICAgdGl0bGU6ICdUaGlzIGlzIHRha2luZyBhIGJpdCBsb25nZXIgdGhhbiB1c3VhbC4gUGxlYXNlIGhvbGQgb24hJyxcbiAgICAgICAgZGVzY3JpcHRpb246ICdJZiB0aGUgZGVsYXkgY29udGludWVzLCBjaGVjayB5b3VyIGNvbm5lY3Rpb24gYW5kIHRyeSByZWZyZXNoaW5nIHRoZSBwYWdlLicsXG4gICAgICAgIG1lc3NhZ2VJY29uOiAnL2Fzc2V0cy9sb25nLWxvYWRpbmcuZ2lmJ1xuICAgICAgfVxuICAgIH07XG5cbiAgICB0aGlzLnN0YXRlLnVwZGF0ZShzID0+ICh7XG4gICAgICAuLi5zLFxuICAgICAgLi4uY29udGVudFt0eXBlXVxuICAgIH0pKTtcbiAgfVxuXG4gIHByaXZhdGUgc2FuaXRpemVEZXNjcmlwdGlvbihkZXNjcmlwdGlvbjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gZGVzY3JpcHRpb24ucmVwbGFjZShcbiAgICAgIC9zdXBwb3J0QHNhcmFzYW5hbHl0aWNzXFwuY29tL2csXG4gICAgICAnPHNwYW4gY2xhc3M9XCJzdXBwb3J0LWVtYWlsXCI+c3VwcG9ydEBzYXJhc3NhbmFseXRpY3MuY29tPC9zcGFuPidcbiAgICApO1xuICB9XG5cbiAgb25CdXR0b25DbGljayhidXR0b246IEJ1dHRvbkludGVyZmFjZSwgZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5idXR0b25DbGljay5lbWl0KHtcbiAgICAgIHR5cGU6IGJ1dHRvbi50eXBlIGFzICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknLFxuICAgICAgYnV0dG9uLFxuICAgICAgb3JpZ2luYWxFdmVudDogZXZlbnRcbiAgICB9KTtcbiAgfVxufVxuIiwiQGlmIChiYW5uZXJDb250ZW50KCk7IGFzIGNvbnRlbnQpIHtcbiAgPGRpdiBjbGFzcz1cImVycm9yLXBhZ2UgbWVzc2FnZS1iYW5uZXItdjJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY29udGVudC1jb250YWluZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIj5cbiAgICAgICAgPGltZyBbc3JjXT1cImNvbnRlbnQubWVzc2FnZUljb25cIiBcbiAgICAgICAgICAgICBbYWx0XT1cImNvbnRlbnQudHlwZSArICcgaW1hZ2UnXCJcbiAgICAgICAgICAgICBbc3R5bGUuLS1tZXNzYWdlLWljb24taGVpZ2h0XT1cImNvbnRlbnQubWVzc2FnZUljb25TaXplPy5oZWlnaHRcIlxuICAgICAgICAgICAgIFtzdHlsZS4tLW1lc3NhZ2UtaWNvbi13aWR0aF09XCJjb250ZW50Lm1lc3NhZ2VJY29uU2l6ZT8ud2lkdGhcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZGV0YWlsc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGl0bGUtZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwidGl0bGUtY2xhc3NcIiBbaW5uZXJIVE1MXT1cImNvbnRlbnQudGl0bGVcIj48L2Rpdj5cbiAgICAgICAgICA8cCBjbGFzcz1cImRlc2NyaXB0aW9uXCIgW2lubmVySFRNTF09XCJjb250ZW50LmRlc2NyaXB0aW9uXCI+PC9wPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJ1dHRvbi1ncm91cFwiPlxuICAgICAgICAgIEBmb3IgKGJ1dHRvbiBvZiBidXR0b25zOyB0cmFjayBidXR0b24udGV4dCkge1xuICAgICAgICAgICAgPHNhLWJ1dHRvbiBcbiAgICAgICAgICAgICAgW3RleHRdPVwiYnV0dG9uLnRleHRcIlxuICAgICAgICAgICAgICBbaWNvbl09XCJidXR0b24uaWNvblwiXG4gICAgICAgICAgICAgIFtzaXplXT1cImJ1dHRvbi5zaXplXCJcbiAgICAgICAgICAgICAgW3R5cGVdPVwiYnV0dG9uLnR5cGVcIlxuICAgICAgICAgICAgICBbaWNvblBvc2l0aW9uXT1cImJ1dHRvbi5pY29uUG9zaXRpb25cIlxuICAgICAgICAgICAgICBbYnV0dG9uSWNvblNpemVdPVwiYnV0dG9uLmJ1dHRvbkljb25TaXplXCJcbiAgICAgICAgICAgICAgKG9uQ2xpY2tFdmVudCk9XCJvbkJ1dHRvbkNsaWNrKGJ1dHRvbiwgJGV2ZW50KVwiXG4gICAgICAgICAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImJ1dHRvbi50ZXh0XCI+XG4gICAgICAgICAgICA8L3NhLWJ1dHRvbj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxufVxuIl19

package/fesm2022/sarasanalytics-com-design-system.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ViewChild, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ViewChild, signal, computed, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgIf, NgStyle, NgFor } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
@@ -417,11 +417,11 @@ class ButtonComponent {
         this.onMouseOutEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
+            args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -1784,74 +1784,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 class MessageBannerV2Component {
     constructor() {
-        this.messageType = 'default';
-        this.title = '';
-        this.description = '';
-        this.content = '';
-        this.bannerIconSize = '';
-        this.onAction = () => { };
-        // title: string = '';
-        // description: string = '';
-        this.imageSrc = '';
+        // State management using signals
+        this.state = signal({
+            type: 'default',
+            title: '',
+            description: '',
+            messageIcon: '',
+            messageIconSize: {
+                height: '12.5rem'
+            }
+        });
+        // Computed properties
+        this.bannerContent = computed(() => {
+            const currentState = this.state();
+            return {
+                ...currentState,
+                description: this.sanitizeDescription(currentState.description)
+            };
+        });
+        this.buttons = [];
+        this.buttonClick = new EventEmitter();
     }
-    ngOnInit() {
-        // this.setErrorContent();
-    }
-    setErrorContent() {
-        // Set error content based on error or message type
-        switch (this.messageType) {
-            case 'connection':
-                this.title = 'We’re having trouble connecting. Please check your internet connection and try again';
-                this.description =
-                    'You can also reach out to our support team at <span class="support-email">support@sarasanalytics.com</span> for assistance';
-                this.imageSrc = '/assets/lost-connection.gif';
-                break;
-            case 'access':
-                this.title = 'This is taking a bit longer than usual. Please hold on!';
-                this.description =
-                    'If the delay continues, check your connection and try refreshing the page.';
-                this.imageSrc = '/assets/long-loading.gif';
-                break;
-            default:
-                this.title = 'Oops! Something went wrong. Please try again or try after some time';
-                this.description =
-                    'If the issue persists, contact our support team at <span class="support-email">support@sarasanalytics.com</span>';
-                this.imageSrc = '/assets/error.gif';
-                break;
-        }
+    // Input properties
+    set messageType(value) {
+        this.state.update(s => ({ ...s, type: value }));
+        this.updateContentBasedOnType(value);
+    }
+    set messageIcon(value) {
+        this.state.update(s => ({ ...s, messageIcon: value }));
+    }
+    set messageIconSize(value) {
+        this.state.update(s => ({ ...s, messageIconSize: value }));
+    }
+    set title(value) {
+        this.state.update(s => ({ ...s, title: value }));
+    }
+    set description(value) {
+        this.state.update(s => ({ ...s, description: value }));
+    }
+    updateContentBasedOnType(type) {
+        const content = {
+            default: {
+                title: 'Oops! Something went wrong. Please try again or try after some time',
+                description: 'If the issue persists, contact our support team at <span class="support-email">support@sarasanalytics.com</span>',
+                messageIcon: '/assets/error.gif'
+            },
+            connection: {
+                title: 'We\'re having trouble connecting. Please check your internet connection and try again',
+                description: 'You can also reach out to our support team at <span class="support-email">support@sarasanalytics.com</span> for assistance',
+                messageIcon: '/assets/lost-connection.gif'
+            },
+            access: {
+                title: 'This is taking a bit longer than usual. Please hold on!',
+                description: 'If the delay continues, check your connection and try refreshing the page.',
+                messageIcon: '/assets/long-loading.gif'
+            }
+        };
+        this.state.update(s => ({
+            ...s,
+            ...content[type]
+        }));
+    }
+    sanitizeDescription(description) {
+        return description.replace(/support@sarasanalytics\.com/g, '<span class="support-email">support@sarassanalytics.com</span>');
+    }
+    onButtonClick(button, event) {
+        this.buttonClick.emit({
+            type: button.type,
+            button,
+            originalEvent: event
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", messageIcon: "messageIcon", title: "title", description: "description", actionText: "actionText", content: "content", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", onAction: "onAction" }, providers: [IconService], ngImport: i0, template: "<div class=\"error-page\">\n    <div class=\"content-container\">\n        <div class=\"image-container\">\n            <img [src]=\"messageIcon\" alt=\"Error Image\" />\n        </div>\n        <div class='details'>\n            <div class='title-description'>\n                <div class=\"title-class\">{{ title }}</div>\n                <p class=\"description\" [innerHTML]='description'></p>\n            </div>\n            <sa-button [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n                [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n                (click)=\"onAction()\">{{\n                actionText\n                }}</sa-button>\n        </div>\n    </div>", styles: [".error-page{display:flex;justify-content:center;align-items:center;height:87.5vh;background-color:#fff;padding:1rem;box-sizing:border-box}.title-class{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;background-color:#fff;padding:1rem}.image-container img{width:150px;height:150px}.details{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;background-color:#fff;padding:1rem}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "@if (bannerContent(); as content) {\n  <div class=\"error-page message-banner-v2\">\n    <div class=\"content-container\">\n      <div class=\"image-container\">\n        <img [src]=\"content.messageIcon\" \n             [alt]=\"content.type + ' image'\"\n             [style.--message-icon-height]=\"content.messageIconSize?.height\"\n             [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n      </div>\n      <div class=\"details\">\n        <div class=\"title-description\">\n          <div class=\"title-class\" [innerHTML]=\"content.title\"></div>\n          <p class=\"description\" [innerHTML]=\"content.description\"></p>\n        </div>\n        <div class=\"button-group\">\n          @for (button of buttons; track button.text) {\n            <sa-button \n              [text]=\"button.text\"\n              [icon]=\"button.icon\"\n              [size]=\"button.size\"\n              [type]=\"button.type\"\n              [iconPosition]=\"button.iconPosition\"\n              [buttonIconSize]=\"button.buttonIconSize\"\n              (onClickEvent)=\"onButtonClick(button, $event)\"\n              role=\"button\"\n              [attr.aria-label]=\"button.text\">\n            </sa-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], template: "<div class=\"error-page\">\n    <div class=\"content-container\">\n        <div class=\"image-container\">\n            <img [src]=\"messageIcon\" alt=\"Error Image\" />\n        </div>\n        <div class='details'>\n            <div class='title-description'>\n                <div class=\"title-class\">{{ title }}</div>\n                <p class=\"description\" [innerHTML]='description'></p>\n            </div>\n            <sa-button [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n                [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n                (click)=\"onAction()\">{{\n                actionText\n                }}</sa-button>\n        </div>\n    </div>", styles: [".error-page{display:flex;justify-content:center;align-items:center;height:87.5vh;background-color:#fff;padding:1rem;box-sizing:border-box}.title-class{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;background-color:#fff;padding:1rem}.image-container img{width:150px;height:150px}.details{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;background-color:#fff;padding:1rem}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { messageType: [{
+            args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\n  <div class=\"error-page message-banner-v2\">\n    <div class=\"content-container\">\n      <div class=\"image-container\">\n        <img [src]=\"content.messageIcon\" \n             [alt]=\"content.type + ' image'\"\n             [style.--message-icon-height]=\"content.messageIconSize?.height\"\n             [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n      </div>\n      <div class=\"details\">\n        <div class=\"title-description\">\n          <div class=\"title-class\" [innerHTML]=\"content.title\"></div>\n          <p class=\"description\" [innerHTML]=\"content.description\"></p>\n        </div>\n        <div class=\"button-group\">\n          @for (button of buttons; track button.text) {\n            <sa-button \n              [text]=\"button.text\"\n              [icon]=\"button.icon\"\n              [size]=\"button.size\"\n              [type]=\"button.type\"\n              [iconPosition]=\"button.iconPosition\"\n              [buttonIconSize]=\"button.buttonIconSize\"\n              (onClickEvent)=\"onButtonClick(button, $event)\"\n              role=\"button\"\n              [attr.aria-label]=\"button.text\">\n            </sa-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}\n"] }]
+        }], propDecorators: { messageType: [{
                 type: Input
             }], messageIcon: [{
                 type: Input
+            }], messageIconSize: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
                 type: Input
-            }], actionText: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], bannerIconSize: [{
-                type: Input
-            }], buttonIcon: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], buttonIconPosition: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], buttonIconSize: [{
-                type: Input
-            }], onAction: [{
+            }], buttons: [{
                 type: Input
+            }], buttonClick: [{
+                type: Output
             }] } });
 class PageLayoutComponent {