@sarasanalytics-com/design-system 0.0.18 → 0.0.20

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

@@ -1,62 +1,108 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, inject, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Inject, ViewEncapsulation, inject, Injectable, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
-import { NgStyle, NgIf, CommonModule, NgFor } from '@angular/common';
-import * as i3$2 from '@angular/material/icon';
-import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { NgIf, CommonModule, NgStyle, NgFor } from '@angular/common';
+import * as i2$1 from '@angular/material/core';
+import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import { MatButton } from '@angular/material/button';
+import * as i2 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i3 from '@angular/forms';
-import { ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
-import * as i2 from '@ngx-formly/core';
-import { FieldType, FormlyModule } from '@ngx-formly/core';
-import * as i3$1 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import * as i2$1 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2$2 from '@angular/material/core';
-import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { MatButton } from '@angular/material/button';
+import * as i3$1 from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
+import * as i2$2 from '@ngx-formly/core';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import * as i3$2 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$2 from '@angular/router';
+import * as i1$3 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i1$4 from '@angular/material/radio';
+import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
 
-class TestLibraryService {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, providedIn: 'root' }); }
+class AvatarComponent {
+    constructor() {
+        this.onClickEvent = new EventEmitter;
+        this.onMouseInEvent = new EventEmitter;
+        this.onMouseOutEvent = new EventEmitter;
+        this.eventEmitObject = {};
+    }
+    ngOnChanges() {
+        this.eventEmitObject = {
+            id: this.id
+        };
+    }
+    avatarClicked(evt) {
+        this.onClickEvent.emit({
+            ...this.eventEmitObject,
+            evt
+        });
+    }
+    mouseEnter(evt) {
+        this.onMouseInEvent.emit({
+            ...this.eventEmitObject,
+            evt
+        });
+    }
+    mouseLeave(evt) {
+        this.onMouseOutEvent.emit({
+            ...this.eventEmitObject,
+            evt
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\">\n  <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n  <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\">\n  <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n  <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], imagePath: [{
+                type: Input
+            }], altText: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], onClickEvent: [{
+                type: Output
+            }], onMouseInEvent: [{
+                type: Output
+            }], onMouseOutEvent: [{
+                type: Output
+            }] } });
 
-class TestLibraryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
-    <p>
-      component-library works!
-    </p>
-  `, isInline: true, styles: [""] }); }
+class SpinnerComponent {
+    constructor() {
+        this.default = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpinnerComponent, isStandalone: true, selector: "sa-spinner", inputs: { default: "default", size: "size" }, ngImport: i0, template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
-    <p>
-      component-library works!
-    </p>
-  ` }]
-        }] });
+            args: [{ selector: 'sa-spinner', standalone: true, imports: [CommonModule], template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"] }]
+        }], propDecorators: { default: [{
+                type: Input,
+                args: ['default']
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }] } });
 
 let nextId$4 = 0; // used to give unique ids to inputs used in html
 class ButtonComponent {
     constructor() {
         this.isSubmit = false;
+        this.showSpinner = false;
         this.onClickEvent = new EventEmitter();
         this.onMouseInEvent = new EventEmitter();
         this.onMouseOutEvent = new EventEmitter();
@@ -101,11 +147,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: "14.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", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, 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  <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</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"] }] }); }
+    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", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, 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  <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</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"] }] }); }
 }
 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], 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  <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</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], 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  <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</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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -128,6 +174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }], isSubmit: [{
                 type: Input
+            }], showSpinner: [{
+                type: Input
             }], onClickEvent: [{
                 type: Output
             }], onMouseInEvent: [{
@@ -137,217 +185,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }] } });
 
 let nextId$3 = 0; // used to give unique ids to inputs used in html
-class ChipsComponent {
-    constructor() {
-        this.onClickEvent = new EventEmitter();
-        this.svgStyle = {};
-        this.secondSvgStyle = {};
-        this.eventEmitObject = {};
+class CalendarHeaderComponent {
+    constructor(calendar, // calendar instance of picker
+    dateAdapter, // native or moment date adapter
+    picker, dateFormats, // for formatting
+    cdr) {
+        this.calendar = calendar;
+        this.dateAdapter = dateAdapter;
+        this.picker = picker;
+        this.dateFormats = dateFormats;
         this.uuid = nextId$3++;
+        this.destroy$ = new Subject();
+        this.selectedPreset = "Custom";
+        this.presets = [
+            "This Quarter",
+            "Last Quarter",
+            "Last 6 Months",
+            "This Year",
+            "Last Year",
+            "Custom"
+        ];
+        this.today = new Date();
+        // make sure your header stays in sync with the calendar:
+        calendar.stateChanges
+            .pipe(takeUntil(this.destroy$)) // unsubscribe when destroyed
+            .subscribe(() => cdr.markForCheck());
     }
-    ngOnChanges() {
-        this.svgStyle = {
-            '-webkit-mask-image': `url(${this.iconPath})`,
-            'mask-image': `url(${this.iconPath})`,
-        };
-        this.secondSvgStyle = {
-            '-webkit-mask-image': `url(${this.largeStateIcon})`,
-            'mask-image': `url(${this.largeStateIcon})`,
-        };
-        this.eventEmitObject = {
-            id: this.id
-        };
-    }
-    buttonClicked(evt) {
-        this.onClickEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
+    // active date label rendered between the arrow buttons
+    ngOnInit() {
+        const currentRange = this.calendar.selected;
+        currentRange?.start.setHours(0, 0, 0, 0);
+        currentRange?.end.setHours(0, 0, 0, 0);
+        // To pre-select a preset when the calendar opens.
+        // Match the already selected date range with the date-ranges of all presets.
+        // If already selected date range matches with a preset, pre-select it.
+        for (let i = 0; i < this.presets.length; i++) {
+            const tempRange = this.findDate(this.presets[i]);
+            if (tempRange.newStart.getTime() == currentRange.start.getTime() && tempRange.newEnd.getTime() == currentRange.end.getTime()) {
+                this.selectedPreset = this.presets[i];
+                break;
+            }
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n  <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n  <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n\n  {{text}}\n\n  <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n  {{type == 'large' ? largeStateText : \"\"}}\n\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n  <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n  <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n\n  {{text}}\n\n  <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n  {{type == 'large' ? largeStateText : \"\"}}\n\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], iconPath: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], filling: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], largeStateIcon: [{
-                type: Input
-            }], largeStateText: [{
-                type: Input
-            }], onClickEvent: [{
-                type: Output
-            }] } });
-
-class AvatarComponent {
-    constructor() {
-        this.onClickEvent = new EventEmitter;
-        this.onMouseInEvent = new EventEmitter;
-        this.onMouseOutEvent = new EventEmitter;
-        this.eventEmitObject = {};
+    get periodLabel() {
+        // use date adapter to format the label, e.g. "SEP 2020"
+        return this.dateAdapter
+            .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
+            .toLocaleUpperCase();
     }
-    ngOnChanges() {
-        this.eventEmitObject = {
-            id: this.id
-        };
+    previousClicked(mode) {
+        this.changeDate(mode, -1);
     }
-    avatarClicked(evt) {
-        this.onClickEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
+    nextClicked(mode) {
+        this.changeDate(mode, 1);
     }
-    mouseEnter(evt) {
-        this.onMouseInEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
+    changeView() {
+        this.calendar.currentView =
+            this.calendar.currentView == "month"
+                ? "year"
+                : this.calendar.currentView == "year"
+                    ? "multi-year"
+                    : "month";
     }
-    mouseLeave(evt) {
-        this.onMouseOutEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
+    presetChanged(evt) {
+        const newRange = this.findDate(evt.target.value);
+        this.calendar.activeDate = newRange.newStart;
+        this.picker.select(newRange.newStart);
+        this.picker.select(newRange.newEnd);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\">\n  <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n  <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 40px;--height: 40px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\">\n  <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n  <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 40px;--height: 40px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], imagePath: [{
-                type: Input
-            }], altText: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], onClickEvent: [{
-                type: Output
-            }], onMouseInEvent: [{
-                type: Output
-            }], onMouseOutEvent: [{
-                type: Output
-            }] } });
-
-class GridCellComponent {
-    constructor() {
-        this.onClickButtonEvent = new EventEmitter();
-        this.onClickChipEvent = new EventEmitter();
-        this.onClickLinkEvent = new EventEmitter();
-        this.onClickAvatarEvent = new EventEmitter();
-    }
-    buttonClicked(evt) {
-        this.params.buttonClicked && this.params.buttonClicked({
-            ...evt,
-            rowId: this.rowNum
-        });
-        this.onClickButtonEvent.emit({ ...evt, rowId: this.rowNum }); // this event isn't caught by anything. 
-    }
-    // above function behavior is same for all functions in this class
-    chipClicked(evt) {
-        this.params.chipClicked && this.params.chipClicked({
-            ...evt,
-            rowId: this.rowNum
-        });
-        this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
-    }
-    linkClicked() {
-        if (this.params.cellType != "interactive")
-            return;
-        this.params.linkClicked && this.params.linkClicked({
-            rowId: this.rowNum
-        });
-        if (this.params.interactiveLink != "") {
-            if (this.params.interactiveLinkTarget == "blank") {
-                window.open(this.params.interactiveLink);
+    findDate(selected) {
+        const date = this.today.getDate();
+        const month = this.today.getMonth();
+        const year = this.today.getFullYear();
+        let newRange;
+        this.selectedPreset = selected;
+        switch (selected) {
+            case "This Quarter": {
+                const thisQuarterMonth = Math.floor(month / 3) * 3;
+                const start = this.dateAdapter.createDate(year, thisQuarterMonth, 1);
+                const end = this.dateAdapter.createDate(year, thisQuarterMonth + 3, 1);
+                newRange = {
+                    newStart: start,
+                    newEnd: end,
+                };
+                break;
             }
-            else if (this.params.interactiveLinkTarget == "self") {
-                location.href = this.params.interactiveLink;
+            case "Last Quarter": {
+                const lastQuarterMonth = (Math.floor(month / 3) * 3) - 3;
+                const start = this.dateAdapter.createDate(year, lastQuarterMonth, 1);
+                const end = this.dateAdapter.createDate(year, lastQuarterMonth + 3, 1);
+                newRange = {
+                    newStart: start,
+                    newEnd: end,
+                };
+                break;
+            }
+            case "Last 6 Months": {
+                const end = this.dateAdapter.createDate(year, month, date);
+                const start = this.dateAdapter.addCalendarMonths(end, -6);
+                newRange = {
+                    newStart: start,
+                    newEnd: end,
+                };
+                break;
+            }
+            case "This Year": {
+                const start = this.dateAdapter.createDate(year, 0, 1);
+                const end = this.dateAdapter.createDate(year, 11, 31);
+                newRange = {
+                    newStart: start,
+                    newEnd: end,
+                };
+                break;
+            }
+            case "Last Year": {
+                const start = this.dateAdapter.createDate(year - 1, 0, 1);
+                const end = this.dateAdapter.createDate(year - 1, 11, 31);
+                newRange = {
+                    newStart: start,
+                    newEnd: end,
+                };
+                break;
+            }
+            default: {
+                newRange = {
+                    newStart: new Date(),
+                    newEnd: new Date(),
+                };
             }
         }
-        this.onClickLinkEvent.emit({ rowId: this.rowNum });
-    }
-    avatarClicked(evt) {
-        this.params.avatarClicked && this.params.avatarClicked({
-            ...evt,
-            rowId: this.rowNum
-        });
-        this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
+        return newRange;
     }
-    agInit(inParams) {
-        this.rowNum = inParams.rowIndex;
-        this.params = inParams.value; // inParams.value exists when gridCell is rendered as cell, `cellRenderer: GridCellComponent`
-        if (inParams.value == undefined) { // inParams.value is undefined when gridCell is rendered as header, `headerComponent: GridCellComponent`, 
-            this.params = inParams;
-        }
-        // console.log(this.params);
+    changeDate(mode, amount) {
+        // increment or decrement month or year
+        this.calendar.activeDate =
+            mode === 'month'
+                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, amount)
+                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, amount);
     }
-    refresh(params) {
-        return false; // not sure what this return value does.
+    ngOnDestroy() {
+        this.destroy$.next(); // will trigger unsubscription in takeUntil
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n  <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n    [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n    [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n  </sa-avatar>\n\n  <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n    <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n    </div>\n\n    <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n  </div>\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n  <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n    id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n    [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n    [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n  <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n    [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n    [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n    [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n    (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2.MatCalendar }, { token: i2$1.DateAdapter }, { token: i2.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n  <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n    <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n      for=\"preset-radio-{{i}}\">{{preset}}</label>\n    <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n      id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n  </div>\n</div>\n\n<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked('month')\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n  <button mat-icon-button (click)=\"nextClicked('month')\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-grid-cell', standalone: true, imports: [
-                        AvatarComponent,
-                        ChipsComponent,
-                        ButtonComponent,
-                        NgFor
-                    ], template: "<div class=\"grid-cell {{params.cellType}}\">\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n  <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n    [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n    [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n  </sa-avatar>\n\n  <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n    <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n    </div>\n\n    <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n  </div>\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n  <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n    id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n    [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n    [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n  <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n    [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n    [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n    [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n    (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"] }]
-        }], propDecorators: { onClickButtonEvent: [{
-                type: Output
-            }], onClickChipEvent: [{
-                type: Output
-            }], onClickLinkEvent: [{
-                type: Output
-            }], onClickAvatarEvent: [{
-                type: Output
-            }] } });
+            args: [{ standalone: true, imports: [
+                        NgFor,
+                        MatIconModule,
+                        MatButton
+                    ], template: "<div class=\"range-preset\">\n  <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n    <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n      for=\"preset-radio-{{i}}\">{{preset}}</label>\n    <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n      id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n  </div>\n</div>\n\n<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked('month')\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n  <button mat-icon-button (click)=\"nextClicked('month')\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"] }]
+        }], ctorParameters: () => [{ type: i2.MatCalendar }, { type: i2$1.DateAdapter }, { type: i2.MatDateRangePicker }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DATE_FORMATS]
+                }] }, { type: i0.ChangeDetectorRef }] });
 
-class HeaderComponent {
+class CardBodyComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardBodyComponent, isStandalone: true, selector: "lib-card-body", ngImport: i0, template: "<p>card-body works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-body', standalone: true, imports: [], template: "<p>card-body works!</p>\n" }]
+        }] });
+
+class CardCustomHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardCustomHeaderComponent, isStandalone: true, selector: "sa-card-title-header", ngImport: i0, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-card-title-header', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}\n"] }]
+        }] });
+
+class CardFooterActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n    <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\n    <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
+        }] });
+
+class CardIconComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardIconComponent, isStandalone: true, selector: "sa-card-icon", ngImport: i0, template: "<ng-content></ng-content>", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-card-icon', standalone: true, imports: [], template: "<ng-content></ng-content>" }]
+        }] });
+
+class CardTitleActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardTitleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardTitleActionsComponent, isStandalone: true, selector: "sa-card-title-actions", ngImport: i0, template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardTitleActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-card-title-actions', standalone: true, imports: [], template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }]
+        }] });
+
+let nextId$2 = 0; // used to give unique ids to inputs used in html
+class ChipsComponent {
     constructor() {
-        this.mainButtonClicked = new EventEmitter();
-        this.helperButtonClicked = new EventEmitter();
+        this.onClickEvent = new EventEmitter();
+        this.svgStyle = {};
+        this.secondSvgStyle = {};
+        this.eventEmitObject = {};
+        this.uuid = nextId$2++;
     }
-    clicked(num) {
-        num ? this.mainButtonClicked.emit() : this.helperButtonClicked.emit();
+    ngOnChanges() {
+        this.svgStyle = {
+            '-webkit-mask-image': `url(${this.iconPath})`,
+            'mask-image': `url(${this.iconPath})`,
+        };
+        this.secondSvgStyle = {
+            '-webkit-mask-image': `url(${this.largeStateIcon})`,
+            'mask-image': `url(${this.largeStateIcon})`,
+        };
+        this.eventEmitObject = {
+            id: this.id
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"header-content\">\n    <div class=\"heading\">\n      <div class=\"header-name\">{{headerName}}</div>\n      <div *ngFor=\"let chip of chipConfig\">\n        <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n      </div>\n    </div>\n    <div class=\"header-info\">\n      <div class=\"info-item\" *ngFor=\"let item of info\">\n        <img [src]=\"item[1]\" alt=\"\">\n        {{item[0]}}\n      </div>\n    </div>\n  </div>\n  <div class=\"actions\">\n    <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n      state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n      state=\"default\"></sa-button>\n  </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    buttonClicked(evt) {
+        this.onClickEvent.emit({
+            ...this.eventEmitObject,
+            evt
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n  <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n  <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n\n  {{text}}\n\n  <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n  {{type == 'large' ? largeStateText : \"\"}}\n\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\n  <div class=\"header-content\">\n    <div class=\"heading\">\n      <div class=\"header-name\">{{headerName}}</div>\n      <div *ngFor=\"let chip of chipConfig\">\n        <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n      </div>\n    </div>\n    <div class=\"header-info\">\n      <div class=\"info-item\" *ngFor=\"let item of info\">\n        <img [src]=\"item[1]\" alt=\"\">\n        {{item[0]}}\n      </div>\n    </div>\n  </div>\n  <div class=\"actions\">\n    <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n      state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n      state=\"default\"></sa-button>\n  </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"] }]
-        }], propDecorators: { info: [{
+            args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\n  <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n  <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n\n  {{text}}\n\n  <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n  {{type == 'large' ? largeStateText : \"\"}}\n\n  <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n  </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"] }]
+        }], propDecorators: { id: [{
                 type: Input
-            }], headerName: [{
+            }], iconPath: [{
                 type: Input
-            }], chipConfig: [{
+            }], text: [{
                 type: Input
-            }], buttonHelper: [{
+            }], type: [{
                 type: Input
-            }], buttonMain: [{
+            }], state: [{
                 type: Input
-            }], mainButtonClicked: [{
-                type: Output
-            }], helperButtonClicked: [{
+            }], filling: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], largeStateIcon: [{
+                type: Input
+            }], largeStateText: [{
+                type: Input
+            }], onClickEvent: [{
                 type: Output
             }] } });
 
