@sarasanalytics-com/design-system 0.0.73 → 0.0.75

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

@@ -8,18 +8,18 @@ import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$3 from '@ngx-formly/core';
 import { FieldType, FormlyModule } from '@ngx-formly/core';
-import { get, filter, includes, replace, toString, map, isUndefined, first, find, words, startCase, set } from 'lodash';
+import { get, filter, includes, replace, toString, map, find, words, keys, has } from 'lodash';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Subject, isObservable, of } from 'rxjs';
 import * as i2$2 from '@angular/material/core';
 import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
-import * as i3$2 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
 import * as i2$1 from '@angular/material/datepicker';
@@ -29,7 +29,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$3 from '@ng-select/ng-select';
+import * as i3$2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$3 from '@angular/router';
 import * as i1$4 from '@angular/material/progress-bar';
@@ -168,11 +168,11 @@ class IconComponent {
         }
     }
     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)}.info-icon{color:var(--icon-grey1);cursor:pointer}.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}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n    'url-icon': iconUrl\n  }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.accordion-info-icon{color:var(--icon-grey1)}.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}.sa-icon.accordion-info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\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)}.info-icon{color:var(--icon-grey1);cursor:pointer}.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}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
+            args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n    'url-icon': iconUrl\n  }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.accordion-info-icon{color:var(--icon-grey1)}.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}.sa-icon.accordion-info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
                 type: Input,
                 args: ['img']
