@sarasanalytics-com/design-system 0.0.138 → 0.0.140

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/esm2022/interfaces/form-layout.interface.mjs +1 -1
  2. package/esm2022/interfaces/icon-interface.mjs +1 -1
  3. package/esm2022/lib/accordion/accordion.component.mjs +2 -2
  4. package/esm2022/lib/button/button.component.mjs +1 -1
  5. package/esm2022/lib/card/card.component.mjs +2 -2
  6. package/esm2022/lib/card/checkbox-card/checkbox-card.component.mjs +2 -2
  7. package/esm2022/lib/card/guide-card/guide-card.component.mjs +1 -1
  8. package/esm2022/lib/card/menu-card/menu-card.component.mjs +2 -2
  9. package/esm2022/lib/card-carousel/card-carousel.component.mjs +2 -2
  10. package/esm2022/lib/categories-nav/categories-nav.component.mjs +22 -5
  11. package/esm2022/lib/data-grid/data-grid.component.mjs +24 -3
  12. package/esm2022/lib/dialog/dialog.component.mjs +3 -3
  13. package/esm2022/lib/filter/filter.component.mjs +2 -2
  14. package/esm2022/lib/form-input/form-input.component.mjs +13 -3
  15. package/esm2022/lib/form-select/form-select.component.mjs +3 -3
  16. package/esm2022/lib/grid-cell/grid-cell.component.mjs +8 -3
  17. package/esm2022/lib/header/header.component.mjs +3 -3
  18. package/esm2022/lib/icon/icon.component.mjs +4 -2
  19. package/esm2022/lib/layout-section/layout-section.component.mjs +2 -2
  20. package/esm2022/lib/left-nav/left-nav.component.mjs +2 -2
  21. package/esm2022/lib/list/list.component.mjs +2 -2
  22. package/esm2022/lib/menu/menu-list/menu-item.component.mjs +2 -2
  23. package/esm2022/lib/menu/menu.component.mjs +2 -2
  24. package/esm2022/lib/message-banner/message-banner.component.mjs +2 -2
  25. package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +46 -29
  26. package/esm2022/lib/mini-card/mini-card.component.mjs +2 -2
  27. package/esm2022/lib/query-builder/query-builder.component.mjs +6 -5
  28. package/esm2022/lib/toast/toast.component.mjs +1 -1
  29. package/esm2022/lib/tool-tip/tool-tip.component.mjs +3 -3
  30. package/fesm2022/sarasanalytics-com-design-system.mjs +138 -67
  31. package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
  32. package/interfaces/form-layout.interface.d.ts +2 -7
  33. package/interfaces/icon-interface.d.ts +1 -0
  34. package/lib/categories-nav/categories-nav.component.d.ts +36 -3
  35. package/lib/data-grid/data-grid.component.d.ts +6 -1
  36. package/lib/form-input/form-input.component.d.ts +3 -0
  37. package/lib/icon/icon.component.d.ts +2 -1
  38. package/lib/message-banner-v2/message-banner-v2.component.d.ts +6 -3
  39. package/package.json +1 -1
package/fesm2022/sarasanalytics-com-design-system.mjs CHANGED
@@ -18,7 +18,7 @@ import { get, includes, replace, toString, isUndefined, first, kebabCase, find,
18
18
  import { debounceTime, takeUntil, distinctUntilChanged, switchMap } from 'rxjs/operators';
19
19
  import { Subject, isObservable, of, BehaviorSubject, takeUntil as takeUntil$1 } from 'rxjs';
20
20
  import * as i2$2 from '@angular/material/core';
21
- import { MAT_DATE_FORMATS, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
21
+ import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
22
22
  import * as i3 from '@angular/material/icon';
23
23
  import { MatIconModule, MatIcon } from '@angular/material/icon';
24
24
  import * as i2$4 from '@angular/material/button';
@@ -211,7 +211,7 @@ class IconComponent {
211
211
  }
212
212
  }
213
213
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
214
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass", href: "href", hrefTarget: "hrefTarget" }, outputs: { onClickEvent: "onClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if(img){\r\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\r\n}@else{\r\n<span class=\"sa-icon\" [ngClass]=\"{\r\n 'url-icon': iconUrl\r\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\r\n\r\n</span>\r\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
214
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass", href: "href", hrefTarget: "hrefTarget", iconPosition: "iconPosition" }, outputs: { onClickEvent: "onClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if(img){\r\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\r\n}@else{\r\n<span class=\"sa-icon\" [ngClass]=\"{\r\n 'url-icon': iconUrl\r\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\r\n\r\n</span>\r\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
215
215
  }
216
216
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
217
217
  type: Component,
@@ -239,6 +239,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
239
239
  type: Input
240
240
  }], hrefTarget: [{
241
241
  type: Input
242
+ }], iconPosition: [{
243
+ type: Input
242
244
  }], onClickEvent: [{
243
245
  type: Output
244
246
  }] } });
@@ -329,7 +331,7 @@ class CardComponent {
329
331
  }
330
332
  }
331
333
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
332
- 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"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
334
+ 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"] }] }); }
333
335
  }
334
336
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
335
337
  type: Component,
@@ -466,7 +468,7 @@ class ButtonComponent {
466
468
  this.onMouseOutEvent.emit();
467
469
  }
468
470
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
469
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\r\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\r\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\r\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\r\n class=\"sa-button {{state}} {{type}} {{size}}\">\r\n @if(showSpinner){\r\n <sa-spinner [default]=\"true\"></sa-spinner>\r\n }\r\n @if(ImagePath) {\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n {{text}}\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n } @else if (icon) {\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n {{text}}\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n } @else {\r\n {{text}}\r\n }\r\n</label>\r\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
471
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\r\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\r\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\r\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\r\n class=\"sa-button {{state}} {{type}} {{size}}\">\r\n @if(showSpinner){\r\n <sa-spinner [default]=\"true\"></sa-spinner>\r\n }\r\n @if(ImagePath) {\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n {{text}}\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n } @else if (icon) {\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n {{text}}\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n } @else {\r\n {{text}}\r\n }\r\n</label>\r\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
470
472
  }
471
473
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
472
474
  type: Component,
@@ -640,7 +642,7 @@ class AccordionComponent extends FieldType {
640
642
  this.buttonClick.complete();
641
643
  }
642
644
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
643
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\r\n (closed)=\"onAccordionClosed()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(props?.['accordionExpanded']){\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\r\n <div>\r\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\r\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\r\n [text]=\"getChipText()\"></sa-chip>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"custom-divider\"></div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chips-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n <!-- Advanced Features accordion -->\r\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\r\n class=\"advanced-features-section\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!props?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\r\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\r\n class=\"d-flex\" size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\r\n props?.['advancedFeatureToggleTitle'] :\r\n props?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"accordion-advanced-container\">\r\n <div class=\"disclaimer-container\">\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\r\n @if(props?.['advancedFeatureDisclaimerButtons']) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"\r\n class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chip-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.chips-container{display:flex;align-items:center;gap:var(--small-4px)}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::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)}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
645
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\r\n (closed)=\"onAccordionClosed()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(props?.['accordionExpanded']){\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\r\n <div>\r\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\r\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\r\n [text]=\"getChipText()\"></sa-chip>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"custom-divider\"></div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chips-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n <!-- Advanced Features accordion -->\r\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\r\n class=\"advanced-features-section\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!props?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\r\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\r\n class=\"d-flex\" size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\r\n props?.['advancedFeatureToggleTitle'] :\r\n props?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"accordion-advanced-container\">\r\n <div class=\"disclaimer-container\">\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\r\n @if(props?.['advancedFeatureDisclaimerButtons']) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"\r\n class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chip-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.chips-container{display:flex;align-items:center;gap:var(--small-4px)}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::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)}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
644
646
  }
645
647
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
646
648
  type: Component,
@@ -846,7 +848,7 @@ class ListComponent {
846
848
  this.featuresIcon = '';
847
849
  }
848
850
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
849
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\r\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\r\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\r\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\r\n </div>\r\n <div>\r\n <span class=\"feature-text\">{{ item?.text }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
851
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\r\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\r\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\r\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\r\n </div>\r\n <div>\r\n <span class=\"feature-text\">{{ item?.text }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
850
852
  }
851
853
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, decorators: [{
852
854
  type: Component,
@@ -876,7 +878,7 @@ class CheckboxCardComponent extends FieldType {
876
878
  this.field.props['onButtonClick'](this.field);
877
879
  }
878
880
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
879
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\r\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\r\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\r\n [style.width]=\"props['width']\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <div class=\"sa-card-title-logo-container\">\r\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\r\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\r\n </div>\r\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-card-title-actions>\r\n <div class=\"sa-document-action\">\r\n @if(props['disabled']){\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\r\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\r\n }\r\n </div>\r\n </sa-card-title-actions>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n <sa-card-custom-body>\r\n @if(props['listItems']){\r\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\r\n }@else if(props['showButtons']){\r\n <div class=\"buttons-container\">\r\n <ng-container *ngFor=\"let button of props['showButtons']\">\r\n <ng-container *ngIf=\"button.type === 'submit'\">\r\n <div class=\"button-content\">\r\n @if(props['description']){\r\n @if(props['descriptionIcon']){\r\n <div class=\"description-container\">\r\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\r\n class=\"description-icon\"></sa-icon>\r\n <span class=\"description-style\">{{props['description']}}</span>\r\n </div>\r\n }\r\n }\r\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\r\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\r\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\r\n [buttonIconSize]=\"button.iconSize\"></sa-button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-card-custom-body>\r\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
881
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\r\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\r\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\r\n [style.width]=\"props['width']\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <div class=\"sa-card-title-logo-container\">\r\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\r\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\r\n </div>\r\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-card-title-actions>\r\n <div class=\"sa-document-action\">\r\n @if(props['disabled']){\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\r\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\r\n }\r\n </div>\r\n </sa-card-title-actions>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n <sa-card-custom-body>\r\n @if(props['listItems']){\r\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\r\n }@else if(props['showButtons']){\r\n <div class=\"buttons-container\">\r\n <ng-container *ngFor=\"let button of props['showButtons']\">\r\n <ng-container *ngIf=\"button.type === 'submit'\">\r\n <div class=\"button-content\">\r\n @if(props['description']){\r\n @if(props['descriptionIcon']){\r\n <div class=\"description-container\">\r\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\r\n class=\"description-icon\"></sa-icon>\r\n <span class=\"description-style\">{{props['description']}}</span>\r\n </div>\r\n }\r\n }\r\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\r\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\r\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\r\n [buttonIconSize]=\"button.iconSize\"></sa-button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-card-custom-body>\r\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
880
882
  }
881
883
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
882
884
  type: Component,
@@ -908,7 +910,7 @@ class GuideCardComponent {
908
910
  this.onStepClicked.emit(step);
909
911
  }
910
912
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
911
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\r\n <div class=\"guide-header\">\r\n <p class=\"guide-header-title\">{{ title }}</p>\r\n </div>\r\n <div class=\"guide-content\">\r\n @for (step of steps; track step; let last = $last) {\r\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\r\n <div class=\"step-indicator\">\r\n @if(selectable) {\r\n @if(step?.isCompleted){\r\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\r\n size=\"20\"></sa-icon>\r\n }\r\n @else{\r\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\r\n </div>\r\n }\r\n }@else{\r\n <div class=\"step-circle\"></div>\r\n }\r\n @if (!last) {\r\n <div class=\"step-line\"></div>\r\n }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\r\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\r\n {{ step.title }}\r\n @if(step?.chipData) {\r\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\r\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\r\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\r\n }\r\n </div>\r\n @if (step?.description) {\r\n <p class=\"step-description\">{{ step.description }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem;overflow:hidden}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow-y:auto;overflow-x:hidden;gap:1.5rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:auto;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;margin:0}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:var(--medium-20px, 20px) var(--medium-20px, 20px) 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
913
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\r\n <div class=\"guide-header\">\r\n <p class=\"guide-header-title\">{{ title }}</p>\r\n </div>\r\n <div class=\"guide-content\">\r\n @for (step of steps; track step; let last = $last) {\r\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\r\n <div class=\"step-indicator\">\r\n @if(selectable) {\r\n @if(step?.isCompleted){\r\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\r\n size=\"20\"></sa-icon>\r\n }\r\n @else{\r\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\r\n </div>\r\n }\r\n }@else{\r\n <div class=\"step-circle\"></div>\r\n }\r\n @if (!last) {\r\n <div class=\"step-line\"></div>\r\n }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\r\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\r\n {{ step.title }}\r\n @if(step?.chipData) {\r\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\r\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\r\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\r\n }\r\n </div>\r\n @if (step?.description) {\r\n <p class=\"step-description\">{{ step.description }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem;overflow:hidden}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow-y:auto;overflow-x:hidden;gap:1.5rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:auto;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;margin:0}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:var(--medium-20px, 20px) var(--medium-20px, 20px) 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
912
914
  }