@@ -382,6 +473,7 @@ class IconComponent {
         this.sanitizer = inject(DomSanitizer);
         this.iconPath = "";
         this.iconUrl = "";
+        this.customClass = "";
         this.iconStyles = {
         // fontSize: '44px',
         // color: 'red'
@@ -414,11 +506,11 @@ class IconComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{'url-icon': iconUrl}\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}\n\n<!-- <img *ngIf=\"svgIcon\" [src]=\"svgIcon\" [ngStyle]=\"iconStyles\" alt=\"icon\"> -->", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.url-icon>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n    'url-icon': iconUrl\n  }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{'url-icon': iconUrl}\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}\n\n<!-- <img *ngIf=\"svgIcon\" [src]=\"svgIcon\" [ngStyle]=\"iconStyles\" alt=\"icon\"> -->", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.url-icon>svg{width:fit-content;height:fit-content}\n"] }]
+            args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n    'url-icon': iconUrl\n  }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}\n"] }]
         }], ctorParameters: () => [], propDecorators: { img: [{
                 type: Input,
                 args: ['img']
@@ -436,473 +528,664 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 args: ['iconPath']
             }], iconUrl: [{
                 type: Input
+            }], customClass: [{
+                type: Input,
+                args: ['customClass']
             }] } });
 
-class ToastComponent {
+class CardComponent {
     constructor() {
-        this.finishPercentage = -1;
-        this.statusIcon = '';
-        this.filled = true;
-        this.width = '';
-        this.toastEvent = new EventEmitter();
-        this.firstButton = new EventEmitter();
-        this.secondButton = new EventEmitter();
-        this.closed = new EventEmitter();
-        this.toastStyles = { backgroundColor: 'transparent', color: '', width: this.width + '%' };
+        this.title = '';
+        this.showCardHeader = false;
+        this.showCardBody = false;
+        this.customWrapperClass = '';
+        this.chip = null;
+        this.body = '';
+        this.avatar = '';
+        this.icon = '';
+        this.subtitle = '';
+        this.logoIcon = '';
+        this.column = false;
+        this.cardStyles = {};
     }
     ngOnChanges(changes) {
-        if (changes && (changes['status'] || changes['filled'])) {
-            this.statusIcon = toastInfo[this.status].icon;
-            this.toastStyles.backgroundColor = toastInfo[this.status].bgColor;
-            this.toastStyles.color = toastInfo[this.status].color;
+        if (changes['width']?.currentValue) {
+            this.cardStyles['width'] = typeof changes['width']?.currentValue === 'string' ? changes['width']?.currentValue : changes['width']?.currentValue + '%';
         }
-        if (changes && changes['width']) {
-            this.toastStyles.width = typeof this.width === 'number' ? this.width + '%' : this.width;
-        }
-        if (this.finishPercentage > 100)
-            this.finishPercentage = 100;
-    }
-    clicked(num) {
-        if (num == 0)
-            this.firstButton.emit();
-        else if (num == 1)
-            this.secondButton.emit();
-        else if (num == 2)
-            this.closed.emit();
     }
-    closeToast() {
-        this.toastEvent.emit({
-            type: 'TOAST_CLOSED',
-            params: {}
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", avatarSize: "avatarSize", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n        <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n            @if(avatar){\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n            }@else if(icon){\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n            }@else{\n            <ng-content select=\"sa-card-icon\"></ng-content>\n            }\n            @if(column){\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\n            }\n        </div>\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n            @if(showCardHeader){\n            <ng-content select=\"sa-card-title-header\"></ng-content>\n            @if (showCardBody && body) {\n            <div class=\"custom-divider\"></div>\n            }\n            }\n            @else if(title){\n            <div class=\"sa-card-title-container\">\n                <div class=\"sa-card-title\">{{title}}</div>\n                @if(chip){\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\"></sa-chip>\n                }\n                <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n            </div>\n            }\n            @if(showCardBody && body){\n            <div class=\"sa-card-body\">\n                {{body}}\n            </div>\n            }\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto;width:200px}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n        <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n            @if(avatar){\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n            }@else if(icon){\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n            }@else{\n            <ng-content select=\"sa-card-icon\"></ng-content>\n            }\n            @if(column){\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\n            }\n        </div>\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n            @if(showCardHeader){\n            <ng-content select=\"sa-card-title-header\"></ng-content>\n            @if (showCardBody && body) {\n            <div class=\"custom-divider\"></div>\n            }\n            }\n            @else if(title){\n            <div class=\"sa-card-title-container\">\n                <div class=\"sa-card-title\">{{title}}</div>\n                @if(chip){\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\"></sa-chip>\n                }\n                <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n            </div>\n            }\n            @if(showCardBody && body){\n            <div class=\"sa-card-body\">\n                {{body}}\n            </div>\n            }\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto;width:200px}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input,
+                args: ['title']
+            }], showCardHeader: [{
+                type: Input,
+                args: ['showCardHeader']
+            }], showCardBody: [{
+                type: Input,
+                args: ['showCardBody']
+            }], customWrapperClass: [{
+                type: Input,
+                args: ['customWrapperClass']
+            }], chip: [{
+                type: Input,
+                args: ['chip']
+            }], body: [{
+                type: Input,
+                args: ['body']
+            }], avatar: [{
+                type: Input,
+                args: ['avatar']
+            }], avatarSize: [{
+                type: Input,
+                args: ['avatarSize']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
+            }], iconSize: [{
+                type: Input,
+                args: ['iconSize']
+            }], subtitle: [{
+                type: Input,
+                args: ['subtitle']
+            }], logoIcon: [{
+                type: Input,
+                args: ['logoIcon']
+            }], width: [{
+                type: Input,
+                args: ['width']
+            }], column: [{
+                type: Input,
+                args: ['column']
+            }] } });
+
+class GuideCardComponent {
+    constructor() {
+        this.title = '';
+        this.steps = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n      <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    @if(closable){\n    <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n    <sa-icon class=\"cross\" icon=\"crossmark\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n    }\n  </div>\n  <!-- <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div> -->\n\n  <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font)}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps" }, ngImport: i0, template: "<div class=\"guide-container\">\n    <div class=\"guide-header\">\n        <p class=\"guide-header-title\">{{ title }}</p>\n    </div>\n    <div class=\"guide-content\">\n        @for (step of steps; track step; let last = $last) {\n        <div class=\"step\">\n            <div class=\"step-indicator\">\n                <div class=\"step-circle\"></div>\n\n                @if (!last) {\n                <div class=\"step-line\"></div>\n                }\n            </div>\n            <div class=\"step-content\">\n                <p class=\"step-title\">{{ step.title }}</p>\n                @if (step?.description) {\n                <p class=\"step-description\">{{ step.description }}</p>\n                }\n            </div>\n        </div>\n        }\n    </div>\n</div>", styles: [".guide-container{max-width:47.5rem;margin:0 auto;background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:2.625rem}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:.5rem;height:.5rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n      <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    @if(closable){\n    <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n    <sa-icon class=\"cross\" icon=\"crossmark\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n    }\n  </div>\n  <!-- <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div> -->\n\n  <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font)}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
-        }], propDecorators: { finishPercentage: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], subHeading: [{
-                type: Input
-            }], statusIcon: [{
-                type: Input
-            }], status: [{
-                type: Input
-            }], firstButtonName: [{
-                type: Input
-            }], secondButtonName: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], filled: [{
+            args: [{ selector: 'sa-guide-card', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n    <div class=\"guide-header\">\n        <p class=\"guide-header-title\">{{ title }}</p>\n    </div>\n    <div class=\"guide-content\">\n        @for (step of steps; track step; let last = $last) {\n        <div class=\"step\">\n            <div class=\"step-indicator\">\n                <div class=\"step-circle\"></div>\n\n                @if (!last) {\n                <div class=\"step-line\"></div>\n                }\n            </div>\n            <div class=\"step-content\">\n                <p class=\"step-title\">{{ step.title }}</p>\n                @if (step?.description) {\n                <p class=\"step-description\">{{ step.description }}</p>\n                }\n            </div>\n        </div>\n        }\n    </div>\n</div>", styles: [".guide-container{max-width:47.5rem;margin:0 auto;background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:2.625rem}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:.5rem;height:.5rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}\n"] }]
+        }], propDecorators: { title: [{
                 type: Input
-            }], width: [{
+            }], steps: [{
                 type: Input
-            }], toastEvent: [{
-                type: Output
-            }], firstButton: [{
-                type: Output
-            }], secondButton: [{
-                type: Output
-            }], closed: [{
-                type: Output
             }] } });