@@ -553,11 +553,11 @@ class AccordionComponent extends FieldType {
         this.buttonClick.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n    <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n        (closed)=\"onAccordionClosed()\">\n        <mat-expansion-panel-header>\n            <mat-panel-title>\n                <div class=\"panel-container\">\n                    @if(props?.['accordionExpanded']){\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n                            size=\"20\"></sa-icon>\n                    </span>\n                    }@else{\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n                            size=\"20\"></sa-icon>\n                    </span>\n                    }\n                    <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n                    <div>\n                        <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n                            [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n                            [text]=\"getChipText()\"></sa-chip>\n                    </div>\n                </div>\n            </mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class=\"custom-divider\"></div>\n        <div class=\"accordion-cards-container\">\n            <div *ngFor=\"let subFeature of props?.['featuresList']\">\n                <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                    [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                    [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                    class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                    <sa-card-title-header>\n                        <div class=\"sa-card-accordion-title-container\">\n                            @if(subFeature?.['disabled']){\n                            <span class=\"disabled-icon\">\n                                <sa-icon icon=\"disabledCheckboxFilled\"\n                                    customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n                            </span>\n                            }@else{\n                            <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                            }\n                            <div class=\"sa-card-title-icon-container\">\n                                <div class=\"sa-card-custom-title\">\n                                    {{subFeature?.title}}\n                                </div>\n                                @if(subFeature?.tooltip){\n                                <span class=\"tooltip-container\">\n                                    <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n                                        customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                        matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                </span>\n                                }\n                            </div>\n                        </div>\n                    </sa-card-title-header>\n                </sa-card>\n            </div>\n        </div>\n        <!-- Advanced Features accordion -->\n        <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n            class=\"advanced-features-section\">\n            <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!props?.['advancedFeaturesExpanded']){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n                                props?.['advancedFeatureToggleTitle'] :\n                                props?.['advancedFeatureTitle'] }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"accordion-advanced-container\">\n                    <div class=\"disclaimer-container\">\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n                        @if(props?.['advancedFeatureDisclaimerButtons']) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"accordion-cards-container\">\n                        <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n                            <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                                [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                                [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                                class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                                <sa-card-title-header>\n                                    <div class=\"sa-card-accordion-title-container\">\n                                        @if(subFeature?.['disabled']){\n                                        <span class=\"disabled-icon\">\n                                            <sa-icon icon=\"disabledCheckboxFilled\"\n                                                customClass=\"auto-dimensions disabled-checkbox-icon\"\n                                                class=\"d-flex\"></sa-icon>\n                                        </span>\n                                        }@else{\n                                        <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                            (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                                        }\n                                        <div class=\"sa-card-title-icon-container\">\n                                            <div class=\"sa-card-custom-title\">\n                                                {{subFeature?.title}}\n                                            </div>\n                                            @if(subFeature?.tooltip){\n                                            <span class=\"tooltip-container\">\n                                                <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n                                                    customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                                    matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                            </span>\n                                            }\n                                        </div>\n                                        @if(subFeature?.featureChip){\n                                        <div class=\"chip-container\">\n                                            <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n                                                [state]=\"subFeature.featureChip?.['state']\"\n                                                [filling]=\"subFeature.featureChip?.['filling']\"\n                                                [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n                                        </div>\n                                        }\n                                    </div>\n                                </sa-card-title-header>\n                            </sa-card>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{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}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.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: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n    <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n        (closed)=\"onAccordionClosed()\">\n        <mat-expansion-panel-header>\n            <mat-panel-title>\n                <div class=\"panel-container\">\n                    @if(props?.['accordionExpanded']){\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\"\n                            class=\"d-flex accordion-info-icon\" size=\"20\"></sa-icon>\n                    </span>\n                    }@else{\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\"\n                            class=\"d-flex accordion-info-icon\" size=\"20\"></sa-icon>\n                    </span>\n                    }\n                    <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n                    <div>\n                        <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n                            [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n                            [text]=\"getChipText()\"></sa-chip>\n                    </div>\n                </div>\n            </mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class=\"custom-divider\"></div>\n        <div class=\"accordion-cards-container\">\n            <div *ngFor=\"let subFeature of props?.['featuresList']\">\n                <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                    [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                    [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                    class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                    <sa-card-title-header>\n                        <div class=\"sa-card-accordion-title-container\">\n                            @if(subFeature?.['disabled']){\n                            <span class=\"disabled-icon\">\n                                <sa-icon icon=\"disabledCheckboxFilled\"\n                                    customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n                            </span>\n                            }@else{\n                            <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                            }\n                            <div class=\"sa-card-title-icon-container\">\n                                <div class=\"sa-card-custom-title\">\n                                    {{subFeature?.title}}\n                                </div>\n                                @if(subFeature?.tooltip){\n                                <span class=\"tooltip-container\">\n                                    <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n                                        customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                        matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                </span>\n                                }\n                            </div>\n                        </div>\n                    </sa-card-title-header>\n                </sa-card>\n            </div>\n        </div>\n        <!-- Advanced Features accordion -->\n        <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n            class=\"advanced-features-section\">\n            <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!props?.['advancedFeaturesExpanded']){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n                                props?.['advancedFeatureToggleTitle'] :\n                                props?.['advancedFeatureTitle'] }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"accordion-advanced-container\">\n                    <div class=\"disclaimer-container\">\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" customClass=\"accordion-info-icon\"\n                                class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n                        @if(props?.['advancedFeatureDisclaimerButtons']) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"accordion-cards-container\">\n                        <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n                            <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                                [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                                [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                                class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                                <sa-card-title-header>\n                                    <div class=\"sa-card-accordion-title-container\">\n                                        @if(subFeature?.['disabled']){\n                                        <span class=\"disabled-icon\">\n                                            <sa-icon icon=\"disabledCheckboxFilled\"\n                                                customClass=\"auto-dimensions disabled-checkbox-icon\"\n                                                class=\"d-flex\"></sa-icon>\n                                        </span>\n                                        }@else{\n                                        <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                            (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                                        }\n                                        <div class=\"sa-card-title-icon-container\">\n                                            <div class=\"sa-card-custom-title\">\n                                                {{subFeature?.title}}\n                                            </div>\n                                            @if(subFeature?.tooltip){\n                                            <span class=\"tooltip-container\">\n                                                <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n                                                    customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                                    matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                            </span>\n                                            }\n                                        </div>\n                                        @if(subFeature?.featureChip){\n                                        <div class=\"chip-container\">\n                                            <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n                                                [state]=\"subFeature.featureChip?.['state']\"\n                                                [filling]=\"subFeature.featureChip?.['filling']\"\n                                                [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n                                        </div>\n                                        }\n                                    </div>\n                                </sa-card-title-header>\n                            </sa-card>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{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}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.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: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n    <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n        (closed)=\"onAccordionClosed()\">\n        <mat-expansion-panel-header>\n            <mat-panel-title>\n                <div class=\"panel-container\">\n                    @if(props?.['accordionExpanded']){\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n                            size=\"20\"></sa-icon>\n                    </span>\n                    }@else{\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n                            size=\"20\"></sa-icon>\n                    </span>\n                    }\n                    <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n                    <div>\n                        <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n                            [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n                            [text]=\"getChipText()\"></sa-chip>\n                    </div>\n                </div>\n            </mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class=\"custom-divider\"></div>\n        <div class=\"accordion-cards-container\">\n            <div *ngFor=\"let subFeature of props?.['featuresList']\">\n                <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                    [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                    [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                    class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                    <sa-card-title-header>\n                        <div class=\"sa-card-accordion-title-container\">\n                            @if(subFeature?.['disabled']){\n                            <span class=\"disabled-icon\">\n                                <sa-icon icon=\"disabledCheckboxFilled\"\n                                    customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n                            </span>\n                            }@else{\n                            <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                            }\n                            <div class=\"sa-card-title-icon-container\">\n                                <div class=\"sa-card-custom-title\">\n                                    {{subFeature?.title}}\n                                </div>\n                                @if(subFeature?.tooltip){\n                                <span class=\"tooltip-container\">\n                                    <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n                                        customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                        matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                </span>\n                                }\n                            </div>\n                        </div>\n                    </sa-card-title-header>\n                </sa-card>\n            </div>\n        </div>\n        <!-- Advanced Features accordion -->\n        <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n            class=\"advanced-features-section\">\n            <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!props?.['advancedFeaturesExpanded']){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n                                props?.['advancedFeatureToggleTitle'] :\n                                props?.['advancedFeatureTitle'] }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"accordion-advanced-container\">\n                    <div class=\"disclaimer-container\">\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n                        @if(props?.['advancedFeatureDisclaimerButtons']) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"accordion-cards-container\">\n                        <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n                            <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                                [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                                [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                                class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                                <sa-card-title-header>\n                                    <div class=\"sa-card-accordion-title-container\">\n                                        @if(subFeature?.['disabled']){\n                                        <span class=\"disabled-icon\">\n                                            <sa-icon icon=\"disabledCheckboxFilled\"\n                                                customClass=\"auto-dimensions disabled-checkbox-icon\"\n                                                class=\"d-flex\"></sa-icon>\n                                        </span>\n                                        }@else{\n                                        <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                            (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                                        }\n                                        <div class=\"sa-card-title-icon-container\">\n                                            <div class=\"sa-card-custom-title\">\n                                                {{subFeature?.title}}\n                                            </div>\n                                            @if(subFeature?.tooltip){\n                                            <span class=\"tooltip-container\">\n                                                <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n                                                    customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                                    matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                            </span>\n                                            }\n                                        </div>\n                                        @if(subFeature?.featureChip){\n                                        <div class=\"chip-container\">\n                                            <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n                                                [state]=\"subFeature.featureChip?.['state']\"\n                                                [filling]=\"subFeature.featureChip?.['filling']\"\n                                                [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n                                        </div>\n                                        }\n                                    </div>\n                                </sa-card-title-header>\n                            </sa-card>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{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}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}\n"] }]