913
915
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
914
916
  type: Component,
@@ -949,7 +951,7 @@ class MessageBannerComponent {
949
951
  this.actionClick.emit(button);
950
952
  }
951
953
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
952
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", button: "button", onAction: "onAction" }, outputs: { actionClick: "actionClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\r\n <div class=\"content\">\r\n @if (bannerIcon) {\r\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n @if (actionText) {\r\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\r\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\r\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\r\n actionText\r\n }}</sa-button>\r\n }\r\n @else if(button) {\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)=\"handleButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button?.text\"\r\n >\r\n \r\n </sa-button>\r\n }\r\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
954
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", button: "button", onAction: "onAction" }, outputs: { actionClick: "actionClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\r\n <div class=\"content\">\r\n @if (bannerIcon) {\r\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n @if (actionText) {\r\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\r\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\r\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\r\n actionText\r\n }}</sa-button>\r\n }\r\n @else if(button) {\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)=\"handleButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button?.text\"\r\n >\r\n \r\n </sa-button>\r\n }\r\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
953
955
  }
954
956
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, decorators: [{
955
957
  type: Component,
@@ -1024,7 +1026,7 @@ class MenuCardComponent extends FieldType {
1024
1026
  this.onStepChanged(sourceType);
1025
1027
  }
1026
1028
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1027
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent", onStepChangeEvent: "onStepChangeEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-card-container\">\r\n <div class=\"left-card-container\">\r\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\r\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\r\n <div class=\"card-footer-container\">\r\n <span class=\"horizontal-line\"></span>\r\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\r\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\r\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\r\n <span class=\"footer-text\">\r\n {{footerDetail?.title}}\r\n <ng-container *ngIf=\"footerDetail?.count\">\r\n <span>({{footerDetail?.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"footerDetail?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\r\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\r\n [iconPosition]='footerDetail?.chipData.iconPosition'\r\n [iconPath]=\"footerDetail?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-card-container\">\r\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\r\n <div class=\"message-container\">\r\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\r\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \r\n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\r\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\r\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\r\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\r\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\r\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\r\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\r\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\r\n </div>\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\r\n </div>\r\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <!-- for advanced options -->\r\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\r\n class=\"menu-card-advanced-features-section\">\r\n\r\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\r\n class=\"menuAdvancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!selectedStep?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\r\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\r\n selectedStep?.['advancedFeatureToggleTitle'] :\r\n selectedStep?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"expansion-container\">\r\n @if(selectedStep?.advancedFeatureDisclaimer){\r\n <div class=\"disclaimer-container\">\r\n <sa-message-banner [type]=\"'disclaimer'\">\r\n <div class=\"disclaimer-content\">\r\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\"\r\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\r\n class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\r\n </div>\r\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\r\n </div>\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\r\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-menu-card-title-icon-container\">\r\n <div class=\"sa-menu-card-custom-title\">\r\n <ng-container *ngIf=\"source.logoUrl\">\r\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n </ng-container>\r\n <span [matTooltip]=\"source?.tooltip\">\r\n {{source?.name}}\r\n <ng-container *ngIf=\"source?.count\">\r\n <span>({{source.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"source?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\r\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\r\n [iconPosition]='source?.chipData.iconPosition'\r\n [iconPath]=\"source?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container\r\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.right-card-container::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar{width:8px;background:transparent}.right-card-container:hover::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container:hover::-webkit-scrollbar{width:8px}.right-card-container::-webkit-scrollbar-thumb,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.right-card-container::-webkit-scrollbar-thumb:hover,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.right-card-container:hover,::ng-deep .menu-card-container .guide-container:hover{scrollbar-width:thin}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:.656rem;align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding:var(--small-8px, 8px);cursor:pointer;display:flex;align-items:center}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;align-items:center;color:var(--text-highemphasis, #1C1B20);gap:var(--small-12px);font-size:var(--small-14px);font-style:normal;font-weight:400}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { 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: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }] }); }
1029
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent", onStepChangeEvent: "onStepChangeEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-card-container\">\r\n <div class=\"left-card-container\">\r\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\r\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\r\n <div class=\"card-footer-container\">\r\n <span class=\"horizontal-line\"></span>\r\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\r\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\r\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\r\n <span class=\"footer-text\">\r\n {{footerDetail?.title}}\r\n <ng-container *ngIf=\"footerDetail?.count\">\r\n <span>({{footerDetail?.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"footerDetail?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\r\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\r\n [iconPosition]='footerDetail?.chipData.iconPosition'\r\n [iconPath]=\"footerDetail?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-card-container\">\r\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\r\n <div class=\"message-container\">\r\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\r\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \r\n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\r\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\r\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\r\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\r\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\r\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\r\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\r\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\r\n </div>\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\r\n </div>\r\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <!-- for advanced options -->\r\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\r\n class=\"menu-card-advanced-features-section\">\r\n\r\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\r\n class=\"menuAdvancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!selectedStep?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\r\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\r\n selectedStep?.['advancedFeatureToggleTitle'] :\r\n selectedStep?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"expansion-container\">\r\n @if(selectedStep?.advancedFeatureDisclaimer){\r\n <div class=\"disclaimer-container\">\r\n <sa-message-banner [type]=\"'disclaimer'\">\r\n <div class=\"disclaimer-content\">\r\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\"\r\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\r\n class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\r\n </div>\r\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\r\n </div>\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\r\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-menu-card-title-icon-container\">\r\n <div class=\"sa-menu-card-custom-title\">\r\n <ng-container *ngIf=\"source.logoUrl\">\r\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n </ng-container>\r\n <span [matTooltip]=\"source?.tooltip\">\r\n {{source?.name}}\r\n <ng-container *ngIf=\"source?.count\">\r\n <span>({{source.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"source?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\r\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\r\n [iconPosition]='source?.chipData.iconPosition'\r\n [iconPath]=\"source?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container\r\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.right-card-container::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar{width:8px;background:transparent}.right-card-container:hover::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container:hover::-webkit-scrollbar{width:8px}.right-card-container::-webkit-scrollbar-thumb,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.right-card-container::-webkit-scrollbar-thumb:hover,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.right-card-container:hover,::ng-deep .menu-card-container .guide-container:hover{scrollbar-width:thin}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:.656rem;align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding:var(--small-8px, 8px);cursor:pointer;display:flex;align-items:center}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;align-items:center;color:var(--text-highemphasis, #1C1B20);gap:var(--small-12px);font-size:var(--small-14px);font-style:normal;font-weight:400}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { 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: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }] }); }
1028
1030
  }
1029
1031
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, decorators: [{
1030
1032
  type: Component,
@@ -1249,7 +1251,7 @@ class CardCarouselComponent {
1249
1251
  }
1250
1252
  }
1251
1253
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1252
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, usesOnChanges: true, ngImport: i0, template: "<!-- card-carousel.component.html -->\r\n<div class=\"carousel-container\">\r\n <div class=\"carousel-top-wrapper\">\r\n <div class=\"controls\">\r\n @if (showIndicators) {\r\n <div class=\"dots\">\r\n @for (card of cards; track card.id; let i = $index) {\r\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\r\n }\r\n </div>\r\n }\r\n @if (showNavigationArrows) {\r\n <div class=\"arrow-controls\">\r\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\r\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"card-container\">\r\n @if (cards[currentIndex]) {\r\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\r\n [showHeaderBodyDivider]=\"true\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\r\n <div class=\"sa-card-title-subtitle-container\">\r\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\r\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showBrandFooter) {\r\n <div class=\"brand-logos-container\">\r\n <div class=\"brand-logos\">\r\n @for (logo of visibleLogos; track logo.id) {\r\n <div> \r\n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\r\n [customClass]=\"'logo-style'\">\r\n </sa-icon>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1254
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, usesOnChanges: true, ngImport: i0, template: "<!-- card-carousel.component.html -->\r\n<div class=\"carousel-container\">\r\n <div class=\"carousel-top-wrapper\">\r\n <div class=\"controls\">\r\n @if (showIndicators) {\r\n <div class=\"dots\">\r\n @for (card of cards; track card.id; let i = $index) {\r\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\r\n }\r\n </div>\r\n }\r\n @if (showNavigationArrows) {\r\n <div class=\"arrow-controls\">\r\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\r\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"card-container\">\r\n @if (cards[currentIndex]) {\r\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\r\n [showHeaderBodyDivider]=\"true\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\r\n <div class=\"sa-card-title-subtitle-container\">\r\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\r\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showBrandFooter) {\r\n <div class=\"brand-logos-container\">\r\n <div class=\"brand-logos\">\r\n @for (logo of visibleLogos; track logo.id) {\r\n <div> \r\n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\r\n [customClass]=\"'logo-style'\">\r\n </sa-icon>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1253
1255
  }
1254
1256
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
1255
1257
  type: Component,
@@ -1270,25 +1272,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
1270
1272
 
1271
1273
  class CategoriesNavComponent {
1272
1274
  constructor() {
1273
- this.categories = [];
1275
+ this.config = { categories: [] };
1274
1276
  this.selectedCategoryId = '';
1275
1277
  this.categorySelected = new EventEmitter();
1278
+ this.helpButtonClicked = new EventEmitter();
1279
+ }
1280
+ get categories() {
1281
+ return this.config?.categories || [];
1282
+ }
1283
+ get title() {
1284
+ return this.config?.title || 'Categories:';
1285
+ }
1286
+ get helpSection() {
1287
+ return this.config?.helpSection;
1276
1288
  }
1277
1289
  onCategoryClick(category) {
1278
1290
  this.categorySelected.emit(category);
1279
1291
  }
1292
+ onHelpButtonClick() {
1293
+ this.helpButtonClicked.emit();
1294
+ }
1280
1295
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoriesNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1281
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CategoriesNavComponent, isStandalone: true, selector: "sa-categories-nav", inputs: { categories: "categories", selectedCategoryId: "selectedCategoryId" }, outputs: { categorySelected: "categorySelected" }, ngImport: i0, template: "<div class=\"categories-nav\">\r\n <div class=\"categories-header\">\r\n <h3>Categories:</h3>\r\n </div>\r\n <div class=\"categories-list\">\r\n <div \r\n *ngFor=\"let category of categories\" \r\n class=\"category-item\"\r\n [class.selected]=\"category.id === selectedCategoryId\"\r\n (click)=\"onCategoryClick(category)\">\r\n <span class=\"category-label\">{{ category.label }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".categories-nav{border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);padding:24px 0;height:100%}.categories-header{padding:0 24px 16px}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column}.category-item{padding:12px 24px;cursor:pointer;transition:background-color .2s ease;border-left:3px solid transparent}.category-item:hover{border-radius:4px;background-color:var(--primary-50, #F4EBFF)}.category-item.selected{border-radius:4px;background-color:var(--primary-500, #7F56D9)}.category-item.selected .category-label{color:var(--Structural-White, #FFF);font-weight:600}.category-label{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
1296
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CategoriesNavComponent, isStandalone: true, selector: "sa-categories-nav", inputs: { config: "config", selectedCategoryId: "selectedCategoryId" }, outputs: { categorySelected: "categorySelected", helpButtonClicked: "helpButtonClicked" }, ngImport: i0, template: "<div class=\"categories-nav\">\r\n <div class=\"categories-header\">\r\n <h3>{{ title }}</h3>\r\n </div>\r\n <div class=\"categories-list\">\r\n <div \r\n *ngFor=\"let category of categories\" \r\n class=\"category-item\"\r\n [class.selected]=\"category.id === selectedCategoryId\"\r\n (click)=\"onCategoryClick(category)\">\r\n <span class=\"category-label\">{{ category.label }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Configurable Help Section -->\r\n <div *ngIf=\"helpSection?.enabled\" class=\"help-section\">\r\n <div class=\"help-content\">\r\n <div class=\"help-icon\" *ngIf=\"helpSection.icon\">\r\n <sa-icon [icon]=\"helpSection.icon\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n <div class=\"help-text\" *ngIf=\"helpSection.title\">\r\n {{ helpSection.title }}\r\n </div>\r\n </div>\r\n <sa-button\r\n *ngIf=\"helpSection.button?.text\"\r\n [size]=\"helpSection.button?.size\"\r\n [type]=\"helpSection.button?.type\"\r\n [id]=\"helpSection.button?.id\"\r\n [state]=\"helpSection.button?.state\"\r\n [text]=\"helpSection.button?.text\"\r\n [ImagePath]=\"helpSection.button?.ImagePath\"\r\n [icon]=\"helpSection.button?.icon\"\r\n [iconPosition]=\"helpSection.button?.iconPosition\"\r\n [href]=\"helpSection.button?.href\"\r\n [hrefTarget]=\"helpSection.button?.hrefTarget\"\r\n [width]=\"helpSection.button?.width\"\r\n [isSubmit]=\"helpSection.button?.isSubmit\"\r\n [buttonIconSize]=\"helpSection.button?.buttonIconSize\"\r\n [showSpinner]=\"helpSection.button?.showSpinner\"\r\n (onClickEvent)=\"onHelpButtonClick()\">\r\n </sa-button>\r\n </div>\r\n</div>\r\n", styles: [".categories-nav{display:flex;flex-direction:column;width:296px;height:100%;max-height:100%;min-height:0;padding:0;align-items:flex-start;gap:var(--small-16px, 16px);flex-shrink:0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);overflow:hidden;box-sizing:border-box}.categories-header{display:flex;padding:var(--Medium-20px, 20px) var(--Medium-20px, 20px) 0px var(--Medium-20px, 20px);align-items:flex-start;gap:10px;align-self:stretch}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;padding:0px var(--small-20px, 20px);overflow-y:auto}.category-item{display:flex;gap:10px;align-items:center;padding:8px;gap:8px;align-self:stretch;border-radius:var(--small-8px, 4px);cursor:pointer}.category-item:hover:not(.selected){background:var(--primary-50, #F4EBFF)}.category-item.selected{background:var(--primary-500, #7F56D9)}.category-label{flex:1 0 0;color:var(--text-medium-emphasis, #6D6979);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}.category-item.selected .category-label{font-family:var(--font-family, Roboto);font-size:14px;color:var(--Structural-White, #FFF);font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.help-section{display:flex;padding:var(--small-16px, 16px) var(--small-8px, 8px);flex-direction:column;align-items:flex-start;gap:var(--Small-12px, 12px);align-self:stretch;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-neutral3, #FAFAFA);margin:0px var(--Small-12px, 20px) 0px var(--Small-12px, 20px)}.help-content{display:flex;align-items:center;gap:var(--Small-4px, 8px)}.help-icon{width:20px;height:20px;flex-shrink:0}.help-icon img{width:24px;height:24px;flex-shrink:0}.help-text{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
1282
1297
  }
1283
1298
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoriesNavComponent, decorators: [{
1284
1299
  type: Component,
1285
- args: [{ selector: 'sa-categories-nav', standalone: true, imports: [CommonModule], template: "<div class=\"categories-nav\">\r\n <div class=\"categories-header\">\r\n <h3>Categories:</h3>\r\n </div>\r\n <div class=\"categories-list\">\r\n <div \r\n *ngFor=\"let category of categories\" \r\n class=\"category-item\"\r\n [class.selected]=\"category.id === selectedCategoryId\"\r\n (click)=\"onCategoryClick(category)\">\r\n <span class=\"category-label\">{{ category.label }}</span>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".categories-nav{border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);padding:24px 0;height:100%}.categories-header{padding:0 24px 16px}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column}.category-item{padding:12px 24px;cursor:pointer;transition:background-color .2s ease;border-left:3px solid transparent}.category-item:hover{border-radius:4px;background-color:var(--primary-50, #F4EBFF)}.category-item.selected{border-radius:4px;background-color:var(--primary-500, #7F56D9)}.category-item.selected .category-label{color:var(--Structural-White, #FFF);font-weight:600}.category-label{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}\n"] }]
1286
- }], propDecorators: { categories: [{
1300
+ args: [{ selector: 'sa-categories-nav', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent], template: "<div class=\"categories-nav\">\r\n <div class=\"categories-header\">\r\n <h3>{{ title }}</h3>\r\n </div>\r\n <div class=\"categories-list\">\r\n <div \r\n *ngFor=\"let category of categories\" \r\n class=\"category-item\"\r\n [class.selected]=\"category.id === selectedCategoryId\"\r\n (click)=\"onCategoryClick(category)\">\r\n <span class=\"category-label\">{{ category.label }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Configurable Help Section -->\r\n <div *ngIf=\"helpSection?.enabled\" class=\"help-section\">\r\n <div class=\"help-content\">\r\n <div class=\"help-icon\" *ngIf=\"helpSection.icon\">\r\n <sa-icon [icon]=\"helpSection.icon\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n <div class=\"help-text\" *ngIf=\"helpSection.title\">\r\n {{ helpSection.title }}\r\n </div>\r\n </div>\r\n <sa-button\r\n *ngIf=\"helpSection.button?.text\"\r\n [size]=\"helpSection.button?.size\"\r\n [type]=\"helpSection.button?.type\"\r\n [id]=\"helpSection.button?.id\"\r\n [state]=\"helpSection.button?.state\"\r\n [text]=\"helpSection.button?.text\"\r\n [ImagePath]=\"helpSection.button?.ImagePath\"\r\n [icon]=\"helpSection.button?.icon\"\r\n [iconPosition]=\"helpSection.button?.iconPosition\"\r\n [href]=\"helpSection.button?.href\"\r\n [hrefTarget]=\"helpSection.button?.hrefTarget\"\r\n [width]=\"helpSection.button?.width\"\r\n [isSubmit]=\"helpSection.button?.isSubmit\"\r\n [buttonIconSize]=\"helpSection.button?.buttonIconSize\"\r\n [showSpinner]=\"helpSection.button?.showSpinner\"\r\n (onClickEvent)=\"onHelpButtonClick()\">\r\n </sa-button>\r\n </div>\r\n</div>\r\n", styles: [".categories-nav{display:flex;flex-direction:column;width:296px;height:100%;max-height:100%;min-height:0;padding:0;align-items:flex-start;gap:var(--small-16px, 16px);flex-shrink:0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);overflow:hidden;box-sizing:border-box}.categories-header{display:flex;padding:var(--Medium-20px, 20px) var(--Medium-20px, 20px) 0px var(--Medium-20px, 20px);align-items:flex-start;gap:10px;align-self:stretch}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;padding:0px var(--small-20px, 20px);overflow-y:auto}.category-item{display:flex;gap:10px;align-items:center;padding:8px;gap:8px;align-self:stretch;border-radius:var(--small-8px, 4px);cursor:pointer}.category-item:hover:not(.selected){background:var(--primary-50, #F4EBFF)}.category-item.selected{background:var(--primary-500, #7F56D9)}.category-label{flex:1 0 0;color:var(--text-medium-emphasis, #6D6979);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}.category-item.selected .category-label{font-family:var(--font-family, Roboto);font-size:14px;color:var(--Structural-White, #FFF);font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.help-section{display:flex;padding:var(--small-16px, 16px) var(--small-8px, 8px);flex-direction:column;align-items:flex-start;gap:var(--Small-12px, 12px);align-self:stretch;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-neutral3, #FAFAFA);margin:0px var(--Small-12px, 20px) 0px var(--Small-12px, 20px)}.help-content{display:flex;align-items:center;gap:var(--Small-4px, 8px)}.help-icon{width:20px;height:20px;flex-shrink:0}.help-icon img{width:24px;height:24px;flex-shrink:0}.help-text{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"] }]
1301
+ }], propDecorators: { config: [{
1287
1302
  type: Input
1288
1303
  }], selectedCategoryId: [{
1289
1304
  type: Input
1290
1305
  }], categorySelected: [{
1291
1306
  type: Output
1307
+ }], helpButtonClicked: [{
1308
+ type: Output
1292
1309
  }] } });
1293
1310
 
1294
1311
  class CheckboxComponent extends FieldType {
@@ -1394,11 +1411,11 @@ class ToolTipComponent {
1394
1411
  this.toolTipSkipped.emit();
1395
1412
  }
1396
1413
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1397
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition", simpleMode: "simpleMode" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \r\n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\r\n <div class=\"simple-tooltip-content\">\r\n <div class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\r\n {{message}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:156px;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:var(--small-4px, 4px);background:var(--grey-700, #1D2939);font-family:var(--font)}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);color:var(--structural-white, #FFF);font-weight:400;text-align:center;white-space:nowrap;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;letter-spacing:.25px}.simple-tooltip-content{display:flex;padding:var(--small-12px, 12px);flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;width:100%}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1414
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition", simpleMode: "simpleMode" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \r\n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\r\n <div class=\"simple-tooltip-content\" \r\n [class]=\"{ 'vertical-stack': messages.length <= 5, 'grid-stack': messages.length > 5, 'single-item': messages.length === 1 }\">\r\n <span class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\r\n {{message}}\r\n </span>\r\n </div>\r\n \r\n </div>\r\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:inline-block;width:auto;height:auto;max-width:500px;max-height:300px;overflow:visible}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);font-style:normal;color:var(--structural-white, #FFF);font-weight:400;white-space:nowrap;font-family:var(--font-family, Roboto);letter-spacing:.25px}.simple-tooltip-content{display:grid;gap:6px 12px;padding:var(--small-8px,8px) var(--small-12px,12px);justify-items:flex-start;width:100%;max-width:400px}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px;white-space:nowrap;display:block}.simple-tooltip-content.vertical-stack{grid-template-columns:1fr;justify-items:flex-start}.simple-tooltip-content.grid-stack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.simple-tooltip-content.single-item .simple-tooltip-message{white-space:normal}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1398
1415
  }
1399
1416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
1400
1417
  type: Component,
1401
- args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \r\n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\r\n <div class=\"simple-tooltip-content\">\r\n <div class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\r\n {{message}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:156px;width:100%;box-sizing:border-box;padding:8px 12px;border-radius:var(--small-4px, 4px);background:var(--grey-700, #1D2939);font-family:var(--font)}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);color:var(--structural-white, #FFF);font-weight:400;text-align:center;white-space:nowrap;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;letter-spacing:.25px}.simple-tooltip-content{display:flex;padding:var(--small-12px, 12px);flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;width:100%}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px}\n"] }]
1418
+ args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \r\n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\r\n <div class=\"simple-tooltip-content\" \r\n [class]=\"{ 'vertical-stack': messages.length <= 5, 'grid-stack': messages.length > 5, 'single-item': messages.length === 1 }\">\r\n <span class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\r\n {{message}}\r\n </span>\r\n </div>\r\n \r\n </div>\r\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:inline-block;width:auto;height:auto;max-width:500px;max-height:300px;overflow:visible}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);font-style:normal;color:var(--structural-white, #FFF);font-weight:400;white-space:nowrap;font-family:var(--font-family, Roboto);letter-spacing:.25px}.simple-tooltip-content{display:grid;gap:6px 12px;padding:var(--small-8px,8px) var(--small-12px,12px);justify-items:flex-start;width:100%;max-width:400px}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px;white-space:nowrap;display:block}.simple-tooltip-content.vertical-stack{grid-template-columns:1fr;justify-items:flex-start}.simple-tooltip-content.grid-stack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.simple-tooltip-content.single-item .simple-tooltip-message{white-space:normal}\n"] }]
1402
1419
  }], propDecorators: { messages: [{
1403
1420
  type: Input
1404
1421
  }], pointerPosition: [{
@@ -1469,7 +1486,7 @@ class GridCellComponent {
1469
1486
  toggleDropdown(element) {
1470
1487
  if (this.overlayRef) {
1471
1488
  this.overlayRef.dispose();
1472
- return;
1489
+ this.overlayRef = null;
1473
1490
  }
1474
1491
  const positionStrategy = this.overlay.position()
1475
1492
  .flexibleConnectedTo(element)
@@ -1501,7 +1518,12 @@ class GridCellComponent {
1501
1518
  });
1502
1519
  const portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
1503
1520
  this.overlayRef.attach(portal);
1504
- this.overlayRef.backdropClick().subscribe(() => this.overlayRef.dispose());
1521
+ this.overlayRef.backdropClick().subscribe(() => {
1522
+ if (this.overlayRef) {
1523
+ this.overlayRef.dispose();
1524
+ this.overlayRef = null;
1525
+ }
1526
+ });
1505
1527
  }
1506
1528
  handleActionClick(action, event) {
1507
1529
  event.stopPropagation();
@@ -1643,11 +1665,24 @@ class DataGridComponent {
1643
1665
  filter: true,
1644
1666
  resizable: true
1645
1667
  };
1668
+ // Pagination inputs (optional)
1669
+ this.pagination = false;
1670
+ this.paginationPageSize = 10;
1671
+ this.paginationPageSizeSelector = [10, 25, 50, 100];
1672
+ this.gridHeight = 420;
1673
+ // Locale overrides for pagination labels
1674
+ this.localeText = {
1675
+ 'Page Size': 'Show rows',
1676
+ to: ' - ',
1677
+ };
1646
1678
  }
1647
1679
  onGridReady(params) {
1648
1680
  this.gridApi = params.api;
1649
1681
  DataGridComponent.gridApiInstance = params.api;
1650
1682
  this.gridApi.sizeColumnsToFit();
1683
+ // if (this.pagination) {
1684
+ // this.gridApi.paginationGoToPage(0);
1685
+ // }
1651
1686
  }
1652
1687
  static updateCellContent(gridApi, rowIndex, field, newParams) {
1653
1688
  const rowNode = gridApi.getDisplayedRowAtIndex(rowIndex);
@@ -1750,17 +1785,25 @@ class DataGridComponent {
1750
1785
  };
1751
1786
  }
1752
1787
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1753
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataGridComponent, isStandalone: true, selector: "sa-data-grid", inputs: { columnDefs: "columnDefs", rowData: "rowData", defaultColDef: "defaultColDef" }, ngImport: i0, template: "<ag-grid-angular\r\n class=\"ag-theme-alpine sa-grid-theme\"\r\n [columnDefs]=\"columnDefs\"\r\n [rowData]=\"rowData\"\r\n [defaultColDef]=\"defaultColDef\"\r\n (gridReady)=\"onGridReady($event)\"\r\n domLayout='autoHeight'\r\n></ag-grid-angular>\r\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$5.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }] }); }
1788
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataGridComponent, isStandalone: true, selector: "sa-data-grid", inputs: { columnDefs: "columnDefs", rowData: "rowData", defaultColDef: "defaultColDef", pagination: "pagination", paginationPageSize: "paginationPageSize", paginationPageSizeSelector: "paginationPageSizeSelector", gridHeight: "gridHeight" }, ngImport: i0, template: "<ag-grid-angular\r\n class=\"ag-theme-alpine sa-grid-theme\"\r\n [columnDefs]=\"columnDefs\"\r\n [rowData]=\"rowData\"\r\n [defaultColDef]=\"defaultColDef\"\r\n (gridReady)=\"onGridReady($event)\"\r\n [domLayout]=\"gridHeight ? 'normal' : 'autoHeight'\"\r\n [style.height.px]=\"gridHeight\"\r\n [pagination]=\"pagination\"\r\n [paginationPageSize]=\"paginationPageSize\"\r\n [paginationPageSizeSelector]=\"paginationPageSizeSelector\"\r\n [localeText]=\"localeText\"\r\n></ag-grid-angular>\r\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$5.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }] }); }
1754
1789
  }
1755
1790
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataGridComponent, decorators: [{
1756
1791
  type: Component,
1757
- args: [{ selector: 'sa-data-grid', standalone: true, imports: [CommonModule, AgGridModule, GridCellComponent], template: "<ag-grid-angular\r\n class=\"ag-theme-alpine sa-grid-theme\"\r\n [columnDefs]=\"columnDefs\"\r\n [rowData]=\"rowData\"\r\n [defaultColDef]=\"defaultColDef\"\r\n (gridReady)=\"onGridReady($event)\"\r\n domLayout='autoHeight'\r\n></ag-grid-angular>\r\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"] }]
1792
+ args: [{ selector: 'sa-data-grid', standalone: true, imports: [CommonModule, AgGridModule, GridCellComponent], template: "<ag-grid-angular\r\n class=\"ag-theme-alpine sa-grid-theme\"\r\n [columnDefs]=\"columnDefs\"\r\n [rowData]=\"rowData\"\r\n [defaultColDef]=\"defaultColDef\"\r\n (gridReady)=\"onGridReady($event)\"\r\n [domLayout]=\"gridHeight ? 'normal' : 'autoHeight'\"\r\n [style.height.px]=\"gridHeight\"\r\n [pagination]=\"pagination\"\r\n [paginationPageSize]=\"paginationPageSize\"\r\n [paginationPageSizeSelector]=\"paginationPageSizeSelector\"\r\n [localeText]=\"localeText\"\r\n></ag-grid-angular>\r\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"] }]
1758
1793
  }], propDecorators: { columnDefs: [{
1759
1794
  type: Input
1760
1795
  }], rowData: [{
1761
1796
  type: Input
1762
1797
  }], defaultColDef: [{
1763
1798
  type: Input
1799
+ }], pagination: [{
1800
+ type: Input
1801
+ }], paginationPageSize: [{
1802
+ type: Input
1803
+ }], paginationPageSizeSelector: [{
1804
+ type: Input
1805
+ }], gridHeight: [{
1806
+ type: Input
1764
1807
  }] } });
