@sarasanalytics-com/design-system 0.0.9 → 0.0.10

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

@@ -0,0 +1,1274 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, inject, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { NgIf, NgStyle, CommonModule, NgFor } from '@angular/common';
+import * as i3$2 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i1 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$2 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 i1$3 from '@angular/router';
+
+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: TestLibraryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+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>
+  ` }]
+        }] });
+
+let nextId$4 = 0; // used to give unique ids to inputs used in html
+class ButtonComponent {
+    constructor() {
+        this.isSubmit = false;
+        this.onClickEvent = new EventEmitter();
+        this.onMouseInEvent = new EventEmitter();
+        this.onMouseOutEvent = new EventEmitter();
+        this.svgStyle = {};
+        this.eventEmitObject = {};
+        this.uuid = nextId$4++;
+    }
+    ngOnChanges() {
+        this.svgStyle = {
+            '-webkit-mask-image': `url(${this.ImagePath})`,
+            'mask-image': `url(${this.ImagePath})`,
+        };
+        this.eventEmitObject = {
+            id: this.id
+        };
+    }
+    buttonClicked(evt) {
+        if (this.state == "disabled")
+            return;
+        this.onClickEvent.emit({
+            ...this.eventEmitObject,
+            evt
+        });
+        if (this.href != "") {
+            if (this.hrefTarget == "blank")
+                window.open(this.href);
+            else if (this.hrefTarget == "self")
+                location.href = this.href;
+        }
+    }
+    mouseIn() {
+        if (this.state == "disabled")
+            return;
+        this.onMouseInEvent.emit();
+    }
+    mouseOut() {
+        if (this.state == "disabled")
+            return;
+        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", 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}}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\" (mouseleave)=\"mouseOut()\"\n  (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\" 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>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }); }
+}
+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}}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\" (mouseleave)=\"mouseOut()\"\n  (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\" 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>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], ImagePath: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], hrefTarget: [{
+                type: Input
+            }], isSubmit: [{
+                type: Input
+            }], onClickEvent: [{
+                type: Output
+            }], onMouseInEvent: [{
+                type: Output
+            }], onMouseOutEvent: [{
+                type: Output
+            }] } });
+
+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 = {};
+        this.uuid = nextId$3++;
+    }
+    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
+        });
+    }
+    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 = {};
+    }
+    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: 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);
+            }
+            else if (this.params.interactiveLinkTarget == "self") {
+                location.href = this.params.interactiveLink;
+            }
+        }
+        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 });
+    }
+    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);
+    }
+    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: 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", "isSubmit"], 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: GridCellComponent, 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
+            }] } });
+
+class HeaderComponent {
+    constructor() {
+        this.mainButtonClicked = new EventEmitter();
+        this.helperButtonClicked = new EventEmitter();
+    }
+    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: 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", "isSubmit"], 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: HeaderComponent, 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: [{
+                type: Input
+            }], headerName: [{
+                type: Input
+            }], chipConfig: [{
+                type: Input
+            }], buttonHelper: [{
+                type: Input
+            }], buttonMain: [{
+                type: Input
+            }], mainButtonClicked: [{
+                type: Output
+            }], helperButtonClicked: [{
+                type: Output
+            }] } });
+
+class IconService {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.path = '';
+    }
+    // getSvg(iconName: string): Observable<string> {
+    //   return this.http.get(`${this.path}${iconName}.svg`, { responseType: 'text' });
+    // }
+    getSvg(iconName) {
+        const iconPath = `${this.path}${iconName}`;
+        return this.sanitizer.bypassSecurityTrustResourceUrl(iconPath);
+    }
+    setIconPath(path) {
+        if (path)
+            this.path = path;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class IconComponent {
+    constructor() {
+        this.iconService = inject(IconService);
+        this.iconStyles = {
+            fontSize: '44px',
+            color: 'red'
+        };
+        console.log('icon comp constructor');
+    }
+    ngOnInit() {
+        console.log('icon comp');
+    }
+    ngOnChanges(changes) {
+        if (changes['icon']) {
+            if (this.icon) {
+                // Fetch sanitized URL for the SVG icon
+                this.svgIcon = this.iconService.getSvg(this.icon);
+                console.log('svg', this.icon, this.svgIcon);
+            }
+            else {
+                this.svgIcon = '';
+            }
+        }
+        if (changes['size'] || changes['color']) {
+            this.iconStyles.fontSize = this.size + 'px';
+            this.iconStyles.color = this.color;
+        }
+    }
+    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: "14.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span class=\"sa-icon\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.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: "<span class=\"sa-icon\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{
+                type: Input,
+                args: ['icon']
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }], color: [{
+                type: Input,
+                args: ['color']
+            }] } });
+
+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=\"32\"></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;width:max-content;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-16px, 16px);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{width:359px;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%}.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:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;color:var(--text-mediumemphasis, #697079)}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:flex-start;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "iconPosition", "href", "hrefTarget", "isSubmit"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["icon", "size", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, 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=\"32\"></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;width:max-content;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-16px, 16px);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{width:359px;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%}.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:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;color:var(--text-mediumemphasis, #697079)}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:flex-start;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;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}\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: 'checkmark',
+        bgColor: '#EBF5E9',
+        color: '#246B16'
+    },
+    'failure': {
+        icon: 'error-circle',
+        bgColor: '#F8E9E9',
+        color: '#861C15'
+    },
+    'causion': {
+        icon: 'warning',
+        bgColor: '',
+        color: ''
+    }
+};
+
+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.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;
+    }
+    shiftLabel(action) {
+        if (action == 'clicked')
+            this.startInd++;
+        if (action == 'cleared')
+            this.startInd = 0;
+        if (action == 'removed' && this.startInd > 0)
+            this.startInd--;
+    }
+    checkForZero(selected) {
+        this.topLabel = selected.length == 0 ? false : true;
+    }
+    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={{params.label}} bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\">\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>\n", 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{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={{params.label}} bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\">\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>\n", 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{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 = {};
+    }
+    // {
+    //   '-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;
+        }
+        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: 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: StepperComponent, 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: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], stepLabels: [{
+                type: Input
+            }], doneIcon: [{
+                type: Input
+            }], stepped: [{
+                type: Output
+            }] } });
+
+class ToolTipComponent {
+    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();
+    }
+    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", "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, 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
+            }] } });
+
+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());
+    }
+    // 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;
+            }
+        }
+    }
+    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();
+    }
+    previousClicked(mode) {
+        this.changeDate(mode, -1);
+    }
+    nextClicked(mode) {
+        this.changeDate(mode, 1);
+    }
+    changeView() {
+        this.calendar.currentView =
+            this.calendar.currentView == "month"
+                ? "year"
+                : this.calendar.currentView == "year"
+                    ? "multi-year"
+                    : "month";
+    }
+    presetChanged(evt) {
+        const newRange = this.findDate(evt.target.value);
+        this.calendar.activeDate = newRange.newStart;
+        this.picker.select(newRange.newStart);
+        this.picker.select(newRange.newEnd);
+    }
+    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;
+            }
+            default: {
+                newRange = {
+                    newStart: new Date(),
+                    newEnd: new Date(),
+                };
+            }
+        }
+        return newRange;
+    }
+    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);
+    }
+    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: 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;
+    }
+    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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, 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
+            }] } });
+
+let nextId = 0; // used to give unique ids to inputs used in html
+class TabsComponent {
+    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})`,
+            };
+        });
+    }
+    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: TabsComponent, 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: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], defaultTab: [{
+                type: Input
+            }], tabChanged: [{
+                type: Output
+            }] } });
+
+// import { AvatarComponent } from '../avatar/avatar.component';
+class LeftNavComponent {
+    constructor(route, router) {
+        this.route = route;
+        this.router = router;
+        this.clickEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        console.log(this.data.items);
+        if (!this.data.footerItems) {
+            this.data.footerItems = data.footerItems;
+        }
+        if (this.data?.items?.length) {
+            this.onNavItemClick(this.data.items[0], 0);
+        }
+    }
+    setItemActive(index) {
+        try {
+            if (this.activeItem) {
+                this.activeItem.active = false;
+            }
+            if (this.data?.items?.length) {
+                this.activeItem = this.data.items[index];
+                this.activeItem.active = true;
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+    onNavItemClick(item, index, event = null) {
+        console.log(item, index);
+        this.clickEvent.emit({
+            event,
+            type: 'NAV_ITEM_CLICK',
+            item
+        });
+        if (!item.disable && item.path) {
+            this.setItemActive(index);
+            this.router.navigate([item.path]);
+        }
+    }
+    onFooterItemClick(item, index, event = null) {
+        this.clickEvent.emit({
+            event,
+            type: 'FOOTER_ITEM_CLICK',
+            item
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i1$3.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: "click" }, 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}.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: ["icon", "size", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sa-left-nav', standalone: true, imports: [
+                        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}.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$3.ActivatedRoute }, { type: i1$3.Router }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], clickEvent: [{
+                type: Output,
+                args: ['click']
+            }] } });
+var ILeftNavTypes;
+(function (ILeftNavTypes) {
+})(ILeftNavTypes || (ILeftNavTypes = {}));
+const data = {
+    items: [{
+            title: 'Home',
+            icon: '',
+            disable: false,
+            tooltip: '',
+            relativePath: true,
+            path: 'home'
+        }, {
+            title: 'Pricing',
+            icon: '',
+            disable: true,
+            tooltip: '',
+            relativePath: true,
+            path: ''
+        }, {
+            title: '',
+            icon: '',
+            disable: true,
+            tooltip: '',
+            relativePath: true,
+            path: ''
+        }],
+    footerItems: [{
+            title: 'Help',
+            icon: 'chathelp',
+            disable: true,
+            tooltip: ''
+        }, {
+            title: 'Name',
+            disable: false,
+            tooltip: '',
+            type: 'AVATAR'
+        }, {
+            title: 'Chevron',
+            icon: 'doublechevron',
+            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;
+    };
+}
+/*
+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.suppressOnBlur = false;
+        this.predefinedValidators = {
+            email: [Validators.email, Validators.required],
+            password: [Validators.minLength(8), Validators.required],
+            tel: [Validators.pattern('^[0-9 +\\-()]*$')]
+        };
+    }
+    ngOnInit() {
+        this.inputVal = this.field.props['value'];
+        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) => {
+            // console.log(state, this.formControl.pending, this.formControl.valid);
+        });
+        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.dependent?.valueChanges.subscribe((val) => {
+                this.dependentVal = val.length ? val[0] : null;
+                this.formControl.reset();
+            });
+        }
+    }
+    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
+            }).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 = 'eye_filled';
+            }
+            else {
+                this.type = 'password';
+                this.icon.name = 'eye';
+            }
+            this.onInputFieldClick();
+        }
+    }
+    onFieldCallback(param) {
+        console.log(this.icon, param.icon);
+        this.icon = param.icon || this.icon;
+        this.checkValidity();
+    }
+    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\">\n    @if(!!inputVal.length && !!params?.placeholder){\n    <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n    }\n    <div class=\"sa-input-field\" [ngClass]=\"inputState\" (click)=\"onInputFieldClick($event)\">\n        <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n            [placeholder]=\"params?.placeholder || '' \" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\"\n            [(ngModel)]=\"inputVal\" #formInput />\n        @if(params?.type === 'password'){\n        <sa-icon icon=\"eye\" size=\"24\" (click)=\"inputIconClick()\"\n            [ngClass]=\"!icon.name || icon.name === 'eye' ? '' : 'hide'\"></sa-icon>\n        <sa-icon icon=\"eye_filled\" size=\"24\" (click)=\"inputIconClick()\"\n            [ngClass]=\"icon.name === 'eye_filled' ? '' : 'hide'\"></sa-icon>\n        } @else if(icon.name){\n        <sa-icon [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((inputState === 'invalid') || (params && params.supportText)){\n    <div class=\"support-label\" [ngClass]=\"inputState === 'invalid' ? inputState : '' \">\n        {{inputState === 'invalid' ? inputErrorText : params.supportText}}\n    </div>\n    }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled,[disabled]{border:1px solid var(--grey-50)!important}.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{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.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$1.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: ["icon", "size", "color"] }] }); }
+}
+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\">\n    @if(!!inputVal.length && !!params?.placeholder){\n    <span class=\"sa-input-tag\">{{params?.placeholder}}</span>\n    }\n    <div class=\"sa-input-field\" [ngClass]=\"inputState\" (click)=\"onInputFieldClick($event)\">\n        <input matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n            [placeholder]=\"params?.placeholder || '' \" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (input)=\"onInput($event)\"\n            [(ngModel)]=\"inputVal\" #formInput />\n        @if(params?.type === 'password'){\n        <sa-icon icon=\"eye\" size=\"24\" (click)=\"inputIconClick()\"\n            [ngClass]=\"!icon.name || icon.name === 'eye' ? '' : 'hide'\"></sa-icon>\n        <sa-icon icon=\"eye_filled\" size=\"24\" (click)=\"inputIconClick()\"\n            [ngClass]=\"icon.name === 'eye_filled' ? '' : 'hide'\"></sa-icon>\n        } @else if(icon.name){\n        <sa-icon [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((inputState === 'invalid') || (params && params.supportText)){\n    <div class=\"support-label\" [ngClass]=\"inputState === 'invalid' ? inputState : '' \">\n        {{inputState === 'invalid' ? inputErrorText : params.supportText}}\n    </div>\n    }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.disabled,[disabled]{border:1px solid var(--grey-50)!important}.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{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.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 CardComponent {
+    constructor() {
+        this.title = '';
+        this.chip = null;
+        this.body = '';
+        this.avatar = '';
+        this.icon = '';
+        this.column = false;
+        this.cardStyles = {};
+    }
+    ngOnChanges(changes) {
+        if (changes['width']?.currentValue) {
+            this.cardStyles['width'] = typeof changes['width']?.currentValue === 'string' ? changes['width']?.currentValue : changes['width']?.currentValue + '%';
+        }
+    }
+    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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: ["icon", "size", "color"] }] }); }
+}
+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], 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']
+            }] } });
+
+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 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 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"] }]
+        }] });
+
+/*
+ * Public API Surface of component-library
+ */
+
+/**
+ * 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 };
+//# sourceMappingURL=sarasanalytics-com-design-system.mjs.map