+            args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n    <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n        (closed)=\"onAccordionClosed()\">\n        <mat-expansion-panel-header>\n            <mat-panel-title>\n                <div class=\"panel-container\">\n                    @if(props?.['accordionExpanded']){\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\"\n                            class=\"d-flex accordion-info-icon\" size=\"20\"></sa-icon>\n                    </span>\n                    }@else{\n                    <span class=\"d-flex align-center\">\n                        <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\"\n                            class=\"d-flex accordion-info-icon\" size=\"20\"></sa-icon>\n                    </span>\n                    }\n                    <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n                    <div>\n                        <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n                            [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n                            [text]=\"getChipText()\"></sa-chip>\n                    </div>\n                </div>\n            </mat-panel-title>\n        </mat-expansion-panel-header>\n        <div class=\"custom-divider\"></div>\n        <div class=\"accordion-cards-container\">\n            <div *ngFor=\"let subFeature of props?.['featuresList']\">\n                <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                    [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                    [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                    class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                    <sa-card-title-header>\n                        <div class=\"sa-card-accordion-title-container\">\n                            @if(subFeature?.['disabled']){\n                            <span class=\"disabled-icon\">\n                                <sa-icon icon=\"disabledCheckboxFilled\"\n                                    customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n                            </span>\n                            }@else{\n                            <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                            }\n                            <div class=\"sa-card-title-icon-container\">\n                                <div class=\"sa-card-custom-title\">\n                                    {{subFeature?.title}}\n                                </div>\n                                @if(subFeature?.tooltip){\n                                <span class=\"tooltip-container\">\n                                    <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n                                        customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                        matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                </span>\n                                }\n                            </div>\n                        </div>\n                    </sa-card-title-header>\n                </sa-card>\n            </div>\n        </div>\n        <!-- Advanced Features accordion -->\n        <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n            class=\"advanced-features-section\">\n            <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!props?.['advancedFeaturesExpanded']){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n                                props?.['advancedFeatureToggleTitle'] :\n                                props?.['advancedFeatureTitle'] }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"accordion-advanced-container\">\n                    <div class=\"disclaimer-container\">\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" customClass=\"accordion-info-icon\"\n                                class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n                        @if(props?.['advancedFeatureDisclaimerButtons']) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"accordion-cards-container\">\n                        <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n                            <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n                                [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n                                [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n                                class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n                                <sa-card-title-header>\n                                    <div class=\"sa-card-accordion-title-container\">\n                                        @if(subFeature?.['disabled']){\n                                        <span class=\"disabled-icon\">\n                                            <sa-icon icon=\"disabledCheckboxFilled\"\n                                                customClass=\"auto-dimensions disabled-checkbox-icon\"\n                                                class=\"d-flex\"></sa-icon>\n                                        </span>\n                                        }@else{\n                                        <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n                                            (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n                                        }\n                                        <div class=\"sa-card-title-icon-container\">\n                                            <div class=\"sa-card-custom-title\">\n                                                {{subFeature?.title}}\n                                            </div>\n                                            @if(subFeature?.tooltip){\n                                            <span class=\"tooltip-container\">\n                                                <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n                                                    customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n                                                    matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n                                            </span>\n                                            }\n                                        </div>\n                                        @if(subFeature?.featureChip){\n                                        <div class=\"chip-container\">\n                                            <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n                                                [state]=\"subFeature.featureChip?.['state']\"\n                                                [filling]=\"subFeature.featureChip?.['filling']\"\n                                                [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n                                        </div>\n                                        }\n                                    </div>\n                                </sa-card-title-header>\n                            </sa-card>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{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}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}\n"] }]
         }] });
 
 let nextId$2 = 0; // used to give unique ids to inputs used in html
@@ -703,7 +703,7 @@ class CalendarHeaderComponent {
         this.destroy$.next(); // will trigger unsubscription in takeUntil
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2$1.MatCalendar }, { token: i2$2.DateAdapter }, { token: i2$1.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n  <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n    <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n      for=\"preset-radio-{{i}}\">{{preset}}</label>\n    <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n      id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n  </div>\n</div>\n\n<div class=\"header\">\n  <button mat-icon-button (click)=\"previousClicked('month')\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n  <button mat-icon-button (click)=\"nextClicked('month')\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    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$1.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,
@@ -801,18 +801,14 @@ class GuideCardComponent {
         this.title = '';
         this.steps = [];
         this.selectable = false;
-        this.selectedStep = {};
         this.onStepClicked = new EventEmitter();
     }
-    //selectedStep: any;
     ngOnChanges(changes) {
-        if ((changes['steps'] || changes['selectable']) && this.selectable && isUndefined(this.selectedStep)) {
-            const selectedStep = first(this.steps);
-            this.onStepClick(selectedStep);
-        }
-    }
-    ngOnInit() {
-        if (this.selectable && isUndefined(this.selectedStep)) {
+        if ((changes['steps'] || changes['selectable']) && this.selectable) {
+            const selectedStep = find(this.steps, { isSelected: true });
+            if (selectedStep) {
+                this.onStepClick(selectedStep);
+            }
         }
     }
     onStepClick(step) {
@@ -821,80 +817,47 @@ class GuideCardComponent {
         this.onStepClicked.emit(step);
     }
     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", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, 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\" [ngClass]=\"step?.isSourceConnected ? 'connectedSource-step': '' \">\n            <div class=\"step-indicator\">\n                @if(selectable) {\n                @if(step?.isSourceConnected){\n                <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n                    size=\"20\"></sa-icon>\n                }\n                @else{\n                <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n                </div>\n                }\n                }@else{\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                <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n                    [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n                    {{ step.title }}\n                    @if(step?.chipData) {\n                    <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n                        [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n                        [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n                    }\n                </div>\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}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    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", selectable: "selectable" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, 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                @if(selectable) {\n                <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n                </div>\n                }@else{\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                <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n                    [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n                    {{ step.title }}\n                    @if(step?.chipData) {\n                    <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n                        [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n                        [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n                    }\n                </div>\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}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }], 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: [CommonModule, ChipsComponent, IconComponent], 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\" [ngClass]=\"step?.isSourceConnected ? 'connectedSource-step': '' \">\n            <div class=\"step-indicator\">\n                @if(selectable) {\n                @if(step?.isSourceConnected){\n                <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n                    size=\"20\"></sa-icon>\n                }\n                @else{\n                <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n                </div>\n                }\n                }@else{\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                <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n                    [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n                    {{ step.title }}\n                    @if(step?.chipData) {\n                    <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n                        [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n                        [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n                    }\n                </div>\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}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"] }]
+            args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent], 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                @if(selectable) {\n                <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n                </div>\n                }@else{\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                <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n                    [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n                    {{ step.title }}\n                    @if(step?.chipData) {\n                    <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n                        [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n                        [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n                    }\n                </div>\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}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], steps: [{
                 type: Input
             }], selectable: [{
                 type: Input
-            }], selectedStep: [{
-                type: Input
             }], onStepClicked: [{
                 type: Output
             }] } });
 