1765
1808
 
1766
1809
  class DatepickerComponent extends FieldType {
@@ -1932,6 +1975,8 @@ class FormInputComponent extends FieldType {
1932
1975
  this.chipValues = [];
1933
1976
  this.isMultiValue = false;
1934
1977
  this.currentInputValue = '';
1978
+ this.startInd = 0;
1979
+ this.labelLimit = 1;
1935
1980
  this.suppressOnBlur = false;
1936
1981
  this.predefinedValidators = {
1937
1982
  email: [Validators.email, Validators.required],
@@ -2186,8 +2231,16 @@ class FormInputComponent extends FieldType {
2186
2231
  return '0px'; // No gap
2187
2232
  }
2188
2233
  }
2234
+ shiftLabel(action) {
2235
+ if (action === 'clicked') {
2236
+ this.startInd = 0;
2237
+ }
2238
+ else {
2239
+ this.startInd = Math.max(0, this.chipValues.length - this.labelLimit);
2240
+ }
2241
+ }
2189
2242
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2190
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon", params: "params" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-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-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <!-- Multi-value chip display -->\r\n @if(isMultiValue) {\r\n <div class=\"chip-container\">\r\n <sa-chip \r\n *ngFor=\"let chip of chipValues; let i = index\"\r\n [text]=\"chip.value || chip.label || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'primary'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"removeChip(i)\">\r\n </sa-chip>\r\n <input\r\n [ngClass]=\"'chip-input'\"\r\n matInput [type]=\"type\"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onChipBlur()\"\r\n (input)=\"onChipInputChange($event)\"\r\n (keydown)=\"onChipKeyDown($event)\"\r\n [(ngModel)]=\"currentInputValue\"\r\n #formInput />\r\n </div>\r\n } @else {\r\n <!-- Standard single-value input (backward compatibility) -->\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n }\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:1px solid var(--grey-100, #EAECF0);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { 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: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
2243
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon", params: "params" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-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-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <!-- Multi-value chip display -->\r\n @if(isMultiValue) {\r\n <div class=\"chip-container\">\r\n <sa-chip \r\n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\r\n [text]=\"chip?.value || chip?.label || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'primary'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"removeChip(i)\">\r\n </sa-chip>\r\n \r\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\r\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \r\n type=\"regular\" \r\n state=\"primary\" \r\n filling=\"filled\">\r\n </sa-chip>\r\n </div>\r\n\r\n <input\r\n [ngClass]=\"'chip-input'\"\r\n matInput [type]=\"type\"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onChipBlur()\"\r\n (input)=\"onChipInputChange($event)\"\r\n (keydown)=\"onChipKeyDown($event)\"\r\n [(ngModel)]=\"currentInputValue\"\r\n #formInput />\r\n </div>\r\n } @else {\r\n <!-- Standard single-value input (backward compatibility) -->\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n }\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:1px solid var(--grey-100, #EAECF0);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { 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: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
2191
2244
  }
2192
2245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
2193
2246
  type: Component,
@@ -2199,7 +2252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
2199
2252
  IconComponent,
2200
2253
  MatTooltipModule,
2201
2254
  ChipsComponent
2202
- ], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-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-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <!-- Multi-value chip display -->\r\n @if(isMultiValue) {\r\n <div class=\"chip-container\">\r\n <sa-chip \r\n *ngFor=\"let chip of chipValues; let i = index\"\r\n [text]=\"chip.value || chip.label || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'primary'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"removeChip(i)\">\r\n </sa-chip>\r\n <input\r\n [ngClass]=\"'chip-input'\"\r\n matInput [type]=\"type\"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onChipBlur()\"\r\n (input)=\"onChipInputChange($event)\"\r\n (keydown)=\"onChipKeyDown($event)\"\r\n [(ngModel)]=\"currentInputValue\"\r\n #formInput />\r\n </div>\r\n } @else {\r\n <!-- Standard single-value input (backward compatibility) -->\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n }\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:1px solid var(--grey-100, #EAECF0);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}\n"] }]
2255
+ ], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-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-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <!-- Multi-value chip display -->\r\n @if(isMultiValue) {\r\n <div class=\"chip-container\">\r\n <sa-chip \r\n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\r\n [text]=\"chip?.value || chip?.label || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'primary'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"removeChip(i)\">\r\n </sa-chip>\r\n \r\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\r\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \r\n type=\"regular\" \r\n state=\"primary\" \r\n filling=\"filled\">\r\n </sa-chip>\r\n </div>\r\n\r\n <input\r\n [ngClass]=\"'chip-input'\"\r\n matInput [type]=\"type\"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onChipBlur()\"\r\n (input)=\"onChipInputChange($event)\"\r\n (keydown)=\"onChipKeyDown($event)\"\r\n [(ngModel)]=\"currentInputValue\"\r\n #formInput />\r\n </div>\r\n } @else {\r\n <!-- Standard single-value input (backward compatibility) -->\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n }\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:1px solid var(--grey-100, #EAECF0);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}\n"] }]
2203
2256
  }], ctorParameters: () => [], propDecorators: { formInput: [{
2204
2257
  type: ViewChild,
2205
2258
  args: ['formInput']
@@ -2463,7 +2516,7 @@ class FormSelectComponent extends FieldType {
2463
2516
  }
2464
2517
  }
2465
2518
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2466
- 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=\"default\" 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}.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"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }] }); }
2519
+ 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 }] }); }
2467
2520
  }