-const toastInfo = {
-    'success': {
-        icon: 'checkmark',
-        bgColor: '#EBF5E9',
-        color: '#246B16'
-    },
-    'failure': {
-        icon: 'error-circle',
-        bgColor: '#F8E9E9',
-        color: '#861C15'
-    },
-    'caution': {
-        icon: 'warning',
-        bgColor: '',
-        color: ''
-    }
-};
 
-class FormSelectComponent extends FieldType {
+class CardCarouselComponent {
     constructor() {
-        super(...arguments);
-        this.svgStyle = {};
-        this.openState = false;
-        this.startInd = 0;
-        this.labelLimit = 2;
+        this.cards = [];
+        this.interval = 5000;
+        this.autoPlay = true;
+        this.showNavigationArrows = true;
+        this.showIndicators = true;
+        this.showBrandFooter = true;
+        this.visibleLogos = [];
+        this.currentIndex = 0;
     }
     ngOnInit() {
-        this.selectables = this.field.props.options;
-        this.params = this.field.props['params'];
-        this.placeholderLabel = this.params.label;
-        console.log('search', this.field.props['searchable']);
-        this.svgStyle = {
-            '-webkit-mask-image': `url(${this.params.dropIcon})})`,
-            'mask-image': `url(${this.params.dropIcon})`,
-        };
-    }
-    openClose(state) {
-        if (this.field.props.disabled)
-            return;
-        this.openState = state;
-        if (state || this.formControl.value?.length > 0) {
-            this.placeholderLabel = '';
-        }
-        else {
-            this.placeholderLabel = this.params.label;
+        this.updateVisibleLogos();
+        if (this.autoPlay) {
+            this.startTimer();
         }
     }
-    shiftLabel(action) {
-        if (action == 'clicked')
-            this.startInd++;
-        if (action == 'cleared')
-            this.startInd = 0;
-        if (action == 'removed' && this.startInd > 0)
-            this.startInd--;
+    ngOnDestroy() {
+        this.stopTimer();
     }
-    checkForZero(selected, state) {
-        this.topLabel = selected?.length == 0 ? false : true;
-        // console.log("test", this.formControl.value?.length)
-        // console.log("test", this.openState)
-        // console.log("placeholder--- ", this.placeholderLabel)
-        // console.log("params.label--- ", this.params.label)
-        if (this.openState || this.formControl.value?.length > 0) {
-            this.placeholderLabel = '';
-        }
-        else {
-            this.placeholderLabel = this.params.label;
-        }
+    startTimer() {
+        this.stopTimer();
+        this.timer = setInterval(() => {
+            this.next();
+        }, this.interval);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form-select', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        FormlyModule,
-                        ReactiveFormsModule,
-                        NgSelectModule,
-                        ChipsComponent,
-                        NgIf,
-                        NgFor
-                    ], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"] }]
-        }] });
-
-let nextId$2 = 0; // used to give unique ids to inputs used in html
-class StepperComponent extends FieldType {
-    constructor() {
-        super(...arguments);
-        this.latestStep = -1;
-        this.editable = true;
-        this.stepped = new EventEmitter;
-        this.uuid = nextId$2++;
-        this.isDisabled = false;
-        this.tickIcon = {};
+    stopTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
     }
-    // {
-    //   '-webkit-mask-image': `url(${this.ImagePath})`,
-    //   'mask-image': `url(${this.ImagePath})`,
-    // }
-    ngOnInit() {
-        if (this.field.props) {
-            this.stepLabels = this.field.props.options;
-            this.editable = this.field.props['params'].editable;
-            this.latestStep = this.model[`${this.key}`] ? this.model[`${this.key}`].id : -1;
-            this.doneIcon = this.field.props['params'].doneIcon;
-            this.isDisabled = this.field.props.disabled;
+    resetTimer() {
+        clearInterval(this.timer);
+        if (this.autoPlay) {
+            this.startTimer();
         }
-        console.log(this.doneIcon);
-        this.tickIcon = {
-            '-webkit-mask-image': `url(${this.doneIcon})`,
-            'mask-image': `url(${this.doneIcon})`
-        };
     }
-    update(chosen) {
-        if (!this.editable || this.field.props?.disabled)
-            return;
-        this.latestStep = chosen;
-        if (!this.formControl) {
-            this.stepped.emit(this.latestStep);
-            return;
+    selectCard(index) {
+        this.currentIndex = index;
+        this.resetTimer();
+        this.updateVisibleLogos();
+    }
+    next() {
+        this.currentIndex = (this.currentIndex + 1) % this.cards.length;
+        this.resetTimer();
+        this.updateVisibleLogos();
+    }
+    prev() {
+        this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
+        this.resetTimer();
+        this.updateVisibleLogos();
+    }
+    updateVisibleLogos() {
+        this.visibleLogos = [];
+        for (let i = -1; i <= 4; i++) {
+            const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
+            this.visibleLogos.push({
+                ...this.cards[index],
+                index: index
+            });
         }
-        this.formControl.setValue({
-            id: this.latestStep
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n  <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n    <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n      [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n    <div\n      class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n      <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n        class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n      </label>\n      <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n    </div>\n    <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n  </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n    <div class=\"carousel-top-wrapper\">\n        <div class=\"controls\">\n            @if (showIndicators) {\n            <div class=\"dots\">\n                @for (card of cards; track card.id; let i = $index) {\n                <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n                }\n            </div>\n            }\n            @if (showNavigationArrows) {\n            <div class=\"arrow-controls\">\n                <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n                <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n            </div>\n            }\n        </div>\n\n        <div class=\"card-container\">\n            <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n                [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n                <sa-card-title-header>\n                    <div class=\"sa-card-custom-header-container\">\n                        <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n                        <div class=\"sa-card-title-subtitle-container\">\n                            <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n                            <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n                        </div>\n                        <div class=\"sa-card-titleIcon\">\n                            <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n                        </div>\n                    </div>\n                </sa-card-title-header>\n            </sa-card>\n        </div>\n    </div>\n\n    @if (showBrandFooter) {\n    <div class=\"brand-logos-container\">\n        <div class=\"brand-logos\">\n            @for (logo of visibleLogos; track $index) {\n            <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n                [customClass]=\"'logo-style'\">\n            </sa-icon>\n            }\n        </div>\n    </div>\n    }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 20px;width:100%;min-height:32px}.dots{display:inline-flex;gap:4px;align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:4px;gap:12px;margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:6px;height:6px;border-radius:50%;background-color:var(--grey-200);margin:0 5px;cursor:pointer}.dot.active{background-color:var(--primary-500);width:8px;height:8px}.brand-logos-container{width:500px;margin-top:2rem;overflow:hidden;max-width:500px}.brand-logos{display:flex;gap:1.5rem;transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:2rem;max-height:2rem;min-height:2rem}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "customWrapperClass", "chip", "body", "avatar", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n  <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n    <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n      [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n    <div\n      class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n      <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n        class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n      </label>\n      <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n    </div>\n    <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n  </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
-        }], propDecorators: { latestStep: [{
+            args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n    <div class=\"carousel-top-wrapper\">\n        <div class=\"controls\">\n            @if (showIndicators) {\n            <div class=\"dots\">\n                @for (card of cards; track card.id; let i = $index) {\n                <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n                }\n            </div>\n            }\n            @if (showNavigationArrows) {\n            <div class=\"arrow-controls\">\n                <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n                <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n            </div>\n            }\n        </div>\n\n        <div class=\"card-container\">\n            <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n                [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n                <sa-card-title-header>\n                    <div class=\"sa-card-custom-header-container\">\n                        <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n                        <div class=\"sa-card-title-subtitle-container\">\n                            <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n                            <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n                        </div>\n                        <div class=\"sa-card-titleIcon\">\n                            <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n                        </div>\n                    </div>\n                </sa-card-title-header>\n            </sa-card>\n        </div>\n    </div>\n\n    @if (showBrandFooter) {\n    <div class=\"brand-logos-container\">\n        <div class=\"brand-logos\">\n            @for (logo of visibleLogos; track $index) {\n            <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n                [customClass]=\"'logo-style'\">\n            </sa-icon>\n            }\n        </div>\n    </div>\n    }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 20px;width:100%;min-height:32px}.dots{display:inline-flex;gap:4px;align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:4px;gap:12px;margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:6px;height:6px;border-radius:50%;background-color:var(--grey-200);margin:0 5px;cursor:pointer}.dot.active{background-color:var(--primary-500);width:8px;height:8px}.brand-logos-container{width:500px;margin-top:2rem;overflow:hidden;max-width:500px}.brand-logos{display:flex;gap:1.5rem;transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:2rem;max-height:2rem;min-height:2rem}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
+        }], propDecorators: { cards: [{
                 type: Input
-            }], editable: [{
+            }], interval: [{
                 type: Input
-            }], stepLabels: [{
+            }], autoPlay: [{
                 type: Input
-            }], doneIcon: [{
+            }], showNavigationArrows: [{
+                type: Input
+            }], showIndicators: [{
+                type: Input
+            }], showBrandFooter: [{
                 type: Input
-            }], stepped: [{
-                type: Output
             }] } });
 
-class ToolTipComponent {
+class TestLibraryComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
+    <p>
+      component-library works!
+    </p>
+  `, isInline: true, styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
+    <p>
+      component-library works!
+    </p>
+  ` }]
+        }] });
+
+class DatepickerComponent extends FieldType {
     constructor() {
-        this.toolTipSkipped = new EventEmitter();
-        this.toolTipSeen = new EventEmitter();
-        this.arrowIcon = "../assets/arrow.svg";
-        this.pointer = "../assets/pointer-polygon.svg";
-        this.msgInd = 0; // is the index of current message being displayed
-    }
-    updateMsgInd(k) {
-        this.msgInd += k;
-        if (this.msgInd < 0)
-            this.msgInd = 0;
-        if (this.msgInd > this.messages.length - 1) {
-            this.msgInd = this.messages.length - 1;
-            this.toolTipSeen.emit();
-        }
-    }
-    skipToolTip() {
-        this.toolTipSkipped.emit();
+        super(...arguments);
+        this.CalendarHeaderComponent = CalendarHeaderComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n  <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n  <div class=\"tool-tip-horizontal\">\n    <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n    <div class=\"tool-tip\">\n      <div class=\"tool-tip-content\">\n        <div class=\"tool-tip-heading\">Heading</div>\n        <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n          {{msg}}\n        </div>\n      </div>\n      <div class=\"tool-tip-break\">\n      </div>\n      <div class=\"tool-tip-controls\">\n        <div class=\"tool-tip-navigate\">\n          <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n          {{msgInd+1}} of {{messages.length}}\n          <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n        </div>\n        <div class=\"tool-tip-control-buttons\">\n          <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n            state=\"default\"></sa-button>\n          <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n          </sa-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n  </div>\n  <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\n  <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n  <div class=\"tool-tip-horizontal\">\n    <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n    <div class=\"tool-tip\">\n      <div class=\"tool-tip-content\">\n        <div class=\"tool-tip-heading\">Heading</div>\n        <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n          {{msg}}\n        </div>\n      </div>\n      <div class=\"tool-tip-break\">\n      </div>\n      <div class=\"tool-tip-controls\">\n        <div class=\"tool-tip-navigate\">\n          <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n          {{msgInd+1}} of {{messages.length}}\n          <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n        </div>\n        <div class=\"tool-tip-control-buttons\">\n          <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n            state=\"default\"></sa-button>\n          <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n          </sa-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n  </div>\n  <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"] }]
-        }], propDecorators: { messages: [{
-                type: Input
-            }], pointerPosition: [{
-                type: Input
-            }], toolTipSkipped: [{
-                type: Output
-            }], toolTipSeen: [{
-                type: Output
+            args: [{ selector: 'sa-datepicker', standalone: true, providers: [], imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        NgFor,
+                        NgIf,
+                        ReactiveFormsModule,
+                        CalendarHeaderComponent,
+                        CommonModule,
+                        MatNativeDateModule
+                    ], template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
+        }], propDecorators: { range: [{
+                type: Input
             }] } });
 