-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 MenuCardComponent extends FieldType {
     constructor() {
         super(...arguments);
         this.title = 'Categories:';
+        this.allSourcesCount = 0;
+        this.connectedSourcesCount = 0;
         this.onButtonClickEvent = new EventEmitter();
         this.onCardClickEvent = new EventEmitter();
-        this.onFooterClickEvent = new EventEmitter();
         this.selectedGuideStep = null;
         this.customClassWrapper = 'menuCardSourceContainer';
+        this.actionButton = {
+            text: 'Add Source',
+            type: 'primary',
+            size: 'small',
+            state: 'default',
+        };
     }
     ngOnInit() {
-        this.selectedStep = find(this.steps, { isSelected: true });
     }
     onStepChanged(event) {
         this.selectedStep = event;
     }
-    onCardClick(source, button, event) {
+    onCardClick(source, event) {
         event.stopPropagation();
         event.preventDefault();
-        this.onCardClickEvent.emit({ category: this.selectedStep, source: source, button: button });
+        this.onCardClickEvent.emit(source);
     }
     onAdvancedFeaturesOpened() {
         this.selectedStep.advancedFeaturesExpanded = true;
@@ -905,31 +868,27 @@ class MenuCardComponent extends FieldType {
     actionHandler(button, event) {
         event.stopPropagation();
         event.preventDefault();
+        //console.log(button);
         this.onButtonClickEvent.next(button);
     }
-    showSources(sourceType) {
-        this.onFooterClickEvent.emit(sourceType);
-        //console.log(sourceType)
-        this.onStepChanged(sourceType);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-card-container\">\n    <div class=\"left-card-container\">\n        <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n            (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n        <div class=\"card-footer-container\">\n            <span class=\"horizontal-line\"></span>\n            <ng-container *ngFor=\"let footerDetail of footerDetails\">\n                <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n                    [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n                    <span class=\"footer-text\">\n                        {{footerDetail?.title}}\n                        <ng-container *ngIf=\"footerDetail?.count\">\n                            <span>({{footerDetail?.count}})</span>\n                        </ng-container>\n                    </span>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n\n    <div class=\"right-card-container\">\n        @if(selectedStep?.messageContent){\n        <div class=\"message-container\">\n            <sa-message-banner [type]=\"'info'\">\n                <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\n                </div>\n            </sa-message-banner>\n        </div>\n        }\n        <div class=\"heading-container\">\n            <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n        </div>\n        <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n            <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n                <ng-container\n                    *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n                </ng-container>\n            </ng-container>\n        </div>\n        <!-- for advanced options -->\n        <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n            class=\"menu-card-advanced-features-section\">\n\n            <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n                class=\"menuAdvancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!selectedStep?.advancedFeaturesExpanded){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureCollapsedIcon || 'rightChevronOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"20\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureExpandedIcon || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ selectedStep?.advancedFeatureTitle }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-container\">\n                    <div class=\"disclaimer-container\">\n                        <!-- <sa-message-banner [type]=\"'info'\" [bannerIcon]=\"'infoCircleOutlined'\" [bannerIconSize]=\"'20'\"\n                        [buttonIcon]=\"'headsetOutlined'\" [buttonType]=\"'outline'\" [buttonSize]=\"'small'\" [buttonIconPosition]=\"'left'\"\n                        [buttonIconSize]=\"'16'\" [actionText]=\"'Learn more'\" [bannerIconMatTooltip]=\"selectedStep?.advancedFeatureTooltip\">\n                        <div>\n                          To speed up your onboarding, please have your required data source credentials handy\n                        </div>\n                      </sa-message-banner> -->\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" [matTooltip]=\"selectedStep?.advancedFeatureTooltip\"\n                                customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n                        @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"cards-container\">\n                        <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n                            <ng-container\n                                *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n    <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n        [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n        [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n        class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n        <sa-card-title-header>\n            <div class=\"sa-card-accordion-title-container\">\n                <div class=\"sa-menu-card-title-icon-container\">\n                    <div class=\"sa-menu-card-custom-title\">\n                        <ng-container *ngIf=\"source.logoUrl\">\n                            <sa-icon [icon]=\"source.logoUrl\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n                        </ng-container>\n                        <span [matTooltip]=\"source?.tooltip\">\n                            {{source?.name}}\n                            <ng-container *ngIf=\"source?.count\">\n                                <span>({{source.count}})</span>\n                            </ng-container>\n                        </span>\n                        <ng-container *ngIf=\"source?.chipData\">\n                            <span>\n                                <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n                                    [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n                                    [iconPosition]='source?.chipData.iconPosition'\n                                    [iconPath]=\"source?.chipData.iconPath\">\n                                </sa-chip>\n                            </span>\n                        </ng-container>\n                    </div>\n                </div>\n                <ng-container\n                    *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n                    <div class=\"sa-card-titleIcon no-margin\">\n                        <sa-card-title-actions>\n                            <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n                            </sa-button>\n                        </sa-card-title-actions>\n                    </div>\n                </ng-container>\n            </div>\n        </sa-card-title-header>\n    </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:scroll}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.menuAdvancedAccordion .disclaimer-style{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}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding-top:.5rem;padding-bottom:.5rem;padding-left:.5rem;cursor:pointer}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;color:var(--text-primary, #825CEE);gap:var(--small-12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "onAction"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", allSourcesCount: "allSourcesCount", connectedSourcesCount: "connectedSourcesCount" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-card-container\">\n    <div class=\"left-card-container\">\n        <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n            (onStepClicked)=\"onStepChanged($event)\"></sa-guide-card>\n        <div class=\"card-footer-container\">\n            <span class=\"horizontal-line\"></span>\n            <span class=\"footer-text\">\n                All Sources ({{allSourcesCount}})\n            </span>\n            <span class=\"footer-text\">\n                Connected Sources ({{connectedSourcesCount}})\n            </span>\n        </div>\n    </div>\n\n    <div class=\"right-card-container\">\n        <div class=\"heading-container\">\n            <span class=\"heading-style\">Available Sources:</span>\n        </div>\n\n        <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n            <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n                <ng-container\n                    *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: actionButton }\">\n                </ng-container>\n            </ng-container>\n        </div>\n        <!-- for advanced options -->\n        <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n            class=\"menu-card-advanced-features-section\">\n\n            <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n                class=\"menuAdvancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!selectedStep?.advancedFeaturesExpanded){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureCollapsedIcon || 'rightChevronOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"20\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureExpandedIcon || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ selectedStep?.advancedFeatureTitle }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-container\">\n                    <div class=\"disclaimer-container\">\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" customClass=\"accordion-info-icon\"\n                                class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n                        @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"cards-container\">\n                        <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n                            <ng-container\n                                *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: actionButton }\">\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n    <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n        [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n        [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n        class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n        <sa-card-title-header>\n            <div class=\"sa-card-accordion-title-container\">\n                <div class=\"sa-menu-card-title-icon-container\">\n                    <div class=\"sa-menu-card-custom-title\">\n                        <ng-container *ngIf=\"source.logoUrl\">\n                            <sa-icon [icon]=\"source.logoUrl\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n                        </ng-container>\n                        <span>{{source?.name}}</span>\n                        <ng-container *ngIf=\"source?.chipData\">\n                            <span>\n                                <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n                                    [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n                                    [iconPosition]='source?.chipData.iconPosition'\n                                    [iconPath]=\"source?.chipData.iconPath\">\n                                </sa-chip>\n                            </span>\n                        </ng-container>\n                    </div>\n                </div>\n                <ng-container\n                    *ngIf=\"selectedStep?.actionButton || (selectedStep?.showActionActionButton ? actionButton : null) as button\">\n                    <div class=\"sa-card-titleIcon no-margin\">\n                        <sa-card-title-actions>\n                            <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, $event)\">\n                            </sa-button>\n                        </sa-card-title-actions>\n                    </div>\n                </ng-container>\n            </div>\n        </sa-card-title-header>\n    </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:scroll}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.menuAdvancedAccordion .disclaimer-style{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}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-menu-card', standalone: true, imports: [ChipsComponent, CommonModule, GuideCardComponent, FormsModule, ReactiveFormsModule, FormlyModule, CardComponent, CardCustomHeaderComponent, IconComponent, MatExpansionModule, ButtonComponent, CardTitleActionsComponent, MatTooltipModule, MessageBannerComponent], template: "<div class=\"menu-card-container\">\n    <div class=\"left-card-container\">\n        <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n            (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n        <div class=\"card-footer-container\">\n            <span class=\"horizontal-line\"></span>\n            <ng-container *ngFor=\"let footerDetail of footerDetails\">\n                <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n                    [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n                    <span class=\"footer-text\">\n                        {{footerDetail?.title}}\n                        <ng-container *ngIf=\"footerDetail?.count\">\n                            <span>({{footerDetail?.count}})</span>\n                        </ng-container>\n                    </span>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n\n    <div class=\"right-card-container\">\n        @if(selectedStep?.messageContent){\n        <div class=\"message-container\">\n            <sa-message-banner [type]=\"'info'\">\n                <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\n                </div>\n            </sa-message-banner>\n        </div>\n        }\n        <div class=\"heading-container\">\n            <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n        </div>\n        <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n            <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n                <ng-container\n                    *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n                </ng-container>\n            </ng-container>\n        </div>\n        <!-- for advanced options -->\n        <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n            class=\"menu-card-advanced-features-section\">\n\n            <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n                class=\"menuAdvancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!selectedStep?.advancedFeaturesExpanded){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureCollapsedIcon || 'rightChevronOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"20\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureExpandedIcon || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ selectedStep?.advancedFeatureTitle }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-container\">\n                    <div class=\"disclaimer-container\">\n                        <!-- <sa-message-banner [type]=\"'info'\" [bannerIcon]=\"'infoCircleOutlined'\" [bannerIconSize]=\"'20'\"\n                        [buttonIcon]=\"'headsetOutlined'\" [buttonType]=\"'outline'\" [buttonSize]=\"'small'\" [buttonIconPosition]=\"'left'\"\n                        [buttonIconSize]=\"'16'\" [actionText]=\"'Learn more'\" [bannerIconMatTooltip]=\"selectedStep?.advancedFeatureTooltip\">\n                        <div>\n                          To speed up your onboarding, please have your required data source credentials handy\n                        </div>\n                      </sa-message-banner> -->\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" [matTooltip]=\"selectedStep?.advancedFeatureTooltip\"\n                                customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n                        @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"cards-container\">\n                        <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n                            <ng-container\n                                *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n    <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n        [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n        [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n        class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n        <sa-card-title-header>\n            <div class=\"sa-card-accordion-title-container\">\n                <div class=\"sa-menu-card-title-icon-container\">\n                    <div class=\"sa-menu-card-custom-title\">\n                        <ng-container *ngIf=\"source.logoUrl\">\n                            <sa-icon [icon]=\"source.logoUrl\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n                        </ng-container>\n                        <span [matTooltip]=\"source?.tooltip\">\n                            {{source?.name}}\n                            <ng-container *ngIf=\"source?.count\">\n                                <span>({{source.count}})</span>\n                            </ng-container>\n                        </span>\n                        <ng-container *ngIf=\"source?.chipData\">\n                            <span>\n                                <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n                                    [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n                                    [iconPosition]='source?.chipData.iconPosition'\n                                    [iconPath]=\"source?.chipData.iconPath\">\n                                </sa-chip>\n                            </span>\n                        </ng-container>\n                    </div>\n                </div>\n                <ng-container\n                    *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n                    <div class=\"sa-card-titleIcon no-margin\">\n                        <sa-card-title-actions>\n                            <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n                            </sa-button>\n                        </sa-card-title-actions>\n                    </div>\n                </ng-container>\n            </div>\n        </sa-card-title-header>\n    </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:scroll}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.menuAdvancedAccordion .disclaimer-style{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}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding-top:.5rem;padding-bottom:.5rem;padding-left:.5rem;cursor:pointer}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;color:var(--text-primary, #825CEE);gap:var(--small-12px)}\n"] }]
+            args: [{ selector: 'sa-menu-card', standalone: true, imports: [ChipsComponent, CommonModule, GuideCardComponent, FormsModule, ReactiveFormsModule, FormlyModule, CardComponent, CardCustomHeaderComponent, IconComponent, MatExpansionModule, ButtonComponent, CardTitleActionsComponent], template: "<div class=\"menu-card-container\">\n    <div class=\"left-card-container\">\n        <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n            (onStepClicked)=\"onStepChanged($event)\"></sa-guide-card>\n        <div class=\"card-footer-container\">\n            <span class=\"horizontal-line\"></span>\n            <span class=\"footer-text\">\n                All Sources ({{allSourcesCount}})\n            </span>\n            <span class=\"footer-text\">\n                Connected Sources ({{connectedSourcesCount}})\n            </span>\n        </div>\n    </div>\n\n    <div class=\"right-card-container\">\n        <div class=\"heading-container\">\n            <span class=\"heading-style\">Available Sources:</span>\n        </div>\n\n        <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n            <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n                <ng-container\n                    *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: actionButton }\">\n                </ng-container>\n            </ng-container>\n        </div>\n        <!-- for advanced options -->\n        <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n            class=\"menu-card-advanced-features-section\">\n\n            <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n                (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n                class=\"menuAdvancedAccordion\">\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <div class=\"panel-container\">\n                            @if(!selectedStep?.advancedFeaturesExpanded){\n                            <span class=\"d-flex align-center source-icon\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureCollapsedIcon || 'rightChevronOutlined'\"\n                                    class=\"d-flex\" customClass=\"colored-icon\" size=\"20\"></sa-icon>\n                            </span>\n                            }@else{\n                            <span class=\"d-flex align-center\">\n                                <sa-icon [icon]=\"selectedStep?.advancedFeatureExpandedIcon || 'downChevronOutlined'\"\n                                    class=\"d-flex\" size=\"20\"></sa-icon>\n                            </span>\n                            }\n                            <span class=\"advanced-title\">{{ selectedStep?.advancedFeatureTitle }}</span>\n                        </div>\n                    </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"expansion-container\">\n                    <div class=\"disclaimer-container\">\n                        <span class=\"tooltip-container\">\n                            <sa-icon icon=\"infoCircleOutlined\" customClass=\"accordion-info-icon\"\n                                class=\"tooltip-icon\"></sa-icon>\n                        </span>\n                        <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n                        @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n                        <div class=\"disclaimer-buttons-container\">\n                            <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n                                <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                    [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                    [buttonIconSize]=\"button.buttonIconSize\"\n                                    (click)=\"actionHandler(button, $event)\"></sa-button>\n                            </ng-container>\n                        </div>\n                        }\n                    </div>\n                    <div class=\"cards-container\">\n                        <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n                            <ng-container\n                                *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: actionButton }\">\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n    <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n        [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n        [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n        class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n        <sa-card-title-header>\n            <div class=\"sa-card-accordion-title-container\">\n                <div class=\"sa-menu-card-title-icon-container\">\n                    <div class=\"sa-menu-card-custom-title\">\n                        <ng-container *ngIf=\"source.logoUrl\">\n                            <sa-icon [icon]=\"source.logoUrl\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n                        </ng-container>\n                        <span>{{source?.name}}</span>\n                        <ng-container *ngIf=\"source?.chipData\">\n                            <span>\n                                <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n                                    [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n                                    [iconPosition]='source?.chipData.iconPosition'\n                                    [iconPath]=\"source?.chipData.iconPath\">\n                                </sa-chip>\n                            </span>\n                        </ng-container>\n                    </div>\n                </div>\n                <ng-container\n                    *ngIf=\"selectedStep?.actionButton || (selectedStep?.showActionActionButton ? actionButton : null) as button\">\n                    <div class=\"sa-card-titleIcon no-margin\">\n                        <sa-card-title-actions>\n                            <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n                                [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n                                [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, $event)\">\n                            </sa-button>\n                        </sa-card-title-actions>\n                    </div>\n                </ng-container>\n            </div>\n        </sa-card-title-header>\n    </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:scroll}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.menuAdvancedAccordion .disclaimer-style{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}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], steps: [{
                 type: Input
-            }], footerDetails: [{
+            }], allSourcesCount: [{
+                type: Input
+            }], connectedSourcesCount: [{
                 type: Input
             }], onButtonClickEvent: [{
                 type: Output
             }], onCardClickEvent: [{
                 type: Output
-            }], onFooterClickEvent: [{
-                type: Output
             }] } });
 
 class ThumbnailCardComponent {
@@ -1237,8 +1196,20 @@ export function workEmailValidation(): AsyncValidatorFn {
         );
     };
 }*/