2468
2521
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
2469
2522
  type: Component,
@@ -2479,7 +2532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
2479
2532
  IconComponent,
2480
2533
  CommonModule,
2481
2534
  MatTooltipModule
2482
- ], 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=\"default\" 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}.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"] }]
2535
+ ], 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"] }]
2483
2536
  }], propDecorators: { hoverEvent: [{
2484
2537
  type: Output,
2485
2538
  args: ['hoverEvent']
@@ -2510,9 +2563,21 @@ class MessageBannerV2Component {
2510
2563
  this.form = new FormGroup({});
2511
2564
  this.model = {};
2512
2565
  this.fields = [];
2566
+ this.allFieldsFilled = signal(false);
2567
+ this.additionalFieldRows = [];
2513
2568
  this.onFormEvent = new EventEmitter();
2514
2569
  this.buttons = [];
2515
2570
  this.buttonClick = new EventEmitter();
2571
+ // Group initial fields into rows based on fieldsPerRow
2572
+ this.initialFieldRows = computed(() => {
2573
+ const initialFields = this.getInitialFields();
2574
+ const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
2575
+ const rows = [];
2576
+ for (let i = 0; i < initialFields.length; i += fieldsPerRow) {
2577
+ rows.push(initialFields.slice(i, i + fieldsPerRow));
2578
+ }
2579
+ return rows;
2580
+ });
2516
2581
  }
2517
2582
  // Computed properties for unified access
2518
2583
  get activeFormInputs() {
@@ -2729,18 +2794,12 @@ class MessageBannerV2Component {
2729
2794
  input.value = model[key];
2730
2795
  // Emit the change event to maintain compatibility with existing logic
2731
2796
  this.onFormEvent.emit({ type: 'form-input-change', data: { label: input.label, value: model[key] } });
2797
+ this.allFieldsFilled.set(this.areAllVisibleFieldsFilled());
2732
2798
  }
2733
2799
  });
2734
- }
2735
- shouldShowAdditionalFields() {
2736
- if (!this.activeFormInputs || this.activeFormInputs.length === 0)
2737
- return false;
2738
- if (!this.activeFormLayout.conditionalFields) {
2739
- const initialCount = this.activeFormLayout.initialVisibleFields || this.activeFormLayout.fieldsPerRow || 2;
2740
- const initialFields = this.activeFormInputs.slice(0, initialCount);
2741
- return initialFields.every(field => field.value && field.value.trim && field.value.trim() !== '');
2800
+ if (this.allFieldsFilled()) {
2801
+ this.additionalFieldRows = this.getAdditionalFieldRows();
2742
2802
  }
2743
- return this.activeFormLayout.conditionalFields.showWhen(this.model);
2744
2803
  }
2745
2804
  // Get initial fields to display in the first row
2746
2805
  getInitialFields() {
@@ -2763,20 +2822,6 @@ class MessageBannerV2Component {
2763
2822
  // Otherwise, show remaining fields after initial count
2764
2823
  return this.activeFormInputs.slice(initialCount);
2765
2824
  }
2766
- // Get the actual field index for initial fields
2767
- getInitialFieldIndex(localIndex) {
2768
- return localIndex;
2769
- }
2770
- // Get the actual field index for additional fields
2771
- getAdditionalFieldIndex(localIndex) {
2772
- const initialCount = this.activeFormLayout.initialVisibleFields || this.activeFormLayout.fieldsPerRow || 2;
2773
- // If conditional fields are specified, use those indices
2774
- if (this.activeFormLayout.conditionalFields?.fields) {
2775
- return this.activeFormLayout.conditionalFields.fields[localIndex] || 0;
2776
- }
2777
- // Otherwise, offset by initial count
2778
- return initialCount + localIndex;
2779
- }
2780
2825
  // Get CSS class for additional fields to maintain layout
2781
2826
  getAdditionalFieldClass(localIndex) {
2782
2827
  const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
@@ -2796,8 +2841,7 @@ class MessageBannerV2Component {
2796
2841
  return true;
2797
2842
  // Get all currently visible fields
2798
2843
  const initialFields = this.getInitialFields();
2799
- const additionalFields = this.shouldShowAdditionalFields() ? this.getAdditionalFields() : [];
2800
- const allVisibleFields = [...initialFields, ...additionalFields];
2844
+ const allVisibleFields = [...initialFields];
2801
2845
  // Check if all visible fields have values
2802
2846
  const allFieldsFilled = allVisibleFields.every(field => {
2803
2847
  const modelKey = field.label.toLowerCase().replace(/\s+/g, '_');
@@ -2814,16 +2858,42 @@ class MessageBannerV2Component {
2814
2858
  }
2815
2859
  return true;
2816
2860
  });
2817
- // Also check if the form is valid
2818
2861
  const formValid = this.form.valid;
2819
2862
  return allFieldsFilled && formValid;
2820
2863
  }
2864
+ // Group additional fields into rows based on fieldsPerRow
2865
+ getAdditionalFieldRows() {
2866
+ const additionalFields = this.getAdditionalFields();
2867
+ const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
2868
+ const rows = [];
2869
+ for (let i = 0; i < additionalFields.length; i += fieldsPerRow) {
2870
+ rows.push(additionalFields.slice(i, i + fieldsPerRow));
2871
+ }
2872
+ return rows;
2873
+ }
2874
+ // Get field index for initial field rows
2875
+ getInitialFieldRowIndex(rowIndex, fieldIndex) {
2876
+ const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
2877
+ return (rowIndex * fieldsPerRow) + fieldIndex;
2878
+ }
2879
+ // Get field index for additional field rows
2880
+ getAdditionalFieldRowIndex(rowIndex, fieldIndex) {
2881
+ const fieldsPerRow = this.activeFormLayout.fieldsPerRow || 2;
2882
+ const initialCount = this.activeFormLayout.initialVisibleFields || this.activeFormLayout.fieldsPerRow || 2;
2883
+ // If conditional fields are specified, use those indices
2884
+ if (this.activeFormLayout.conditionalFields?.fields) {
2885
+ const flatIndex = (rowIndex * fieldsPerRow) + fieldIndex;
2886
+ return this.activeFormLayout.conditionalFields.fields[flatIndex] || 0;
2887
+ }
2888
+ // Otherwise, offset by initial count
2889
+ return initialCount + (rowIndex * fieldsPerRow) + fieldIndex;
2890
+ }
2821
2891
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2822
- 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 <form [formGroup]=\"form\" class=\"dialog-form\">\r\n <!-- Initial fields row (dynamic count based on formLayout.fieldsPerRow) -->\r\n <div class=\"form-row\">\r\n <div class=\"form-field-wrapper\" *ngFor=\"let input of getInitialFields(); let i = index\">\r\n <formly-form \r\n [form]=\"form\"\r\n [fields]=\"[fields[getInitialFieldIndex(i)]]\"\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 (conditional based on formLayout.conditionalFields) -->\r\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\r\n <div class=\"form-row\">\r\n <div class=\"form-field-wrapper\" *ngFor=\"let input of getAdditionalFields(); let i = index\">\r\n <formly-form \r\n [form]=\"form\"\r\n [fields]=\"[fields[getAdditionalFieldIndex(i)]]\"\r\n [model]=\"model\"\r\n (modelChange)=\"onFormModelChange($event)\"\r\n *ngIf=\"fields[getAdditionalFieldIndex(i)]\">\r\n </formly-form>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\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 \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{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}.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}::ng-deep .dialog-form .ng-select .ng-placeholder{color:var(--text-medium-emphasis, #6D6979);font-size:14px}\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"] }] }); }
2892
+ 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"] }] }); }
2823
2893
  }
