@sarasanalytics-com/design-system 0.0.41 → 0.0.43

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

@@ -1,1891 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, Injectable, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
-import * as i1 from '@angular/common';
-import { NgIf, CommonModule, NgStyle, NgFor } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { DomSanitizer } from '@angular/platform-browser';
-import * as i2$1 from '@angular/material/core';
-import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
-import { Subject, isObservable, of } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { MatButton } from '@angular/material/button';
-import * as i2 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import * as i2$2 from '@ngx-formly/core';
-import { FieldType, FormlyModule } from '@ngx-formly/core';
-import * as i1$2 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import { includes } from 'lodash';
-import { MatInputModule } from '@angular/material/input';
-import * as i1$3 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$2 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import * as i3$3 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$4 from '@angular/router';
-import * as i1$5 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$6 from '@angular/material/radio';
-import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
-
-class AvatarComponent {
-    constructor() {
-        this.onClickEvent = new EventEmitter;
-        this.onMouseInEvent = new EventEmitter;
-        this.onMouseOutEvent = new EventEmitter;
-        this.eventEmitObject = {};
-    }
-    ngOnChanges() {
-        this.eventEmitObject = {
-            id: this.id
-        };
-    }
-    avatarClicked(evt) {
-        this.onClickEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
-    }
-    mouseEnter(evt) {
-        this.onMouseInEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
-    }
-    mouseLeave(evt) {
-        this.onMouseOutEvent.emit({
-            ...this.eventEmitObject,
-            evt
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\">\n  <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n  <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\">\n  <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n  <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], imagePath: [{
-                type: Input
-            }], altText: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], onClickEvent: [{
-                type: Output
-            }], onMouseInEvent: [{
-                type: Output
-            }], onMouseOutEvent: [{
-                type: Output
-            }] } });
-
-class SpinnerComponent {
-    constructor() {
-        this.default = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpinnerComponent, isStandalone: true, selector: "sa-spinner", inputs: { default: "default", size: "size" }, ngImport: i0, template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-spinner', standalone: true, imports: [CommonModule], template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"] }]
-        }], propDecorators: { default: [{
-                type: Input,
-                args: ['default']
-            }], size: [{
-                type: Input,
-                args: ['size']
-            }] } });
-
-class IconService {
-    constructor() {
-        this.http = inject(HttpClient);
-        this.path = 'assets/';
-    }
-    getSvg(iconName, customPath) {
-        const isUrl = /^https?:\/\//.test(iconName);
-        const customSvgUrl = customPath ? customPath + (iconName ? iconName + '.svg' : '') : '';
-        const svgUrl = isUrl ? iconName : `${this.path}${iconName}.svg`;
-        return this.http.get(customSvgUrl || svgUrl, { headers: { 'skip': 'true' }, responseType: 'text' });
-    }
-    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: [], 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: () => [] });
-
-class IconComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.iconService = inject(IconService);
-        this.sanitizer = inject(DomSanitizer);
-        this.iconPath = "";
-        this.iconUrl = "";
-        this.customClass = "";
-        this.iconStyles = {
-        // fontSize: '44px',
-        // color: 'red'
-        };
-    }
-    ngOnInit() {
-    }
-    ngOnChanges(changes) {
-        if (changes['iconPath'] && !!this.iconPath.trim()) {
-            this.iconService.getSvg(this.icon || "", this.iconPath).subscribe((svg) => {
-                this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
-            });
-        }
-        if (changes['icon'] || changes['iconUrl']) {
-            const icon = this.icon || this.iconUrl;
-            if (icon) {
-                this.iconService.getSvg(icon).subscribe((svg) => {
-                    this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(svg);
-                    this.cdr.detectChanges();
-                });
-            }
-            else {
-                this.svgIcon = '';
-            }
-        }
-        if (changes['size'] || changes['color']) {
-            this.iconStyles.fontSize = this.size + 'px';
-            this.iconStyles.width = this.iconUrl ? "fit-content" : '1em';
-            this.iconStyles.height = this.iconUrl ? "fit-content" : '1em';
-            this.iconStyles.color = this.color;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n    'url-icon': iconUrl\n  }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n    'url-icon': iconUrl\n  }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
-                type: Input,
-                args: ['img']
-            }], icon: [{
-                type: Input
-            }], size: [{
-                type: Input,
-                args: ['size']
-            }], color: [{
-                type: Input,
-                args: ['color']
-            }], iconPath: [{
-                type: Input,
-                args: ['iconPath']
-            }], iconUrl: [{
-                type: Input
-            }], customClass: [{
-                type: Input,
-                args: ['customClass']
-            }] } });
-
-let nextId$4 = 0; // used to give unique ids to inputs used in html
-class ButtonComponent {
-    constructor() {
-        this.isSubmit = false;
-        this.showSpinner = false;
-        this.onClickEvent = new EventEmitter();
-        this.onMouseInEvent = new EventEmitter();
-        this.onMouseOutEvent = new EventEmitter();
-        this.svgStyle = {};
-        this.eventEmitObject = {};
-        this.uuid = nextId$4++;
-    }
-    ngOnChanges(changes) {
-        this.svgStyle = {
-            '-webkit-mask-image': `url(${this.ImagePath})`,
-            'mask-image': `url(${this.ImagePath})`,
-        };
-        this.eventEmitObject = {
-            id: this.id
-        };
-        if (changes && changes['width'] && changes['width'].currentValue) {
-            console.log(this.width);
-        }
-    }
-    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: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n  [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n  (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n  class=\"sa-button {{state}} {{type}} {{size}}\">\n  @if(showSpinner){\n  <sa-spinner [default]=\"true\"></sa-spinner>\n  }\n  @if(ImagePath) {\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  {{text}}\n  <div class=\"svg-icon\" [style]=\"svgStyle\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n  } @else if (icon) {\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  {{text}}\n  <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n    [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n  } @else {\n  {{text}}\n  }\n</label>", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], ImagePath: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], href: [{
-                type: Input
-            }], hrefTarget: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], isSubmit: [{
-                type: Input
-            }], buttonIconSize: [{
-                type: Input
-            }], showSpinner: [{
-                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 CalendarHeaderComponent {
-    constructor(calendar, // calendar instance of picker
-    dateAdapter, // native or moment date adapter
-    picker, dateFormats, // for formatting
-    cdr) {
-        this.calendar = calendar;
-        this.dateAdapter = dateAdapter;
-        this.picker = picker;
-        this.dateFormats = dateFormats;
-        this.uuid = nextId$3++;
-        this.destroy$ = new Subject();
-        this.selectedPreset = "Custom";
-        this.presets = [
-            "This Quarter",
-            "Last Quarter",
-            "Last 6 Months",
-            "This Year",
-            "Last Year",
-            "Custom"
-        ];
-        this.today = new Date();
-        // make sure your header stays in sync with the calendar:
-        calendar.stateChanges
-            .pipe(takeUntil(this.destroy$)) // unsubscribe when destroyed
-            .subscribe(() => cdr.markForCheck());
-    }
-    // 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.MatCalendar }, { token: i2$1.DateAdapter }, { token: i2.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n  <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n    <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n      for=\"preset-radio-{{i}}\">{{preset}}</label>\n    <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n      id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n  </div>\n</div>\n\n<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked('month')\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n  <button mat-icon-button (click)=\"nextClicked('month')\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: 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.MatCalendar }, { type: i2$1.DateAdapter }, { type: i2.MatDateRangePicker }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DATE_FORMATS]
-                }] }, { type: i0.ChangeDetectorRef }] });
-
-class CardBodyComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardBodyComponent, isStandalone: true, selector: "sa-card-custom-body", ngImport: i0, template: "<div class=\"sa-card-body\"><ng-content></ng-content></div>", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-custom-body', standalone: true, imports: [], template: "<div class=\"sa-card-body\"><ng-content></ng-content></div>" }]
-        }] });
-
-class CardCustomHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardCustomHeaderComponent, isStandalone: true, selector: "sa-card-title-header", ngImport: i0, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-title-header', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}\n"] }]
-        }] });
-
-class CardFooterActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n    <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\n    <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
-        }] });
-
-class CardIconComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardIconComponent, isStandalone: true, selector: "sa-card-icon", ngImport: i0, template: "<ng-content></ng-content>", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-icon', standalone: true, imports: [], template: "<ng-content></ng-content>" }]
-        }] });
-
-class CardTitleActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardTitleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardTitleActionsComponent, isStandalone: true, selector: "sa-card-title-actions", ngImport: i0, template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardTitleActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-title-actions', standalone: true, imports: [], template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }]
-        }] });
-
-let nextId$2 = 0; // used to give unique ids to inputs used in html
-class ChipsComponent {
-    constructor() {
-        this.onClickEvent = new EventEmitter();
-        this.svgStyle = {};
-        this.secondSvgStyle = {};
-        this.eventEmitObject = {};
-        this.uuid = nextId$2++;
-    }
-    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 CardComponent {
-    constructor() {
-        this.title = '';
-        this.showCardHeader = false;
-        this.showCardBody = false;
-        this.showHeaderBodyDivider = false;
-        this.showCustomCardBody = false;
-        this.customWrapperClass = '';
-        this.chip = null;
-        this.body = '';
-        this.avatar = '';
-        this.image = '';
-        this.imageWidth = '';
-        this.icon = '';
-        this.subtitle = '';
-        this.logoIcon = '';
-        this.column = false;
-        this.cardStyles = {};
-    }
-    ngOnChanges(changes) {
-        if (changes['width']?.currentValue || changes['height']?.currentValue) {
-            this.cardStyles['width'] = typeof changes['width']?.currentValue === 'string' ? changes['width']?.currentValue : changes['width']?.currentValue + '%';
-            this.cardStyles['height'] = typeof changes['height']?.currentValue === 'string' ? changes['height']?.currentValue : changes['height']?.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", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n        <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\n            @if(avatar){\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n            <!-- <img [src]=\"avatar\" /> -->\n            }@else if(image){\n            <img [src]=\"image\" [width]=\"imageWidth\" />\n            }@else if(icon){\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n            }@else{\n            <ng-content select=\"sa-card-icon\"></ng-content>\n            }\n            @if(column){\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\n            }\n        </div>\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n            @if(showCardHeader){\n            <ng-content select=\"sa-card-title-header\"></ng-content>\n            @if (showHeaderBodyDivider && body) {\n            <div class=\"custom-divider\"></div>\n            }\n            }\n            @else if(title){\n            <div class=\"sa-card-title-container\">\n                <div class=\"sa-card-title\">{{title}}</div>\n                @if(chip){\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\n                }\n                <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n            </div>\n            }\n            @if (showCustomCardBody) {\n            <ng-content select=\"sa-card-custom-body\"></ng-content>\n            }\n            @if(showCardBody && body){\n            <div class=\"sa-card-body\">\n                {{body}}\n            </div>\n            }\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:inherit;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:0}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n        <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\n            @if(avatar){\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n            <!-- <img [src]=\"avatar\" /> -->\n            }@else if(image){\n            <img [src]=\"image\" [width]=\"imageWidth\" />\n            }@else if(icon){\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n            }@else{\n            <ng-content select=\"sa-card-icon\"></ng-content>\n            }\n            @if(column){\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\n            }\n        </div>\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n            @if(showCardHeader){\n            <ng-content select=\"sa-card-title-header\"></ng-content>\n            @if (showHeaderBodyDivider && body) {\n            <div class=\"custom-divider\"></div>\n            }\n            }\n            @else if(title){\n            <div class=\"sa-card-title-container\">\n                <div class=\"sa-card-title\">{{title}}</div>\n                @if(chip){\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\n                }\n                <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n            </div>\n            }\n            @if (showCustomCardBody) {\n            <ng-content select=\"sa-card-custom-body\"></ng-content>\n            }\n            @if(showCardBody && body){\n            <div class=\"sa-card-body\">\n                {{body}}\n            </div>\n            }\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:inherit;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:0}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input,
-                args: ['title']
-            }], showCardHeader: [{
-                type: Input,
-                args: ['showCardHeader']
-            }], showCardBody: [{
-                type: Input,
-                args: ['showCardBody']
-            }], showHeaderBodyDivider: [{
-                type: Input,
-                args: ['showHeaderBodyDivider']
-            }], showCustomCardBody: [{
-                type: Input,
-                args: ['showCustomCardBody']
-            }], customWrapperClass: [{
-                type: Input,
-                args: ['customWrapperClass']
-            }], chip: [{
-                type: Input,
-                args: ['chip']
-            }], body: [{
-                type: Input,
-                args: ['body']
-            }], avatar: [{
-                type: Input,
-                args: ['avatar']
-            }], image: [{
-                type: Input,
-                args: ['image']
-            }], imageWidth: [{
-                type: Input,
-                args: ['imageWidth']
-            }], avatarSize: [{
-                type: Input,
-                args: ['avatarSize']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
-            }], iconSize: [{
-                type: Input,
-                args: ['iconSize']
-            }], subtitle: [{
-                type: Input,
-                args: ['subtitle']
-            }], logoIcon: [{
-                type: Input,
-                args: ['logoIcon']
-            }], width: [{
-                type: Input,
-                args: ['width']
-            }], height: [{
-                type: Input,
-                args: ['height']
-            }], column: [{
-                type: Input,
-                args: ['column']
-            }] } });
-
-class ListComponent {
-    constructor() {
-        this.listData = [];
-        this.featuresIcon = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\n    <div class=\"feature-item\" *ngFor=\"let item of listData\">\n        <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n            <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n        </div>\n        <div>\n            <span class=\"feature-text\">{{ item?.text }}</span>\n        </div>\n    </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\n    <div class=\"feature-item\" *ngFor=\"let item of listData\">\n        <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n            <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n        </div>\n        <div>\n            <span class=\"feature-text\">{{ item?.text }}</span>\n        </div>\n    </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"] }]
-        }], propDecorators: { listData: [{
-                type: Input
-            }], featuresIcon: [{
-                type: Input,
-                args: ['featuresIcon']
-            }] } });
-
-class CheckboxCardComponent extends FieldType {
-    ngOnInit() {
-        // console.log(this)
-    }
-    onCardClick(event) {
-        this.props['isCardSelected'] = !this.props['isCardSelected'];
-        this.formControl.setValue(!this.formControl.value);
-    }
-    onCheckboxClick(event) {
-        event.stopPropagation();
-    }
-    get formControl() {
-        return super.formControl;
-    }
-    actionHandler(button) {
-        this.field.props['onButtonClick'](this.field);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n    (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n    [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n    [style.width]=\"props['width']\">\n    <sa-card-title-header>\n        <div class=\"sa-card-custom-header-container\">\n            <div class=\"sa-card-title-logo-container\">\n                <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n                        [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n                </div>\n                <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n            </div>\n            <div class=\"sa-card-titleIcon\">\n                <sa-card-title-actions>\n                    <div class=\"sa-document-action\">\n                        @if(props['disabled']){\n                        <sa-icon icon=\"disabledCheckboxFilled\"\n                            customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n                        }@else{\n                        <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n                            (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n                        }\n                    </div>\n                </sa-card-title-actions>\n            </div>\n        </div>\n    </sa-card-title-header>\n    <sa-card-custom-body>\n        @if(props['listItems']){\n        <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n        }@else if(props['showButtons']){\n        <div class=\"buttons-container\">\n            <ng-container *ngFor=\"let button of props['showButtons']\">\n                <ng-container *ngIf=\"button.type === 'submit'\">\n                    <div class=\"button-content\">\n                        @if(props['description']){\n                        @if(props['descriptionIcon']){\n                        <div class=\"description-container\">\n                            <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n                                class=\"description-icon\"></sa-icon>\n                            <span class=\"description-style\">{{props['description']}}</span>\n                        </div>\n                        }\n                        }\n                        <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n                            [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n                            [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n                            [buttonIconSize]=\"button.iconSize\"></sa-button>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n        }\n    </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n    (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n    [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n    [style.width]=\"props['width']\">\n    <sa-card-title-header>\n        <div class=\"sa-card-custom-header-container\">\n            <div class=\"sa-card-title-logo-container\">\n                <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n                        [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n                </div>\n                <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n            </div>\n            <div class=\"sa-card-titleIcon\">\n                <sa-card-title-actions>\n                    <div class=\"sa-document-action\">\n                        @if(props['disabled']){\n                        <sa-icon icon=\"disabledCheckboxFilled\"\n                            customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n                        }@else{\n                        <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n                            (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n                        }\n                    </div>\n                </sa-card-title-actions>\n            </div>\n        </div>\n    </sa-card-title-header>\n    <sa-card-custom-body>\n        @if(props['listItems']){\n        <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n        }@else if(props['showButtons']){\n        <div class=\"buttons-container\">\n            <ng-container *ngFor=\"let button of props['showButtons']\">\n                <ng-container *ngIf=\"button.type === 'submit'\">\n                    <div class=\"button-content\">\n                        @if(props['description']){\n                        @if(props['descriptionIcon']){\n                        <div class=\"description-container\">\n                            <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n                                class=\"description-icon\"></sa-icon>\n                            <span class=\"description-style\">{{props['description']}}</span>\n                        </div>\n                        }\n                        }\n                        <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n                            [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n                            [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n                            [buttonIconSize]=\"button.iconSize\"></sa-button>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n        }\n    </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"] }]
-        }] });
-
-class GuideCardComponent {
-    constructor() {
-        this.title = '';
-        this.steps = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps" }, ngImport: i0, template: "<div class=\"guide-container\">\n    <div class=\"guide-header\">\n        <p class=\"guide-header-title\">{{ title }}</p>\n    </div>\n    <div class=\"guide-content\">\n        @for (step of steps; track step; let last = $last) {\n        <div class=\"step\">\n            <div class=\"step-indicator\">\n                <div class=\"step-circle\"></div>\n\n                @if (!last) {\n                <div class=\"step-line\"></div>\n                }\n            </div>\n            <div class=\"step-content\">\n                <p class=\"step-title\">{{ step.title }}</p>\n                @if (step?.description) {\n                <p class=\"step-description\">{{ step.description }}</p>\n                }\n            </div>\n        </div>\n        }\n    </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}\n"], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-guide-card', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n    <div class=\"guide-header\">\n        <p class=\"guide-header-title\">{{ title }}</p>\n    </div>\n    <div class=\"guide-content\">\n        @for (step of steps; track step; let last = $last) {\n        <div class=\"step\">\n            <div class=\"step-indicator\">\n                <div class=\"step-circle\"></div>\n\n                @if (!last) {\n                <div class=\"step-line\"></div>\n                }\n            </div>\n            <div class=\"step-content\">\n                <p class=\"step-title\">{{ step.title }}</p>\n                @if (step?.description) {\n                <p class=\"step-description\">{{ step.description }}</p>\n                }\n            </div>\n        </div>\n        }\n    </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], steps: [{
-                type: Input
-            }] } });
-
-class CardCarouselComponent {
-    constructor() {
-        this.cards = [];
-        this.interval = 5000;
-        this.autoPlay = true;
-        this.showNavigationArrows = true;
-        this.showIndicators = true;
-        this.showBrandFooter = true;
-        this.visibleLogos = [];
-        this.currentIndex = 0;
-    }
-    ngOnInit() {
-        this.updateVisibleLogos();
-        if (this.autoPlay) {
-            this.startTimer();
-        }
-    }
-    ngOnDestroy() {
-        this.stopTimer();
-    }
-    startTimer() {
-        this.stopTimer();
-        this.timer = setInterval(() => {
-            this.next();
-        }, this.interval);
-    }
-    stopTimer() {
-        if (this.timer) {
-            clearInterval(this.timer);
-        }
-    }
-    resetTimer() {
-        clearInterval(this.timer);
-        if (this.autoPlay) {
-            this.startTimer();
-        }
-    }
-    selectCard(index) {
-        this.currentIndex = index;
-        this.resetTimer();
-        this.updateVisibleLogos();
-    }
-    next() {
-        this.currentIndex = (this.currentIndex + 1) % this.cards.length;
-        this.resetTimer();
-        this.updateVisibleLogos();
-    }
-    prev() {
-        this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
-        this.resetTimer();
-        this.updateVisibleLogos();
-    }
-    updateVisibleLogos() {
-        this.visibleLogos = [];
-        for (let i = -1; i <= 4; i++) {
-            const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
-            this.visibleLogos.push({
-                ...this.cards[index],
-                index: index
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n    <div class=\"carousel-top-wrapper\">\n        <div class=\"controls\">\n            @if (showIndicators) {\n            <div class=\"dots\">\n                @for (card of cards; track card.id; let i = $index) {\n                <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n                }\n            </div>\n            }\n            @if (showNavigationArrows) {\n            <div class=\"arrow-controls\">\n                <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n                <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n            </div>\n            }\n        </div>\n\n        <div class=\"card-container\">\n            <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n                [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\"\n                [showHeaderBodyDivider]=\"true\">\n                <sa-card-title-header>\n                    <div class=\"sa-card-custom-header-container\">\n                        <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n                        <div class=\"sa-card-title-subtitle-container\">\n                            <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n                            <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n                        </div>\n                        <div class=\"sa-card-titleIcon\">\n                            <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n                        </div>\n                    </div>\n                </sa-card-title-header>\n            </sa-card>\n        </div>\n    </div>\n\n    @if (showBrandFooter) {\n    <div class=\"brand-logos-container\">\n        <div class=\"brand-logos\">\n            @for (logo of visibleLogos; track $index) {\n            <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n                [customClass]=\"'logo-style'\">\n            </sa-icon>\n            }\n        </div>\n    </div>\n    }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n    <div class=\"carousel-top-wrapper\">\n        <div class=\"controls\">\n            @if (showIndicators) {\n            <div class=\"dots\">\n                @for (card of cards; track card.id; let i = $index) {\n                <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n                }\n            </div>\n            }\n            @if (showNavigationArrows) {\n            <div class=\"arrow-controls\">\n                <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n                <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n            </div>\n            }\n        </div>\n\n        <div class=\"card-container\">\n            <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n                [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\"\n                [showHeaderBodyDivider]=\"true\">\n                <sa-card-title-header>\n                    <div class=\"sa-card-custom-header-container\">\n                        <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n                        <div class=\"sa-card-title-subtitle-container\">\n                            <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n                            <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n                        </div>\n                        <div class=\"sa-card-titleIcon\">\n                            <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n                        </div>\n                    </div>\n                </sa-card-title-header>\n            </sa-card>\n        </div>\n    </div>\n\n    @if (showBrandFooter) {\n    <div class=\"brand-logos-container\">\n        <div class=\"brand-logos\">\n            @for (logo of visibleLogos; track $index) {\n            <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n                [customClass]=\"'logo-style'\">\n            </sa-icon>\n            }\n        </div>\n    </div>\n    }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
-        }], propDecorators: { cards: [{
-                type: Input
-            }], interval: [{
-                type: Input
-            }], autoPlay: [{
-                type: Input
-            }], showNavigationArrows: [{
-                type: Input
-            }], showIndicators: [{
-                type: Input
-            }], showBrandFooter: [{
-                type: Input
-            }] } });
-
-class CheckboxComponent extends FieldType {
-    toggleSelection(option) {
-        const selected = this.formControl.value || [];
-        const index = selected.indexOf(option.value);
-        if (index === -1) {
-            selected.push(option.value);
-        }
-        else {
-            selected.splice(index, 1);
-        }
-        this.formControl.setValue([...selected]);
-    }
-    // Checks if an option is selected
-    isSelected(option) {
-        return includes((this.formControl.value || []), option.value);
-    }
-    get options$() {
-        const options = this.props?.options;
-        return isObservable(options) ? options : of(options || []);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\n    <div class=\"title-container\">\n        @if(props['label']){\n        <div class=\"form-field-title\">\n            <span>{{ props['label'] }}</span>\n        </div>\n        }\n        @if(props['description']){\n        <div class=\"form-field-description\">\n            <span>{{ props['description'] }}</span>\n        </div>\n        }\n    </div>\n    <div class=\"form-field\">\n        <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n            <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n                (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n                {{ option.label }}\n            </mat-chip-option>\n        </mat-chip-listbox>\n    </div>\n    @if(props['helpText']){\n    <div class=\"form-field-helpText\">\n        <span>{{ props['helpText'] }}</span>\n    </div>\n    }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.title-container,.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n    <div class=\"title-container\">\n        @if(props['label']){\n        <div class=\"form-field-title\">\n            <span>{{ props['label'] }}</span>\n        </div>\n        }\n        @if(props['description']){\n        <div class=\"form-field-description\">\n            <span>{{ props['description'] }}</span>\n        </div>\n        }\n    </div>\n    <div class=\"form-field\">\n        <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n            <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n                (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n                {{ option.label }}\n            </mat-chip-option>\n        </mat-chip-listbox>\n    </div>\n    @if(props['helpText']){\n    <div class=\"form-field-helpText\">\n        <span>{{ props['helpText'] }}</span>\n    </div>\n    }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.title-container,.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
-        }] });
-
-class TestLibraryComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
-    <p>
-      component-library works!
-    </p>
-  `, isInline: true, styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
-    <p>
-      component-library works!
-    </p>
-  ` }]
-        }] });
-
-class DatepickerComponent extends FieldType {
-    constructor() {
-        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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: 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
-            }] } });
-
-function phoneNumberValidator(dependent) {
-    return (control) => {
-        const dependentFormControl = dependent ? control.parent?.get(dependent) : null;
-        if (dependentFormControl && !!dependentFormControl.value?.length) {
-            console.log('validator', dependentFormControl.value);
-            if (dependentFormControl.value[0].id === 0) {
-                if (!/^\+1[2-9]\d{2}[2-9]\d{6}$/.test(control.value)) {
-                    return { invalid: 'invalid phone number' };
-                }
-            }
-        }
-        return null;
-    };
-}
-const customEmailValidator = (control) => {
-    const email = control.value;
-    // Replace the regular expression with the pattern you want to use.
-    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
-    if (emailPattern.test(email) && isWorkEmail(email)) {
-        return null; // Valid email
-    }
-    else {
-        return {
-            invalid: 'Please use a work email; personal emails (e.g., @gmail, @outlook) are not accepted.',
-        }; // Invalid email
-    }
-};
-const isWorkEmail = (email) => {
-    const invalidEmailHosts = ['gmail', 'yahoo', 'hotmail'];
-    if (email) {
-        let [userName, domainName] = email.split('@');
-        for (let i = 0; i < invalidEmailHosts.length; i++) {
-            let re = new RegExp(`.*${invalidEmailHosts[i]}\..*`);
-            if (re.test(domainName)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    return false;
-};
-/*
-export function workEmailValidation(): AsyncValidatorFn {
-    return (control: AbstractControl): Observable<ValidationErrors | null> => {
-        if (!control.value) {
-            return of(null); // No value to validate
-        }
-
-        !control.pending && control.markAsPending();
-        // !control.touched && control.markAsTouched();
-        // return of({ invalid: 'Enter your work email' });
-        return of(null);
-        return new Observable((ob) => {
-            setTimeout(() => {
-                if (control.value === 'sairaj@gmail.com')
-                    return ob.next(null)
-                return ob.next({ invalid: 'This is not a workemail' });
-            }, 500)
-        });
-
-        return of(control.value).pipe(
-            delay(500), // Simulate network delay
-
-            map(value => {
-                return of({ invalid: 'This is not a workemail' })//existingUsernames.includes(username) ? { usernameTaken: true } : null;
-            })
-            // catchError(() => of(null)) // Handle any errors
-        );
-    };
-}*/
-function getValidationMessage(errors) {
-    if (errors) {
-        if (errors['minlength']) {
-            return `Minimum ${errors['minlength']['requiredLength']} characters required`;
-        }
-        else if (errors['maxlength']) {
-            return `Maximum of ${errors['maxlength']['requiredLength']} characters accepted`;
-        }
-        else if (errors['required']) {
-            return 'Input cannot be empty';
-        }
-        else if (errors['invalid']) {
-            return errors['invalid'];
-        }
-        else if (errors['email']) {
-            return 'Enter a valid email';
-        }
-        else if (errors['pattern']) {
-            return 'Enter a valid phone number';
-        }
-        else {
-            return 'Invalid input';
-        }
-    }
-    return 'Invalid input';
-}
-
-class FormInputComponent extends FieldType {
-    constructor() {
-        super();
-        this.inputState = 'idle';
-        this.inputVal = '';
-        this.dependentVal = null;
-        // dynamicIcon: DynamicIcon | null;
-        // icon: IInputIcon | null;
-        this.type = '';
-        this.inputErrorText = 'invalid input';
-        this.showEmailIcon = false;
-        this.disabled = false;
-        this.suppressOnBlur = false;
-        this.predefinedValidators = {
-            email: [Validators.email, Validators.required],
-            password: [Validators.required],
-            tel: [Validators.pattern('^[0-9 +\\-()]*$')],
-        };
-    }
-    ngOnInit() {
-        this.inputVal = this.field.props['value'] || this.model[this.key] || '';
-        this.disabled = this.field.props.disabled || false;
-        this.formControl?.setValue(this.inputVal);
-        this.params = this.field.props['params'];
-        this.icon = this.field.props['icon'] || {};
-        this.type = this.params?.type || '';
-        // this.dynamicIcon = this.field.props['dynamicIcon'];
-        this.setValidators();
-        this.setDependents();
-        this.formControl.statusChanges.subscribe((state) => {
-            if (this.type === 'email') {
-                if (!!this.inputVal && !this.formControl.touched) {
-                    this.formControl.markAsTouched();
-                }
-                this.showEmailIcon =
-                    state === 'VALID' ||
-                        (state === 'INVALID' &&
-                            this.formControl.hasError('invalid') &&
-                            !!this.formControl.value);
-            }
-        });
-        this.formControl.valueChanges.subscribe((val) => {
-            this.formInput.nativeElement.value = val;
-        });
-    }
-    setValidators() {
-        this.validators = this.params?.validators || [];
-        this.asyncValidators = this.params?.asyncValidators || [];
-        this.formControl?.setValidators([
-            ...(this.type ? this.predefinedValidators[this.type] || [] : []),
-            ...this.validators,
-        ]);
-        if (this.asyncValidators)
-            this.formControl?.setAsyncValidators(this.asyncValidators);
-    }
-    /*
-      Assuming dependent field is a single select dropdown
-    */
-    setDependents() {
-        if (this.params?.dependent) {
-            this.dependent = this.form.get([this.params?.dependent]);
-            this.dependentVal = this.getDependentVal(this.dependent.value);
-            if (this.type === 'tel') {
-                this.pretext = this.dependentVal?.dial_code;
-            }
-            this.dependent?.valueChanges.subscribe((val) => {
-                this.dependentVal = this.getDependentVal(val);
-                this.formControl.reset();
-                this.formControl.setValue(this.inputVal);
-                if (this.type === 'tel') {
-                    this.pretext = this.dependentVal?.dial_code;
-                }
-            });
-        }
-    }
-    getDependentVal(value) {
-        let dependentValue;
-        if (Array.isArray(value)) {
-            dependentValue = value.length ? value[0] : null;
-        }
-        else {
-            dependentValue = value;
-        }
-        return dependentValue;
-    }
-    checkValidity(defaultInputState = 'focus') {
-        if (this.formControl &&
-            !this.formControl.valid &&
-            this.formControl.touched &&
-            !this.formControl.pending) {
-            this.inputState = 'invalid';
-            this.inputErrorText =
-                getValidationMessage(this.formControl.errors) || 'invalid input';
-        }
-        else {
-            this.inputState = defaultInputState;
-        }
-    }
-    onFocus() {
-        if (this.formControl.valid)
-            this.inputState = 'focus';
-    }
-    onBlur() {
-        setTimeout(() => {
-            if (!this.suppressOnBlur) {
-                this.formControl.markAsTouched();
-                this.checkValidity('idle');
-            }
-            this.suppressOnBlur = false;
-        }, 200);
-    }
-    onInput(event) {
-        if (this.params?.type === 'tel') {
-            this.inputVal = this.inputVal.replace(/[^0-9()+\- ]/g, '');
-            this.inputVal = this.hyphenatePhoneNumber();
-        }
-        this.formControl?.setValue(this.inputVal);
-        this.checkValidity();
-        /*if (this.params?.eventListener) {
-          this.params?.eventListener({
-            type: IInputEventType.INPUT_CHANGE,
-            value: this.inputVal,
-            formControl: this.formControl
-          } as IInputEvent).then(this.onFieldCallback.bind(this));
-        }*/
-    }
-    hyphenatePhoneNumber() {
-        let newStr = '';
-        let i = 0;
-        let hyphenatedCount = 1;
-        const value = this.inputVal.replaceAll('-', '');
-        for (; i < value.length; i++) {
-            newStr = newStr + value.charAt(i);
-            if (!(hyphenatedCount % 3)) {
-                if (!((i + 1) % 10)) {
-                    newStr = newStr + '-';
-                    hyphenatedCount++;
-                }
-            }
-            else if (!((i + 1 - Math.floor(hyphenatedCount / 3)) % 3) &&
-                i + 1 < value.length) {
-                newStr = newStr + '-';
-                hyphenatedCount++;
-            }
-        }
-        return newStr;
-    }
-    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 = 'eyeOff';
-            }
-            else {
-                this.type = 'password';
-                this.icon.name = 'eyeOutlined';
-            }
-            this.onInputFieldClick();
-        }
-    }
-    /*onFieldCallback(param: IInputParam) {
-      this.icon = param.icon || this.icon;
-      this.checkValidity();
-    }*/
-    getFormSupportText() {
-        if (this.formControl.invalid && this.formControl.touched) {
-            return getValidationMessage(this.formControl.errors) || 'invalid input';
-        }
-        else {
-            return this.params?.supportText || '';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container\">\n    @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n        <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n            <h2 class=\"sa-input-big-label\">\n                {{props?.['bigLabel']}}\n            </h2>\n            <p class=\"sa-input-big-description\">\n                {{props?.['bigDescription']}}\n            </p>\n        </div>\n    }\n    <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n        @if(pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))){\n        <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n        }\n        <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n            (click)=\"onInputFieldClick($event)\">\n            @if(pretext){\n            <div class=\"sa-input-pretext\">\n                {{pretext}}\n            </div>\n            }\n    \n            <input\n                [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n                matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n                [disabled]=\"field.props.disabled || false\"\n                [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n                (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n    \n            @if(params?.type === 'password'){\n            <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n                [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n            <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n                [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n            }@else if(params?.type === 'email' && icon.show){\n            <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n                (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n            }\n            @else if(icon.name){\n            <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n                [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n            }\n    \n    \n            <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n        </div>\n        @if((!formControl.valid) || (params?.supportText)){\n        <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n            <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n            {{getFormSupportText()}}\n        </div>\n        }\n    </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.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 sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-input', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        FormlyModule,
-                        IconComponent,
-                    ], template: "<div class=\"sa-input-container\">\n    @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n        <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n            <h2 class=\"sa-input-big-label\">\n                {{props?.['bigLabel']}}\n            </h2>\n            <p class=\"sa-input-big-description\">\n                {{props?.['bigDescription']}}\n            </p>\n        </div>\n    }\n    <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n        @if(pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))){\n        <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n        }\n        <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n            (click)=\"onInputFieldClick($event)\">\n            @if(pretext){\n            <div class=\"sa-input-pretext\">\n                {{pretext}}\n            </div>\n            }\n    \n            <input\n                [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n                matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n                [disabled]=\"field.props.disabled || false\"\n                [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n                (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n    \n            @if(params?.type === 'password'){\n            <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n                [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n            <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n                [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n            }@else if(params?.type === 'email' && icon.show){\n            <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n                (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n            }\n            @else if(icon.name){\n            <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n                [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n            }\n    \n    \n            <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n        </div>\n        @if((!formControl.valid) || (params?.supportText)){\n        <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n            <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n            {{getFormSupportText()}}\n        </div>\n        }\n    </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.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 sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formInput: [{
-                type: ViewChild,
-                args: ['formInput']
-            }], icon: [{
-                type: Input,
-                args: ['icon']
-            }] } });
-var IInputEventType;
-(function (IInputEventType) {
-    IInputEventType["INPUT_CHANGE"] = "INPUT_CHANGE";
-    IInputEventType["STATE_CHANGE"] = "STATE_CHANGE";
-    IInputEventType["ICON_CLICK"] = "ICON_CLICK";
-})(IInputEventType || (IInputEventType = {}));
-
-class FormSelectComponent extends FieldType {
-    constructor() {
-        super(...arguments);
-        this.svgStyle = {};
-        this.openState = false;
-        this.startInd = 0;
-        this.labelLimit = 2;
-    }
-    ngOnInit() {
-        this.selectables = this.field.props.options;
-        this.params = this.field.props['params'];
-        this.placeholderLabel = this.params.label;
-        console.log('search', this.field.props['searchable']);
-        this.svgStyle = {
-            '-webkit-mask-image': `url(${this.params.dropIcon})})`,
-            'mask-image': `url(${this.params.dropIcon})`,
-        };
-    }
-    openClose(state) {
-        if (this.field.props.disabled)
-            return;
-        this.openState = state;
-        if (state || this.formControl.value?.length > 0) {
-            this.placeholderLabel = '';
-        }
-        else {
-            this.placeholderLabel = this.params.label;
-        }
-    }
-    shiftLabel(action) {
-        if (action == 'clicked')
-            this.startInd++;
-        if (action == 'cleared')
-            this.startInd = 0;
-        if (action == 'removed' && this.startInd > 0)
-            this.startInd--;
-    }
-    checkForZero(selected, state) {
-        this.topLabel = selected?.length == 0 ? false : true;
-        // console.log("test", this.formControl.value?.length)
-        // console.log("test", this.openState)
-        // console.log("placeholder--- ", this.placeholderLabel)
-        // console.log("params.label--- ", this.params.label)
-        if (this.openState || this.formControl.value?.length > 0) {
-            this.placeholderLabel = '';
-        }
-        else {
-            this.placeholderLabel = this.params.label;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$2.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form-select', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        FormlyModule,
-                        ReactiveFormsModule,
-                        NgSelectModule,
-                        ChipsComponent,
-                        NgIf,
-                        NgFor
-                    ], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n  </div>\n\n  <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n    (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n    [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n    [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n      <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n        <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\n          [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n          [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n          [iconPosition]=\"params.iconPosition\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n        <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n      <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n        <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n        </sa-chip>\n      </div>\n    </ng-template>\n  </ng-select>\n\n  <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n    (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n    *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n  </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"] }]
-        }] });
-
-class GridCellComponent {
-    constructor() {
-        this.onClickButtonEvent = new EventEmitter();
-        this.onClickChipEvent = new EventEmitter();
-        this.onClickLinkEvent = new EventEmitter();
-        this.onClickAvatarEvent = new EventEmitter();
-    }
-    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", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: 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", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: 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 LeftNavComponent {
-    constructor(route, router) {
-        this.route = route;
-        this.router = router;
-        this.clickEvent = new EventEmitter();
-        this.hoverEvent = 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
-        });
-    }
-    onFooterItemBlur(item, index, event = null, tooltip) {
-        // console.log("blur", item, index);
-        this.hoverEvent.emit({
-            event,
-            type: 'FOOTER_ITEM_HOVER',
-            item
-        });
-        if (tooltip) {
-            tooltip.show();
-        }
-    }
-    onNavItemBlur(item, index, event = null, tooltip) {
-        // console.log(item, index);
-        this.hoverEvent.emit({
-            event,
-            type: 'NAV_ITEM_HOVER',
-            item
-        });
-        if (tooltip) {
-            tooltip.show();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n    <div class=\"sa-left-nav-container\">\n        <div class=\"sa-left-nav-logo\">\n            <!-- <span class=\"sa-logo\"></span> -->\n            <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n        </div>\n        <div class=\"sa-left-nav-items\">\n            @if(data && data.items && !!data.items.length){\n            <div class=\"sa-left-nav-items-container\">\n                <ng-container *ngFor=\"let item of data.items; let i = index\">\n                    <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n                        #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\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                        (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n                        [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\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;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
-}
-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,
-                        MatTooltipModule
-                    ], template: "<div class=\"sa-left-nav\">\n\n    <div class=\"sa-left-nav-container\">\n        <div class=\"sa-left-nav-logo\">\n            <!-- <span class=\"sa-logo\"></span> -->\n            <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n        </div>\n        <div class=\"sa-left-nav-items\">\n            @if(data && data.items && !!data.items.length){\n            <div class=\"sa-left-nav-items-container\">\n                <ng-container *ngFor=\"let item of data.items; let i = index\">\n                    <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n                        (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n                        #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\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                        (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n                        [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\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;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.ActivatedRoute }, { type: i1$4.Router }], propDecorators: { data: [{
-                type: Input,
-                args: ['data']
-            }], clickEvent: [{
-                type: Output,
-                args: ['clickEvent']
-            }], hoverEvent: [{
-                type: Output,
-                args: ['hoverEvent']
-            }] } });
-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: 'Setting',
-            icon: 'settingsOutlined',
-            disable: true,
-            tooltip: 'coming soon',
-            relativePath: true,
-            path: ''
-        }],
-    footerItems: [{
-            title: 'Help',
-            icon: 'chatHelpOutlined',
-            disable: true,
-            tooltip: 'coming soon'
-        }, {
-            title: 'Name',
-            disable: false,
-            tooltip: '',
-            type: 'AVATAR'
-        }, {
-            title: 'Chevron',
-            icon: 'doubleDownOutlined',
-            disable: true,
-            tooltip: ''
-        }]
-};
-
-class MessageBannerComponent {
-    constructor() {
-        this.type = 'info';
-        this.content = '';
-        this.bannerIconSize = '';
-        this.onAction = () => { };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", onAction: "onAction" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\n    @if (bannerIcon) {\n    <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n    }\n    <div class=\"content\">\n        <ng-content></ng-content>\n    </div>\n    @if (actionText) {\n    <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n        [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n        (click)=\"onAction()\">{{\n        actionText\n        }}</sa-button>\n    }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\n    @if (bannerIcon) {\n    <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n    }\n    <div class=\"content\">\n        <ng-content></ng-content>\n    </div>\n    @if (actionText) {\n    <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n        [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n        (click)=\"onAction()\">{{\n        actionText\n        }}</sa-button>\n    }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], actionText: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], bannerIcon: [{
-                type: Input
-            }], bannerIconSize: [{
-                type: Input
-            }], buttonIcon: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], buttonIconPosition: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], buttonIconSize: [{
-                type: Input
-            }], onAction: [{
-                type: Input
-            }] } });
-
-class PageLayoutComponent {
-    constructor() {
-        this.showRightContent = false;
-        this.showFooterContent = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n    <div class=\"layout-inner-container\"\n        [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n        @if (showProgressBarContent) {\n        <div class=\"progress-bar-container\">\n            <ng-content select=\"[progress-bar-content]\"></ng-content>\n        </div>\n        }\n        <div class=\"content-container\">\n            <div class=\"left-section\">\n                <div class=\"top-section\">\n                    <ng-content select=\"[top-content]\"></ng-content>\n                </div>\n                <div class=\"left-wrapper\">\n                    <ng-content select=\"[left-content]\"></ng-content>\n                </div>\n                @if (showFooterContent) {\n                <div class=\"footer-section\">\n                    <ng-content select=\"[footer-content]\"></ng-content>\n                </div>\n                }\n            </div>\n            @if (showRightContent) {\n            <div class=\"right-section\">\n                <ng-content select=\"[right-content]\"></ng-content>\n            </div>\n            }\n        </div>\n    </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n    <div class=\"layout-inner-container\"\n        [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n        @if (showProgressBarContent) {\n        <div class=\"progress-bar-container\">\n            <ng-content select=\"[progress-bar-content]\"></ng-content>\n        </div>\n        }\n        <div class=\"content-container\">\n            <div class=\"left-section\">\n                <div class=\"top-section\">\n                    <ng-content select=\"[top-content]\"></ng-content>\n                </div>\n                <div class=\"left-wrapper\">\n                    <ng-content select=\"[left-content]\"></ng-content>\n                </div>\n                @if (showFooterContent) {\n                <div class=\"footer-section\">\n                    <ng-content select=\"[footer-content]\"></ng-content>\n                </div>\n                }\n            </div>\n            @if (showRightContent) {\n            <div class=\"right-section\">\n                <ng-content select=\"[right-content]\"></ng-content>\n            </div>\n            }\n        </div>\n    </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }]
-        }], propDecorators: { showRightContent: [{
-                type: Input
-            }], showFooterContent: [{
-                type: Input
-            }], showProgressBarContent: [{
-                type: Input
-            }] } });
-
-class ProgressBarComponent {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.progressValue = 10;
-        this.borderRadius = '10px';
-        this.height = '8px';
-    }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n    '--dynamic-height': height ,\n    '--dynamic-border-radius': borderRadius \n  }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n    '--dynamic-height': height ,\n    '--dynamic-border-radius': borderRadius \n  }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }] } });
-
-class RadioButtonComponent extends FieldType {
-    ngOnInit() {
-        // console.log(this)
-    }
-    get options$() {
-        const options = this.props?.options;
-        return isObservable(options) ? options : of(options || []);
-    }
-    get formControl() {
-        return super.formControl;
-    }
-    selectRadio(value, radio) {
-        this.formControl.setValue(value);
-        radio.checked = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n    <div class=\"title-container\">\n        @if(props['label']){\n        <div class=\"form-field-title\">\n            <span>{{ props['label'] }}</span>\n        </div>\n        }\n        @if(props['description']){\n        <div class=\"form-field-description\">\n            <span>{{ props['description'] }}</span>\n        </div>\n        }\n    </div>\n    <div class=\"form-field\">\n        <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n            <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n                <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n                    {{ option.label }}\n                </mat-radio-button>\n            </div>\n        </mat-radio-group>\n    </div>\n    @if(props['helpText']){\n    <div class=\"form-field-helpText\">\n        <span>{{ props['helpText'] }}</span>\n    </div>\n    }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n    <div class=\"title-container\">\n        @if(props['label']){\n        <div class=\"form-field-title\">\n            <span>{{ props['label'] }}</span>\n        </div>\n        }\n        @if(props['description']){\n        <div class=\"form-field-description\">\n            <span>{{ props['description'] }}</span>\n        </div>\n        }\n    </div>\n    <div class=\"form-field\">\n        <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n            <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n                <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n                    {{ option.label }}\n                </mat-radio-button>\n            </div>\n        </mat-radio-group>\n    </div>\n    @if(props['helpText']){\n    <div class=\"form-field-helpText\">\n        <span>{{ props['helpText'] }}</span>\n    </div>\n    }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
-        }] });
-
-class ScrollingCardsComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.cards = [];
-        this.duration = 10;
-        this.direction = 'up';
-        this.displayCards = [];
-        this.animationPaused = false;
-    }
-    ngOnInit() {
-        this.displayCards = [...this.cards, ...this.cards];
-    }
-    ngAfterViewInit() {
-        this.setAnimationProperties();
-        this.cdr.detectChanges();
-    }
-    setAnimationProperties() {
-        if (!this.cardContainer)
-            return;
-        const container = this.cardContainer.nativeElement;
-        this.isVertical = this.direction === 'up' || this.direction === 'down';
-        const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
-        const duration = containerSize / this.duration;
-        container.style.setProperty('--scroll-duration', `${duration}s`);
-        container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
-        container.classList.toggle('vertical', this.isVertical);
-        container.classList.toggle('horizontal', !this.isVertical);
-    }
-    pauseScroll() {
-        this.animationPaused = true;
-        this.cardContainer.nativeElement.style.animationPlayState = 'paused';
-    }
-    resumeScroll() {
-        this.animationPaused = false;
-        this.cardContainer.nativeElement.style.animationPlayState = 'running';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n    (mouseleave)=\"resumeScroll()\">\n    <div #cardContainer class=\"card-container\">\n        @for (card of displayCards; track card.title) {\n        <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n            [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n            [showCardBody]=\"true\">\n        </sa-card>\n        }\n    </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n    (mouseleave)=\"resumeScroll()\">\n    <div #cardContainer class=\"card-container\">\n        @for (card of displayCards; track card.title) {\n        <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n            [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n            [showCardBody]=\"true\">\n        </sa-card>\n        }\n    </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
-                type: Input,
-                args: [{ required: true }]
-            }], duration: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], cardContainer: [{
-                type: ViewChild,
-                args: ['cardContainer']
-            }] } });
-
-let nextId$1 = 0; // used to give unique ids to inputs used in html
-class StepperComponent extends FieldType {
-    constructor() {
-        super(...arguments);
-        this.latestStep = -1;
-        this.editable = true;
-        this.stepped = new EventEmitter;
-        this.uuid = nextId$1++;
-        this.isDisabled = false;
-        this.tickIcon = {};
-    }
-    // {
-    //   '-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
-            }] } });
-
-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
-            }] } });
-
-class ToastComponent {
-    constructor() {
-        this.finishPercentage = -1;
-        this.statusIcon = '';
-        this.filled = true;
-        this.width = '';
-        this.toastEvent = new EventEmitter();
-        this.firstButton = new EventEmitter();
-        this.secondButton = new EventEmitter();
-        this.closed = new EventEmitter();
-        this.toastStyles = { backgroundColor: 'transparent', color: '', width: this.width + '%' };
-    }
-    ngOnChanges(changes) {
-        if (changes && (changes['status'] || changes['filled'])) {
-            this.statusIcon = toastInfo[this.status]?.icon;
-            this.toastStyles.backgroundColor = toastInfo[this.status]?.bgColor;
-            this.toastStyles.color = toastInfo[this.status]?.color;
-        }
-        if (changes && changes['width']) {
-            this.toastStyles.width = typeof this.width === 'number' ? this.width + '%' : this.width;
-        }
-        if (this.finishPercentage > 100)
-            this.finishPercentage = 100;
-    }
-    clicked(num) {
-        if (num == 0)
-            this.firstButton.emit();
-        else if (num == 1)
-            this.secondButton.emit();
-        else if (num == 2)
-            this.closed.emit();
-    }
-    closeToast() {
-        this.toastEvent.emit({
-            type: 'TOAST_CLOSED',
-            params: {}
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n  <div class=\"content\">\n    <div class=\"toast-icon {{status}}\">\n      <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n      <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    @if(closable){\n    <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n    <sa-icon class=\"cross\" icon=\"closeOutlined\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n    }\n  </div>\n  <!-- <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div> -->\n\n  <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: 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=\"24\"></sa-icon>\n      <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n    </div>\n    <div class=\"head-subhead\">\n      <p class=\"heading\">{{heading}}</p>\n      <p class=\"subheading\">{{subHeading}}</p>\n    </div>\n    @if(closable){\n    <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n    <sa-icon class=\"cross\" icon=\"closeOutlined\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n    }\n  </div>\n  <!-- <div class=\"controls\">\n    <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n    <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n      size=\"medium\" state=\"default\">\n    </sa-button>\n  </div> -->\n\n  <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n    <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n    <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n  </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
-        }], propDecorators: { finishPercentage: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], subHeading: [{
-                type: Input
-            }], statusIcon: [{
-                type: Input
-            }], status: [{
-                type: Input
-            }], firstButtonName: [{
-                type: Input
-            }], secondButtonName: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], filled: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], toastEvent: [{
-                type: Output
-            }], firstButton: [{
-                type: Output
-            }], secondButton: [{
-                type: Output
-            }], closed: [{
-                type: Output
-            }] } });
-const toastInfo = {
-    'success': {
-        icon: 'checkCircleOutlined',
-        bgColor: '#EBF5E9',
-        color: '#246B16'
-    },
-    'failure': {
-        icon: 'infoCircleOutlined',
-        bgColor: '#F8E9E9',
-        color: '#861C15'
-    },
-    'caution': {
-        icon: 'infoTriangleOutlined',
-        bgColor: '',
-        color: ''
-    }
-};
-
-class ToolTipComponent {
-    constructor() {
-        this.toolTipSkipped = new EventEmitter();
-        this.toolTipSeen = new EventEmitter();
-        this.arrowIcon = "../assets/rightOutlined.svg";
-        this.pointer = "../assets/upwardTriangleFilled.svg";
-        this.msgInd = 0; // is the index of current message being displayed
-    }
-    updateMsgInd(k) {
-        this.msgInd += k;
-        if (this.msgInd < 0)
-            this.msgInd = 0;
-        if (this.msgInd > this.messages.length - 1) {
-            this.msgInd = this.messages.length - 1;
-            this.toolTipSeen.emit();
-        }
-    }
-    skipToolTip() {
-        this.toolTipSkipped.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n  <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n  <div class=\"tool-tip-horizontal\">\n    <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n    <div class=\"tool-tip\">\n      <div class=\"tool-tip-content\">\n        <div class=\"tool-tip-heading\">Heading</div>\n        <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n          {{msg}}\n        </div>\n      </div>\n      <div class=\"tool-tip-break\">\n      </div>\n      <div class=\"tool-tip-controls\">\n        <div class=\"tool-tip-navigate\">\n          <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n          {{msgInd+1}} of {{messages.length}}\n          <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n        </div>\n        <div class=\"tool-tip-control-buttons\">\n          <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n            state=\"default\"></sa-button>\n          <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n          </sa-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n  </div>\n  <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: 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
-            }] } });
-
-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: () => [] });
-
-const buttonSizes = [
-    'small', 'medium', 'large'
-];
-const buttonPosition = [
-    'left', 'right', 'both'
-];
-const buttonType = [
-    'primary', 'outline', 'transparent'
-];
-
-const iconNames = [
-    'analysis', 'arrowRightOutlined', 'avatar',
-    'businessStatsFilled', 'chatHelpOutlined', 'checkCircleFilled',
-    'checkCircleOutlined', 'checkOutlined', 'circleFilled',
-    'closeBlueOutlined', 'closeCircleFilled', 'closeOutlined',
-    'doubleDownOutlined', 'downOutlined', 'eyeFilled',
-    'eyeOutlined', 'formDetailsOutlined', 'gridViewOutlined',
-    'homeOutlined', 'infoCircleOutlined', 'infoTriangleFilled',
-    'infoTriangleOutlined', 'innosupps', 'locationOutlined',
-    'mailOutlined', 'multiConnectionHub', 'personOutlined',
-    'rightOutlined', 'sarasWhite', 'settingsOutlined',
-    'sourcesOutlined', 'targetScanOutlined', 'upwardTriangleFilled',
-    'customerSupport', 'sarasFullLogo', 'leftChevronCircle', 'rightChevronCircle', 'errorCircleOutlined',
-    'errorCrossOutlined'
-];
-
-/*
- * Public API Surface of component-library
- */
-// ... existing code ...
-// Components
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, CheckboxCardComponent, CheckboxComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, ListComponent, MessageBannerComponent, PageLayoutComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent, buttonPosition, buttonSizes, buttonType, iconNames };
-//# sourceMappingURL=sarasanalytics-com-design-system.mjs.map