-function getValidationMessage(errors, placeholder = 'Input') {
+function getValidationMessage(errors, placeholder = 'Input', additionalProperties) {
+    const messages = get(additionalProperties, 'nativeValidationObject.messages', {});
+    const field = get(additionalProperties, 'field', {});
     if (errors) {
+        // Check if any key in errors matches with messages using lodash
+        const matchingKey = find(keys(errors), key => has(messages, key));
+        if (matchingKey && messages[matchingKey]) {
+            // If message is a function, execute it with errors and nativeValidationObject
+            if (typeof messages[matchingKey] === 'function') {
+                return messages[matchingKey](errors[matchingKey], field);
+            }
+            return messages[matchingKey];
+        }
+        // Fall back to default messages
         if (errors['minlength']) {
             return `Minimum ${errors['minlength']['requiredLength']} characters required`;
         }
@@ -1263,26 +1234,6 @@ function getValidationMessage(errors, placeholder = 'Input') {
     }
     return `Invalid ${placeholder}`;
 }
-function numberRangeValidator(range, type = null) {
-    return (control) => {
-        let value = control.value;
-        if (type === 'percentage' && typeof value === 'string') {
-            value = value.replace('%', '');
-        }
-        // Convert to a number if it's not null or undefined
-        const numericValue = value !== null && value !== undefined ? parseFloat(value) : NaN;
-        // Check if the value is a valid number and within the range
-        if (isNaN(numericValue) || numericValue < range.min || numericValue > range.max) {
-            return {
-                invalid: `Please enter a valid number between ${range.min} and ${range.max}`
-            };
-        }
-        return null;
-    };
-}
-const requiredValidatorMessage = (error, field) => {
-    return `${startCase(get(field, 'props.label'))} is required.`;
-};
 
 class FormInputComponent extends FieldType {
     constructor() {
@@ -1327,18 +1278,21 @@ class FormInputComponent extends FieldType {
             }
         });
         this.formControl.valueChanges.subscribe((val) => {
-            set(this.formInput, 'nativeElement.value', val);
+            this.formInput.nativeElement.value = val;
         });
     }
     setValidators() {
-        this.validators = this.params?.validators || [];
+        this.validators = this.params?.validators || this.predefinedValidators[this.type] || [];
         this.asyncValidators = this.params?.asyncValidators || [];
-        this.formControl?.setValidators([
-            ...(this.type ? this.predefinedValidators[this.type] || [] : []),
-            ...this.validators,
-        ]);
-        if (this.asyncValidators)
+        if (!get(this.field, 'validators.validation', null)) {
+            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
@@ -1377,8 +1331,10 @@ class FormInputComponent extends FieldType {
             !this.formControl.pending) {
             this.inputState = 'invalid';
             this.inputErrorText =
-                getValidationMessage(this.formControl.errors, this.params?.placeholder || this.field.props?.label || 'Input') ||
-                    `invalid ${this.params?.placeholder || this.field.props?.label || 'input'}`;
+                getValidationMessage(this.formControl.errors, this.params?.placeholder || this.field.props?.label || 'Input', {
+                    field: this.field,
+                    nativeValidationObject: this.field.validation,
+                }) || `invalid ${this.params?.placeholder || this.field.props?.label || 'input'}`;
         }
         else {
             this.inputState = defaultInputState;
@@ -1402,10 +1358,6 @@ class FormInputComponent extends FieldType {
             this.inputVal = this.inputVal.replace(/[^0-9()+\- ]/g, '');
             this.inputVal = this.hyphenatePhoneNumber();
         }
-        if (this.params?.type === 'percentage') {
-            let value = this.inputVal.replace(/[^0-9.]/g, '');
-            this.inputVal = value ? `${value}%` : '';
-        }
         this.formControl?.setValue(this.inputVal);
         this.checkValidity();
         /*if (this.params?.eventListener) {
@@ -1467,26 +1419,18 @@ class FormInputComponent extends FieldType {
     }*/
     getFormSupportText() {
         if (this.formControl.invalid && this.formControl.touched) {
-            return (getValidationMessage(this.formControl.errors, this.params?.placeholder || this.field.props?.label || 'Input') ||
+            return (getValidationMessage(this.formControl.errors, this.params?.placeholder || this.field.props?.label || 'Input', {
+                field: this.field,
+                nativeValidationObject: get(this.field, 'validation'),
+            }) ||
                 `invalid ${this.params?.placeholder || this.field.props?.label || 'input'}`);
         }
         else {
             return this.params?.supportText || '';
         }
     }
-    getLabelFieldGap() {
-        if (this.props?.['bigLabel']) {
-            return 'var(--medium-20px)';
-        }
-        else if (this.props?.['label']) {
-            return 'var(--small-4px)';
-        }
-        else {
-            return '0px'; // No gap
-        }
-    }
     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 {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\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\n    @if(!!props?.['label']){\n    <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n        <div class=\"sa-input-label-tooltip-container\">\n            <span class=\"sa-input-label\">\n                {{props?.['label']}}\n            </span>\n            @if(!!props?.['tooltip']){\n            <span class=\"tooltip-container\">\n                <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n                    [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n                    [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n            </span>\n            }\n        </div>\n        @if(!!props?.['description']) {\n        <p class=\"sa-input-description\">\n            {{props?.['description']}}\n        </p>\n        }\n    </div>\n    }\n    <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n        @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n        !== false){\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=\"d-flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n                [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n            }\n        </div>\n    </div>\n    @if((!formControl.valid) || (params?.supportText)){\n        <div class=\"support-label\"\n        [ngClass]=\"[\n        formControl.invalid && formControl.touched ? 'invalid' : 'idle',\n        formControl.invalid && formControl.touched ? params?.className : ''\n      ]\">\n            <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n            {{getFormSupportText()}}\n        </div>\n        }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.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}.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-pretext{margin-right:2px}.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,.sa-input-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,.sa-input-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)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    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-pretext{margin-right:2px}.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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -1496,8 +1440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         ReactiveFormsModule,
                         FormlyModule,
                         IconComponent,
-                        MatTooltipModule
-                    ], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\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\n    @if(!!props?.['label']){\n    <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n        <div class=\"sa-input-label-tooltip-container\">\n            <span class=\"sa-input-label\">\n                {{props?.['label']}}\n            </span>\n            @if(!!props?.['tooltip']){\n            <span class=\"tooltip-container\">\n                <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n                    [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n                    [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n            </span>\n            }\n        </div>\n        @if(!!props?.['description']) {\n        <p class=\"sa-input-description\">\n            {{props?.['description']}}\n        </p>\n        }\n    </div>\n    }\n    <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n        @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n        !== false){\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=\"d-flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n                [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n            }\n        </div>\n    </div>\n    @if((!formControl.valid) || (params?.supportText)){\n        <div class=\"support-label\"\n        [ngClass]=\"[\n        formControl.invalid && formControl.touched ? 'invalid' : 'idle',\n        formControl.invalid && formControl.touched ? params?.className : ''\n      ]\">\n            <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n            {{getFormSupportText()}}\n        </div>\n        }\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.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}.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-pretext{margin-right:2px}.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,.sa-input-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,.sa-input-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)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}\n"] }]
+                    ], 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-pretext{margin-right:2px}.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']
@@ -1577,7 +1520,7 @@ class FormSelectComponent extends FieldType {
         }
     }
     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: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n  @if(!!props?.['label']){\n  <div class=\"sa-select-label-container\">\n    <div class=\"sa-select-label-tooltip-container\">\n      <span class=\"sa-select-label\">\n        {{props?.['label']}}\n      </span>\n      @if(!!props?.['tooltip']){\n      <span class=\"tooltip-container\">\n        <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n          [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n          [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n      </span>\n      }\n    </div>\n    @if(!!props?.['description']) {\n    <p class=\"sa-select-description\">\n      {{props?.['description']}}\n    </p>\n    }\n  </div>\n  }\n  <div class=\"sa-select-field-container\">\n    <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n      class=\"clicked-label\">{{params.label}}\n    </div>\n    <div\n      class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\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      <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\"\n            *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\"\n            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      <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n        <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n          (blur)=\"openClose(false)\"></sa-icon>\n      </div>\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>\n  @if(!formControl.valid){\n  <div class=\"error-message-container\">\n    <span class=\"error-message\">\n      <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </span>\n  </div>\n  }\n  <div class=\"support-label\">{{params.supportText}}</div>\n</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)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.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}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$3.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$3.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"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, 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}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵ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"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
             type: Component,
@@ -1589,11 +1532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         ChipsComponent,
                         NgIf,
                         NgFor,
-                        MatTooltipModule,
-                        IconComponent,
-                        CommonModule,
                         MatTooltipModule
-                    ], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n  @if(!!props?.['label']){\n  <div class=\"sa-select-label-container\">\n    <div class=\"sa-select-label-tooltip-container\">\n      <span class=\"sa-select-label\">\n        {{props?.['label']}}\n      </span>\n      @if(!!props?.['tooltip']){\n      <span class=\"tooltip-container\">\n        <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n          [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n          [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n      </span>\n      }\n    </div>\n    @if(!!props?.['description']) {\n    <p class=\"sa-select-description\">\n      {{props?.['description']}}\n    </p>\n    }\n  </div>\n  }\n  <div class=\"sa-select-field-container\">\n    <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n      class=\"clicked-label\">{{params.label}}\n    </div>\n    <div\n      class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\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      <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\"\n            *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\"\n            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      <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n        <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n          (blur)=\"openClose(false)\"></sa-icon>\n      </div>\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>\n  @if(!formControl.valid){\n  <div class=\"error-message-container\">\n    <span class=\"error-message\">\n      <formly-validation-message [field]=\"field\"></formly-validation-message>\n    </span>\n  </div>\n  }\n  <div class=\"support-label\">{{params.supportText}}</div>\n</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)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.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}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"] }]
+                    ], 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}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}\n"] }]
         }], propDecorators: { hoverEvent: [{
                 type: Output,
                 args: ['hoverEvent']
@@ -1809,7 +1749,7 @@ class LeftNavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "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]=\"item.altText\" [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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    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]=\"item.altText\" [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: i4.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,
@@ -1873,6 +1813,43 @@ const data = {
         }]
 };
 
+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 MessageBannerV2Component {
     constructor() {
         // State management using signals