2824
2894
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
2825
2895
  type: Component,
2826
- 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 <form [formGroup]=\"form\" class=\"dialog-form\">\r\n <!-- Initial fields row (dynamic count based on formLayout.fieldsPerRow) -->\r\n <div class=\"form-row\">\r\n <div class=\"form-field-wrapper\" *ngFor=\"let input of getInitialFields(); let i = index\">\r\n <formly-form \r\n [form]=\"form\"\r\n [fields]=\"[fields[getInitialFieldIndex(i)]]\"\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 (conditional based on formLayout.conditionalFields) -->\r\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\r\n <div class=\"form-row\">\r\n <div class=\"form-field-wrapper\" *ngFor=\"let input of getAdditionalFields(); let i = index\">\r\n <formly-form \r\n [form]=\"form\"\r\n [fields]=\"[fields[getAdditionalFieldIndex(i)]]\"\r\n [model]=\"model\"\r\n (modelChange)=\"onFormModelChange($event)\"\r\n *ngIf=\"fields[getAdditionalFieldIndex(i)]\">\r\n </formly-form>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\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 \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{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}.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}::ng-deep .dialog-form .ng-select .ng-placeholder{color:var(--text-medium-emphasis, #6D6979);font-size:14px}\n"] }]
2896
+ 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"] }]
2827
2897
  }], propDecorators: { messageType: [{
2828
2898
  type: Input
2829
2899
  }], contactUrl: [{
@@ -2917,11 +2987,11 @@ class DialogComponent {
2917
2987
  this.dialogButtonClick.emit({ event: chip, type: 'chip-remove' });
2918
2988
  }
2919
2989
  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 }); }
2920
- 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 [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}.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%}\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"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
2990
+ 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 }] }); }
2921
2991
  }