-let nextId$1 = 0; // used to give unique ids to inputs used in html
-class CalendarHeaderComponent {
-    constructor(calendar, // calendar instance of picker
-    dateAdapter, // native or moment date adapter
-    picker, dateFormats, // for formatting
-    cdr) {
-        this.calendar = calendar;
-        this.dateAdapter = dateAdapter;
-        this.picker = picker;
-        this.dateFormats = dateFormats;
-        this.uuid = nextId$1++;
-        this.destroy$ = new Subject();
-        this.selectedPreset = "Custom";
-        this.presets = [
-            "This Quarter",
-            "Last Quarter",
-            "Last 6 Months",
-            "This Year",
-            "Last Year",
-            "Custom"
-        ];
-        this.today = new Date();
-        // make sure your header stays in sync with the calendar:
-        calendar.stateChanges
-            .pipe(takeUntil(this.destroy$)) // unsubscribe when destroyed
-            .subscribe(() => cdr.markForCheck());
+function phoneNumberValidator(dependent) {
+    return (control) => {
+        const dependentFormControl = dependent ? control.parent?.get(dependent) : null;
+        if (dependentFormControl && !!dependentFormControl.value?.length) {
+            console.log('validator', dependentFormControl.value);
+            if (dependentFormControl.value[0].id === 0) {
+                if (!/^\+1[2-9]\d{2}[2-9]\d{6}$/.test(control.value)) {
+                    return { invalid: 'invalid phone number' };
+                }
+            }
+        }
+        return null;
+    };
+}
+const customEmailValidator = (control) => {
+    const email = control.value;
+    // Replace the regular expression with the pattern you want to use.
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    if (emailPattern.test(email) && isWorkEmail(email)) {
+        return null; // Valid email
+    }
+    else {
+        return {
+            invalid: 'Please use a work email; personal emails (e.g., @gmail, @outlook) are not accepted.',
+        }; // Invalid email
+    }
+};
+const isWorkEmail = (email) => {
+    const invalidEmailHosts = ['gmail', 'yahoo', 'hotmail'];
+    if (email) {
+        let [userName, domainName] = email.split('@');
+        for (let i = 0; i < invalidEmailHosts.length; i++) {
+            let re = new RegExp(`.*${invalidEmailHosts[i]}\..*`);
+            if (re.test(domainName)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+};
+/*
+export function workEmailValidation(): AsyncValidatorFn {
+    return (control: AbstractControl): Observable<ValidationErrors | null> => {
+        if (!control.value) {
+            return of(null); // No value to validate
+        }
+
+        !control.pending && control.markAsPending();
+        // !control.touched && control.markAsTouched();
+        // return of({ invalid: 'Enter your work email' });
+        return of(null);
+        return new Observable((ob) => {
+            setTimeout(() => {
+                if (control.value === 'sairaj@gmail.com')
+                    return ob.next(null)
+                return ob.next({ invalid: 'This is not a workemail' });
+            }, 500)
+        });
+
+        return of(control.value).pipe(
+            delay(500), // Simulate network delay
+
+            map(value => {
+                return of({ invalid: 'This is not a workemail' })//existingUsernames.includes(username) ? { usernameTaken: true } : null;
+            })
+            // catchError(() => of(null)) // Handle any errors
+        );
+    };
+}*/
+function getValidationMessage(errors) {
+    if (errors) {
+        if (errors['minlength']) {
+            return `minimum ${errors['minlength']['requiredLength']} required`;
+        }
+        else if (errors['maxlength']) {
+            return `maximum ${errors['maxlength']['requiredLength']} characters`;
+        }
+        else if (errors['required']) {
+            return 'Input cannot be empty';
+        }
+        else if (errors['invalid']) {
+            return errors['invalid'];
+        }
+        else if (errors['email']) {
+            return 'Enter a valid email';
+        }
+        else if (errors['pattern']) {
+            return 'Enter a valid phone number';
+        }
+        else {
+            return 'Invalid input';
+        }
+    }
+    return 'Invalid input';
+}
+
+class FormInputComponent extends FieldType {
+    constructor() {
+        super();
+        this.inputState = 'idle';
+        this.inputVal = '';
+        this.dependentVal = null;
+        // dynamicIcon: DynamicIcon | null;
+        // icon: IInputIcon | null;
+        this.type = '';
+        this.inputErrorText = 'invalid input';
+        this.showEmailIcon = false;
+        this.disabled = false;
+        this.suppressOnBlur = false;
+        this.predefinedValidators = {
+            email: [Validators.email, Validators.required],
+            password: [Validators.minLength(8), Validators.required],
+            tel: [Validators.pattern('^[0-9 +\\-()]*$')]
+        };
     }
-    // active date label rendered between the arrow buttons
     ngOnInit() {
-        const currentRange = this.calendar.selected;
-        currentRange?.start.setHours(0, 0, 0, 0);
-        currentRange?.end.setHours(0, 0, 0, 0);
-        // To pre-select a preset when the calendar opens.
-        // Match the already selected date range with the date-ranges of all presets.
-        // If already selected date range matches with a preset, pre-select it.
-        for (let i = 0; i < this.presets.length; i++) {
-            const tempRange = this.findDate(this.presets[i]);
-            if (tempRange.newStart.getTime() == currentRange.start.getTime() && tempRange.newEnd.getTime() == currentRange.end.getTime()) {
-                this.selectedPreset = this.presets[i];
-                break;
+        this.inputVal = this.field.props['value'];
+        this.disabled = this.field.props.disabled || false;
+        this.formControl?.setValue(this.inputVal);
+        this.params = this.field.props['params'];
+        this.icon = this.field.props['icon'] || {};
+        this.type = this.params?.type || '';
+        // this.dynamicIcon = this.field.props['dynamicIcon'];
+        this.setValidators();
+        this.setDependents();
+        this.formControl.statusChanges.subscribe((state) => {
+            if (this.type === 'email') {
+                if (!!this.inputVal && !this.formControl.touched) {
+                    this.formControl.markAsTouched();
+                }
+                this.showEmailIcon = ((state === 'VALID') || (state === 'INVALID' && this.formControl.hasError('invalid') && !!this.formControl.value));
+            }
+        });
+        this.formControl.valueChanges.subscribe((val) => {
+            this.formInput.nativeElement.value = val;
+        });
+    }
+    setValidators() {
+        this.validators = this.params?.validators || [];
+        this.asyncValidators = this.params?.asyncValidators || [];
+        this.formControl?.setValidators([...(this.type ? this.predefinedValidators[this.type] || [] : []), ...this.validators]);
+        if (this.asyncValidators)
+            this.formControl?.setAsyncValidators(this.asyncValidators);
+    }
+    /*
+      Assuming dependent field is a single select dropdown
+    */
+    setDependents() {
+        if (this.params?.dependent) {
+            this.dependent = this.form.get([this.params?.dependent]);
+            this.dependentVal = this.getDependentVal(this.dependent.value);
+            if (this.type === 'tel') {
+                this.pretext = this.dependentVal?.dial_code;
             }
+            this.dependent?.valueChanges.subscribe((val) => {
+                this.dependentVal = this.getDependentVal(val);
+                this.formControl.reset();
+                this.formControl.setValue(this.inputVal);
+                if (this.type === 'tel') {
+                    this.pretext = this.dependentVal?.dial_code;
+                }
+            });
+        }
+    }
+    getDependentVal(value) {
+        let dependentValue;
+        if (Array.isArray(value)) {
+            dependentValue = value.length ? value[0] : null;
+        }
+        else {
+            dependentValue = value;
+        }
+        return dependentValue;
+    }
+    checkValidity(defaultInputState = 'focus') {
+        if (this.formControl && !this.formControl.valid && this.formControl.touched && !this.formControl.pending) {
+            this.inputState = 'invalid';
+            this.inputErrorText = getValidationMessage(this.formControl.errors) || 'invalid input';
+        }
+        else {
+            this.inputState = defaultInputState;
+        }
+    }
+    onFocus() {
+        if (this.formControl.valid)
+            this.inputState = 'focus';
+    }
+    onBlur() {
+        setTimeout(() => {
+            if (!this.suppressOnBlur) {
+                this.formControl.markAsTouched();
+                this.checkValidity('idle');
+            }
+            this.suppressOnBlur = false;
+        }, 200);
+    }
+    onInput(event) {
+        if (this.params?.type === 'tel') {
+            this.inputVal = this.inputVal.replace(/[^0-9()+\- ]/g, '');
+        }
+        this.formControl?.setValue(this.inputVal);
+        this.checkValidity();
+        /*if (this.params?.eventListener) {
+          this.params?.eventListener({
+            type: IInputEventType.INPUT_CHANGE,
+            value: this.inputVal,
+            formControl: this.formControl
+          } as IInputEvent).then(this.onFieldCallback.bind(this));
+        }*/
+    }
+    onInputFieldClick(event = 'input') {
+        if (event === 'input' || event.target.classList.contains('sa-input-field')) {
+            this.formInput.nativeElement.focus();
+            if (this.params?.type !== 'email')
+                setTimeout(() => {
+                    this.formInput.nativeElement.setSelectionRange(this.inputVal.length, this.inputVal.length);
+                }, 10);
+        }
+    }
+    inputIconClick() {
+        if (this.params?.type === 'password') {
+            this.suppressOnBlur = true;
+            if (this.type === 'password') {
+                this.type = 'text';
+                this.icon.name = 'eyeFilled';
+            }
+            else {
+                this.type = 'password';
+                this.icon.name = 'eyeOutlined';
+            }
+            this.onInputFieldClick();
+        }
+    }
+    /*onFieldCallback(param: IInputParam) {
+      this.icon = param.icon || this.icon;
+      this.checkValidity();
+    }*/
+    getFormSupportText() {
+        if (this.formControl.invalid && this.formControl.touched) {
+            return getValidationMessage(this.formControl.errors) || 'invalid input';
+        }
+        else {
+            return this.params.supportText || '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n    @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n    <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n    }\n    <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n        (click)=\"onInputFieldClick($event)\">\n        @if(pretext){\n        <div class=\"sa-input-pretext\">\n            {{pretext}}\n        </div>\n        }\n        <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n            [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n            (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n        @if(params?.type === 'password'){\n        <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n        <sa-icon class=\"flex\" icon=\"eyeFilled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"icon.name === 'eyeFilled' ? '' : 'hide'\"></sa-icon>\n        }@else if(params?.type === 'email' && icon.show){\n        <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n            (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n        }\n        @else if(icon.name){\n        <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n            [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n        }\n\n\n        <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n    </div>\n    @if((!formControl.valid) || (params && params.supportText)){\n    <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n        <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n        {{getFormSupportText()}}\n    </div>\n    }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled .sa-input-field,[disabled]{background-color:#efefef4d}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { 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: FormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-input', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FormlyModule,
+                        IconComponent
+                    ], template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n    @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n    <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n    }\n    <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n        (click)=\"onInputFieldClick($event)\">\n        @if(pretext){\n        <div class=\"sa-input-pretext\">\n            {{pretext}}\n        </div>\n        }\n        <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n            [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n            (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n        @if(params?.type === 'password'){\n        <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n        <sa-icon class=\"flex\" icon=\"eyeFilled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"icon.name === 'eyeFilled' ? '' : 'hide'\"></sa-icon>\n        }@else if(params?.type === 'email' && icon.show){\n        <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n            (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n        }\n        @else if(icon.name){\n        <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n            [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n        }\n\n\n        <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n    </div>\n    @if((!formControl.valid) || (params && params.supportText)){\n    <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n        <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n        {{getFormSupportText()}}\n    </div>\n    }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled .sa-input-field,[disabled]{background-color:#efefef4d}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formInput: [{
+                type: ViewChild,
+                args: ['formInput']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
+            }] } });
+var IInputEventType;
+(function (IInputEventType) {
+    IInputEventType["INPUT_CHANGE"] = "INPUT_CHANGE";
+    IInputEventType["STATE_CHANGE"] = "STATE_CHANGE";
+    IInputEventType["ICON_CLICK"] = "ICON_CLICK";
+})(IInputEventType || (IInputEventType = {}));
+
+class FormSelectComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.svgStyle = {};
+        this.openState = false;
+        this.startInd = 0;
+        this.labelLimit = 2;
+    }
+    ngOnInit() {
+        this.selectables = this.field.props.options;
+        this.params = this.field.props['params'];
+        this.placeholderLabel = this.params.label;
+        console.log('search', this.field.props['searchable']);
+        this.svgStyle = {
+            '-webkit-mask-image': `url(${this.params.dropIcon})})`,
+            'mask-image': `url(${this.params.dropIcon})`,
+        };
+    }
+    openClose(state) {
+        if (this.field.props.disabled)
+            return;
+        this.openState = state;
+        if (state || this.formControl.value?.length > 0) {
+            this.placeholderLabel = '';
+        }
+        else {
+            this.placeholderLabel = this.params.label;
         }
     }
-    get periodLabel() {
-        // use date adapter to format the label, e.g. "SEP 2020"
-        return this.dateAdapter
-            .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
-            .toLocaleUpperCase();
+    shiftLabel(action) {
+        if (action == 'clicked')
+            this.startInd++;
+        if (action == 'cleared')
+            this.startInd = 0;
+        if (action == 'removed' && this.startInd > 0)
+            this.startInd--;
     }
-    previousClicked(mode) {
-        this.changeDate(mode, -1);
+    checkForZero(selected, state) {
+        this.topLabel = selected?.length == 0 ? false : true;
+        // console.log("test", this.formControl.value?.length)
+        // console.log("test", this.openState)
+        // console.log("placeholder--- ", this.placeholderLabel)
+        // console.log("params.label--- ", this.params.label)
+        if (this.openState || this.formControl.value?.length > 0) {
+            this.placeholderLabel = '';
+        }
+        else {
+            this.placeholderLabel = this.params.label;
+        }
     }
-    nextClicked(mode) {
-        this.changeDate(mode, 1);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-select', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        FormlyModule,
+                        ReactiveFormsModule,
+                        NgSelectModule,
+                        ChipsComponent,
+                        NgIf,
+                        NgFor
+                    ], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"] }]
+        }] });
+
+class GridCellComponent {
+    constructor() {
+        this.onClickButtonEvent = new EventEmitter();
+        this.onClickChipEvent = new EventEmitter();
+        this.onClickLinkEvent = new EventEmitter();
+        this.onClickAvatarEvent = new EventEmitter();
     }
-    changeView() {
-        this.calendar.currentView =
-            this.calendar.currentView == "month"
-                ? "year"
-                : this.calendar.currentView == "year"
-                    ? "multi-year"
-                    : "month";
+    buttonClicked(evt) {
+        this.params.buttonClicked && this.params.buttonClicked({
+            ...evt,
+            rowId: this.rowNum
+        });
+        this.onClickButtonEvent.emit({ ...evt, rowId: this.rowNum }); // this event isn't caught by anything. 
     }
-    presetChanged(evt) {
-        const newRange = this.findDate(evt.target.value);
-        this.calendar.activeDate = newRange.newStart;
-        this.picker.select(newRange.newStart);
-        this.picker.select(newRange.newEnd);
+    // above function behavior is same for all functions in this class
+    chipClicked(evt) {
+        this.params.chipClicked && this.params.chipClicked({
+            ...evt,
+            rowId: this.rowNum
+        });
+        this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
     }
-    findDate(selected) {
-        const date = this.today.getDate();
-        const month = this.today.getMonth();
-        const year = this.today.getFullYear();
-        let newRange;
-        this.selectedPreset = selected;
-        switch (selected) {
-            case "This Quarter": {
-                const thisQuarterMonth = Math.floor(month / 3) * 3;
-                const start = this.dateAdapter.createDate(year, thisQuarterMonth, 1);
-                const end = this.dateAdapter.createDate(year, thisQuarterMonth + 3, 1);
-                newRange = {
-                    newStart: start,
-                    newEnd: end,
-                };
-                break;
-            }
-            case "Last Quarter": {
-                const lastQuarterMonth = (Math.floor(month / 3) * 3) - 3;
-                const start = this.dateAdapter.createDate(year, lastQuarterMonth, 1);
-                const end = this.dateAdapter.createDate(year, lastQuarterMonth + 3, 1);
-                newRange = {
-                    newStart: start,
-                    newEnd: end,
-                };
-                break;
-            }
-            case "Last 6 Months": {
-                const end = this.dateAdapter.createDate(year, month, date);
-                const start = this.dateAdapter.addCalendarMonths(end, -6);
-                newRange = {
-                    newStart: start,
-                    newEnd: end,
-                };
-                break;
-            }
-            case "This Year": {
-                const start = this.dateAdapter.createDate(year, 0, 1);
-                const end = this.dateAdapter.createDate(year, 11, 31);
-                newRange = {
-                    newStart: start,
-                    newEnd: end,
-                };
-                break;
-            }
-            case "Last Year": {
-                const start = this.dateAdapter.createDate(year - 1, 0, 1);
-                const end = this.dateAdapter.createDate(year - 1, 11, 31);
-                newRange = {
-                    newStart: start,
-                    newEnd: end,
-                };
-                break;
+    linkClicked() {
+        if (this.params.cellType != "interactive")
+            return;
+        this.params.linkClicked && this.params.linkClicked({
+            rowId: this.rowNum
+        });
+        if (this.params.interactiveLink != "") {
+            if (this.params.interactiveLinkTarget == "blank") {
+                window.open(this.params.interactiveLink);
             }
-            default: {
-                newRange = {
-                    newStart: new Date(),
-                    newEnd: new Date(),
-                };
+            else if (this.params.interactiveLinkTarget == "self") {
+                location.href = this.params.interactiveLink;
             }
         }
-        return newRange;
+        this.onClickLinkEvent.emit({ rowId: this.rowNum });
     }
-    changeDate(mode, amount) {
-        // increment or decrement month or year
-        this.calendar.activeDate =
-            mode === 'month'
-                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, amount)
-                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, amount);
+    avatarClicked(evt) {
+        this.params.avatarClicked && this.params.avatarClicked({
+            ...evt,
+            rowId: this.rowNum
+        });
+        this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
     }
-    ngOnDestroy() {
-        this.destroy$.next(); // will trigger unsubscription in takeUntil
+    agInit(inParams) {
+        this.rowNum = inParams.rowIndex;
+        this.params = inParams.value; // inParams.value exists when gridCell is rendered as cell, `cellRenderer: GridCellComponent`
+        if (inParams.value == undefined) { // inParams.value is undefined when gridCell is rendered as header, `headerComponent: GridCellComponent`, 
+            this.params = inParams;
+        }
+        // console.log(this.params);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2$1.MatCalendar }, { token: i2$2.DateAdapter }, { token: i2$1.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n  <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n    <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n      for=\"preset-radio-{{i}}\">{{preset}}</label>\n    <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n      id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n  </div>\n</div>\n\n<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked('month')\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n  <button mat-icon-button (click)=\"nextClicked('month')\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        NgFor,
-                        MatIconModule,
-                        MatButton
-                    ], template: "<div class=\"range-preset\">\n  <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n    <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n      for=\"preset-radio-{{i}}\">{{preset}}</label>\n    <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n      id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n  </div>\n</div>\n\n<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked('month')\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n  <button mat-icon-button (click)=\"nextClicked('month')\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.MatCalendar }, { type: i2$2.DateAdapter }, { type: i2$1.MatDateRangePicker }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i0.ChangeDetectorRef }] });
-
-class DatepickerComponent extends FieldType {
-    constructor() {
-        super(...arguments);
-        this.CalendarHeaderComponent = CalendarHeaderComponent;
+    refresh(params) {
+        return false; // not sure what this return value does.
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n  <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n    [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n    [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n  </sa-avatar>\n\n  <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n    <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n    </div>\n\n    <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n  </div>\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n  <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n    id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n    [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n    [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n  <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n    [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n    [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n    [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n    (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-datepicker', standalone: true, providers: [], imports: [
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatDatepickerModule,
-                        NgFor,
-                        NgIf,
-                        ReactiveFormsModule,
-                        CalendarHeaderComponent,
-                        CommonModule,
-                        MatNativeDateModule
-                    ], template: "<mat-form-field class=\"date-picker\">\n  <mat-label>Choose a date</mat-label>\n  <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n    <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n    <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n  </mat-date-range-input>\n  <mat-hint>MM/DD/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
-        }], propDecorators: { range: [{
-                type: Input
+            args: [{ selector: 'lib-grid-cell', standalone: true, imports: [
+                        AvatarComponent,
+                        ChipsComponent,
+                        ButtonComponent,
+                        NgFor
+                    ], template: "<div class=\"grid-cell {{params.cellType}}\">\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n  <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n    [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n    [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n  </sa-avatar>\n\n  <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n    <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n    </div>\n\n    <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n  </div>\n\n  <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n  <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n    id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n    [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n    [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n  <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n    [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n    [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n    [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n    (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"] }]
+        }], propDecorators: { onClickButtonEvent: [{
+                type: Output
+            }], onClickChipEvent: [{
+                type: Output
+            }], onClickLinkEvent: [{
+                type: Output
+            }], onClickAvatarEvent: [{
+                type: Output
             }] } });
 
-let nextId = 0; // used to give unique ids to inputs used in html
-class TabsComponent {
+class HeaderComponent {
     constructor() {
-        this.tabChanged = new EventEmitter();
-        this.uuid = nextId++;
-        this.svgStyle = [];
-    }
-    ngOnChanges() {
-        this.svgStyle = this.tabs.map((item) => {
-            return {
-                '-webkit-mask-image': `url(${item.tabIcon})`,
-                'mask-image': `url(${item.tabIcon})`,
-            };
-        });
+        this.mainButtonClicked = new EventEmitter();
+        this.helperButtonClicked = new EventEmitter();
     }
-    tabChange(evt) {
-        this.tabChanged.emit(evt.target.value);
+    clicked(num) {
+        num ? this.mainButtonClicked.emit() : this.helperButtonClicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n  <div class=\"tabs\">\n    <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n      <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n        id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n      <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n        <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        {{item.tabName}}\n        <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n      </label>\n    </div>\n  </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"header-content\">\n    <div class=\"heading\">\n      <div class=\"header-name\">{{headerName}}</div>\n      <div *ngFor=\"let chip of chipConfig\">\n        <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n      </div>\n    </div>\n    <div class=\"header-info\">\n      <div class=\"info-item\" *ngFor=\"let item of info\">\n        <img [src]=\"item[1]\" alt=\"\">\n        {{item[0]}}\n      </div>\n    </div>\n  </div>\n  <div class=\"actions\">\n    <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n      state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n      state=\"default\"></sa-button>\n  </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\n  <div class=\"tabs\">\n    <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n      <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n        id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n      <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n        <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        {{item.tabName}}\n        <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n      </label>\n    </div>\n  </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
-        }], propDecorators: { tabs: [{
+            args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\n  <div class=\"header-content\">\n    <div class=\"heading\">\n      <div class=\"header-name\">{{headerName}}</div>\n      <div *ngFor=\"let chip of chipConfig\">\n        <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n      </div>\n    </div>\n    <div class=\"header-info\">\n      <div class=\"info-item\" *ngFor=\"let item of info\">\n        <img [src]=\"item[1]\" alt=\"\">\n        {{item[0]}}\n      </div>\n    </div>\n  </div>\n  <div class=\"actions\">\n    <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n      state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n      state=\"default\"></sa-button>\n  </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}\n"] }]
+        }], propDecorators: { info: [{
                 type: Input
-            }], type: [{
+            }], headerName: [{
                 type: Input
-            }], defaultTab: [{
+            }], chipConfig: [{
                 type: Input
-            }], tabChanged: [{
+            }], buttonHelper: [{
+                type: Input
+            }], buttonMain: [{
+                type: Input
+            }], mainButtonClicked: [{
+                type: Output
+            }], helperButtonClicked: [{
                 type: Output
             }] } });
 
@@ -956,7 +1239,7 @@ class LeftNavComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n    <div class=\"sa-left-nav-container\">\n        <div class=\"sa-left-nav-logo\">\n            <!-- <span class=\"sa-logo\"></span> -->\n            <sa-icon icon=\"saras_white\" size=\"40\"></sa-icon>\n        </div>\n        <div class=\"sa-left-nav-items\">\n            @if(data && data.items && !!data.items.length){\n            <div class=\"sa-left-nav-items-container\">\n                <ng-container *ngFor=\"let item of data.items; let i = index\">\n                    <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onNavItemClick(item, i, $event)\">\n\n                        <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-item-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n        <div class=\"sa-left-nav-footer\">\n            @if(data && data.footerItems && !!data.footerItems.length){\n            <div class=\"sa-left-nav-footer-container\">\n                <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n                    <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onFooterItemClick(item, i, $event)\">\n                        @if(item.type === 'AVATAR'){\n                        <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n                        <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n                        }@else{\n                        <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-footer-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n                        }\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"sa-left-nav-content\">\n        <ng-content></ng-content>\n    </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5544 13.5489C15.5034 13.5489 15.4525 13.5489 15.4021 13.5458V13.5489C15.4021 13.5489 14.8606 13.5359 13.0068 13.5253C9.95959 13.4986 8.83176 14.762 8.47545 15.3415H8.46938C8.2094 15.8311 8.13711 16.4024 8.26664 16.9437L8.26299 16.9549C8.28242 17.0836 8.5665 18.5783 11.0255 18.5267C12.9965 18.4851 14.1753 18.3619 14.6506 18.3016C15.2478 18.1597 15.869 18.1613 16.4656 18.3063C17.0621 18.4513 17.6178 18.7357 18.0892 19.1373C18.5605 19.539 18.9347 20.0469 19.1824 20.6213C19.4302 21.1957 19.5448 21.8211 19.5173 22.4485C19.4897 23.0758 19.3208 23.6882 19.0238 24.2375C18.7267 24.7869 18.3095 25.2583 17.8049 25.615C17.3003 25.9717 16.7219 26.2039 16.1151 26.2935C15.5083 26.3831 14.8894 26.3276 14.307 26.1314C14.0163 26.063 13.6253 25.9623 13.0985 25.8162C9.93167 25.0272 8.19258 29.8974 8.19258 29.8974L8.18651 29.9017C7.9393 30.6023 7.5091 31.22 6.94278 31.6874C6.37647 32.1549 5.69576 32.4541 4.97485 32.5526C4.25393 32.6511 3.52045 32.545 2.85434 32.2459C2.18822 31.9468 1.61502 31.4662 1.1972 30.8565C0.779378 30.2467 0.532961 29.5312 0.484798 28.7878C0.436635 28.0445 0.588573 27.3019 0.924059 26.6409C1.25955 25.9799 1.76571 25.426 2.38739 25.0393C3.00908 24.6527 3.72244 24.4483 4.44974 24.4483C4.56628 24.4483 4.68101 24.4539 4.79513 24.4638C5.23461 24.4601 6.14816 24.4639 7.98498 24.4956C11.1208 24.5528 11.5409 23.0537 11.5815 22.44C11.5815 22.3822 11.5779 22.3244 11.5779 22.2666C11.5779 22.2411 11.5779 22.2162 11.5779 22.1913C11.5783 22.1889 11.5783 22.1863 11.5779 22.1839C11.5524 21.7349 11.3963 21.3039 11.1298 20.9465C10.8632 20.5891 10.4984 20.3215 10.0822 20.1781C8.53918 19.4942 4.66948 19.8007 4.66948 19.8007V19.7957C4.60392 19.799 4.53796 19.8007 4.47159 19.8007C3.91809 19.8001 3.37082 19.6811 2.86485 19.4512C2.35888 19.2214 1.90539 18.8857 1.53344 18.4659C1.1615 18.046 0.879303 17.5512 0.704954 17.0131C0.530606 16.475 0.467948 15.9056 0.521 15.3413C0.574053 14.7769 0.741643 14.2302 1.01303 13.7361C1.28441 13.2419 1.6536 12.8113 2.09693 12.4719C2.54026 12.1325 3.04794 11.8917 3.58743 11.7649C4.12692 11.6382 4.68631 11.6283 5.22975 11.7359C6.48742 11.8174 7.74991 11.7689 8.99809 11.591C11.0176 11.3367 11.4783 10.1573 11.5779 9.5125V9.47955C11.5779 8.6747 11.8109 7.88792 12.2474 7.21872C12.684 6.54951 13.3045 6.02792 14.0304 5.71992C14.7564 5.41192 15.5552 5.33133 16.3259 5.48835C17.0965 5.64537 17.8044 6.03294 18.3601 6.60205C18.9157 7.17117 19.2941 7.89627 19.4474 8.68565C19.6006 9.47503 19.522 10.2933 19.2213 11.0368C18.9206 11.7804 18.4114 12.416 17.758 12.8631C17.1047 13.3103 16.3366 13.5489 15.5508 13.5489H15.5544Z\" fill=\"white\"/>%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.47607 9.04307C3.69031 9.04307 2.92219 8.80441 2.26885 8.35726C1.61551 7.91011 1.10629 7.27456 0.805595 6.53097C0.504895 5.78739 0.426219 4.96917 0.579514 4.17979C0.732809 3.3904 1.11119 2.66531 1.66681 2.09619C2.22243 1.52708 2.93033 1.13951 3.701 0.982491C4.47167 0.825473 5.27049 0.90606 5.99644 1.21406C6.72239 1.52206 7.34287 2.04365 7.77942 2.71286C8.21597 3.38206 8.44897 4.16884 8.44897 4.97369C8.44897 6.05295 8.0304 7.08802 7.28534 7.85118C6.54028 8.61434 5.52975 9.04307 4.47607 9.04307Z\" fill=\"white\"/>%0A<path d=\"M15.5314 37.0946C17.7252 37.0946 19.5037 35.2729 19.5037 33.0258C19.5037 30.7787 17.7252 28.957 15.5314 28.957C13.3375 28.957 11.5591 30.7787 11.5591 33.0258C11.5591 35.2729 13.3375 37.0946 15.5314 37.0946Z\" fill=\"white\"/>%0A</svg>%0A') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n    <div class=\"sa-left-nav-container\">\n        <div class=\"sa-left-nav-logo\">\n            <!-- <span class=\"sa-logo\"></span> -->\n            <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n        </div>\n        <div class=\"sa-left-nav-items\">\n            @if(data && data.items && !!data.items.length){\n            <div class=\"sa-left-nav-items-container\">\n                <ng-container *ngFor=\"let item of data.items; let i = index\">\n                    <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onNavItemClick(item, i, $event)\">\n\n                        <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-item-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n        <div class=\"sa-left-nav-footer\">\n            @if(data && data.footerItems && !!data.footerItems.length){\n            <div class=\"sa-left-nav-footer-container\">\n                <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n                    <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onFooterItemClick(item, i, $event)\">\n                        @if(item.type === 'AVATAR'){\n                        <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n                        <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n                        }@else{\n                        <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-footer-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n                        }\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"sa-left-nav-content\">\n        <ng-content></ng-content>\n    </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { 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: LeftNavComponent, decorators: [{
             type: Component,
@@ -964,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         CommonModule,
                         AvatarComponent,
                         IconComponent
-                    ], template: "<div class=\"sa-left-nav\">\n\n    <div class=\"sa-left-nav-container\">\n        <div class=\"sa-left-nav-logo\">\n            <!-- <span class=\"sa-logo\"></span> -->\n            <sa-icon icon=\"saras_white\" size=\"40\"></sa-icon>\n        </div>\n        <div class=\"sa-left-nav-items\">\n            @if(data && data.items && !!data.items.length){\n            <div class=\"sa-left-nav-items-container\">\n                <ng-container *ngFor=\"let item of data.items; let i = index\">\n                    <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onNavItemClick(item, i, $event)\">\n\n                        <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-item-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n        <div class=\"sa-left-nav-footer\">\n            @if(data && data.footerItems && !!data.footerItems.length){\n            <div class=\"sa-left-nav-footer-container\">\n                <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n                    <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onFooterItemClick(item, i, $event)\">\n                        @if(item.type === 'AVATAR'){\n                        <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n                        <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n                        }@else{\n                        <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-footer-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n                        }\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"sa-left-nav-content\">\n        <ng-content></ng-content>\n    </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5544 13.5489C15.5034 13.5489 15.4525 13.5489 15.4021 13.5458V13.5489C15.4021 13.5489 14.8606 13.5359 13.0068 13.5253C9.95959 13.4986 8.83176 14.762 8.47545 15.3415H8.46938C8.2094 15.8311 8.13711 16.4024 8.26664 16.9437L8.26299 16.9549C8.28242 17.0836 8.5665 18.5783 11.0255 18.5267C12.9965 18.4851 14.1753 18.3619 14.6506 18.3016C15.2478 18.1597 15.869 18.1613 16.4656 18.3063C17.0621 18.4513 17.6178 18.7357 18.0892 19.1373C18.5605 19.539 18.9347 20.0469 19.1824 20.6213C19.4302 21.1957 19.5448 21.8211 19.5173 22.4485C19.4897 23.0758 19.3208 23.6882 19.0238 24.2375C18.7267 24.7869 18.3095 25.2583 17.8049 25.615C17.3003 25.9717 16.7219 26.2039 16.1151 26.2935C15.5083 26.3831 14.8894 26.3276 14.307 26.1314C14.0163 26.063 13.6253 25.9623 13.0985 25.8162C9.93167 25.0272 8.19258 29.8974 8.19258 29.8974L8.18651 29.9017C7.9393 30.6023 7.5091 31.22 6.94278 31.6874C6.37647 32.1549 5.69576 32.4541 4.97485 32.5526C4.25393 32.6511 3.52045 32.545 2.85434 32.2459C2.18822 31.9468 1.61502 31.4662 1.1972 30.8565C0.779378 30.2467 0.532961 29.5312 0.484798 28.7878C0.436635 28.0445 0.588573 27.3019 0.924059 26.6409C1.25955 25.9799 1.76571 25.426 2.38739 25.0393C3.00908 24.6527 3.72244 24.4483 4.44974 24.4483C4.56628 24.4483 4.68101 24.4539 4.79513 24.4638C5.23461 24.4601 6.14816 24.4639 7.98498 24.4956C11.1208 24.5528 11.5409 23.0537 11.5815 22.44C11.5815 22.3822 11.5779 22.3244 11.5779 22.2666C11.5779 22.2411 11.5779 22.2162 11.5779 22.1913C11.5783 22.1889 11.5783 22.1863 11.5779 22.1839C11.5524 21.7349 11.3963 21.3039 11.1298 20.9465C10.8632 20.5891 10.4984 20.3215 10.0822 20.1781C8.53918 19.4942 4.66948 19.8007 4.66948 19.8007V19.7957C4.60392 19.799 4.53796 19.8007 4.47159 19.8007C3.91809 19.8001 3.37082 19.6811 2.86485 19.4512C2.35888 19.2214 1.90539 18.8857 1.53344 18.4659C1.1615 18.046 0.879303 17.5512 0.704954 17.0131C0.530606 16.475 0.467948 15.9056 0.521 15.3413C0.574053 14.7769 0.741643 14.2302 1.01303 13.7361C1.28441 13.2419 1.6536 12.8113 2.09693 12.4719C2.54026 12.1325 3.04794 11.8917 3.58743 11.7649C4.12692 11.6382 4.68631 11.6283 5.22975 11.7359C6.48742 11.8174 7.74991 11.7689 8.99809 11.591C11.0176 11.3367 11.4783 10.1573 11.5779 9.5125V9.47955C11.5779 8.6747 11.8109 7.88792 12.2474 7.21872C12.684 6.54951 13.3045 6.02792 14.0304 5.71992C14.7564 5.41192 15.5552 5.33133 16.3259 5.48835C17.0965 5.64537 17.8044 6.03294 18.3601 6.60205C18.9157 7.17117 19.2941 7.89627 19.4474 8.68565C19.6006 9.47503 19.522 10.2933 19.2213 11.0368C18.9206 11.7804 18.4114 12.416 17.758 12.8631C17.1047 13.3103 16.3366 13.5489 15.5508 13.5489H15.5544Z\" fill=\"white\"/>%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.47607 9.04307C3.69031 9.04307 2.92219 8.80441 2.26885 8.35726C1.61551 7.91011 1.10629 7.27456 0.805595 6.53097C0.504895 5.78739 0.426219 4.96917 0.579514 4.17979C0.732809 3.3904 1.11119 2.66531 1.66681 2.09619C2.22243 1.52708 2.93033 1.13951 3.701 0.982491C4.47167 0.825473 5.27049 0.90606 5.99644 1.21406C6.72239 1.52206 7.34287 2.04365 7.77942 2.71286C8.21597 3.38206 8.44897 4.16884 8.44897 4.97369C8.44897 6.05295 8.0304 7.08802 7.28534 7.85118C6.54028 8.61434 5.52975 9.04307 4.47607 9.04307Z\" fill=\"white\"/>%0A<path d=\"M15.5314 37.0946C17.7252 37.0946 19.5037 35.2729 19.5037 33.0258C19.5037 30.7787 17.7252 28.957 15.5314 28.957C13.3375 28.957 11.5591 30.7787 11.5591 33.0258C11.5591 35.2729 13.3375 37.0946 15.5314 37.0946Z\" fill=\"white\"/>%0A</svg>%0A') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
+                    ], template: "<div class=\"sa-left-nav\">\n\n    <div class=\"sa-left-nav-container\">\n        <div class=\"sa-left-nav-logo\">\n            <!-- <span class=\"sa-logo\"></span> -->\n            <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n        </div>\n        <div class=\"sa-left-nav-items\">\n            @if(data && data.items && !!data.items.length){\n            <div class=\"sa-left-nav-items-container\">\n                <ng-container *ngFor=\"let item of data.items; let i = index\">\n                    <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onNavItemClick(item, i, $event)\">\n\n                        <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-item-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n        <div class=\"sa-left-nav-footer\">\n            @if(data && data.footerItems && !!data.footerItems.length){\n            <div class=\"sa-left-nav-footer-container\">\n                <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n                    <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onFooterItemClick(item, i, $event)\">\n                        @if(item.type === 'AVATAR'){\n                        <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n                        <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n                        }@else{\n                        <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n                        <!-- <span class=\"sa-left-nav-footer-icon\"\n                            [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n                        }\n                    </div>\n                </ng-container>\n            </div>\n            }\n        </div>\n    </div>\n\n    <div class=\"sa-left-nav-content\">\n        <ng-content></ng-content>\n    </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }], propDecorators: { data: [{
                 type: Input,
                 args: ['data']
@@ -1000,7 +1283,7 @@ const data = {
         }],
     footerItems: [{
             title: 'Help',
-            icon: 'chathelp',
+            icon: 'chatHelpOutlined',
             disable: true,
             tooltip: ''
         }, {
@@ -1010,346 +1293,307 @@ const data = {
             type: 'AVATAR'
         }, {
             title: 'Chevron',
-            icon: 'doublechevron',
+            icon: 'doubleDownOutlined',
             disable: true,
             tooltip: ''
         }]
 };
 
-function phoneNumberValidator(dependent) {
-    return (control) => {
-        const dependentFormControl = dependent ? control.parent?.get(dependent) : null;
-        if (dependentFormControl && !!dependentFormControl.value?.length) {
-            console.log('validator', dependentFormControl.value);
-            if (dependentFormControl.value[0].id === 0) {
-                if (!/^\+1[2-9]\d{2}[2-9]\d{6}$/.test(control.value)) {
-                    return { invalid: 'invalid phone number' };
-                }
-            }
-        }
-        return null;
-    };
-}
-const customEmailValidator = (control) => {
-    const email = control.value;
-    // Replace the regular expression with the pattern you want to use.
-    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
-    if (emailPattern.test(email)) {
-        return null; // Valid email
-    }
-    else {
-        return { invalid: "Please use a work email; personal emails (e.g., @gmail, @outlook) are not accepted." }; // Invalid email
+class ProgressBarComponent {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.progressValue = 10;
+        this.borderRadius = '10px';
+        this.height = '8px';
     }
-};
-/*
-export function workEmailValidation(): AsyncValidatorFn {
-    return (control: AbstractControl): Observable<ValidationErrors | null> => {
-        if (!control.value) {
-            return of(null); // No value to validate
-        }
-
-        !control.pending && control.markAsPending();
-        // !control.touched && control.markAsTouched();
-        // return of({ invalid: 'Enter your work email' });
-        return of(null);
-        return new Observable((ob) => {
-            setTimeout(() => {
-                if (control.value === 'sairaj@gmail.com')
-                    return ob.next(null)
-                return ob.next({ invalid: 'This is not a workemail' });
-            }, 500)
-        });
-
-        return of(control.value).pipe(
-            delay(500), // Simulate network delay
-
-            map(value => {
-                return of({ invalid: 'This is not a workemail' })//existingUsernames.includes(username) ? { usernameTaken: true } : null;
-            })
-            // catchError(() => of(null)) // Handle any errors
-        );
-    };
-}*/
-function getValidationMessage(errors) {
-    if (errors) {
-        if (errors['minlength']) {
-            return `minimum ${errors['minlength']['requiredLength']} required`;
-        }
-        else if (errors['maxlength']) {
-            return `maximum ${errors['maxlength']['requiredLength']} characters`;
-        }
-        else if (errors['required']) {
-            return 'Input cannot be empty';
-        }
-        else if (errors['invalid']) {
-            return errors['invalid'];
-        }
-        else if (errors['email']) {
-            return 'Enter a valid email';
-        }
-        else if (errors['pattern']) {
-            return 'Enter a valid phone number';
-        }
-        else {
-            return 'Invalid input';
-        }
+    ngOnInit() {
     }
-    return 'Invalid input';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "lib-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n    '--dynamic-height': height ,\n    '--dynamic-border-radius': borderRadius \n  }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n    '--dynamic-height': height ,\n    '--dynamic-border-radius': borderRadius \n  }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
 
-class FormInputComponent extends FieldType {
+class RadioButtonComponent {
     constructor() {
-        super();
-        this.inputState = 'idle';
-        this.inputVal = '';
-        this.dependentVal = null;
-        // dynamicIcon: DynamicIcon | null;
-        // icon: IInputIcon | null;
-        this.type = '';
-        this.inputErrorText = 'invalid input';
-        this.showEmailIcon = false;
-        this.disabled = false;
-        this.suppressOnBlur = false;
-        this.predefinedValidators = {
-            email: [Validators.email, Validators.required],
-            password: [Validators.minLength(8), Validators.required],
-            tel: [Validators.pattern('^[0-9 +\\-()]*$')]
-        };
+        this.options = [];
+        this.column = false;
+        this.selectedValueChange = new EventEmitter();
     }
     ngOnInit() {
-        this.inputVal = this.field.props['value'];
-        this.disabled = this.field.props.disabled || false;
-        this.formControl?.setValue(this.inputVal);
-        this.params = this.field.props['params'];
-        this.icon = this.field.props['icon'] || {};
-        this.type = this.params?.type || '';
-        // this.dynamicIcon = this.field.props['dynamicIcon'];
-        this.setValidators();
-        this.setDependents();
-        this.formControl.statusChanges.subscribe((state) => {
-            if (this.type === 'email') {
-                this.showEmailIcon = ((state === 'VALID') || (state === 'INVALID' && this.formControl.hasError('invalid')) && this.form.touched);
-            }
-        });
-        this.formControl.valueChanges.subscribe((val) => {
-            this.formInput.nativeElement.value = val;
-        });
-    }
-    setValidators() {
-        this.validators = this.params?.validators || [];
-        this.asyncValidators = this.params?.asyncValidators || [];
-        this.formControl?.setValidators([...(this.type ? this.predefinedValidators[this.type] || [] : []), ...this.validators]);
-        if (this.asyncValidators)
-            this.formControl?.setAsyncValidators(this.asyncValidators);
-    }
-    /*
-      Assuming dependent field is a single select dropdown
-    */
-    setDependents() {
-        if (this.params?.dependent) {
-            this.dependent = this.form.get([this.params?.dependent]);
-            this.dependentVal = this.getDependentVal(this.dependent.value);
-            if (this.type === 'tel') {
-                this.pretext = this.dependentVal?.dial_code;
-            }
-            this.dependent?.valueChanges.subscribe((val) => {
-                this.dependentVal = this.getDependentVal(val);
-                this.formControl.reset();
-                this.formControl.setValue(this.inputVal);
-                if (this.type === 'tel') {
-                    this.pretext = this.dependentVal?.dial_code;
-                }
-            });
-        }
-    }
-    getDependentVal(value) {
-        let dependentValue;
-        if (Array.isArray(value)) {
-            dependentValue = value.length ? value[0] : null;
-        }
-        else {
-            dependentValue = value;
-        }
-        return dependentValue;
-    }
-    checkValidity(defaultInputState = 'focus') {
-        if (this.formControl && !this.formControl.valid && this.formControl.touched && !this.formControl.pending) {
-            this.inputState = 'invalid';
-            this.inputErrorText = getValidationMessage(this.formControl.errors) || 'invalid input';
-        }
-        else {
-            this.inputState = defaultInputState;
-        }
-    }
-    onFocus() {
-        if (this.formControl.valid)
-            this.inputState = 'focus';
-    }
-    onBlur() {
-        setTimeout(() => {
-            if (!this.suppressOnBlur) {
-                this.formControl.markAsTouched();
-                this.checkValidity('idle');
-            }
-            this.suppressOnBlur = false;
-        }, 200);
-    }
-    onInput(event) {
-        if (this.params?.type === 'tel') {
-            this.inputVal = this.inputVal.replace(/[^0-9()+\- ]/g, '');
-        }
-        this.formControl?.setValue(this.inputVal);
-        this.checkValidity();
-        /*if (this.params?.eventListener) {
-          this.params?.eventListener({
-            type: IInputEventType.INPUT_CHANGE,
-            value: this.inputVal,
-            formControl: this.formControl
-          } as IInputEvent).then(this.onFieldCallback.bind(this));
-        }*/
     }
-    onInputFieldClick(event = 'input') {
-        if (event === 'input' || event.target.classList.contains('sa-input-field')) {
-            this.formInput.nativeElement.focus();
-            if (this.params?.type !== 'email')
-                setTimeout(() => {
-                    this.formInput.nativeElement.setSelectionRange(this.inputVal.length, this.inputVal.length);
-                }, 10);
-        }
+    selectOption(radioButton, value) {
+        radioButton.checked = true;
+        //console.log('Selected radio button:', radioButton);
+        //this.selectedValue = value; 
+        this.selectedValueChange.emit(value);
     }
-    inputIconClick() {
-        if (this.params?.type === 'password') {
-            this.suppressOnBlur = true;
-            if (this.type === 'password') {
-                this.type = 'text';
-                this.icon.name = 'eye_filled';
-            }
-            else {
-                this.type = 'password';
-                this.icon.name = 'eye';
-            }
-            this.onInputFieldClick();
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", inputs: { options: "options", selectedValue: "selectedValue", column: "column" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"radio-group\" [ngClass]=\"[column ? 'column' : '']\">\n    <mat-radio-group name=\"radioButtons\">\n        <div *ngFor=\"let option of options; let i = index\" class=\"radio-box\">\n            <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\" (click)=\"selectOption(radio, option)\"\n                [checked]=\"option.value === selectedValue?.value\">\n                {{ option.label }}\n            </mat-radio-button>\n        </div>\n    </mat-radio-group>\n</div>", styles: [".radio-group .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group .radio-box{cursor:pointer}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio{padding:.5rem .625rem}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule], template: "<div class=\"radio-group\" [ngClass]=\"[column ? 'column' : '']\">\n    <mat-radio-group name=\"radioButtons\">\n        <div *ngFor=\"let option of options; let i = index\" class=\"radio-box\">\n            <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\" (click)=\"selectOption(radio, option)\"\n                [checked]=\"option.value === selectedValue?.value\">\n                {{ option.label }}\n            </mat-radio-button>\n        </div>\n    </mat-radio-group>\n</div>", styles: [".radio-group .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group .radio-box{cursor:pointer}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio{padding:.5rem .625rem}::ng-deep .radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }] } });
+
+let nextId$1 = 0; // used to give unique ids to inputs used in html
+class StepperComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.latestStep = -1;
+        this.editable = true;
+        this.stepped = new EventEmitter;
+        this.uuid = nextId$1++;
+        this.isDisabled = false;
+        this.tickIcon = {};
     }
-    /*onFieldCallback(param: IInputParam) {
-      this.icon = param.icon || this.icon;
-      this.checkValidity();
-    }*/
-    getFormSupportText() {
-        if (this.formControl.invalid && this.formControl.touched) {
-            return getValidationMessage(this.formControl.errors) || 'invalid input';
+    // {
+    //   '-webkit-mask-image': `url(${this.ImagePath})`,
+    //   'mask-image': `url(${this.ImagePath})`,
+    // }
+    ngOnInit() {
+        if (this.field.props) {
+            this.stepLabels = this.field.props.options;
+            this.editable = this.field.props['params'].editable;
+            this.latestStep = this.model[`${this.key}`] ? this.model[`${this.key}`].id : -1;
+            this.doneIcon = this.field.props['params'].doneIcon;
+            this.isDisabled = this.field.props.disabled;
         }
-        else {
-            return this.params.supportText || '';
+        console.log(this.doneIcon);
+        this.tickIcon = {
+            '-webkit-mask-image': `url(${this.doneIcon})`,
+            'mask-image': `url(${this.doneIcon})`
+        };
+    }
+    update(chosen) {
+        if (!this.editable || this.field.props?.disabled)
+            return;
+        this.latestStep = chosen;
+        if (!this.formControl) {
+            this.stepped.emit(this.latestStep);
+            return;
         }
+        this.formControl.setValue({
+            id: this.latestStep
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n    @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n    <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n    }\n    <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n        (click)=\"onInputFieldClick($event)\">\n        @if(pretext){\n        <div class=\"sa-input-pretext\">\n            {{pretext}}\n        </div>\n        }\n        <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n            [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n            (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n        @if(params?.type === 'password'){\n        <sa-icon class=\"flex\" icon=\"eye\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"!icon.name || icon.name === 'eye' ? '' : 'hide'\"></sa-icon>\n        <sa-icon class=\"flex\" icon=\"eye_filled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"icon.name === 'eye_filled' ? '' : 'hide'\"></sa-icon>\n        }@else if(params?.type === 'email' && icon.show){\n        <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkmark'\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n        }\n        @else if(icon.name){\n        <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n            [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n        }\n\n\n        <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n    </div>\n    @if((!formControl.valid) || (params && params.supportText)){\n    <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n        <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n        {{getFormSupportText()}}\n    </div>\n    }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled .sa-input-field,[disabled]{background-color:#efefef4d}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n  <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n    <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n      [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n    <div\n      class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n      <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n        class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n      </label>\n      <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n    </div>\n    <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n  </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-input', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        FormlyModule,
-                        IconComponent
-                    ], template: "<div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n    @if(pretext || (!!inputVal.length && !!params?.placeholder)){\n    <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n    }\n    <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n        (click)=\"onInputFieldClick($event)\">\n        @if(pretext){\n        <div class=\"sa-input-pretext\">\n            {{pretext}}\n        </div>\n        }\n        <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n            [disabled]=\"field.props.disabled || false\" [placeholder]=\"!pretext && params?.placeholder || '' \"\n            (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n        @if(params?.type === 'password'){\n        <sa-icon class=\"flex\" icon=\"eye\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"!icon.name || icon.name === 'eye' ? '' : 'hide'\"></sa-icon>\n        <sa-icon class=\"flex\" icon=\"eye_filled\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"icon.name === 'eye_filled' ? '' : 'hide'\"></sa-icon>\n        }@else if(params?.type === 'email' && icon.show){\n        <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkmark'\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n            [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n        }\n        @else if(icon.name){\n        <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n            [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n        }\n\n\n        <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n    </div>\n    @if((!formControl.valid) || (params && params.supportText)){\n    <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n        <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n        {{getFormSupportText()}}\n    </div>\n    }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled .sa-input-field,[disabled]{background-color:#efefef4d}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formInput: [{
-                type: ViewChild,
-                args: ['formInput']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
+            args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n  <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n    <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n      [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n    <div\n      class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n      <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n        class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n      </label>\n      <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n    </div>\n    <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n  </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
+        }], propDecorators: { latestStep: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], stepLabels: [{
+                type: Input
+            }], doneIcon: [{
+                type: Input
+            }], stepped: [{
+                type: Output
             }] } });
-var IInputEventType;
-(function (IInputEventType) {
-    IInputEventType["INPUT_CHANGE"] = "INPUT_CHANGE";
-    IInputEventType["STATE_CHANGE"] = "STATE_CHANGE";
-    IInputEventType["ICON_CLICK"] = "ICON_CLICK";
-})(IInputEventType || (IInputEventType = {}));
 
-class CardComponent {
+let nextId = 0; // used to give unique ids to inputs used in html
+class TabsComponent {
     constructor() {
-        this.title = '';
-        this.chip = null;
-        this.body = '';
-        this.avatar = '';
-        this.icon = '';
-        this.column = false;
-        this.cardStyles = {};
+        this.tabChanged = new EventEmitter();
+        this.uuid = nextId++;
+        this.svgStyle = [];
     }
-    ngOnChanges(changes) {
-        if (changes['width']?.currentValue) {
-            this.cardStyles['width'] = typeof changes['width']?.currentValue === 'string' ? changes['width']?.currentValue : changes['width']?.currentValue + '%';
-        }
+    ngOnChanges() {
+        this.svgStyle = this.tabs.map((item) => {
+            return {
+                '-webkit-mask-image': `url(${item.tabIcon})`,
+                'mask-image': `url(${item.tabIcon})`,
+            };
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", chip: "chip", body: "body", avatar: "avatar", icon: "icon", iconSize: "iconSize", width: "width", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n    <div class=\"sa-card-wrapper\" [ngClass]=\"column ? 'column' : ''\">\n        <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n            @if(avatar){\n            <img [src]=\"avatar\" />\n            }@else if(icon){\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n            }@else{\n            <ng-content select=\"sa-card-icon\"></ng-content>\n            }\n            @if(column){\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\n            }\n        </div>\n        <div class=\"sa-card-container\">\n            @if(title){\n            <div class=\"sa-card-title-container\">\n                <div class=\"sa-card-title\">{{title}}</div>\n                @if(chip){\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\"></sa-chip>\n                }\n                <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n            </div>\n            }\n            @if(body){\n            <div class=\"sa-card-body\">\n                {{body}}\n            </div>\n            }\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;padding:12px;background:var(--structural-white)}.sa-card-wrapper.column{flex-direction:column}.sa-card-img,.sa-card-icon{margin-right:12px}.column .sa-card-img,.column .sa-card-icon{margin:0 0 12px;display:flex;justify-content:space-between}.sa-card-img img{height:auto;width:200px}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl"] }] }); }
+    tabChange(evt) {
+        this.tabChanged.emit(evt.target.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n  <div class=\"tabs\">\n    <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n      <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n        id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n      <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n        <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        {{item.tabName}}\n        <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n      </label>\n    </div>\n  </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n    <div class=\"sa-card-wrapper\" [ngClass]=\"column ? 'column' : ''\">\n        <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n            @if(avatar){\n            <img [src]=\"avatar\" />\n            }@else if(icon){\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n            }@else{\n            <ng-content select=\"sa-card-icon\"></ng-content>\n            }\n            @if(column){\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\n            }\n        </div>\n        <div class=\"sa-card-container\">\n            @if(title){\n            <div class=\"sa-card-title-container\">\n                <div class=\"sa-card-title\">{{title}}</div>\n                @if(chip){\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\"></sa-chip>\n                }\n                <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n            </div>\n            }\n            @if(body){\n            <div class=\"sa-card-body\">\n                {{body}}\n            </div>\n            }\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;padding:12px;background:var(--structural-white)}.sa-card-wrapper.column{flex-direction:column}.sa-card-img,.sa-card-icon{margin-right:12px}.column .sa-card-img,.column .sa-card-icon{margin:0 0 12px;display:flex;justify-content:space-between}.sa-card-img img{height:auto;width:200px}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: ['title']
-            }], chip: [{
-                type: Input,
-                args: ['chip']
-            }], body: [{
-                type: Input,
-                args: ['body']
-            }], avatar: [{
-                type: Input,
-                args: ['avatar']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
-            }], iconSize: [{
-                type: Input,
-                args: ['iconSize']
-            }], width: [{
-                type: Input,
-                args: ['width']
-            }], column: [{
-                type: Input,
-                args: ['column']
+            args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\n  <div class=\"tabs\">\n    <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n      <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n        id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n      <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n        <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        {{item.tabName}}\n        <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n        </div>\n        <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n      </label>\n    </div>\n  </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], defaultTab: [{
+                type: Input
+            }], tabChanged: [{
+                type: Output
             }] } });
 
-class CardIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardIconComponent, isStandalone: true, selector: "sa-card-icon", ngImport: i0, template: "<ng-content></ng-content>", styles: [""] }); }
+class ToastComponent {
+    constructor() {
+        this.finishPercentage = -1;
+        this.statusIcon = '';
+        this.filled = true;
+        this.width = '';
+        this.toastEvent = new EventEmitter();
+        this.firstButton = new EventEmitter();
+        this.secondButton = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.toastStyles = { backgroundColor: 'transparent', color: '', width: this.width + '%' };
+    }
+    ngOnChanges(changes) {
+        if (changes && (changes['status'] || changes['filled'])) {
+            this.statusIcon = toastInfo[this.status]?.icon;
+            this.toastStyles.backgroundColor = toastInfo[this.status]?.bgColor;
+            this.toastStyles.color = toastInfo[this.status]?.color;
+        }
+        if (changes && changes['width']) {
+            this.toastStyles.width = typeof this.width === 'number' ? this.width + '%' : this.width;
+        }
+        if (this.finishPercentage > 100)
+            this.finishPercentage = 100;
+    }
+    clicked(num) {
+        if (num == 0)
+            this.firstButton.emit();
+        else if (num == 1)
+            this.secondButton.emit();
+        else if (num == 2)
+            this.closed.emit();
+    }
+    closeToast() {
+        this.toastEvent.emit({
+            type: 'TOAST_CLOSED',
+            params: {}
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n      <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    @if(closable){\n    <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n    <sa-icon class=\"cross\" icon=\"closeOutlined\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n    }\n  </div>\n  <!-- <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div> -->\n\n  <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: CardIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-card-icon', standalone: true, imports: [], template: "<ng-content></ng-content>" }]
-        }] });
+            args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n      <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    @if(closable){\n    <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n    <sa-icon class=\"cross\" icon=\"closeOutlined\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n    }\n  </div>\n  <!-- <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div> -->\n\n  <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
+        }], propDecorators: { finishPercentage: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], subHeading: [{
+                type: Input
+            }], statusIcon: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], firstButtonName: [{
+                type: Input
+            }], secondButtonName: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], filled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], toastEvent: [{
+                type: Output
+            }], firstButton: [{
+                type: Output
+            }], secondButton: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+const toastInfo = {
+    'success': {
+        icon: 'checkCircleOutlined',
+        bgColor: '#EBF5E9',
+        color: '#246B16'
+    },
+    'failure': {
+        icon: 'infoCircleOutlined',
+        bgColor: '#F8E9E9',
+        color: '#861C15'
+    },
+    'caution': {
+        icon: 'infoTriangleOutlined',
+        bgColor: '',
+        color: ''
+    }
+};
 
-class CardFooterActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n    <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
+class ToolTipComponent {
+    constructor() {
+        this.toolTipSkipped = new EventEmitter();
+        this.toolTipSeen = new EventEmitter();
+        this.arrowIcon = "../assets/rightOutlined.svg";
+        this.pointer = "../assets/upwardTriangleFilled.svg";
+        this.msgInd = 0; // is the index of current message being displayed
+    }
+    updateMsgInd(k) {
+        this.msgInd += k;
+        if (this.msgInd < 0)
+            this.msgInd = 0;
+        if (this.msgInd > this.messages.length - 1) {
+            this.msgInd = this.messages.length - 1;
+            this.toolTipSeen.emit();
+        }
+    }
+    skipToolTip() {
+        this.toolTipSkipped.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n  <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n  <div class=\"tool-tip-horizontal\">\n    <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n    <div class=\"tool-tip\">\n      <div class=\"tool-tip-content\">\n        <div class=\"tool-tip-heading\">Heading</div>\n        <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n          {{msg}}\n        </div>\n      </div>\n      <div class=\"tool-tip-break\">\n      </div>\n      <div class=\"tool-tip-controls\">\n        <div class=\"tool-tip-navigate\">\n          <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n          {{msgInd+1}} of {{messages.length}}\n          <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n        </div>\n        <div class=\"tool-tip-control-buttons\">\n          <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n            state=\"default\"></sa-button>\n          <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n          </sa-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n  </div>\n  <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\n    <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
-        }] });
+            args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\n  <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n  <div class=\"tool-tip-horizontal\">\n    <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n    <div class=\"tool-tip\">\n      <div class=\"tool-tip-content\">\n        <div class=\"tool-tip-heading\">Heading</div>\n        <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n          {{msg}}\n        </div>\n      </div>\n      <div class=\"tool-tip-break\">\n      </div>\n      <div class=\"tool-tip-controls\">\n        <div class=\"tool-tip-navigate\">\n          <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n          {{msgInd+1}} of {{messages.length}}\n          <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n        </div>\n        <div class=\"tool-tip-control-buttons\">\n          <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n            state=\"default\"></sa-button>\n          <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n          </sa-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n  </div>\n  <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"] }]
+        }], propDecorators: { messages: [{
+                type: Input
+            }], pointerPosition: [{
+                type: Input
+            }], toolTipSkipped: [{
+                type: Output
+            }], toolTipSeen: [{
+                type: Output
+            }] } });
 
-class CardTitleActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardTitleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardTitleActionsComponent, isStandalone: true, selector: "sa-card-title-actions", ngImport: i0, template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }); }
+class TestLibraryService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardTitleActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-title-actions', standalone: true, imports: [], template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of component-library
  */
+// ... existing code ...
+// Components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, ButtonComponent, CardComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, LeftNavComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent };
+export { AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, ProgressBarComponent, RadioButtonComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent };
 //# sourceMappingURL=sarasanalytics-com-design-system.mjs.map