@sarasanalytics-com/design-system 0.0.142 → 0.0.144

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

@@ -7,7 +7,7 @@ import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, Validators, FormGroup } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, Validators, FormGroup, FormControl } from '@angular/forms';
 import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/expansion';
@@ -36,7 +36,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i1$6 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$1 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import * as i1$7 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -331,11 +331,11 @@ class CardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n        <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n            @if(avatar){\r\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n            <!-- <img [src]=\"avatar\" /> -->\r\n            }@else if(image){\r\n            <img [src]=\"image\" [width]=\"imageWidth\" />\r\n            }@else if(icon){\r\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n            }@else{\r\n            <ng-content select=\"sa-card-icon\"></ng-content>\r\n            }\r\n            @if(column){\r\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n            }\r\n        </div>\r\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n            @if(showCardHeader){\r\n            <ng-content select=\"sa-card-title-header\"></ng-content>\r\n            @if (showHeaderBodyDivider && body) {\r\n            <div class=\"custom-divider\"></div>\r\n            }\r\n            }\r\n            @else if(title){\r\n            <div class=\"sa-card-title-container\">\r\n                <div class=\"sa-card-title\">{{title}}</div>\r\n                @if(chip){\r\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n                }\r\n                <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n            </div>\r\n            }\r\n            @if (showCustomCardBody) {\r\n            <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n            }\r\n            @if(showCardBody && body){\r\n            <div class=\"sa-card-body\">\r\n                {{body}}\r\n            </div>\r\n            }\r\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:-webkit-fill-available;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n        <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n            @if(avatar){\r\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n            <!-- <img [src]=\"avatar\" /> -->\r\n            }@else if(image){\r\n            <img [src]=\"image\" [width]=\"imageWidth\" />\r\n            }@else if(icon){\r\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n            }@else{\r\n            <ng-content select=\"sa-card-icon\"></ng-content>\r\n            }\r\n            @if(column){\r\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n            }\r\n        </div>\r\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n            @if(showCardHeader){\r\n            <ng-content select=\"sa-card-title-header\"></ng-content>\r\n            @if (showHeaderBodyDivider && body) {\r\n            <div class=\"custom-divider\"></div>\r\n            }\r\n            }\r\n            @else if(title){\r\n            <div class=\"sa-card-title-container\">\r\n                <div class=\"sa-card-title\">{{title}}</div>\r\n                @if(chip){\r\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n                }\r\n                <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n            </div>\r\n            }\r\n            @if (showCustomCardBody) {\r\n            <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n            }\r\n            @if(showCardBody && body){\r\n            <div class=\"sa-card-body\">\r\n                {{body}}\r\n            </div>\r\n            }\r\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n        <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n            @if(avatar){\r\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n            <!-- <img [src]=\"avatar\" /> -->\r\n            }@else if(image){\r\n            <img [src]=\"image\" [width]=\"imageWidth\" />\r\n            }@else if(icon){\r\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n            }@else{\r\n            <ng-content select=\"sa-card-icon\"></ng-content>\r\n            }\r\n            @if(column){\r\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n            }\r\n        </div>\r\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n            @if(showCardHeader){\r\n            <ng-content select=\"sa-card-title-header\"></ng-content>\r\n            @if (showHeaderBodyDivider && body) {\r\n            <div class=\"custom-divider\"></div>\r\n            }\r\n            }\r\n            @else if(title){\r\n            <div class=\"sa-card-title-container\">\r\n                <div class=\"sa-card-title\">{{title}}</div>\r\n                @if(chip){\r\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n                }\r\n                <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n            </div>\r\n            }\r\n            @if (showCustomCardBody) {\r\n            <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n            }\r\n            @if(showCardBody && body){\r\n            <div class=\"sa-card-body\">\r\n                {{body}}\r\n            </div>\r\n            }\r\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:-webkit-fill-available;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"] }]
+            args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n    <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n        <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n            @if(avatar){\r\n            <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n            <!-- <img [src]=\"avatar\" /> -->\r\n            }@else if(image){\r\n            <img [src]=\"image\" [width]=\"imageWidth\" />\r\n            }@else if(icon){\r\n            <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n            }@else{\r\n            <ng-content select=\"sa-card-icon\"></ng-content>\r\n            }\r\n            @if(column){\r\n            <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n            }\r\n        </div>\r\n        <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n            @if(showCardHeader){\r\n            <ng-content select=\"sa-card-title-header\"></ng-content>\r\n            @if (showHeaderBodyDivider && body) {\r\n            <div class=\"custom-divider\"></div>\r\n            }\r\n            }\r\n            @else if(title){\r\n            <div class=\"sa-card-title-container\">\r\n                <div class=\"sa-card-title\">{{title}}</div>\r\n                @if(chip){\r\n                <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n                }\r\n                <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n            </div>\r\n            }\r\n            @if (showCustomCardBody) {\r\n            <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n            }\r\n            @if(showCardBody && body){\r\n            <div class=\"sa-card-body\">\r\n                {{body}}\r\n            </div>\r\n            }\r\n            <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"] }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: ['title']
@@ -1845,6 +1845,32 @@ function phoneNumberValidator(dependent) {
         return null;
     };
 }