2922
2992
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, decorators: [{
2923
2993
  type: Component,
2924
- args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule, FormInputComponent], 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 [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}.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%}\n"] }]
2994
+ args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule, FormInputComponent], 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"] }]
2925
2995
  }], ctorParameters: () => [{ type: i1$7.MatDialogRef, decorators: [{
2926
2996
  type: Optional
2927
2997
  }] }, { type: undefined, decorators: [{
@@ -3138,7 +3208,7 @@ class FilterComponent {
3138
3208
  window.scrollTo({ top: 0, behavior: 'smooth' });
3139
3209
  }
3140
3210
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
3141
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FilterComponent, isStandalone: true, selector: "sa-filter", inputs: { config: "config", filterValues: "filterValues" }, outputs: { onClickEvent: "onClickEvent", filterSelected: "filterSelected", filterRemoved: "filterRemoved", dropdownToggled: "dropdownToggled" }, viewQueries: [{ propertyName: "filterByContent", first: true, predicate: ["filterByContent"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n\r\n <div class=\"filter-container\">\r\n <!-- Main Filter By Dropdown -->\r\n <div class=\"dropdown filter-by-dropdown\">\r\n <button class=\"dropdown-btn filter-by-btn\" [ngClass]=\"{\r\n 'filled-btn': config?.filterButtonStyle === 'filled',\r\n 'outlined-btn': config?.filterButtonStyle === 'outlined'\r\n }\" (click)=\"toggleDropdown($event)\">\r\n <span>{{config?.filterLabel}}</span>\r\n <sa-icon class=\"flex\" [icon]=\"'downChevronOutlined'\" [size]=\"'20'\"></sa-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-content filter-by-content\" #filterByContent (touchstart)=\"onTouchStart($event)\"\r\n (touchend)=\"onTouchEnd()\">\r\n <div class=\"filter-section\">\r\n <!-- Dynamic Filter Items -->\r\n <div *ngFor=\"let item of config?.filterItems\" class=\"filter-item\">\r\n <div class=\"filter-header\" [id]=\"item.text+'Header'\" (click)=\"toggleSubmenu(item.text,$event)\">\r\n <span class=\"filter-label\">{{item.text}}</span>\r\n <sa-icon *ngIf=\"item?.subMenu?.length\" [icon]=\"'rightChevronOutlined'\"\r\n [size]=\"'16'\"></sa-icon>\r\n </div>\r\n <ng-container *ngIf=\"item?.subMenu?.length\">\r\n <div class=\"filter-submenu\" [id]=\"item.text+'Submenu'\">\r\n <div *ngFor=\"let option of item.subMenu\" class=\"filter-option\"\r\n [attr.data-value]=\"option.value\"\r\n [ngClass]=\"{'selected': isFilterOptionSelected(item.id, option.value)}\"\r\n (click)=\"selectFilter($event)\">\r\n <span>{{option.label}}</span>\r\n <div class=\"info-icon\" *ngIf=\"option.icon\">\r\n <sa-icon class=\"flex\" [icon]=\"option.icon.icon\"\r\n [iconPath]=\"option.icon.iconPath\" [iconUrl]=\"option.icon.iconUrl\"\r\n [size]=\"option.icon.size\" [customClass]=\"option.icon.customClass\"></sa-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".filter-container{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}.dropdown{position:relative;display:flex}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}.filled-btn{background-color:#7f56d9;color:#fff;border:none;border-radius:4px}.outlined-btn{border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}.outlined-btn:hover{background-color:#f9fafb}.filter-by-btn{padding:0 12px;height:36px;cursor:pointer;display:flex;align-items:center;flex:1 0 0;font-size:.875rem;font-weight:500;transition:all .2s ease;min-width:120px;justify-content:space-between}.filter-by-btn span{font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.filter-by-btn:active{transform:translateY(0)}.filter-by-content{position:absolute;top:100%;left:0;min-width:-webkit-fill-available;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.dropdown.active .filter-by-content{opacity:1;visibility:visible;transform:translateY(0)}.filter-section{padding:0rem}.filter-item{border-bottom:1px solid #f3f4f6;position:relative}.filter-item:last-child{border-bottom:none}.filter-header{padding:.75rem .6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.filter-header:hover{background:var(--Primary-50, #F4EBFF)}.filter-label{font-weight:500;color:#374151;font-size:.875rem}.filter-arrow{transition:transform .2s ease;color:#9ca3af}.filter-item.active{background:var(--Primary-50, #F4EBFF)}.filter-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;min-width:169px;opacity:0;visibility:hidden;transform:translate(-10px);transition:all .2s ease;z-index:1001}.filter-submenu.show-left{left:auto;right:100%;transform:translate(10px);margin-left:0;margin-right:.5rem}.filter-item.active .filter-submenu{opacity:1;visibility:visible;transform:translate(0)}.filter-item.active .filter-submenu.show-left{transform:translate(0)}.filter-option{padding:.5rem;gap:4px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease;align-self:stretch}.filter-option:hover,.filter-option.selected{background:var(--Primary-50, #F4EBFF)}.filter-option span{font-size:.875rem;color:#374151;margin-right:5px}.info-icon{opacity:.6;transition:opacity .2s ease;margin-top:5px}.info-icon:hover{opacity:1}.info-icon svg{width:14px;height:14px;color:#9ca3af}.add-user-btn{background:#7c3aed;color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:all .2s ease}.selected-filters{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1rem}.filter-container{flex-direction:column;align-items:stretch}.filter-by-content{position:fixed;top:auto;left:1rem;right:1rem;bottom:1rem;min-width:auto;max-height:70vh;overflow-y:auto}.filter-by-btn,.add-user-btn{width:100%;justify-content:center}.filter-submenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:90vw;max-height:60vh;overflow-y:auto}.filter-submenu.show-left{left:50%;right:auto;transform:translate(-50%,-50%);margin:0}.filter-item.active .filter-submenu,.filter-item.active .filter-submenu.show-left{transform:translate(-50%,-50%)}}.dropdown.filter-by-dropdown.active{border-radius:4px;border:1px solid var(--Primary-500, #7F56D9);background:var(--Structural-White, #FFF)}.filter-by-content{-webkit-overflow-scrolling:touch}\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: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
3211
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FilterComponent, isStandalone: true, selector: "sa-filter", inputs: { config: "config", filterValues: "filterValues" }, outputs: { onClickEvent: "onClickEvent", filterSelected: "filterSelected", filterRemoved: "filterRemoved", dropdownToggled: "dropdownToggled" }, viewQueries: [{ propertyName: "filterByContent", first: true, predicate: ["filterByContent"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n\r\n <div class=\"filter-container\">\r\n <!-- Main Filter By Dropdown -->\r\n <div class=\"dropdown filter-by-dropdown\">\r\n <button class=\"dropdown-btn filter-by-btn\" [ngClass]=\"{\r\n 'filled-btn': config?.filterButtonStyle === 'filled',\r\n 'outlined-btn': config?.filterButtonStyle === 'outlined'\r\n }\" (click)=\"toggleDropdown($event)\">\r\n <span>{{config?.filterLabel}}</span>\r\n <sa-icon class=\"flex\" [icon]=\"'downChevronOutlined'\" [size]=\"'20'\"></sa-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-content filter-by-content\" #filterByContent (touchstart)=\"onTouchStart($event)\"\r\n (touchend)=\"onTouchEnd()\">\r\n <div class=\"filter-section\">\r\n <!-- Dynamic Filter Items -->\r\n <div *ngFor=\"let item of config?.filterItems\" class=\"filter-item\">\r\n <div class=\"filter-header\" [id]=\"item.text+'Header'\" (click)=\"toggleSubmenu(item.text,$event)\">\r\n <span class=\"filter-label\">{{item.text}}</span>\r\n <sa-icon *ngIf=\"item?.subMenu?.length\" [icon]=\"'rightChevronOutlined'\"\r\n [size]=\"'16'\"></sa-icon>\r\n </div>\r\n <ng-container *ngIf=\"item?.subMenu?.length\">\r\n <div class=\"filter-submenu\" [id]=\"item.text+'Submenu'\">\r\n <div *ngFor=\"let option of item.subMenu\" class=\"filter-option\"\r\n [attr.data-value]=\"option.value\"\r\n [ngClass]=\"{'selected': isFilterOptionSelected(item.id, option.value)}\"\r\n (click)=\"selectFilter($event)\">\r\n <span>{{option.label}}</span>\r\n <div class=\"info-icon\" *ngIf=\"option.icon\">\r\n <sa-icon class=\"flex\" [icon]=\"option.icon.icon\"\r\n [iconPath]=\"option.icon.iconPath\" [iconUrl]=\"option.icon.iconUrl\"\r\n [size]=\"option.icon.size\" [customClass]=\"option.icon.customClass\"></sa-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".filter-container{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}.dropdown{position:relative;display:flex}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}.filled-btn{background-color:#7f56d9;color:#fff;border:none;border-radius:4px}.outlined-btn{border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}.outlined-btn:hover{background-color:#f9fafb}.filter-by-btn{padding:0 12px;height:36px;cursor:pointer;display:flex;align-items:center;flex:1 0 0;font-size:.875rem;font-weight:500;transition:all .2s ease;min-width:120px;justify-content:space-between}.filter-by-btn span{font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.filter-by-btn:active{transform:translateY(0)}.filter-by-content{position:absolute;top:100%;left:0;min-width:-webkit-fill-available;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.dropdown.active .filter-by-content{opacity:1;visibility:visible;transform:translateY(0)}.filter-section{padding:0rem}.filter-item{border-bottom:1px solid #f3f4f6;position:relative}.filter-item:last-child{border-bottom:none}.filter-header{padding:.75rem .6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.filter-header:hover{background:var(--Primary-50, #F4EBFF)}.filter-label{font-weight:500;color:#374151;font-size:.875rem}.filter-arrow{transition:transform .2s ease;color:#9ca3af}.filter-item.active{background:var(--Primary-50, #F4EBFF)}.filter-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;min-width:169px;opacity:0;visibility:hidden;transform:translate(-10px);transition:all .2s ease;z-index:1001}.filter-submenu.show-left{left:auto;right:100%;transform:translate(10px);margin-left:0;margin-right:.5rem}.filter-item.active .filter-submenu{opacity:1;visibility:visible;transform:translate(0)}.filter-item.active .filter-submenu.show-left{transform:translate(0)}.filter-option{padding:.5rem;gap:4px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease;align-self:stretch}.filter-option:hover,.filter-option.selected{background:var(--Primary-50, #F4EBFF)}.filter-option span{font-size:.875rem;color:#374151;margin-right:5px}.info-icon{opacity:.6;transition:opacity .2s ease;margin-top:5px}.info-icon:hover{opacity:1}.info-icon svg{width:14px;height:14px;color:#9ca3af}.add-user-btn{background:#7c3aed;color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:all .2s ease}.selected-filters{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1rem}.filter-container{flex-direction:column;align-items:stretch}.filter-by-content{position:fixed;top:auto;left:1rem;right:1rem;bottom:1rem;min-width:auto;max-height:70vh;overflow-y:auto}.filter-by-btn,.add-user-btn{width:100%;justify-content:center}.filter-submenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:90vw;max-height:60vh;overflow-y:auto}.filter-submenu.show-left{left:50%;right:auto;transform:translate(-50%,-50%);margin:0}.filter-item.active .filter-submenu,.filter-item.active .filter-submenu.show-left{transform:translate(-50%,-50%)}}.dropdown.filter-by-dropdown.active{border-radius:4px;border:1px solid var(--Primary-500, #7F56D9);background:var(--Structural-White, #FFF)}.filter-by-content{-webkit-overflow-scrolling:touch}\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: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
3142
3212
  }
3143
3213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterComponent, decorators: [{
3144
3214
  type: Component,
@@ -3192,11 +3262,11 @@ class HeaderComponent {
3192
3262
  }
3193
3263
  }
3194
3264
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3195
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { header: "header", chipConfig: "chipConfig", info: "info", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
3265
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { header: "header", chipConfig: "chipConfig", info: "info", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\" [class.icon-left]=\"!header?.icon?.iconPosition || header?.icon?.iconPosition === 'left'\" \r\n [class.icon-right]=\"header?.icon?.iconPosition === 'right'\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [iconPosition]=\"header?.icon?.iconPosition\" [size]=\"header?.icon?.size || '24px'\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container.icon-left{flex-direction:row}.header-name-container.icon-right{flex-direction:row-reverse}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
3196
3266
  }
3197
3267
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
3198
3268
  type: Component,
3199
- args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"] }]
3269
+ args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\" [class.icon-left]=\"!header?.icon?.iconPosition || header?.icon?.iconPosition === 'left'\" \r\n [class.icon-right]=\"header?.icon?.iconPosition === 'right'\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [iconPosition]=\"header?.icon?.iconPosition\" [size]=\"header?.icon?.size || '24px'\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container.icon-left{flex-direction:row}.header-name-container.icon-right{flex-direction:row-reverse}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"] }]
3200
3270
  }], ctorParameters: () => [], propDecorators: { header: [{
3201
3271
  type: Input
3202
3272
  }], chipConfig: [{
@@ -3222,7 +3292,7 @@ class LayoutSectionComponent {
3222
3292
  }
3223
3293
  }
3224
3294
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3225
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LayoutSectionComponent, isStandalone: true, selector: "sa-layout-section", inputs: { config: "config" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"layout-section\">\r\n <div class=\"layout-section__header\">\r\n <div class=\"layout-section__title\">\r\n <div class=\"header-name-container\">\r\n @if (config?.headerIcon?.icon) {\r\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\r\n [icon]=\"config?.headerIcon.icon\"\r\n [size]=\"config?.headerIcon.size || '24'\" />\r\n }\r\n <h2>{{ config?.headerText }}</h2>\r\n </div>\r\n @if (config?.chips?.length) {\r\n <div class=\"layout-section__chips\">\r\n @for (chip of config?.chips; track chip.id) {\r\n <sa-chip\r\n [id]=\"chip.id\"\r\n [text]=\"chip.text\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [iconPath]=\"chip.iconPath\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\">\r\n </sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"layout-section__actions\">\r\n @if (config?.secondaryButton) {\r\n <sa-button \r\n [id]=\"config.secondaryButton.id\"\r\n [text]=\"config.secondaryButton.text\"\r\n [type]=\"config.secondaryButton.type\"\r\n [state]=\"config.secondaryButton.state\"\r\n [size]=\"config.secondaryButton.size\"\r\n [ImagePath]=\"config.secondaryButton.imagePath\"\r\n [icon]=\"config.secondaryButton.icon\"\r\n [iconPosition]=\"config.secondaryButton.iconPosition\"\r\n [href]=\"config.secondaryButton.href\"\r\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\r\n [width]=\"config?.secondaryButton.width\"\r\n [isSubmit]=\"config.secondaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.secondaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\r\n </sa-button>\r\n }\r\n @if (config?.primaryButton) {\r\n <sa-button\r\n [id]=\"config.primaryButton.id\"\r\n [text]=\"config.primaryButton.text\"\r\n [type]=\"config.primaryButton.type\"\r\n [state]=\"config.primaryButton.state\"\r\n [size]=\"config.primaryButton.size\"\r\n [ImagePath]=\"config.primaryButton.imagePath\"\r\n [icon]=\"config.primaryButton.icon\"\r\n [iconPosition]=\"config.primaryButton.iconPosition\"\r\n [href]=\"config.primaryButton.href\"\r\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\r\n [width]=\"config.primaryButton.width\"\r\n [isSubmit]=\"config.primaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.primaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('primary', $event)\">\r\n </sa-button>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div class=\"layout-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: 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"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
3295
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LayoutSectionComponent, isStandalone: true, selector: "sa-layout-section", inputs: { config: "config" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"layout-section\">\r\n <div class=\"layout-section__header\">\r\n <div class=\"layout-section__title\">\r\n <div class=\"header-name-container\">\r\n @if (config?.headerIcon?.icon) {\r\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\r\n [icon]=\"config?.headerIcon.icon\"\r\n [size]=\"config?.headerIcon.size || '24'\" />\r\n }\r\n <h2>{{ config?.headerText }}</h2>\r\n </div>\r\n @if (config?.chips?.length) {\r\n <div class=\"layout-section__chips\">\r\n @for (chip of config?.chips; track chip.id) {\r\n <sa-chip\r\n [id]=\"chip.id\"\r\n [text]=\"chip.text\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [iconPath]=\"chip.iconPath\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\">\r\n </sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"layout-section__actions\">\r\n @if (config?.secondaryButton) {\r\n <sa-button \r\n [id]=\"config.secondaryButton.id\"\r\n [text]=\"config.secondaryButton.text\"\r\n [type]=\"config.secondaryButton.type\"\r\n [state]=\"config.secondaryButton.state\"\r\n [size]=\"config.secondaryButton.size\"\r\n [ImagePath]=\"config.secondaryButton.imagePath\"\r\n [icon]=\"config.secondaryButton.icon\"\r\n [iconPosition]=\"config.secondaryButton.iconPosition\"\r\n [href]=\"config.secondaryButton.href\"\r\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\r\n [width]=\"config?.secondaryButton.width\"\r\n [isSubmit]=\"config.secondaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.secondaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\r\n </sa-button>\r\n }\r\n @if (config?.primaryButton) {\r\n <sa-button\r\n [id]=\"config.primaryButton.id\"\r\n [text]=\"config.primaryButton.text\"\r\n [type]=\"config.primaryButton.type\"\r\n [state]=\"config.primaryButton.state\"\r\n [size]=\"config.primaryButton.size\"\r\n [ImagePath]=\"config.primaryButton.imagePath\"\r\n [icon]=\"config.primaryButton.icon\"\r\n [iconPosition]=\"config.primaryButton.iconPosition\"\r\n [href]=\"config.primaryButton.href\"\r\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\r\n [width]=\"config.primaryButton.width\"\r\n [isSubmit]=\"config.primaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.primaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('primary', $event)\">\r\n </sa-button>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div class=\"layout-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: 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: "ngmodule", type: HttpClientModule }] }); }
3226
3296
  }
3227
3297
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, decorators: [{
3228
3298
  type: Component,
@@ -3290,7 +3360,7 @@ class SAMenuItemComponent {
3290
3360
  this.onEvent.emit({ type: 'click', item });
3291
3361
  }
3292
3362
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3293
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item", showRound: "showRound" }, outputs: { onEvent: "onEvent" }, providers: [IconService], viewQueries: [{ propertyName: "menuDirective", first: true, predicate: i0.forwardRef(() => MenuDirective), descendants: true }], ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\r\n <span>{{item.label}}</span>\r\n</div> -->\r\n\r\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\r\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\r\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\r\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\r\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\r\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\r\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n </div>\r\n <!-- Section for showing chips if chips are available in object -->\r\n <div *ngIf=\"item.chips\" class=\"tags\">\r\n @for (itm of item.chips; track $index) {\r\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\r\n [text]=\"itm.text\"></sa-chip>\r\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\r\n }\r\n </div>\r\n</div>\r\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center}.section-item .status{padding:.75rem}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChipsComponent), selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => HttpClientModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: i0.forwardRef(() => StatusDotComponent), selector: "sa-status-dot", inputs: ["config"] }, { kind: "directive", type: i0.forwardRef(() => MenuDirective), selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
3363
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item", showRound: "showRound" }, outputs: { onEvent: "onEvent" }, providers: [IconService], viewQueries: [{ propertyName: "menuDirective", first: true, predicate: i0.forwardRef(() => MenuDirective), descendants: true }], ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\r\n <span>{{item.label}}</span>\r\n</div> -->\r\n\r\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\r\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\r\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\r\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\r\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\r\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\r\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n </div>\r\n <!-- Section for showing chips if chips are available in object -->\r\n <div *ngIf=\"item.chips\" class=\"tags\">\r\n @for (itm of item.chips; track $index) {\r\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\r\n [text]=\"itm.text\"></sa-chip>\r\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\r\n }\r\n </div>\r\n</div>\r\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center}.section-item .status{padding:.75rem}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChipsComponent), selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => HttpClientModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: i0.forwardRef(() => StatusDotComponent), selector: "sa-status-dot", inputs: ["config"] }, { kind: "directive", type: i0.forwardRef(() => MenuDirective), selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
3294
3364
  }
3295
3365
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, decorators: [{
3296
3366
  type: Component,
@@ -3372,7 +3442,7 @@ class SAMenuComponent {
3372
3442
  this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
3373
3443
  }
3374
3444
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
3375
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n @if(menu?.title){\r\n <div class=\"sa-menu-title\">\r\n <h1>{{menu?.title}}</h1>\r\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n </div>\r\n }\r\n\r\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n @for (groupItem of menu.itemGroups; track groupItem) {\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n \r\n @for (item of groupItem.items; track $index) {\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n }\r\n } @else if(menu?.items && menu.items.length){\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n } -->\r\n\r\n\r\n <!-- Tab Content or Item Groups -->\r\n <div class=\"sa-menu-content\">\r\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n @if(menu?.showSearch){\r\n <div class=\"search-container\">\r\n <sa-icon icon=\"search\"></sa-icon>\r\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \r\n />\r\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n </div>\r\n }\r\n \r\n <!-- Tabs -->\r\n @if(menu?.tabs){\r\n <div class=\"sa-menu-tabs\">\r\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n (click)=\"setActiveTab(i,tab.label)\">\r\n {{ tab.label }}\r\n <!-- ({{ tab.itemGroups.length }}) -->\r\n </button>\r\n </div>\r\n }\r\n <!-- Tabs End -->\r\n\r\n @if(menu?.tabs?.length){\r\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n } @else if(menu?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if(menu?.items && menu?.items?.length){\r\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n <div class=\"avatar\">\r\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n </div>\r\n <div class=\"profile-info\">\r\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n </div>\r\n </div>\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n }\r\n </div>\r\n }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\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: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
3445
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n @if(menu?.title){\r\n <div class=\"sa-menu-title\">\r\n <h1>{{menu?.title}}</h1>\r\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n </div>\r\n }\r\n\r\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n @for (groupItem of menu.itemGroups; track groupItem) {\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n \r\n @for (item of groupItem.items; track $index) {\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n }\r\n } @else if(menu?.items && menu.items.length){\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n } -->\r\n\r\n\r\n <!-- Tab Content or Item Groups -->\r\n <div class=\"sa-menu-content\">\r\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n @if(menu?.showSearch){\r\n <div class=\"search-container\">\r\n <sa-icon icon=\"search\"></sa-icon>\r\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \r\n />\r\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n </div>\r\n }\r\n \r\n <!-- Tabs -->\r\n @if(menu?.tabs){\r\n <div class=\"sa-menu-tabs\">\r\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n (click)=\"setActiveTab(i,tab.label)\">\r\n {{ tab.label }}\r\n <!-- ({{ tab.itemGroups.length }}) -->\r\n </button>\r\n </div>\r\n }\r\n <!-- Tabs End -->\r\n\r\n @if(menu?.tabs?.length){\r\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n } @else if(menu?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if(menu?.items && menu?.items?.length){\r\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n <div class=\"avatar\">\r\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n </div>\r\n <div class=\"profile-info\">\r\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n </div>\r\n </div>\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n }\r\n </div>\r\n }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\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: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { 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"] }] }); }
3376
3446
  }
3377
3447
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
3378
3448
  type: Component,
@@ -3760,7 +3830,7 @@ class LeftNavComponent {
3760
3830
  });
3761
3831
  }
3762
3832
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$8.ActivatedRoute }, { token: i1$8.Router }], target: i0.ɵɵFactoryTarget.Component }); }
3763
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-left-nav\" >\r\n\r\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\r\n <div class=\"sa-left-nav-logo\">\r\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" matTooltipClass=\"sa-left-nav-tooltip\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\r\n </div>\r\n <div class=\"sa-left-nav-items-container\">\r\n @if(config && config?.items && !!config?.items?.length){\r\n <div class=\"sa-left-nav-items-group\">\r\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\r\n <div class=\"sa-left-nav-items\">\r\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\r\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\r\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\r\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n\r\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></sa-icon>\r\n <!-- <span>{{item.tooltip}}</span> -->\r\n <!-- <span class=\"sa-left-nav-item-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-template-item-container\">\r\n @if(config && config.templateItems && !!config.templateItems.length){\r\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\r\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-left-nav-footer\">\r\n @if(config && config.footerItems && !!config.footerItems.length){\r\n <div class=\"sa-left-nav-footer-container\">\r\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\r\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\r\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\r\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\r\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n @if(item.type === 'AVATAR'){\r\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\r\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\r\n }@else{\r\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\r\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\r\n }\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sa-left-nav-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg width=\"20\" height=\"38\" viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 74px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
3833
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-left-nav\" >\r\n\r\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\r\n <div class=\"sa-left-nav-logo\">\r\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" matTooltipClass=\"sa-left-nav-tooltip\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\r\n </div>\r\n <div class=\"sa-left-nav-items-container\">\r\n @if(config && config?.items && !!config?.items?.length){\r\n <div class=\"sa-left-nav-items-group\">\r\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\r\n <div class=\"sa-left-nav-items\">\r\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\r\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\r\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\r\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n\r\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></sa-icon>\r\n <!-- <span>{{item.tooltip}}</span> -->\r\n <!-- <span class=\"sa-left-nav-item-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-template-item-container\">\r\n @if(config && config.templateItems && !!config.templateItems.length){\r\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\r\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-left-nav-footer\">\r\n @if(config && config.footerItems && !!config.footerItems.length){\r\n <div class=\"sa-left-nav-footer-container\">\r\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\r\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\r\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\r\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\r\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n @if(item.type === 'AVATAR'){\r\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\r\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\r\n }@else{\r\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\r\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\r\n }\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sa-left-nav-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg width=\"20\" height=\"38\" viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 74px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
3764
3834
  }
3765
3835
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
3766
3836
  type: Component,
@@ -3882,7 +3952,7 @@ class MiniCardComponent {
3882
3952
  this.onCardClickEvent.emit({ source, button, event });
3883
3953
  }
3884
3954
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MiniCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3885
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MiniCardComponent, isStandalone: true, selector: "sa-mini-card", inputs: { cardData: "cardData" }, outputs: { onCardClickEvent: "onCardClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\r\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-mini-card-title-icon-container\">\r\n <div class=\"sa-mini-card-custom-title\">\r\n @if(card?.source?.logoUrl){\r\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n }\r\n <span [matTooltip]=\"card?.source?.tooltip\">\r\n {{card?.source?.name}}\r\n @if(card?.source?.count){\r\n <ng-container>\r\n <span>({{card?.source?.count}})</span>\r\n </ng-container>\r\n }\r\n </span>\r\n @if(card?.statusDot){\r\n <span>\r\n <sa-status-dot [config]=\"card.statusDot\">\r\n </sa-status-dot>\r\n </span>\r\n }\r\n @if(card?.chipData){\r\n <span>\r\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\r\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\r\n [iconPosition]='card?.chipData.iconPosition'\r\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\r\n </sa-chip>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\r\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\r\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: StatusDotComponent, selector: "sa-status-dot", inputs: ["config"] }] }); }
3955
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MiniCardComponent, isStandalone: true, selector: "sa-mini-card", inputs: { cardData: "cardData" }, outputs: { onCardClickEvent: "onCardClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\r\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-mini-card-title-icon-container\">\r\n <div class=\"sa-mini-card-custom-title\">\r\n @if(card?.source?.logoUrl){\r\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n }\r\n <span [matTooltip]=\"card?.source?.tooltip\">\r\n {{card?.source?.name}}\r\n @if(card?.source?.count){\r\n <ng-container>\r\n <span>({{card?.source?.count}})</span>\r\n </ng-container>\r\n }\r\n </span>\r\n @if(card?.statusDot){\r\n <span>\r\n <sa-status-dot [config]=\"card.statusDot\">\r\n </sa-status-dot>\r\n </span>\r\n }\r\n @if(card?.chipData){\r\n <span>\r\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\r\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\r\n [iconPosition]='card?.chipData.iconPosition'\r\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\r\n </sa-chip>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\r\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\r\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: StatusDotComponent, selector: "sa-status-dot", inputs: ["config"] }] }); }
3886
3956
  }
3887
3957
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MiniCardComponent, decorators: [{
3888
3958
  type: Component,
@@ -4167,11 +4237,11 @@ class QueryBuilderComponent {
4167
4237
  this.queryChange.emit(this.model);
4168
4238
  }
4169
4239
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
4170
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderComponent, isStandalone: true, selector: "sa-query-builder", inputs: { config: "config" }, outputs: { queryChange: "queryChange" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<div class=\"sa-query-builder\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"rules-container\" formArrayName=\"rules\">\r\n @for (rule of rulesArray.controls; track $index) {\r\n <div class=\"rule-row\" [formGroupName]=\"$index\">\r\n <!-- Condition selector (And/Or) -->\r\n @if ($index > 0) {\r\n <div class=\"condition-selector\">\r\n <mat-form-field appearance=\"fill\">\r\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\r\n <mat-option value=\"and\">And</mat-option>\r\n <mat-option value=\"or\">Or</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <div class=\"condition-placeholder\"></div>\r\n }\r\n \r\n <!-- Field selection -->\r\n <mat-form-field class=\"field-select\">\r\n <mat-label>Select a filter</mat-label>\r\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\r\n @for (field of config.fields; track field.key) {\r\n <mat-option [value]=\"field.key\">\r\n {{ field.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Operator selection -->\r\n <mat-form-field class=\"operator-select\">\r\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\r\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\r\n <mat-option [value]=\"op.value\">\r\n {{ op.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Value input based on field type -->\r\n @switch (getFieldType(rule.value.field)) {\r\n @case ('string') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('number') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('date') {\r\n @if (!isOperatorBetween($index)) {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n } @else {\r\n <div class=\"date-range-container\">\r\n <mat-form-field class=\"value-input start-date\">\r\n <mat-label>Start date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field class=\"value-input end-date\">\r\n <mat-label>End date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n }\r\n }\r\n @case ('boolean') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n <mat-option [value]=\"true\">True</mat-option>\r\n <mat-option [value]=\"false\">False</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @case ('select') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n @for (option of getFieldOptions(rule.value.field); track option.value) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @default {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n }\r\n\r\n <!-- Remove rule button -->\r\n <button mat-icon-button class=\"remove-rule-btn\" \r\n (click)=\"removeRule($index)\" \r\n [disabled]=\"rulesArray.length === 1\"\r\n matTooltip=\"Remove filter\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Add rule button -->\r\n <div class=\"add-rule-container\">\r\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\r\n <mat-icon>add</mat-icon> Add a filter\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
4240
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderComponent, isStandalone: true, selector: "sa-query-builder", inputs: { config: "config" }, outputs: { queryChange: "queryChange" }, providers: [MatNativeDateModule], ngImport: i0, template: "<div class=\"sa-query-builder\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"rules-container\" formArrayName=\"rules\">\r\n @for (rule of rulesArray.controls; track $index) {\r\n <div class=\"rule-row\" [formGroupName]=\"$index\">\r\n <!-- Condition selector (And/Or) -->\r\n @if ($index > 0) {\r\n <div class=\"condition-selector\">\r\n <mat-form-field appearance=\"fill\">\r\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\r\n <mat-option value=\"and\">And</mat-option>\r\n <mat-option value=\"or\">Or</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <div class=\"condition-placeholder\"></div>\r\n }\r\n \r\n <!-- Field selection -->\r\n <mat-form-field class=\"field-select\">\r\n <mat-label>Select a filter</mat-label>\r\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\r\n @for (field of config.fields; track field.key) {\r\n <mat-option [value]=\"field.key\">\r\n {{ field.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Operator selection -->\r\n <mat-form-field class=\"operator-select\">\r\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\r\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\r\n <mat-option [value]=\"op.value\">\r\n {{ op.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Value input based on field type -->\r\n @switch (getFieldType(rule.value.field)) {\r\n @case ('string') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('number') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('date') {\r\n @if (!isOperatorBetween($index)) {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n } @else {\r\n <div class=\"date-range-container\">\r\n <mat-form-field class=\"value-input start-date\">\r\n <mat-label>Start date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field class=\"value-input end-date\">\r\n <mat-label>End date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n }\r\n }\r\n @case ('boolean') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n <mat-option [value]=\"true\">True</mat-option>\r\n <mat-option [value]=\"false\">False</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @case ('select') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n @for (option of getFieldOptions(rule.value.field); track option.value) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @default {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n }\r\n\r\n <!-- Remove rule button -->\r\n <button mat-icon-button class=\"remove-rule-btn\" \r\n (click)=\"removeRule($index)\" \r\n [disabled]=\"rulesArray.length === 1\"\r\n matTooltip=\"Remove filter\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Add rule button -->\r\n <div class=\"add-rule-container\">\r\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\r\n <mat-icon>add</mat-icon> Add a filter\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
4171
4241
  }
4172
4242
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderComponent, decorators: [{
4173
4243
  type: Component,
4174
- args: [{ selector: 'sa-query-builder', standalone: true, providers: [provideNativeDateAdapter()], imports: [
4244
+ args: [{ selector: 'sa-query-builder', standalone: true, providers: [MatNativeDateModule], imports: [
4175
4245
  CommonModule,
4176
4246
  ReactiveFormsModule,
4177
4247
  FormlyModule,
@@ -4182,7 +4252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
4182
4252
  MatInputModule,
4183
4253
  MatTooltipModule,
4184
4254
  MatButtonToggleModule,
4185
- MatDatepickerModule
4255
+ MatDatepickerModule,
4256
+ MatNativeDateModule
4186
4257
  ], template: "<div class=\"sa-query-builder\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"rules-container\" formArrayName=\"rules\">\r\n @for (rule of rulesArray.controls; track $index) {\r\n <div class=\"rule-row\" [formGroupName]=\"$index\">\r\n <!-- Condition selector (And/Or) -->\r\n @if ($index > 0) {\r\n <div class=\"condition-selector\">\r\n <mat-form-field appearance=\"fill\">\r\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\r\n <mat-option value=\"and\">And</mat-option>\r\n <mat-option value=\"or\">Or</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <div class=\"condition-placeholder\"></div>\r\n }\r\n \r\n <!-- Field selection -->\r\n <mat-form-field class=\"field-select\">\r\n <mat-label>Select a filter</mat-label>\r\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\r\n @for (field of config.fields; track field.key) {\r\n <mat-option [value]=\"field.key\">\r\n {{ field.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Operator selection -->\r\n <mat-form-field class=\"operator-select\">\r\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\r\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\r\n <mat-option [value]=\"op.value\">\r\n {{ op.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Value input based on field type -->\r\n @switch (getFieldType(rule.value.field)) {\r\n @case ('string') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('number') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('date') {\r\n @if (!isOperatorBetween($index)) {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n } @else {\r\n <div class=\"date-range-container\">\r\n <mat-form-field class=\"value-input start-date\">\r\n <mat-label>Start date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field class=\"value-input end-date\">\r\n <mat-label>End date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n }\r\n }\r\n @case ('boolean') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n <mat-option [value]=\"true\">True</mat-option>\r\n <mat-option [value]=\"false\">False</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @case ('select') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n @for (option of getFieldOptions(rule.value.field); track option.value) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @default {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n }\r\n\r\n <!-- Remove rule button -->\r\n <button mat-icon-button class=\"remove-rule-btn\" \r\n (click)=\"removeRule($index)\" \r\n [disabled]=\"rulesArray.length === 1\"\r\n matTooltip=\"Remove filter\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Add rule button -->\r\n <div class=\"add-rule-container\">\r\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\r\n <mat-icon>add</mat-icon> Add a filter\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"] }]
4187
4258
  }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
4188
4259
  type: Input
@@ -5984,7 +6055,7 @@ class ToastComponent {
5984
6055
  });
5985
6056
  }
5986
6057
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5987
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
6058
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
5988
6059
  }
5989
6060
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
5990
6061
  type: Component,