+function customNameValidator(fieldName) {
+    return (control) => {
+        const name = control.value;
+        const fieldLabel = fieldName || 'Name';
+        if (!name || name.trim() === '') {
+            return { invalid: `${fieldLabel} is required.` };
+        }
+        // Check if name starts with a number
+        if (/^\d/.test(name.trim())) {
+            return { invalid: `${fieldLabel} cannot start with a number.` };
+        }
+        // Check if name contains only alphabetic characters (no spaces allowed)
+        if (!/^[a-zA-Z]+$/.test(name.trim())) {
+            return { invalid: `${fieldLabel} can only contain letters.` };
+        }
+        // Check minimum length (at least 2 characters)
+        if (name.trim().length < 2) {
+            return { invalid: `${fieldLabel} must be at least 2 characters long.` };
+        }
+        // Check maximum length (50 characters)
+        if (name.trim().length > 50) {
+            return { invalid: `${fieldLabel} cannot exceed 50 characters.` };
+        }
+        return null; // Valid name
+    };
+}
 const customEmailValidator = (control) => {
     const email = control.value;
     // Replace the regular expression with the pattern you want to use.
@@ -1853,6 +1879,11 @@ const customEmailValidator = (control) => {
         return null; // Valid email
     }
     else {
+        if (!emailPattern.test(email)) {
+            return {
+                invalid: 'Please enter a valid email address.',
+            }; // Invalid email
+        }
         return {
             invalid: 'Please use a work email; personal emails (e.g., @gmail, @yahoo) are not accepted.',
         }; // Invalid email
@@ -1931,7 +1962,25 @@ function getValidationMessage(errors, placeholder = 'Input', additionalPropertie
             return 'Enter a valid email';
         }
         else if (errors['pattern']) {
-            return 'Enter a valid phone number';
+            // Context-aware pattern validation messages
+            const fieldType = get(additionalProperties, 'field.props.params.type', '');
+            const fieldLabel = get(additionalProperties, 'field.props.label', placeholder);
+            const fieldPlaceholder = get(additionalProperties, 'field.props.placeholder', placeholder);
+            if (fieldLabel.toLowerCase().includes('name') || fieldLabel.toLowerCase().includes('first') || fieldLabel.toLowerCase().includes('last')) {
+                return 'Names can only contain letters and spaces';
+            }
+            else if (fieldType === 'tel' || placeholder.toLowerCase().includes('phone')) {
+                return 'Enter a valid phone number';
+            }
+            else if (fieldType === 'email') {
+                return 'Enter a valid email address';
+            }
+            else {
+                if (fieldLabel)
+                    return `Please enter a valid ${fieldLabel.toLowerCase()}`;
+                else if (fieldPlaceholder)
+                    return `Please enter a valid ${fieldPlaceholder.toLowerCase()}`;
+            }
         }
         else {
             return `Invalid ${placeholder}`;
@@ -2270,8 +2319,16 @@ var IInputEventType;
 })(IInputEventType || (IInputEventType = {}));
 
 class FormSelectComponent extends FieldType {
-    constructor() {
-        super(...arguments);
+    // Helper method to get full object from bound value
+    getFullObjectFromValue(value) {
+        const bindValue = this.params?.bindValue || this.field.props?.['bindValue'];
+        if (!bindValue)
+            return value;
+        return this.selectables.find((item) => item[bindValue] === value) || value;
+    }
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
         this.svgStyle = {};
         this.openState = false;
         this.startInd = 0;
@@ -2280,12 +2337,44 @@ class FormSelectComponent extends FieldType {
     }
     ngOnInit() {
         this.selectables = this.field.props.options;
-        this.params = this.field.props['params'];
-        this.placeholderLabel = this.params.label;
+        this.params = this.field.props['params'] || {};
+        // Fallback to field.props if params is empty
+        if (!this.params || Object.keys(this.params).length === 0) {
+            this.params = this.field.props;
+        }
+        this.placeholderLabel = this.params.label || this.field.props.placeholder;
         this.svgStyle = {
             '-webkit-mask-image': `url(${this.params.dropIcon})})`,
             'mask-image': `url(${this.params.dropIcon})`,
         };
+        // Set CSS custom property for chip background based on state
+        this.setChipBackgroundColor();
+    }
+    setChipBackgroundColor() {
+        const state = this.params?.state;
+        let backgroundColor = 'var(--primary-50)'; // default fallback
+        // Map chip states to appropriate background colors
+        switch (state) {
+            case 'neutral':
+                backgroundColor = 'var(--grey-50)';
+                break;
+            case 'success':
+                backgroundColor = 'var(--success-50)';
+                break;
+            case 'error':
+                backgroundColor = 'var(--error-50)';
+                break;
+            case 'warning':
+                backgroundColor = 'var(--warning-50)';
+                break;
+            case 'primary':
+            default:
+                backgroundColor = 'var(--primary-50)';
+                break;
+        }
+        if (typeof document !== 'undefined' && this.elementRef?.nativeElement) {
+            this.elementRef.nativeElement.style.setProperty('--ng-select-chip-bg', backgroundColor);
+        }
     }
     openClose(state) {
         if (this.field.props.disabled)
@@ -2321,7 +2410,7 @@ class FormSelectComponent extends FieldType {
         }
         // Multi-select mode
         const currentValue = this.formControl.value || [];
-        const bindValue = this.props?.['bindValue'];
+        const bindValue = this.params?.bindValue || this.field.props?.['bindValue'];
         const itemValue = bindValue ? item[bindValue] : item;
         const index = currentValue.findIndex((selected) => {
             const selectedValue = bindValue ? selected[bindValue] : selected;
@@ -2350,20 +2439,25 @@ class FormSelectComponent extends FieldType {
             // In checkbox mode, prevent ng-select from changing the form control
             // Restore the current value to prevent ng-select interference
             const currentValue = this.formControl.value || [];
+            this.openState = true;
             setTimeout(() => {
                 this.formControl.setValue(currentValue, { emitEvent: false });
+                this.openState = true;
             }, 0);
         }
     }
     selectAll() {
         if (!this.params?.multiple)
             return;
-        const bindValue = this.props?.['bindValue'];
+        // Check if we have bindValue configured
+        const bindValue = this.params?.bindValue || this.field.props?.['bindValue'];
         let allValues;
         if (bindValue) {
+            // If bindValue is configured, extract only the bound values
             allValues = this.selectables.map((item) => item[bindValue]);
         }
         else {
+            // If no bindValue, store full objects
             allValues = [...this.selectables];
         }
         this.formControl.setValue(allValues);
@@ -2409,16 +2503,15 @@ class FormSelectComponent extends FieldType {
         if (!this.params?.multiple)
             return;
         const currentValue = this.formControl.value || [];
-        const bindValue = this.props?.['bindValue'];
+        const bindValue = this.params?.bindValue || this.field.props?.['bindValue'];
         let itemIndex = -1;
+        let itemValue = bindValue ? item[bindValue] : item;
         if (bindValue) {
-            itemIndex = currentValue.findIndex((selected) => {
-                const selectedVal = typeof selected === 'object' ? selected[bindValue] : selected;
-                const itemVal = item[bindValue];
-                return selectedVal === itemVal;
-            });
+            // When using bindValue, currentValue should contain only the bound values
+            itemIndex = currentValue.findIndex((selected) => selected === itemValue);
         }
         else {
+            // When not using bindValue, compare full objects
             itemIndex = currentValue.findIndex((selected) => {
                 if (typeof selected === 'object' && typeof item === 'object') {
                     return JSON.stringify(selected) === JSON.stringify(item);
@@ -2428,16 +2521,24 @@ class FormSelectComponent extends FieldType {
         }
         let newValue;
         if (itemIndex > -1) {
+            // Remove the item
             newValue = [...currentValue];
             newValue.splice(itemIndex, 1);
         }
         else {
-            newValue = [...currentValue, item];
+            // Add the item
+            if (bindValue) {
+                // Add only the bound value
+                newValue = [...currentValue, itemValue];
+            }
+            else {
+                // Add the full object
+                newValue = [...currentValue, item];
+            }
         }
         this.formControl.setValue(newValue);
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
-        this.onNgSelectChange(newValue);
         this.checkForZero(newValue);
         this.formControl.updateValueAndValidity();
         if (this.field && this.field.formControl) {
@@ -2446,49 +2547,30 @@ class FormSelectComponent extends FieldType {
         }
         // Force Angular change detection to update the UI
         setTimeout(() => {
-            // This ensures the chips are updated in the next tick
+            if (this.ngSelect && !this.ngSelect.isOpen) {
+                this.ngSelect.open();
+            }
         }, 0);
     }
     isOptionSelected(item) {
         const currentValue = this.formControl.value || [];
         if (!Array.isArray(currentValue))
             return false;
-        const bindValue = this.props?.['bindValue'];
-        const bindLabel = this.props?.['bindLabel'] || 'name';
-        // Get the value to compare from the item
-        let itemValue;
+        const bindValue = this.params?.bindValue || this.field.props?.['bindValue'];
         if (bindValue) {
-            itemValue = item[bindValue];
+            // When using bindValue, currentValue contains only the bound values
+            const itemValue = item[bindValue];
+            return currentValue.includes(itemValue);
         }
         else {
-            itemValue = item;
-        }
-        // Check if this item is in the selected values
-        return currentValue.some((selected) => {
-            let selectedValue;
-            // Handle different structures of selected values
-            if (typeof selected === 'object' && selected !== null) {
-                if (bindValue && selected[bindValue] !== undefined) {
-                    selectedValue = selected[bindValue];
-                }
-                else if (selected[bindLabel] !== undefined) {
-                    selectedValue = selected[bindLabel];
-                }
-                else if (selected.name !== undefined) {
-                    selectedValue = selected.name;
-                }
-                else {
-                    selectedValue = selected;
+            // When not using bindValue, compare full objects
+            return currentValue.some((selected) => {
+                if (typeof selected === 'object' && typeof item === 'object') {
+                    return JSON.stringify(selected) === JSON.stringify(item);
                 }
-            }
-            else {
-                selectedValue = selected;
-            }
-            // Compare the values
-            return selectedValue === itemValue ||
-                (typeof itemValue === 'object' && typeof selectedValue === 'object' &&
-                    JSON.stringify(itemValue) === JSON.stringify(selectedValue));
-        });
+                return selected === item;
+            });
+        }
     }
     checkForZero(selected, state) {
         // Use the passed selected parameter if available, otherwise fall back to form control value
@@ -2515,8 +2597,8 @@ class FormSelectComponent extends FieldType {
             tooltip.show();
         }
     }
-    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']}}\">\r\n  @if(!!props?.['label']){\r\n  <div class=\"sa-select-label-container\">\r\n    <div class=\"sa-select-label-tooltip-container\">\r\n      <span class=\"sa-select-label\">\r\n        {{props?.['label']}}\r\n      </span>\r\n      @if(!!props?.['tooltip']){\r\n      <span class=\"tooltip-container\">\r\n        <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n          [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n          [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n      </span>\r\n      }\r\n    </div>\r\n    @if(!!props?.['description']) {\r\n    <p class=\"sa-select-description\">\r\n      {{props?.['description']}}\r\n    </p>\r\n    }\r\n  </div>\r\n  }\r\n  <div class=\"sa-select-field-container\">\r\n    <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\r\n      class=\"clicked-label\">{{params.label}}\r\n    </div>\r\n    <div\r\n      class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\r\n      <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\r\n        (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n        *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\r\n      </div>\r\n      <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\r\n      (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\r\n      [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\r\n      [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\">      \r\n      <!-- Multi-label template for displaying selected items as chips -->\r\n      <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n        <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\r\n          <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\r\n            [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\r\n            [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\r\n            [iconPosition]=\"params.iconPosition\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n          *ngIf=\"items.length > (startInd+labelLimit)\">\r\n          <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"primary\" filling=\"filled\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\r\n          class=\"ng-value overflow-label\">\r\n          <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\r\n          </sa-chip>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Checkbox option template for individual items when in checkbox mode -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" *ngIf=\"params?.showCheckboxes\">\r\n        <div class=\"checkbox-option\">\r\n                 <input type=\"checkbox\" \r\n                 [checked]=\"isOptionSelected(item)\" \r\n                 (mousedown)=\"toggleItemSelection(item, $event)\"\r\n                 (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n                 class=\"option-checkbox\">          \r\n          <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\r\n      <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\r\n        <div class=\"select-all-header\">\r\n          <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\r\n          <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template ng-arrow-tmp>\r\n        <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\r\n      </ng-template>\r\n    </ng-select>\r\n    <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\r\n      <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\r\n        (blur)=\"openClose(false)\"></sa-icon>\r\n    </div>\r\n    <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\r\n      (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n      *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\r\n    </div> -->\r\n\r\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\r\n  <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\r\n </div>\r\n  </div>\r\n  @if(!formControl.valid){\r\n  <div class=\"error-message-container\">\r\n    <span class=\"error-message\">\r\n      <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </span>\r\n  </div>\r\n  }\r\n  <div class=\"support-label\">{{params.supportText}}</div>\r\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) 0 var(--medium-30px);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}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--primary-50)}.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}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], 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: i1.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", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: [{ token: i0.ElementRef }], 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" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\r\n  @if(!!props?.['label']){\r\n  <div class=\"sa-select-label-container\">\r\n    <div class=\"sa-select-label-tooltip-container\">\r\n      <span class=\"sa-select-label\">\r\n        {{props?.['label']}}\r\n      </span>\r\n      @if(!!props?.['tooltip']){\r\n      <span class=\"tooltip-container\">\r\n        <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n          [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n          [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n      </span>\r\n      }\r\n    </div>\r\n    @if(!!props?.['description']) {\r\n    <p class=\"sa-select-description\">\r\n      {{props?.['description']}}\r\n    </p>\r\n    }\r\n  </div>\r\n  }\r\n  <div class=\"sa-select-field-container\">\r\n    <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\r\n      class=\"clicked-label\">{{params.label}}\r\n    </div>\r\n    <div\r\n      class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\r\n      <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\r\n        (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n        *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\r\n      </div>\r\n      <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\r\n      (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\r\n      [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\r\n      [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\">      \r\n      <!-- Multi-label template for displaying selected items as chips -->\r\n      <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n        <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\r\n          <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" \r\n            [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\r\n            [iconPath]=\"params.iconPath\" \r\n            [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \r\n            [type]=\"params.type\"\r\n            [state]=\"field.props.disabled ? 'neutral' : params.state\" \r\n            [filling]=\"params.filling\"\r\n            [iconPosition]=\"params.iconPosition\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n          *ngIf=\"items.length > (startInd+labelLimit)\">\r\n          <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \r\n                   [type]=\"params.type || 'regular'\" \r\n                   [state]=\"params.state || 'primary'\" \r\n                   [filling]=\"params.filling || 'filled'\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\r\n          class=\"ng-value overflow-label\">\r\n          <sa-chip text=\"...\" \r\n                   [type]=\"params.type || 'regular'\" \r\n                   [state]=\"params.state || 'default'\" \r\n                   [filling]=\"params.filling || 'filled'\">\r\n          </sa-chip>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Checkbox option template for individual items when in checkbox mode -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" *ngIf=\"params?.showCheckboxes\">\r\n        <div class=\"checkbox-option\">\r\n                 <input type=\"checkbox\" \r\n                 [checked]=\"isOptionSelected(item)\" \r\n                 (mousedown)=\"toggleItemSelection(item, $event)\"\r\n                 (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n                 class=\"option-checkbox\">          \r\n          <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\r\n      <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\r\n        <div class=\"select-all-header\">\r\n          <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\r\n          <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template ng-arrow-tmp>\r\n        <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\r\n      </ng-template>\r\n    </ng-select>\r\n    <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\r\n      <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\r\n        (blur)=\"openClose(false)\"></sa-icon>\r\n    </div>\r\n    <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\r\n      (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n      *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\r\n    </div> -->\r\n\r\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\r\n  <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\r\n </div>\r\n  </div>\r\n  @if(!formControl.valid){\r\n  <div class=\"error-message-container\">\r\n    <span class=\"error-message\">\r\n      <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </span>\r\n  </div>\r\n  }\r\n  <div class=\"support-label\">{{params.supportText}}</div>\r\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) 0 var(--medium-30px);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}::ng-deep .ng-arrow-wrapper{pointer-events:none}.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}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.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}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], 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: i1.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", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
             type: Component,
@@ -2532,10 +2614,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         IconComponent,
                         CommonModule,
                         MatTooltipModule
-                    ], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\r\n  @if(!!props?.['label']){\r\n  <div class=\"sa-select-label-container\">\r\n    <div class=\"sa-select-label-tooltip-container\">\r\n      <span class=\"sa-select-label\">\r\n        {{props?.['label']}}\r\n      </span>\r\n      @if(!!props?.['tooltip']){\r\n      <span class=\"tooltip-container\">\r\n        <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n          [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n          [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n      </span>\r\n      }\r\n    </div>\r\n    @if(!!props?.['description']) {\r\n    <p class=\"sa-select-description\">\r\n      {{props?.['description']}}\r\n    </p>\r\n    }\r\n  </div>\r\n  }\r\n  <div class=\"sa-select-field-container\">\r\n    <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\r\n      class=\"clicked-label\">{{params.label}}\r\n    </div>\r\n    <div\r\n      class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\r\n      <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\r\n        (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n        *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\r\n      </div>\r\n      <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\r\n      (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\r\n      [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\r\n      [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\">      \r\n      <!-- Multi-label template for displaying selected items as chips -->\r\n      <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n        <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\r\n          <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" [id]=\"item.id\"\r\n            [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\r\n            [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\r\n            [iconPosition]=\"params.iconPosition\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n          *ngIf=\"items.length > (startInd+labelLimit)\">\r\n          <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"primary\" filling=\"filled\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\r\n          class=\"ng-value overflow-label\">\r\n          <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\r\n          </sa-chip>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Checkbox option template for individual items when in checkbox mode -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" *ngIf=\"params?.showCheckboxes\">\r\n        <div class=\"checkbox-option\">\r\n                 <input type=\"checkbox\" \r\n                 [checked]=\"isOptionSelected(item)\" \r\n                 (mousedown)=\"toggleItemSelection(item, $event)\"\r\n                 (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n                 class=\"option-checkbox\">          \r\n          <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\r\n      <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\r\n        <div class=\"select-all-header\">\r\n          <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\r\n          <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template ng-arrow-tmp>\r\n        <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\r\n      </ng-template>\r\n    </ng-select>\r\n    <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\r\n      <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\r\n        (blur)=\"openClose(false)\"></sa-icon>\r\n    </div>\r\n    <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\r\n      (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n      *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\r\n    </div> -->\r\n\r\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\r\n  <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\r\n </div>\r\n  </div>\r\n  @if(!formControl.valid){\r\n  <div class=\"error-message-container\">\r\n    <span class=\"error-message\">\r\n      <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </span>\r\n  </div>\r\n  }\r\n  <div class=\"support-label\">{{params.supportText}}</div>\r\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) 0 var(--medium-30px);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}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--primary-50)}.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}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"] }]
-        }], propDecorators: { hoverEvent: [{
+                    ], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\r\n  @if(!!props?.['label']){\r\n  <div class=\"sa-select-label-container\">\r\n    <div class=\"sa-select-label-tooltip-container\">\r\n      <span class=\"sa-select-label\">\r\n        {{props?.['label']}}\r\n      </span>\r\n      @if(!!props?.['tooltip']){\r\n      <span class=\"tooltip-container\">\r\n        <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n          [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n          [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n      </span>\r\n      }\r\n    </div>\r\n    @if(!!props?.['description']) {\r\n    <p class=\"sa-select-description\">\r\n      {{props?.['description']}}\r\n    </p>\r\n    }\r\n  </div>\r\n  }\r\n  <div class=\"sa-select-field-container\">\r\n    <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\r\n      class=\"clicked-label\">{{params.label}}\r\n    </div>\r\n    <div\r\n      class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\r\n      <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\r\n        (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n        *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\r\n      </div>\r\n      <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\r\n      (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\r\n      [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\r\n      [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\">      \r\n      <!-- Multi-label template for displaying selected items as chips -->\r\n      <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n        <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\r\n          <sa-chip (onClickEvent)=\" (!field.props.disabled) ?  clear(item) : null\" \r\n            [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\r\n            [iconPath]=\"params.iconPath\" \r\n            [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \r\n            [type]=\"params.type\"\r\n            [state]=\"field.props.disabled ? 'neutral' : params.state\" \r\n            [filling]=\"params.filling\"\r\n            [iconPosition]=\"params.iconPosition\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n          *ngIf=\"items.length > (startInd+labelLimit)\">\r\n          <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \r\n                   [type]=\"params.type || 'regular'\" \r\n                   [state]=\"params.state || 'primary'\" \r\n                   [filling]=\"params.filling || 'filled'\">\r\n          </sa-chip>\r\n        </div>\r\n        <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\r\n          class=\"ng-value overflow-label\">\r\n          <sa-chip text=\"...\" \r\n                   [type]=\"params.type || 'regular'\" \r\n                   [state]=\"params.state || 'default'\" \r\n                   [filling]=\"params.filling || 'filled'\">\r\n          </sa-chip>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Checkbox option template for individual items when in checkbox mode -->\r\n      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" *ngIf=\"params?.showCheckboxes\">\r\n        <div class=\"checkbox-option\">\r\n                 <input type=\"checkbox\" \r\n                 [checked]=\"isOptionSelected(item)\" \r\n                 (mousedown)=\"toggleItemSelection(item, $event)\"\r\n                 (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n                 class=\"option-checkbox\">          \r\n          <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\r\n        </div>\r\n      </ng-template>\r\n      \r\n      <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\r\n      <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\r\n        <div class=\"select-all-header\">\r\n          <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\r\n          <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template ng-arrow-tmp>\r\n        <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\r\n      </ng-template>\r\n    </ng-select>\r\n    <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\r\n      <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\r\n        (blur)=\"openClose(false)\"></sa-icon>\r\n    </div>\r\n    <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\r\n      (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n      *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\r\n    </div> -->\r\n\r\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\r\n  <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\r\n </div>\r\n  </div>\r\n  @if(!formControl.valid){\r\n  <div class=\"error-message-container\">\r\n    <span class=\"error-message\">\r\n      <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n    </span>\r\n  </div>\r\n  }\r\n  <div class=\"support-label\">{{params.supportText}}</div>\r\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) 0 var(--medium-30px);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}::ng-deep .ng-arrow-wrapper{pointer-events:none}.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}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.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}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hoverEvent: [{
                 type: Output,
                 args: ['hoverEvent']
+            }], ngSelect: [{
+                type: ViewChild,
+                args: [NgSelectComponent]
             }] } });
 
 class MessageBannerV2Component {
@@ -2563,21 +2648,13 @@ class MessageBannerV2Component {
         this.form = new FormGroup({});
         this.model = {};
         this.fields = [];
+        this.formlyFields = [];
         this.allFieldsFilled = signal(false);
-        this.additionalFieldRows = [];
+        this.additionalFormlyFields = [];
+        this.usePrebuiltFields = signal(false);
         this.onFormEvent = new EventEmitter();
         this.buttons = [];
         this.buttonClick = new EventEmitter();
-        // Group initial fields into rows based on fieldsPerRow
-        this.initialFieldRows = computed(() => {
-            const initialFields = this.getInitialFields();
-            const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
-            const rows = [];
-            for (let i = 0; i < initialFields.length; i += fieldsPerRow) {
-                rows.push(initialFields.slice(i, i + fieldsPerRow));
-            }
-            return rows;
-        });
     }
     // Computed properties for unified access
     get activeFormInputs() {
@@ -2607,15 +2684,20 @@ class MessageBannerV2Component {
             clickedButton = this.activeCustomFormButton.find(btn => btn.text === 'Add User' || btn.id === 'add-user' || btn.action === 'add-user');
         }
         this.onFormEvent.emit({ type: 'custom-button-click', data: clickedButton });
+        // Only reset form if explicitly configured to do so
         if (clickedButton?.resetForm !== false) {
-            this.model = {};
-            this.form.reset();
-            this.activeFormInputs?.forEach(input => {
-                input.value = '';
-            });
-            this.updateFormlyFields();
+            this.resetForm();
         }
     }
+    // Separate method for form reset that can be called externally
+    resetForm() {
+        this.model = {};
+        this.form.reset();
+        this.activeFormInputs?.forEach(input => {
+            input.value = '';
+        });
+        this.updateFormlyFields();
+    }
     areAllFieldsFilled() {
         if (!this.activeFormInputs || this.activeFormInputs.length < 4)
             return false;
@@ -2641,8 +2723,14 @@ class MessageBannerV2Component {
         if (shouldUpdateBasedOnType) {
             this.updateContentBasedOnType(this.messageType || 'default');
         }
+        // Check if prebuilt fields are provided
+        if (changes['prebuiltFormFields']) {
+            this.usePrebuiltFields.set(!!this.prebuiltFormFields);
+        }
         if (changes['formConfig'] || changes['formInputs']) {
-            this.updateFormlyFields();
+            if (!this.usePrebuiltFields()) {
+                this.updateFormlyFields();
+            }
         }
     }
     updateContentBasedOnType(type) {
@@ -2730,76 +2818,191 @@ class MessageBannerV2Component {
         }
     }
     updateFormlyFields() {
+        // Skip Formly field generation if using prebuilt fields
+        if (this.usePrebuiltFields()) {
+            this.formlyFields = [];
+            return;
+        }
         if (!this.formConfig || !this.formConfig.fields || this.formConfig.fields.length === 0) {
-            this.fields = [];
+            this.formlyFields = [];
             return;
         }
-        this.fields = this.formConfig.fields.map((input, index) => {
-            // All fields should be side-by-side: Email+Role (row 1), Brands+Use Cases (row 2)
-            const cssClass = 'col-6'; // All fields get 50% width for 2x2 grid layout
-            const fieldConfig = {
-                key: input.label.toLowerCase().replace(/\s+/g, '_'),
-                type: input.type === 'text' ? 'sa-input' : 'sa-select',
-                className: cssClass, // All fields use col-6 for side-by-side layout
+        // Get layout configuration
+        const layout = this.activeFormLayout;
+        const fieldsPerRow = layout.fieldsPerRow || 2;
+        const initialVisibleFields = layout.initialVisibleFields || fieldsPerRow;
+        // Update CSS grid columns dynamically
+        this.updateGridColumns(fieldsPerRow);
+        // Create initial visible fields
+        const initialFields = this.formConfig.fields.slice(0, initialVisibleFields);
+        // Create Formly fields for initial visible fields - normalize the field structure
+        this.formlyFields = initialFields.map((field, index) => {
+            // Normalize field structure to proper Formly format
+            const placeholderValue = field.placeholder || field.props?.placeholder || field.params?.placeholder || field.props?.params?.placeholder || '';
+            const formlyField = {
+                key: field.key,
+                type: field.type,
+                className: this.getFieldClassName(index, fieldsPerRow),
                 props: {
-                    ...(input.type === 'text' && {
-                        placeholder: input.placeholder || input.label,
-                        required: input.required || false,
-                        disabled: false,
-                        params: {
-                            supportText: '',
-                            placeholder: input.placeholder || input.label,
-                            type: input.label === 'Email ID' ? 'multi-value' : 'text',
-                            multiValue: input.label === 'Email ID',
-                            chipValues: input.label === 'Email ID' ? [] : undefined
-                        }
+                    // Handle mixed structure - some fields have props at root, others nested
+                    placeholder: placeholderValue,
+                    required: field.required || field.props?.required || false,
+                    disabled: field.disabled || field.props?.disabled || false,
+                    // For select fields, include select-specific properties
+                    ...(field.props?.options && {
+                        options: field.props.options,
+                        multiple: field.props.multiple || false,
+                        bindLabel: field.props.params?.bindLabel || 'label',
+                        bindValue: field.props.params?.bindValue || 'value',
+                        isClearable: field.props.params?.isClearable !== false,
+                        showCheckboxes: field.props.params?.showCheckboxes || false
                     }),
-                    ...((input.type === 'select' || input.type === 'multiselect') && {
-                        required: input.required || false,
-                        closeOnselect: input.type === 'select', // Only close on select for single-select
-                        isClearable: true,
-                        bindLabel: index >= 2 ? 'name' : 'label', // Restore original bindLabel logic
-                        bindValue: 'value',
-                        options: index >= 2
-                            ? (input.options || []).map(option => ({ ...option, name: option.label }))
-                            : input.options || [],
-                        placeholder: input.placeholder || 'Select ' + input.label,
+                    // Include params for component-specific configuration
+                    params: {
+                        ...(field.params || {}),
+                        ...(field.props?.params || {}),
+                        // Ensure label and placeholder are set
+                        label: field.label || field.props?.params?.label || placeholderValue,
+                        placeholder: placeholderValue
+                    }
+                },
+                validators: field.validators || field.props?.validators || {}
+            };
+            // Set initial value if provided
+            if (field.value !== undefined) {
+                this.model[field.key] = field.value;
+            }
+            // Add form control to form group if not already present
+            const key = field.key;
+            if (!this.form.get(key)) {
+                this.form.addControl(key, field.formControl || new FormControl(field.value || ''));
+            }
+            return formlyField;
+        });
+        // Handle additional fields that should show conditionally
+        this.updateAdditionalFields();
+    }
+    getFieldClassName(index, fieldsPerRow) {
+        const colSize = 12 / fieldsPerRow;
+        return `col-${colSize}`;
+    }
+    updateGridColumns(fieldsPerRow) {
+        // Use CSS custom property to dynamically update grid columns
+        document.documentElement.style.setProperty('--form-grid-columns', fieldsPerRow.toString());
+    }
+    shouldShowAdditionalFields() {
+        if (!this.activeFormInputs || this.activeFormInputs.length === 0)
+            return false;
+        const layout = this.activeFormLayout;
+        const initialVisibleFields = layout.initialVisibleFields || layout.fieldsPerRow || 2;
+        // If no conditional fields configuration, check if initial fields are filled
+        if (!layout.conditionalFields) {
+            return this.areAllVisibleFieldsFilled();
+        }
+        // Use custom showWhen function if provided
+        const shouldShow = layout.conditionalFields.showWhen ?
+            layout.conditionalFields.showWhen(this.model) : this.areAllVisibleFieldsFilled();
+        console.log('shouldShowAdditionalFields:', shouldShow, 'model:', this.model, 'conditionalFields:', layout.conditionalFields);
+        return shouldShow;
+    }
+    updateAdditionalFields() {
+        const layout = this.activeFormLayout;
+        const fieldsPerRow = layout.fieldsPerRow || 2;
+        const initialVisibleFields = layout.initialVisibleFields || fieldsPerRow;
+        // Check if we should show additional fields
+        const shouldShowConditionalFields = this.shouldShowAdditionalFields();
+        if (shouldShowConditionalFields && this.formConfig.fields.length > initialVisibleFields) {
+            // Get specific conditional field indices or all remaining fields
+            const conditionalFieldIndices = layout.conditionalFields?.fields ||
+                Array.from({ length: this.formConfig.fields.length - initialVisibleFields }, (_, i) => i + initialVisibleFields);
+            const additionalFields = conditionalFieldIndices.map(index => this.formConfig.fields[index]).filter(Boolean);
+            // Normalize additional fields to proper Formly format
+            this.additionalFormlyFields = additionalFields.map((field, index) => {
+                // Normalize field structure to proper Formly format
+                const placeholderValue = field.placeholder || field.props?.placeholder || field.params?.placeholder || field.props?.params?.placeholder || '';
+                console.log('Processing conditional field:', field.key, 'placeholder:', placeholderValue, 'field:', field);
+                const formlyField = {
+                    key: field.key,
+                    type: field.type,
+                    className: this.getFieldClassName(index, fieldsPerRow),
+                    props: {
+                        // Handle mixed structure - some fields have props at root, others nested
+                        placeholder: placeholderValue,
+                        required: field.required || field.props?.required || false,
+                        disabled: field.disabled || field.props?.disabled || false,
+                        // For select fields, include select-specific properties
+                        ...(field.props?.options && {
+                            options: field.props.options,
+                            multiple: field.props.multiple || false,
+                            bindLabel: field.props.params?.bindLabel || 'label',
+                            bindValue: field.props.params?.bindValue || 'value',
+                            isClearable: field.props.params?.isClearable !== false,
+                            showCheckboxes: field.props.params?.showCheckboxes || false
+                        }),
+                        // Include params for component-specific configuration
                         params: {
-                            label: input.placeholder || 'Select ' + input.label,
-                            placeholder: input.placeholder || 'Select ' + input.label,
-                            multiple: input.type === 'multiselect' || index >= 2, // Enable multiple for multiselect or additional fields
-                            ...(input.type === 'multiselect' || index >= 2) && {
-                                iconPath: "../assets/closeBlueOutlined.svg",
-                                type: 'regular',
-                                state: 'primary',
-                                filling: 'filled',
-                                iconPosition: 'right',
-                                showCheckboxes: true
-                            }
+                            ...(field.params || {}),
+                            ...(field.props?.params || {}),
+                            // Ensure label and placeholder are set
+                            label: field.label || field.props?.params?.label || placeholderValue,
+                            placeholder: placeholderValue
                         }
-                    })
+                    },
+                    validators: field.validators || field.props?.validators || {}
+                };
+                // Set initial value if provided
+                if (field.value !== undefined) {
+                    this.model[field.key] = field.value;
                 }
-            };
-            if (input.value) {
-                this.model[fieldConfig.key] = input.value;
+                // Add form control to form group if not already present
+                const key = field.key;
+                if (!this.form.get(key)) {
+                    this.form.addControl(key, field.formControl || new FormControl(field.value || ''));
+                }
+                return formlyField;
+            });
+        }
+        else {
+            // Clear additional fields if conditions are not met
+            this.additionalFormlyFields = [];
+        }
+    }
+    evaluateShowWhen(showWhen) {
+        if (!showWhen)
+            return true;
+        // Handle different showWhen conditions
+        if (typeof showWhen === 'function') {
+            return showWhen(this.model, this.form);
+        }
+        if (typeof showWhen === 'object') {
+            // Handle field-based conditions like { field: 'role', value: 'admin' }
+            if (showWhen.field && showWhen.value !== undefined) {
+                return this.model[showWhen.field] === showWhen.value;
             }
-            return fieldConfig;
-        });
+        }
+        return true;
     }
+    // Handle form model changes from Formly
     onFormModelChange(model) {
-        // Update the formInputs array when the Formly model changes
-        Object.keys(model).forEach(key => {
-            const input = this.activeFormInputs.find(input => input.label.toLowerCase().replace(/\s+/g, '_') === key);
-            if (input) {
-                input.value = model[key];
-                // Emit the change event to maintain compatibility with existing logic
-                this.onFormEvent.emit({ type: 'form-input-change', data: { label: input.label, value: model[key] } });
-                this.allFieldsFilled.set(this.areAllVisibleFieldsFilled());
-            }
+        this.model = { ...this.model, ...model };
+        console.log('Form model changed:', this.model);
+        const layout = this.activeFormLayout;
+        const shouldShow = layout.conditionalFields?.showWhen ?
+            layout.conditionalFields.showWhen(this.model) : false;
+        console.log('Should show conditional fields:', shouldShow);
+        // Only update if condition changes
+        if (shouldShow && this.additionalFormlyFields.length === 0) {
+            console.log('Triggering conditional fields');
+            this.updateAdditionalFields();
+        }
+        else if (!shouldShow && this.additionalFormlyFields.length > 0) {
+            this.additionalFormlyFields = [];
+        }
+        // Emit the change event
+        this.onFormEvent.emit({
+            type: 'form-model-change',
+            data: model
         });
-        if (this.allFieldsFilled()) {
-            this.additionalFieldRows = this.getAdditionalFieldRows();
-        }
     }
     // Get initial fields to display in the first row
     getInitialFields() {
@@ -2808,33 +3011,6 @@ class MessageBannerV2Component {
         const initialCount = this.activeFormLayout.initialVisibleFields || this.activeFormLayout.fieldsPerRow || 2;
         return this.activeFormInputs.slice(0, initialCount);
     }
-    // Get additional fields to display conditionally
-    getAdditionalFields() {
-        if (!this.activeFormInputs)
-            return [];
-        const initialCount = this.activeFormLayout.initialVisibleFields || this.activeFormLayout.fieldsPerRow || 2;
-        // If conditional fields are specified, use those indices
-        if (this.activeFormLayout.conditionalFields?.fields) {
-            return this.activeFormLayout.conditionalFields.fields
-                .map(index => this.activeFormInputs[index])
-                .filter(field => field); // Remove undefined fields
-        }
-        // Otherwise, show remaining fields after initial count
-        return this.activeFormInputs.slice(initialCount);
-    }
-    // Get CSS class for additional fields to maintain layout
-    getAdditionalFieldClass(localIndex) {
-        const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
-        if (fieldsPerRow === 2) {
-            return 'col-6'; // Bootstrap-style 50% width for 2-column layout
-        }
-        else if (fieldsPerRow === 1) {
-            return 'col-12'; // Full width for single column
-        }
-        else {
-            return `col-${12 / fieldsPerRow}`; // Dynamic width based on fields per row
-        }
-    }
     // Check if all visible fields are filled and form is valid
     areAllVisibleFieldsFilled() {
         if (!this.activeFormInputs || this.activeFormInputs.length === 0)
@@ -2844,7 +3020,7 @@ class MessageBannerV2Component {
         const allVisibleFields = [...initialFields];
         // Check if all visible fields have values
         const allFieldsFilled = allVisibleFields.every(field => {
-            const modelKey = field.label.toLowerCase().replace(/\s+/g, '_');
+            const modelKey = field?.label?.toLowerCase().replace(/\s+/g, '_') || field?.placeholder?.toLowerCase().replace(/\s+/g, '_');
             const fieldValue = this.model[modelKey];
             if (!fieldValue)
                 return false;
@@ -2861,39 +3037,12 @@ class MessageBannerV2Component {
         const formValid = this.form.valid;
         return allFieldsFilled && formValid;
     }
-    // Group additional fields into rows based on fieldsPerRow
-    getAdditionalFieldRows() {
-        const additionalFields = this.getAdditionalFields();
-        const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
-        const rows = [];
-        for (let i = 0; i < additionalFields.length; i += fieldsPerRow) {
-            rows.push(additionalFields.slice(i, i + fieldsPerRow));
-        }
-        return rows;
-    }
-    // Get field index for initial field rows
-    getInitialFieldRowIndex(rowIndex, fieldIndex) {
-        const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
-        return (rowIndex * fieldsPerRow) + fieldIndex;
-    }
-    // Get field index for additional field rows
-    getAdditionalFieldRowIndex(rowIndex, fieldIndex) {
-        const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
-        const initialCount = this.activeFormLayout.initialVisibleFields || this.activeFormLayout.fieldsPerRow || 2;
-        // If conditional fields are specified, use those indices
-        if (this.activeFormLayout.conditionalFields?.fields) {
-            const flatIndex = (rowIndex * fieldsPerRow) + fieldIndex;
-            return this.activeFormLayout.conditionalFields.fields[flatIndex] || 0;
-        }
-        // Otherwise, offset by initial count
-        return initialCount + (rowIndex * fieldsPerRow) + fieldIndex;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\r\n  <div class=\"error-page message-banner-v2\">\r\n    <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\r\n      <div class=\"image-container\"\r\n        [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\r\n        <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\r\n          [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n          [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n      </div>\r\n      <div class=\"details\">\r\n        <div class=\"title-description\">\r\n          <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\r\n          <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \r\n          <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\r\n            <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\r\n              [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\r\n              [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\r\n              <div [innerHTML]=\"banner?.text\"></div>\r\n            </sa-message-banner>\r\n          </div>\r\n        </div>\r\n  \r\n        <!-- Form inputs section -->\r\n        <ng-container *ngIf=\"activeFormInputs?.length\">\r\n          <div class=\"form-fields-container\">\r\n            <div class=\"form-fields-scroll-area\">\r\n              <form [formGroup]=\"form\" class=\"dialog-form\">\r\n                <!-- Initial fields rows (dynamic count based on formLayout.fieldsPerRow) -->\r\n                <div class=\"form-row\" *ngFor=\"let row of initialFieldRows(); let rowIndex = index\">\r\n                  <div class=\"form-field-wrapper\" *ngFor=\"let field of row; let fieldIndex = index\">\r\n                    <formly-form \r\n                      [form]=\"form\"\r\n                      [fields]=\"[fields[getInitialFieldRowIndex(rowIndex, fieldIndex)]]\"\r\n                      [model]=\"model\"\r\n                      (modelChange)=\"onFormModelChange($event)\">\r\n                    </formly-form>\r\n                  </div>\r\n                </div>\r\n                \r\n                <!-- Additional fields rows (conditional based on formLayout.conditionalFields) -->\r\n                <div class=\"additional-fields\" *ngIf=\"areAllVisibleFieldsFilled()\">\r\n                  <div class=\"form-row\" *ngFor=\"let row of additionalFieldRows; let rowIndex = index\">\r\n                    <div class=\"form-field-wrapper\" *ngFor=\"let field of row; let fieldIndex = index\">\r\n                      <formly-form \r\n                        [form]=\"form\"\r\n                        [fields]=\"[fields[getAdditionalFieldRowIndex(rowIndex, fieldIndex)]]\"\r\n                        [model]=\"model\"\r\n                        (modelChange)=\"onFormModelChange($event)\"\r\n                        *ngIf=\"fields[getAdditionalFieldRowIndex(rowIndex, fieldIndex)]\">\r\n                      </formly-form>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </form>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Custom form button(s) -->\r\n          <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton\">\r\n            <!-- Support both single button and array of buttons -->\r\n            <ng-container *ngIf=\"isButtonArray(); else singleButton\">\r\n              <sa-button \r\n                *ngFor=\"let button of activeCustomFormButton\"\r\n                class=\"action-button\"\r\n                [id]=\"button.id\"\r\n                [text]=\"button.text\"\r\n                [type]=\"button.type\"\r\n                [size]=\"button.size\"\r\n                [state]=\"button.state\"\r\n                [ImagePath]=\"button.ImagePath\"\r\n                [iconPosition]=\"button.iconPosition\"\r\n                (click)=\"onButtonClick(button)\">\r\n              </sa-button>\r\n            </ng-container>\r\n            \r\n            <ng-template #singleButton>\r\n              <sa-button class=\"action-button\"\r\n                [id]=\"activeCustomFormButton.id\"\r\n                [text]=\"activeCustomFormButton.text\"\r\n                [type]=\"activeCustomFormButton.type\"\r\n                [size]=\"activeCustomFormButton.size\"\r\n                [state]=\"activeCustomFormButton.state\"\r\n                [ImagePath]=\"activeCustomFormButton.ImagePath\"\r\n                [iconPosition]=\"activeCustomFormButton.iconPosition\"\r\n                (click)=\"onButtonClick(activeCustomFormButton)\">\r\n              </sa-button>\r\n            </ng-template>\r\n          </div>\r\n  \r\n          <!-- Divider section -->\r\n          <div class=\"divider-section\" *ngIf=\"activeDivider\">\r\n            <div class=\"divider\"></div>\r\n            <div class=\"divider-header\">\r\n              <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\r\n              <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\r\n                {{ activeDividerConfig.subtitle || 'No items added yet' }}\r\n              </p>\r\n          </div>\r\n  \r\n          <!-- Chips section -->\r\n          <div class=\"chip-list\" *ngIf=\"activeChips?.length\">\r\n            <sa-chip \r\n                *ngFor=\"let chip of activeChips\"\r\n                [text]=\"chip.label || chip.text || chip\"\r\n                [type]=\"'regular'\"\r\n                [state]=\"'default'\"\r\n                [filling]=\"'filled'\"\r\n                [iconPosition]=\"'right'\"\r\n                [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n                (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\r\n              </sa-chip>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n  \r\n        @if(buttons){\r\n        <div class=\"button-group\">\r\n          @for (button of buttons; track button.text) {\r\n            <sa-button \r\n              [text]=\"button.text\"\r\n              [icon]=\"button.icon\"\r\n              [size]=\"button.size\"\r\n              [type]=\"button.type\"\r\n              [iconPosition]=\"button.iconPosition\"\r\n              [buttonIconSize]=\"button.buttonIconSize\"\r\n              (onClickEvent)=\"onButtonClick(button, $event)\"\r\n              role=\"button\"\r\n              [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\r\n              [attr.aria-label]=\"button.text\">\r\n            </sa-button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:flex;flex-direction:column;gap:16px}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6,::ng-deep .dialog-form .col-12{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:block;margin:0;padding:0}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\r\n  <div class=\"error-page message-banner-v2\">\r\n    <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\r\n      <div class=\"image-container\"\r\n        [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\r\n        <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\r\n          [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n          [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n      </div>\r\n      <div class=\"details\">\r\n        <div class=\"title-description\">\r\n          <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\r\n          <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \r\n          <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\r\n            <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\r\n              [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\r\n              [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\r\n              <div [innerHTML]=\"banner?.text\"></div>\r\n            </sa-message-banner>\r\n          </div>\r\n        </div>\r\n  \r\n        <!-- Form inputs section -->\r\n        <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\r\n          <div class=\"form-fields-container\">\r\n            <div class=\"form-fields-scroll-area\">\r\n              <!-- Prebuilt form fields (direct component rendering) -->\r\n              <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\r\n                <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\r\n              </ng-container>\r\n              \r\n              <!-- Use Formly for proper form rendering -->\r\n              <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\r\n                <formly-form \r\n                  [form]=\"form\" \r\n                  [fields]=\"formlyFields\" \r\n                  [model]=\"model\"\r\n                  (modelChange)=\"onFormModelChange($event)\">\r\n                </formly-form>\r\n                \r\n                <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\r\n                <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\r\n                  <formly-form \r\n                    [form]=\"form\" \r\n                    [fields]=\"additionalFormlyFields\" \r\n                    [model]=\"model\"\r\n                    (modelChange)=\"onFormModelChange($event)\">\r\n                  </formly-form>\r\n                </div>\r\n              </form>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Custom form button(s) -->\r\n          <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\r\n            <!-- Support both single button and array of buttons -->\r\n            <ng-container *ngIf=\"isButtonArray(); else singleButton\">\r\n              <sa-button \r\n                *ngFor=\"let button of activeCustomFormButton\"\r\n                class=\"action-button\"\r\n                [id]=\"button.id\"\r\n                [text]=\"button.text\"\r\n                [type]=\"button.type\"\r\n                [size]=\"button.size\"\r\n                [state]=\"button.state\"\r\n                [ImagePath]=\"button.ImagePath\"\r\n                [iconPosition]=\"button.iconPosition\"\r\n                (click)=\"onButtonClick(button)\">\r\n              </sa-button>\r\n            </ng-container>\r\n            \r\n            <ng-template #singleButton>\r\n              <sa-button class=\"action-button\"\r\n                [id]=\"activeCustomFormButton.id\"\r\n                [text]=\"activeCustomFormButton.text\"\r\n                [type]=\"activeCustomFormButton.type\"\r\n                [size]=\"activeCustomFormButton.size\"\r\n                [state]=\"activeCustomFormButton.state\"\r\n                [ImagePath]=\"activeCustomFormButton.ImagePath\"\r\n                [iconPosition]=\"activeCustomFormButton.iconPosition\"\r\n                (click)=\"onButtonClick(activeCustomFormButton)\">\r\n              </sa-button>\r\n            </ng-template>\r\n          </div>\r\n  \r\n          <!-- Divider section -->\r\n          <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\r\n            <div class=\"divider\"></div>\r\n            <div class=\"divider-header\">\r\n              <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\r\n              <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\r\n                {{ activeDividerConfig.subtitle || 'No items added yet' }}\r\n              </p>\r\n          </div>\r\n  \r\n          <!-- Chips section -->\r\n          <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\r\n            <sa-chip \r\n                *ngFor=\"let chip of activeChips\"\r\n                [text]=\"chip.label || chip.text || chip\"\r\n                [type]=\"'regular'\"\r\n                [state]=\"'default'\"\r\n                [filling]=\"'filled'\"\r\n                [iconPosition]=\"'right'\"\r\n                [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n                (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\r\n              </sa-chip>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n  \r\n        @if(buttons){\r\n        <div class=\"button-group\">\r\n          @for (button of buttons; track button.text) {\r\n            <sa-button \r\n              [text]=\"button.text\"\r\n              [icon]=\"button.icon\"\r\n              [size]=\"button.size\"\r\n              [type]=\"button.type\"\r\n              [iconPosition]=\"button.iconPosition\"\r\n              [buttonIconSize]=\"button.buttonIconSize\"\r\n              (onClickEvent)=\"onButtonClick(button, $event)\"\r\n              role=\"button\"\r\n              [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\r\n              [attr.aria-label]=\"button.text\">\r\n            </sa-button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\r\n  <div class=\"error-page message-banner-v2\">\r\n    <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\r\n      <div class=\"image-container\"\r\n        [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\r\n        <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\r\n          [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n          [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n      </div>\r\n      <div class=\"details\">\r\n        <div class=\"title-description\">\r\n          <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\r\n          <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \r\n          <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\r\n            <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\r\n              [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\r\n              [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\r\n              <div [innerHTML]=\"banner?.text\"></div>\r\n            </sa-message-banner>\r\n          </div>\r\n        </div>\r\n  \r\n        <!-- Form inputs section -->\r\n        <ng-container *ngIf=\"activeFormInputs?.length\">\r\n          <div class=\"form-fields-container\">\r\n            <div class=\"form-fields-scroll-area\">\r\n              <form [formGroup]=\"form\" class=\"dialog-form\">\r\n                <!-- Initial fields rows (dynamic count based on formLayout.fieldsPerRow) -->\r\n                <div class=\"form-row\" *ngFor=\"let row of initialFieldRows(); let rowIndex = index\">\r\n                  <div class=\"form-field-wrapper\" *ngFor=\"let field of row; let fieldIndex = index\">\r\n                    <formly-form \r\n                      [form]=\"form\"\r\n                      [fields]=\"[fields[getInitialFieldRowIndex(rowIndex, fieldIndex)]]\"\r\n                      [model]=\"model\"\r\n                      (modelChange)=\"onFormModelChange($event)\">\r\n                    </formly-form>\r\n                  </div>\r\n                </div>\r\n                \r\n                <!-- Additional fields rows (conditional based on formLayout.conditionalFields) -->\r\n                <div class=\"additional-fields\" *ngIf=\"areAllVisibleFieldsFilled()\">\r\n                  <div class=\"form-row\" *ngFor=\"let row of additionalFieldRows; let rowIndex = index\">\r\n                    <div class=\"form-field-wrapper\" *ngFor=\"let field of row; let fieldIndex = index\">\r\n                      <formly-form \r\n                        [form]=\"form\"\r\n                        [fields]=\"[fields[getAdditionalFieldRowIndex(rowIndex, fieldIndex)]]\"\r\n                        [model]=\"model\"\r\n                        (modelChange)=\"onFormModelChange($event)\"\r\n                        *ngIf=\"fields[getAdditionalFieldRowIndex(rowIndex, fieldIndex)]\">\r\n                      </formly-form>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </form>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Custom form button(s) -->\r\n          <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton\">\r\n            <!-- Support both single button and array of buttons -->\r\n            <ng-container *ngIf=\"isButtonArray(); else singleButton\">\r\n              <sa-button \r\n                *ngFor=\"let button of activeCustomFormButton\"\r\n                class=\"action-button\"\r\n                [id]=\"button.id\"\r\n                [text]=\"button.text\"\r\n                [type]=\"button.type\"\r\n                [size]=\"button.size\"\r\n                [state]=\"button.state\"\r\n                [ImagePath]=\"button.ImagePath\"\r\n                [iconPosition]=\"button.iconPosition\"\r\n                (click)=\"onButtonClick(button)\">\r\n              </sa-button>\r\n            </ng-container>\r\n            \r\n            <ng-template #singleButton>\r\n              <sa-button class=\"action-button\"\r\n                [id]=\"activeCustomFormButton.id\"\r\n                [text]=\"activeCustomFormButton.text\"\r\n                [type]=\"activeCustomFormButton.type\"\r\n                [size]=\"activeCustomFormButton.size\"\r\n                [state]=\"activeCustomFormButton.state\"\r\n                [ImagePath]=\"activeCustomFormButton.ImagePath\"\r\n                [iconPosition]=\"activeCustomFormButton.iconPosition\"\r\n                (click)=\"onButtonClick(activeCustomFormButton)\">\r\n              </sa-button>\r\n            </ng-template>\r\n          </div>\r\n  \r\n          <!-- Divider section -->\r\n          <div class=\"divider-section\" *ngIf=\"activeDivider\">\r\n            <div class=\"divider\"></div>\r\n            <div class=\"divider-header\">\r\n              <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\r\n              <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\r\n                {{ activeDividerConfig.subtitle || 'No items added yet' }}\r\n              </p>\r\n          </div>\r\n  \r\n          <!-- Chips section -->\r\n          <div class=\"chip-list\" *ngIf=\"activeChips?.length\">\r\n            <sa-chip \r\n                *ngFor=\"let chip of activeChips\"\r\n                [text]=\"chip.label || chip.text || chip\"\r\n                [type]=\"'regular'\"\r\n                [state]=\"'default'\"\r\n                [filling]=\"'filled'\"\r\n                [iconPosition]=\"'right'\"\r\n                [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n                (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\r\n              </sa-chip>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n  \r\n        @if(buttons){\r\n        <div class=\"button-group\">\r\n          @for (button of buttons; track button.text) {\r\n            <sa-button \r\n              [text]=\"button.text\"\r\n              [icon]=\"button.icon\"\r\n              [size]=\"button.size\"\r\n              [type]=\"button.type\"\r\n              [iconPosition]=\"button.iconPosition\"\r\n              [buttonIconSize]=\"button.buttonIconSize\"\r\n              (onClickEvent)=\"onButtonClick(button, $event)\"\r\n              role=\"button\"\r\n              [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\r\n              [attr.aria-label]=\"button.text\">\r\n            </sa-button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:flex;flex-direction:column;gap:16px}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6,::ng-deep .dialog-form .col-12{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:block;margin:0;padding:0}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
+            args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\r\n  <div class=\"error-page message-banner-v2\">\r\n    <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\r\n      <div class=\"image-container\"\r\n        [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\r\n        <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\r\n          [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n          [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n      </div>\r\n      <div class=\"details\">\r\n        <div class=\"title-description\">\r\n          <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\r\n          <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \r\n          <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\r\n            <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\r\n              [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\r\n              [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\r\n              <div [innerHTML]=\"banner?.text\"></div>\r\n            </sa-message-banner>\r\n          </div>\r\n        </div>\r\n  \r\n        <!-- Form inputs section -->\r\n        <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\r\n          <div class=\"form-fields-container\">\r\n            <div class=\"form-fields-scroll-area\">\r\n              <!-- Prebuilt form fields (direct component rendering) -->\r\n              <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\r\n                <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\r\n              </ng-container>\r\n              \r\n              <!-- Use Formly for proper form rendering -->\r\n              <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\r\n                <formly-form \r\n                  [form]=\"form\" \r\n                  [fields]=\"formlyFields\" \r\n                  [model]=\"model\"\r\n                  (modelChange)=\"onFormModelChange($event)\">\r\n                </formly-form>\r\n                \r\n                <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\r\n                <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\r\n                  <formly-form \r\n                    [form]=\"form\" \r\n                    [fields]=\"additionalFormlyFields\" \r\n                    [model]=\"model\"\r\n                    (modelChange)=\"onFormModelChange($event)\">\r\n                  </formly-form>\r\n                </div>\r\n              </form>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Custom form button(s) -->\r\n          <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\r\n            <!-- Support both single button and array of buttons -->\r\n            <ng-container *ngIf=\"isButtonArray(); else singleButton\">\r\n              <sa-button \r\n                *ngFor=\"let button of activeCustomFormButton\"\r\n                class=\"action-button\"\r\n                [id]=\"button.id\"\r\n                [text]=\"button.text\"\r\n                [type]=\"button.type\"\r\n                [size]=\"button.size\"\r\n                [state]=\"button.state\"\r\n                [ImagePath]=\"button.ImagePath\"\r\n                [iconPosition]=\"button.iconPosition\"\r\n                (click)=\"onButtonClick(button)\">\r\n              </sa-button>\r\n            </ng-container>\r\n            \r\n            <ng-template #singleButton>\r\n              <sa-button class=\"action-button\"\r\n                [id]=\"activeCustomFormButton.id\"\r\n                [text]=\"activeCustomFormButton.text\"\r\n                [type]=\"activeCustomFormButton.type\"\r\n                [size]=\"activeCustomFormButton.size\"\r\n                [state]=\"activeCustomFormButton.state\"\r\n                [ImagePath]=\"activeCustomFormButton.ImagePath\"\r\n                [iconPosition]=\"activeCustomFormButton.iconPosition\"\r\n                (click)=\"onButtonClick(activeCustomFormButton)\">\r\n              </sa-button>\r\n            </ng-template>\r\n          </div>\r\n  \r\n          <!-- Divider section -->\r\n          <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\r\n            <div class=\"divider\"></div>\r\n            <div class=\"divider-header\">\r\n              <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\r\n              <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\r\n                {{ activeDividerConfig.subtitle || 'No items added yet' }}\r\n              </p>\r\n          </div>\r\n  \r\n          <!-- Chips section -->\r\n          <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\r\n            <sa-chip \r\n                *ngFor=\"let chip of activeChips\"\r\n                [text]=\"chip.label || chip.text || chip\"\r\n                [type]=\"'regular'\"\r\n                [state]=\"'default'\"\r\n                [filling]=\"'filled'\"\r\n                [iconPosition]=\"'right'\"\r\n                [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n                (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\r\n              </sa-chip>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n  \r\n        @if(buttons){\r\n        <div class=\"button-group\">\r\n          @for (button of buttons; track button.text) {\r\n            <sa-button \r\n              [text]=\"button.text\"\r\n              [icon]=\"button.icon\"\r\n              [size]=\"button.size\"\r\n              [type]=\"button.type\"\r\n              [iconPosition]=\"button.iconPosition\"\r\n              [buttonIconSize]=\"button.buttonIconSize\"\r\n              (onClickEvent)=\"onButtonClick(button, $event)\"\r\n              role=\"button\"\r\n              [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\r\n              [attr.aria-label]=\"button.text\">\r\n            </sa-button>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
         }], propDecorators: { messageType: [{
                 type: Input
             }], contactUrl: [{
@@ -2910,6 +3059,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }], formConfig: [{
                 type: Input
+            }], prebuiltFormFields: [{
+                type: Input
             }], onFormEvent: [{
                 type: Output
             }], messageIcon: [{
@@ -2965,7 +3116,16 @@ class DialogComponent {
             case 'form-input-change':
                 this.onFormInputChange(event.data);
                 break;
+            case 'form-model-change':
+                // Store the form model for external access
+                this.formValues = { ...this.formValues, ...event.data };
+                this.dialogButtonClick.emit({ event: event.data, type: 'form-model-change' });
+                break;
             case 'custom-button-click':
+                // Store form model data if provided
+                if (event.data?.formModel) {
+                    this.formValues = { ...this.formValues, ...event.data.formModel };
+                }
                 this.onButtonClick(event.data);
                 break;
             case 'chip-remove':
@@ -2986,8 +3146,16 @@ class DialogComponent {
     onRemoveUser(chip) {
         this.dialogButtonClick.emit({ event: chip, type: 'chip-remove' });
     }
+    // Method to reset the form through message-banner-v2 component
+    resetForm() {
+        // Emit form reset event to message-banner-v2
+        this.formValues = {};
+        // The message-banner-v2 component will handle the actual form reset
+        // when it receives this event
+        this.dialogButtonClick.emit({ type: 'form-reset' });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, deps: [{ token: i1$7.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { dialogData: "dialogData" }, outputs: { dialogButtonClick: "dialogButtonClick" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n  <!-- top banner region -->\r\n  <div class=\"top-container\">\r\n    @if (!!dialogData?.topMessageBanners) {\r\n      <div class=\"top-message-container\">\r\n        @for (\r\n          messageBanner of dialogData?.topMessageBanners;\r\n          track messageBanner.content\r\n        ) {\r\n          <sa-message-banner\r\n            [type]=\"messageBanner?.type\"\r\n            [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n            [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n            [button]=\"messageBanner?.button\"\r\n            (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n            [style]=\"messageBanner?.style || 'width:39.438rem'\"\r\n          >\r\n            <div class=\"{{ messageBanner?.className }} message-content-style\">\r\n              {{ messageBanner?.content }}\r\n            </div>\r\n          </sa-message-banner>\r\n        }\r\n      </div>\r\n    }\r\n    @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\r\n      <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\r\n        <sa-icon\r\n          [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\r\n          class=\"d-flex\"\r\n          size=\"20\"\r\n        ></sa-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n  <!-- middle region -->\r\n  @if (!!dialogData?.middleRegion) {\r\n    <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\r\n      <div class=\"image-description-container {{ middleRegion?.className }}\">\r\n        <sa-message-banner-v2\r\n        [messageType]=\"middleRegion?.messageType || 'default'\"\r\n        [messageIcon]=\"middleRegion?.messageIcon\"\r\n        [messageIconSize]=\"middleRegion?.messageIconSize\"\r\n        [title]=\"middleRegion?.title\"\r\n        [description]=\"middleRegion?.description\"\r\n        [buttons]=\"middleRegion?.buttons\"\r\n        [formConfig]=\"middleRegion?.content?.formConfig\"\r\n        (onFormEvent)=\"onUnifiedFormEvent($event)\"\r\n        (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\r\n      >\r\n      </sa-message-banner-v2>\r\n      </div>\r\n    </ng-container>\r\n  }\r\n  <!-- lower message banner region -->\r\n  @if (!!dialogData?.lowerMessageBanners) {\r\n    <div class=\"lower-message-container\">\r\n      @for (\r\n        messageBanner of dialogData?.lowerMessageBanners;\r\n        track messageBanner.content\r\n      ) {\r\n        <sa-message-banner\r\n          [type]=\"messageBanner?.type\"\r\n          [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n          [buttonIcon]=\"messageBanner?.buttonIcon\"\r\n          [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n          [button]=\"messageBanner?.button\"\r\n          [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\r\n          (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n        >\r\n          <div\r\n            class=\"{{ messageBanner?.className }} message-content-style\"\r\n          ></div>\r\n          {{ messageBanner?.content }}\r\n        </sa-message-banner>\r\n      }\r\n    </div>\r\n  }\r\n  <!-- button region -->\r\n  @if (!!dialogData?.buttons) {\r\n    <div class=\"button-group-container\">\r\n      @for (button of dialogData?.buttons; track button.text) {\r\n        <sa-button\r\n          [text]=\"button.text\"\r\n          [icon]=\"button.icon\"\r\n          [size]=\"button.size\"\r\n          [type]=\"button.type\"\r\n          [state]=\"button.state\"\r\n          [iconPosition]=\"button.iconPosition\"\r\n          [buttonIconSize]=\"button.buttonIconSize\"\r\n          (onClickEvent)=\"onButtonClick(button, $event)\"\r\n          role=\"button\"\r\n          [attr.aria-label]=\"button.text\"\r\n        >\r\n        </sa-button>\r\n      }\r\n    </div>\r\n  }\r\n  @if (!!dialogData?.buttonsWithType) {\r\n    <div class=\"buttonWithType-group-container\">\r\n      @for (button of dialogData?.buttonsWithType; track button.text) {\r\n        @if (button?.type === \"checkbox\") {\r\n          <div class=\"checkbox-container {{ button.className }}\">\r\n            <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\r\n              button.text\r\n            }}</mat-checkbox>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "component", type: MessageBannerV2Component, selector: "sa-message-banner-v2", inputs: ["messageType", "contactUrl", "spacingBetweenImageAndDescription", "contentGap", "titleClass", "descriptionClass", "banner", "formConfig", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["onFormEvent", "buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: 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: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { dialogData: "dialogData" }, outputs: { dialogButtonClick: "dialogButtonClick" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n  <!-- top banner region -->\r\n  <div class=\"top-container\">\r\n    @if (!!dialogData?.topMessageBanners) {\r\n      <div class=\"top-message-container\">\r\n        @for (\r\n          messageBanner of dialogData?.topMessageBanners;\r\n          track messageBanner.content\r\n        ) {\r\n          <sa-message-banner\r\n            [type]=\"messageBanner?.type\"\r\n            [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n            [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n            [button]=\"messageBanner?.button\"\r\n            (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n            [style]=\"messageBanner?.style || 'width:39.438rem'\"\r\n          >\r\n            <div class=\"{{ messageBanner?.className }} message-content-style\">\r\n              {{ messageBanner?.content }}\r\n            </div>\r\n          </sa-message-banner>\r\n        }\r\n      </div>\r\n    }\r\n    @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\r\n      <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\r\n        <sa-icon\r\n          [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\r\n          class=\"d-flex\"\r\n          size=\"20\"\r\n        ></sa-icon>\r\n      </div>\r\n    }\r\n  </div>\r\n  <!-- middle region -->\r\n  @if (!!dialogData?.middleRegion) {\r\n    <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\r\n      <div class=\"image-description-container {{ middleRegion?.className }}\">\r\n        <sa-message-banner-v2\r\n        [messageType]=\"middleRegion?.messageType || 'default'\"\r\n        [messageIcon]=\"middleRegion?.messageIcon\"\r\n        [messageIconSize]=\"middleRegion?.messageIconSize\"\r\n        [title]=\"middleRegion?.title\"\r\n        [description]=\"middleRegion?.description\"\r\n        [buttons]=\"middleRegion?.buttons\"\r\n        [formConfig]=\"middleRegion?.content?.formConfig\"\r\n        (onFormEvent)=\"onUnifiedFormEvent($event)\"\r\n        (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\r\n      >\r\n      </sa-message-banner-v2>\r\n      </div>\r\n    </ng-container>\r\n  }\r\n  <!-- lower message banner region -->\r\n  @if (!!dialogData?.lowerMessageBanners) {\r\n    <div class=\"lower-message-container\">\r\n      @for (\r\n        messageBanner of dialogData?.lowerMessageBanners;\r\n        track messageBanner.content\r\n      ) {\r\n        <sa-message-banner\r\n          [type]=\"messageBanner?.type\"\r\n          [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n          [buttonIcon]=\"messageBanner?.buttonIcon\"\r\n          [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n          [button]=\"messageBanner?.button\"\r\n          [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\r\n          (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n        >\r\n          <div\r\n            class=\"{{ messageBanner?.className }} message-content-style\"\r\n          ></div>\r\n          {{ messageBanner?.content }}\r\n        </sa-message-banner>\r\n      }\r\n    </div>\r\n  }\r\n  <!-- button region -->\r\n  @if (!!dialogData?.buttons) {\r\n    <div class=\"button-group-container\">\r\n      @for (button of dialogData?.buttons; track button.text) {\r\n        <sa-button\r\n          [text]=\"button.text\"\r\n          [icon]=\"button.icon\"\r\n          [size]=\"button.size\"\r\n          [type]=\"button.type\"\r\n          [state]=\"button.state\"\r\n          [iconPosition]=\"button.iconPosition\"\r\n          [buttonIconSize]=\"button.buttonIconSize\"\r\n          (onClickEvent)=\"onButtonClick(button, $event)\"\r\n          role=\"button\"\r\n          [attr.aria-label]=\"button.text\"\r\n        >\r\n        </sa-button>\r\n      }\r\n    </div>\r\n  }\r\n  @if (!!dialogData?.buttonsWithType) {\r\n    <div class=\"buttonWithType-group-container\">\r\n      @for (button of dialogData?.buttonsWithType; track button.text) {\r\n        @if (button?.type === \"checkbox\") {\r\n          <div class=\"checkbox-container {{ button.className }}\">\r\n            <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\r\n              button.text\r\n            }}</mat-checkbox>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "component", type: MessageBannerV2Component, selector: "sa-message-banner-v2", inputs: ["messageType", "contactUrl", "spacingBetweenImageAndDescription", "contentGap", "titleClass", "descriptionClass", "banner", "formConfig", "prebuiltFormFields", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["onFormEvent", "buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: 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: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,