@sarasanalytics-com/design-system 0.0.136 → 0.0.137
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.
- package/README.md +24 -24
- package/esm2022/interfaces/avatar-interface.mjs +1 -1
- package/esm2022/interfaces/button-interface.mjs +1 -1
- package/esm2022/interfaces/card-carousel-interface.mjs +1 -1
- package/esm2022/interfaces/chip-interface.mjs +1 -1
- package/esm2022/interfaces/grid-interface.mjs +1 -1
- package/esm2022/interfaces/guide-card-interface.mjs +1 -1
- package/esm2022/interfaces/header-interface.mjs +1 -1
- package/esm2022/interfaces/icon-interface.mjs +1 -1
- package/esm2022/interfaces/layout-section-interface.mjs +1 -1
- package/esm2022/interfaces/left-nav-interface.mjs +1 -1
- package/esm2022/interfaces/menu.interface.mjs +1 -1
- package/esm2022/interfaces/message-banner.mjs +1 -1
- package/esm2022/interfaces/option-interface.mjs +1 -1
- package/esm2022/interfaces/scrolling-card-interface.mjs +1 -1
- package/esm2022/interfaces/select-interface.mjs +1 -1
- package/esm2022/interfaces/status-dot.interface.mjs +1 -1
- package/esm2022/interfaces/tab-interface.mjs +1 -1
- package/esm2022/interfaces/toast-interface.mjs +1 -1
- package/esm2022/interfaces/typography-animation-interface.mjs +1 -1
- package/esm2022/lib/accordion/accordion.component.mjs +3 -3
- package/esm2022/lib/avatar/avatar.component.mjs +3 -3
- package/esm2022/lib/button/button.component.mjs +3 -3
- package/esm2022/lib/calendar-header/calendar-header.component.mjs +3 -3
- package/esm2022/lib/card/card-body/card-body.component.mjs +1 -1
- package/esm2022/lib/card/card-custom-header/card-custom-header.component.mjs +1 -1
- package/esm2022/lib/card/card-footer-actions/card-footer-actions.component.mjs +3 -3
- package/esm2022/lib/card/card-icon/card-icon.component.mjs +1 -1
- package/esm2022/lib/card/card-title-actions/card-title-actions.component.mjs +1 -1
- package/esm2022/lib/card/card.component.mjs +3 -3
- package/esm2022/lib/card/checkbox-card/checkbox-card.component.mjs +3 -3
- package/esm2022/lib/card/guide-card/guide-card.component.mjs +3 -3
- package/esm2022/lib/card/menu-card/menu-card.component.mjs +3 -3
- package/esm2022/lib/card/thumbnail-card/thumbnail-card.component.mjs +3 -3
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +3 -3
- package/esm2022/lib/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/chips/chips.component.mjs +3 -3
- package/esm2022/lib/component-library.component.mjs +9 -9
- package/esm2022/lib/component-library.service.mjs +1 -1
- package/esm2022/lib/dashboard-loader/dashboard-loader.component.mjs +1 -1
- package/esm2022/lib/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/lib/dialog/dialog.component.mjs +3 -3
- package/esm2022/lib/form-input/form-input.component.mjs +3 -3
- package/esm2022/lib/form-select/form-select.component.mjs +3 -3
- package/esm2022/lib/grid-cell/grid-cell.component.mjs +3 -3
- package/esm2022/lib/header/header.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon/icon.service.mjs +1 -1
- package/esm2022/lib/layout-section/layout-section.component.mjs +3 -3
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/list/list.component.mjs +3 -3
- package/esm2022/lib/menu/menu-list/menu-item.component.mjs +3 -3
- package/esm2022/lib/menu/menu.component.mjs +3 -3
- package/esm2022/lib/menu/menu.directive.mjs +1 -1
- package/esm2022/lib/message-banner/message-banner.component.mjs +3 -3
- package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +15 -3
- package/esm2022/lib/mini-card/mini-card.component.mjs +3 -3
- package/esm2022/lib/page-layout/page-layout.component.mjs +3 -3
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2022/lib/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/scrolling-cards/scrolling-cards.component.mjs +3 -3
- package/esm2022/lib/skeleton/skeleton-base.component.mjs +1 -1
- package/esm2022/lib/skeleton/skeleton-container.component.mjs +9 -9
- package/esm2022/lib/skeleton/skeleton-loader.component.mjs +193 -193
- package/esm2022/lib/skeleton/skeleton-presets.mjs +1 -1
- package/esm2022/lib/skeleton/skeleton-shapes.component.mjs +1 -1
- package/esm2022/lib/spinner/spinner.component.mjs +1 -1
- package/esm2022/lib/status-dot/status-dot.component.mjs +17 -17
- package/esm2022/lib/stepper/stepper.component.mjs +3 -3
- package/esm2022/lib/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/toast/toast.component.mjs +3 -3
- package/esm2022/lib/tool-tip/tool-tip.component.mjs +3 -3
- package/esm2022/lib/typography-animation/typography-animation.component.mjs +3 -3
- package/esm2022/utils/validators.mjs +1 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +309 -298
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/message-banner-v2/message-banner-v2.component.d.ts +3 -1
- package/package.json +2 -2
- package/styles/styles.css +428 -428
|
@@ -81,11 +81,11 @@ class ChipsComponent {
|
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
84
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText", tooltip: "tooltip", className: "className" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\
|
|
84
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText", tooltip: "tooltip", className: "className" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n\n {{text}}\n\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n {{type == 'large' ? largeStateText : \"\"}}\n\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;cursor:pointer}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
85
85
|
}
|
|
86
86
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
87
87
|
type: Component,
|
|
88
|
-
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\
|
|
88
|
+
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n\n {{text}}\n\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n {{type == 'large' ? largeStateText : \"\"}}\n\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;cursor:pointer}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}\n"] }]
|
|
89
89
|
}], propDecorators: { id: [{
|
|
90
90
|
type: Input
|
|
91
91
|
}], iconPath: [{
|
|
@@ -200,11 +200,11 @@ class IconComponent {
|
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
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 }); }
|
|
203
|
-
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){\
|
|
203
|
+
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){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
204
204
|
}
|
|
205
205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
206
206
|
type: Component,
|
|
207
|
-
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "@if(img){\
|
|
207
|
+
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
208
208
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
|
|
209
209
|
type: Input,
|
|
210
210
|
args: ['img']
|
|
@@ -263,11 +263,11 @@ class AvatarComponent {
|
|
|
263
263
|
});
|
|
264
264
|
}
|
|
265
265
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
266
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\
|
|
266
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
267
267
|
}
|
|
268
268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
269
269
|
type: Component,
|
|
270
|
-
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\
|
|
270
|
+
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"] }]
|
|
271
271
|
}], propDecorators: { id: [{
|
|
272
272
|
type: Input
|
|
273
273
|
}], imagePath: [{
|
|
@@ -318,11 +318,11 @@ class CardComponent {
|
|
|
318
318
|
}
|
|
319
319
|
}
|
|
320
320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
321
|
-
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)\">\
|
|
321
|
+
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)\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n <!-- <img [src]=\"avatar\" /> -->\n }@else if(image){\n <img [src]=\"image\" [width]=\"imageWidth\" />\n }@else if(icon){\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n }@else{\n <ng-content select=\"sa-card-icon\"></ng-content>\n }\n @if(column){\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n }\n </div>\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n @if(showCardHeader){\n <ng-content select=\"sa-card-title-header\"></ng-content>\n @if (showHeaderBodyDivider && body) {\n <div class=\"custom-divider\"></div>\n }\n }\n @else if(title){\n <div class=\"sa-card-title-container\">\n <div class=\"sa-card-title\">{{title}}</div>\n @if(chip){\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\n }\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\n </div>\n }\n @if (showCustomCardBody) {\n <ng-content select=\"sa-card-custom-body\"></ng-content>\n }\n @if(showCardBody && body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:-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"] }] }); }
|
|
322
322
|
}
|
|
323
323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
324
324
|
type: Component,
|
|
325
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\
|
|
325
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n <!-- <img [src]=\"avatar\" /> -->\n }@else if(image){\n <img [src]=\"image\" [width]=\"imageWidth\" />\n }@else if(icon){\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n }@else{\n <ng-content select=\"sa-card-icon\"></ng-content>\n }\n @if(column){\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n }\n </div>\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n @if(showCardHeader){\n <ng-content select=\"sa-card-title-header\"></ng-content>\n @if (showHeaderBodyDivider && body) {\n <div class=\"custom-divider\"></div>\n }\n }\n @else if(title){\n <div class=\"sa-card-title-container\">\n <div class=\"sa-card-title\">{{title}}</div>\n @if(chip){\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\n }\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\n </div>\n }\n @if (showCustomCardBody) {\n <ng-content select=\"sa-card-custom-body\"></ng-content>\n }\n @if(showCardBody && body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:-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"] }]
|
|
326
326
|
}], propDecorators: { title: [{
|
|
327
327
|
type: Input,
|
|
328
328
|
args: ['title']
|
|
@@ -455,11 +455,11 @@ class ButtonComponent {
|
|
|
455
455
|
this.onMouseOutEvent.emit();
|
|
456
456
|
}
|
|
457
457
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
458
|
-
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\"\
|
|
458
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n @if(ImagePath) {\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n } @else if (icon) {\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n {{text}}\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n } @else {\n {{text}}\n }\n</label>\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"] }] }); }
|
|
459
459
|
}
|
|
460
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
461
461
|
type: Component,
|
|
462
|
-
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\
|
|
462
|
+
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n @if(ImagePath) {\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n } @else if (icon) {\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n {{text}}\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n } @else {\n {{text}}\n }\n</label>\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"] }]
|
|
463
463
|
}], propDecorators: { id: [{
|
|
464
464
|
type: Input
|
|
465
465
|
}], type: [{
|
|
@@ -629,11 +629,11 @@ class AccordionComponent extends FieldType {
|
|
|
629
629
|
this.buttonClick.complete();
|
|
630
630
|
}
|
|
631
631
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
632
|
-
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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$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"] }] }); }
|
|
632
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chips-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chip-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$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"] }] }); }
|
|
633
633
|
}
|
|
634
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
635
635
|
type: Component,
|
|
636
|
-
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], 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"] }]
|
|
636
|
+
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chips-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chip-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.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"] }]
|
|
637
637
|
}] });
|
|
638
638
|
|
|
639
639
|
let nextId$2 = 0; // used to give unique ids to inputs used in html
|
|
@@ -779,7 +779,7 @@ class CalendarHeaderComponent {
|
|
|
779
779
|
this.destroy$.next(); // will trigger unsubscription in takeUntil
|
|
780
780
|
}
|
|
781
781
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2$1.MatCalendar }, { token: i2$2.DateAdapter }, { token: i2$1.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
782
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\
|
|
782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
783
783
|
}
|
|
784
784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
785
785
|
type: Component,
|
|
@@ -787,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
787
787
|
NgFor,
|
|
788
788
|
MatIconModule,
|
|
789
789
|
MatButton
|
|
790
|
-
], template: "<div class=\"range-preset\">\
|
|
790
|
+
], template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"] }]
|
|
791
791
|
}], ctorParameters: () => [{ type: i2$1.MatCalendar }, { type: i2$2.DateAdapter }, { type: i2$1.MatDateRangePicker }, { type: undefined, decorators: [{
|
|
792
792
|
type: Inject,
|
|
793
793
|
args: [MAT_DATE_FORMATS]
|
|
@@ -804,11 +804,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
804
804
|
|
|
805
805
|
class CardFooterActionsComponent {
|
|
806
806
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\
|
|
807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
|
|
808
808
|
}
|
|
809
809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
|
|
810
810
|
type: Component,
|
|
811
|
-
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\
|
|
811
|
+
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
|
|
812
812
|
}] });
|
|
813
813
|
|
|
814
814
|
class CardIconComponent {
|
|
@@ -835,11 +835,11 @@ class ListComponent {
|
|
|
835
835
|
this.featuresIcon = '';
|
|
836
836
|
}
|
|
837
837
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
838
|
-
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\">\
|
|
838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n </div>\n <div>\n <span class=\"feature-text\">{{ item?.text }}</span>\n </div>\n </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "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"] }] }); }
|
|
839
839
|
}
|
|
840
840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, decorators: [{
|
|
841
841
|
type: Component,
|
|
842
|
-
args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\
|
|
842
|
+
args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n </div>\n <div>\n <span class=\"feature-text\">{{ item?.text }}</span>\n </div>\n </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"] }]
|
|
843
843
|
}], propDecorators: { listData: [{
|
|
844
844
|
type: Input
|
|
845
845
|
}], featuresIcon: [{
|
|
@@ -865,11 +865,11 @@ class CheckboxCardComponent extends FieldType {
|
|
|
865
865
|
this.field.props['onButtonClick'](this.field);
|
|
866
866
|
}
|
|
867
867
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
868
|
-
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']\"\
|
|
868
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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"] }] }); }
|
|
869
869
|
}
|
|
870
870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
871
871
|
type: Component,
|
|
872
|
-
args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\
|
|
872
|
+
args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"] }]
|
|
873
873
|
}] });
|
|
874
874
|
|
|
875
875
|
class GuideCardComponent {
|
|
@@ -897,11 +897,11 @@ class GuideCardComponent {
|
|
|
897
897
|
this.onStepClicked.emit(step);
|
|
898
898
|
}
|
|
899
899
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
-
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\">\
|
|
900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\n <div class=\"step-indicator\">\n @if(selectable) {\n @if(step?.isCompleted){\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n size=\"20\"></sa-icon>\n }\n @else{\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;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 }); }
|
|
901
901
|
}
|
|
902
902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
|
|
903
903
|
type: Component,
|
|
904
|
-
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\
|
|
904
|
+
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\n <div class=\"step-indicator\">\n @if(selectable) {\n @if(step?.isCompleted){\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n size=\"20\"></sa-icon>\n }\n @else{\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;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"] }]
|
|
905
905
|
}], propDecorators: { title: [{
|
|
906
906
|
type: Input
|
|
907
907
|
}], steps: [{
|
|
@@ -938,11 +938,11 @@ class MessageBannerComponent {
|
|
|
938
938
|
this.actionClick.emit(button);
|
|
939
939
|
}
|
|
940
940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
-
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\">\
|
|
941
|
+
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\">\n <div class=\"content\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\n actionText\n }}</sa-button>\n }\n @else if(button) {\n <sa-button\n [text]=\"button?.text\"\n [icon]=\"button?.icon\"\n [size]=\"button?.size\"\n [type]=\"button?.type\"\n [iconPosition]=\"button?.iconPosition\"\n [buttonIconSize]=\"button?.buttonIconSize\"\n (onClickEvent)=\"handleButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button?.text\"\n >\n \n </sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;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 }); }
|
|
942
942
|
}
|
|
943
943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, decorators: [{
|
|
944
944
|
type: Component,
|
|
945
|
-
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\
|
|
945
|
+
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\n <div class=\"content\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\n actionText\n }}</sa-button>\n }\n @else if(button) {\n <sa-button\n [text]=\"button?.text\"\n [icon]=\"button?.icon\"\n [size]=\"button?.size\"\n [type]=\"button?.type\"\n [iconPosition]=\"button?.iconPosition\"\n [buttonIconSize]=\"button?.buttonIconSize\"\n (onClickEvent)=\"handleButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button?.text\"\n >\n \n </sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;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"] }]
|
|
946
946
|
}], propDecorators: { type: [{
|
|
947
947
|
type: Input
|
|
948
948
|
}], actionText: [{
|
|
@@ -1013,11 +1013,11 @@ class MenuCardComponent extends FieldType {
|
|
|
1013
1013
|
this.onStepChanged(sourceType);
|
|
1014
1014
|
}
|
|
1015
1015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1016
|
-
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"] }] }); }
|
|
1016
|
+
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\">\n <div class=\"left-card-container\">\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n <div class=\"card-footer-container\">\n <span class=\"horizontal-line\"></span>\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n <span class=\"footer-text\">\n {{footerDetail?.title}}\n <ng-container *ngIf=\"footerDetail?.count\">\n <span>({{footerDetail?.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"footerDetail?.chipData\">\n <span>\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\n [iconPosition]='footerDetail?.chipData.iconPosition'\n [iconPath]=\"footerDetail?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"right-card-container\">\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\n <div class=\"message-container\">\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\n selectedStep?.['advancedFeatureToggleTitle'] :\n selectedStep?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-container\">\n @if(selectedStep?.advancedFeatureDisclaimer){\n <div class=\"disclaimer-container\">\n <sa-message-banner [type]=\"'disclaimer'\">\n <div class=\"disclaimer-content\">\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\"\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n </div>\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </sa-message-banner>\n </div>\n }\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\n </div>\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-menu-card-title-icon-container\">\n <div class=\"sa-menu-card-custom-title\">\n <ng-container *ngIf=\"source.logoUrl\">\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n </ng-container>\n <span [matTooltip]=\"source?.tooltip\">\n {{source?.name}}\n <ng-container *ngIf=\"source?.count\">\n <span>({{source.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"source?.chipData\">\n <span>\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n [iconPosition]='source?.chipData.iconPosition'\n [iconPath]=\"source?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n </ng-container>\n </div>\n </sa-card-title-header>\n </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow: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"] }] }); }
|
|
1017
1017
|
}
|
|
1018
1018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, decorators: [{
|
|
1019
1019
|
type: Component,
|
|
1020
|
-
args: [{ selector: 'sa-menu-card', standalone: true, imports: [ChipsComponent, CommonModule, GuideCardComponent, FormsModule, ReactiveFormsModule, FormlyModule, CardComponent, CardCustomHeaderComponent, IconComponent, MatExpansionModule, ButtonComponent, CardTitleActionsComponent, MatTooltipModule, MessageBannerComponent], template: "<div class=\"menu-card-container\">\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"] }]
|
|
1020
|
+
args: [{ selector: 'sa-menu-card', standalone: true, imports: [ChipsComponent, CommonModule, GuideCardComponent, FormsModule, ReactiveFormsModule, FormlyModule, CardComponent, CardCustomHeaderComponent, IconComponent, MatExpansionModule, ButtonComponent, CardTitleActionsComponent, MatTooltipModule, MessageBannerComponent], template: "<div class=\"menu-card-container\">\n <div class=\"left-card-container\">\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n <div class=\"card-footer-container\">\n <span class=\"horizontal-line\"></span>\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n <span class=\"footer-text\">\n {{footerDetail?.title}}\n <ng-container *ngIf=\"footerDetail?.count\">\n <span>({{footerDetail?.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"footerDetail?.chipData\">\n <span>\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\n [iconPosition]='footerDetail?.chipData.iconPosition'\n [iconPath]=\"footerDetail?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"right-card-container\">\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\n <div class=\"message-container\">\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\n selectedStep?.['advancedFeatureToggleTitle'] :\n selectedStep?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-container\">\n @if(selectedStep?.advancedFeatureDisclaimer){\n <div class=\"disclaimer-container\">\n <sa-message-banner [type]=\"'disclaimer'\">\n <div class=\"disclaimer-content\">\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\"\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n </div>\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </sa-message-banner>\n </div>\n }\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\n </div>\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-menu-card-title-icon-container\">\n <div class=\"sa-menu-card-custom-title\">\n <ng-container *ngIf=\"source.logoUrl\">\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n </ng-container>\n <span [matTooltip]=\"source?.tooltip\">\n {{source?.name}}\n <ng-container *ngIf=\"source?.count\">\n <span>({{source.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"source?.chipData\">\n <span>\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n [iconPosition]='source?.chipData.iconPosition'\n [iconPath]=\"source?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n </ng-container>\n </div>\n </sa-card-title-header>\n </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow: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"] }]
|
|
1021
1021
|
}], propDecorators: { title: [{
|
|
1022
1022
|
type: Input
|
|
1023
1023
|
}], steps: [{
|
|
@@ -1108,7 +1108,7 @@ class ThumbnailCardComponent {
|
|
|
1108
1108
|
}
|
|
1109
1109
|
}
|
|
1110
1110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThumbnailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ThumbnailCardComponent, isStandalone: true, selector: "sa-thumbnail-card", inputs: { data: "data", size: "size" }, outputs: { cardClick: "cardClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\
|
|
1111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ThumbnailCardComponent, isStandalone: true, selector: "sa-thumbnail-card", inputs: { data: "data", size: "size" }, outputs: { cardClick: "cardClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\n <sa-card-custom-body>\n <div class=\"thumbnail-content\">\n <div class=\"thumbnail-container\">\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\n </div>\n <div class=\"thumbnail-info\">\n <div class=\"thumbnail-header\">\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\n <div class=\"status-chips\">\n @for (status of data?.statuses; track status.text) {\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\n </sa-chip>\n }\n </div>\n </div>\n <div class=\"thumbnail-metadata\">\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\n <span class=\"separator\"></span>\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\n </div>\n </div>\n </div>\n </sa-card-custom-body>\n </sa-card>\n</div>\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}::ng-deep .custom-description-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation{white-space:pre-line;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { 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: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1112
1112
|
}
|
|
1113
1113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThumbnailCardComponent, decorators: [{
|
|
1114
1114
|
type: Component,
|
|
@@ -1120,7 +1120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1120
1120
|
CardBodyComponent,
|
|
1121
1121
|
CardCustomHeaderComponent,
|
|
1122
1122
|
MatTooltipModule,
|
|
1123
|
-
], template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\
|
|
1123
|
+
], template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\n <sa-card-custom-body>\n <div class=\"thumbnail-content\">\n <div class=\"thumbnail-container\">\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\n </div>\n <div class=\"thumbnail-info\">\n <div class=\"thumbnail-header\">\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\n <div class=\"status-chips\">\n @for (status of data?.statuses; track status.text) {\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\n </sa-chip>\n }\n </div>\n </div>\n <div class=\"thumbnail-metadata\">\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\n <span class=\"separator\"></span>\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\n </div>\n </div>\n </div>\n </sa-card-custom-body>\n </sa-card>\n</div>\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}::ng-deep .custom-description-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation{white-space:pre-line;text-align:left}\n"] }]
|
|
1124
1124
|
}], propDecorators: { data: [{
|
|
1125
1125
|
type: Input
|
|
1126
1126
|
}], size: [{
|
|
@@ -1238,11 +1238,11 @@ class CardCarouselComponent {
|
|
|
1238
1238
|
}
|
|
1239
1239
|
}
|
|
1240
1240
|
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 }); }
|
|
1241
|
-
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 -->\
|
|
1241
|
+
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 -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\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 }); }
|
|
1242
1242
|
}
|
|
1243
1243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
1244
1244
|
type: Component,
|
|
1245
|
-
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- card-carousel.component.html -->\
|
|
1245
|
+
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\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"] }]
|
|
1246
1246
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { cards: [{
|
|
1247
1247
|
type: Input
|
|
1248
1248
|
}], interval: [{
|
|
@@ -1278,27 +1278,27 @@ class CheckboxComponent extends FieldType {
|
|
|
1278
1278
|
return isObservable(options) ? options : of(options || []);
|
|
1279
1279
|
}
|
|
1280
1280
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1281
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\
|
|
1281
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1282
1282
|
}
|
|
1283
1283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1284
1284
|
type: Component,
|
|
1285
|
-
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\
|
|
1285
|
+
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
1286
1286
|
}] });
|
|
1287
1287
|
|
|
1288
1288
|
class TestLibraryComponent {
|
|
1289
1289
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
1291
|
-
<p>
|
|
1292
|
-
component-library works!
|
|
1293
|
-
</p>
|
|
1290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
1291
|
+
<p>
|
|
1292
|
+
component-library works!
|
|
1293
|
+
</p>
|
|
1294
1294
|
`, isInline: true, styles: [""] }); }
|
|
1295
1295
|
}
|
|
1296
1296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
|
|
1297
1297
|
type: Component,
|
|
1298
|
-
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
1299
|
-
<p>
|
|
1300
|
-
component-library works!
|
|
1301
|
-
</p>
|
|
1298
|
+
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
1299
|
+
<p>
|
|
1300
|
+
component-library works!
|
|
1301
|
+
</p>
|
|
1302
1302
|
` }]
|
|
1303
1303
|
}] });
|
|
1304
1304
|
|
|
@@ -1342,7 +1342,7 @@ class DatepickerComponent extends FieldType {
|
|
|
1342
1342
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
1343
1343
|
}
|
|
1344
1344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\
|
|
1345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
1346
1346
|
}
|
|
1347
1347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1348
1348
|
type: Component,
|
|
@@ -1356,7 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1356
1356
|
CalendarHeaderComponent,
|
|
1357
1357
|
CommonModule,
|
|
1358
1358
|
MatNativeDateModule
|
|
1359
|
-
], template: "<mat-form-field class=\"date-picker\">\
|
|
1359
|
+
], template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
|
|
1360
1360
|
}], propDecorators: { range: [{
|
|
1361
1361
|
type: Input
|
|
1362
1362
|
}] } });
|
|
@@ -1381,6 +1381,7 @@ class MessageBannerV2Component {
|
|
|
1381
1381
|
description: this.sanitizeDescription(currentState.description)
|
|
1382
1382
|
};
|
|
1383
1383
|
});
|
|
1384
|
+
this.banner = {};
|
|
1384
1385
|
this.buttons = [];
|
|
1385
1386
|
this.buttonClick = new EventEmitter();
|
|
1386
1387
|
}
|
|
@@ -1459,12 +1460,20 @@ class MessageBannerV2Component {
|
|
|
1459
1460
|
originalEvent: event
|
|
1460
1461
|
});
|
|
1461
1462
|
}
|
|
1463
|
+
isEmptyObject(obj) {
|
|
1464
|
+
if (obj) {
|
|
1465
|
+
return Object.keys(obj).length === 0;
|
|
1466
|
+
}
|
|
1467
|
+
else {
|
|
1468
|
+
return true;
|
|
1469
|
+
}
|
|
1470
|
+
}
|
|
1462
1471
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1463
|
-
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", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\
|
|
1472
|
+
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", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\n<div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button [text]=\"button.text\" [icon]=\"button.icon\" [size]=\"button.size\" [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\" [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\" role=\"button\" [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n</div>\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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
1464
1473
|
}
|
|
1465
1474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
1466
1475
|
type: Component,
|
|
1467
|
-
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\
|
|
1476
|
+
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\n<div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button [text]=\"button.text\" [icon]=\"button.icon\" [size]=\"button.size\" [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\" [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\" role=\"button\" [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n</div>\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)}\n"] }]
|
|
1468
1477
|
}], propDecorators: { messageType: [{
|
|
1469
1478
|
type: Input
|
|
1470
1479
|
}], contactUrl: [{
|
|
@@ -1477,6 +1486,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1477
1486
|
type: Input
|
|
1478
1487
|
}], descriptionClass: [{
|
|
1479
1488
|
type: Input
|
|
1489
|
+
}], banner: [{
|
|
1490
|
+
type: Input
|
|
1480
1491
|
}], messageIcon: [{
|
|
1481
1492
|
type: Input
|
|
1482
1493
|
}], messageIconSize: [{
|
|
@@ -1514,11 +1525,11 @@ class DialogComponent {
|
|
|
1514
1525
|
this.dialogButtonClick.emit({ event: event, type: 'close' });
|
|
1515
1526
|
}
|
|
1516
1527
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, deps: [{ token: i1$4.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1517
|
-
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 (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)}\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", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["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 }] }); }
|
|
1528
|
+
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\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\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)}\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", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["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 }] }); }
|
|
1518
1529
|
}
|
|
1519
1530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1520
1531
|
type: Component,
|
|
1521
|
-
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule], template: "<div class=\"dialog-container\">\
|
|
1532
|
+
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule], template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\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)}\n"] }]
|
|
1522
1533
|
}], ctorParameters: () => [{ type: i1$4.MatDialogRef, decorators: [{
|
|
1523
1534
|
type: Optional
|
|
1524
1535
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1871,7 +1882,7 @@ class FormInputComponent extends FieldType {
|
|
|
1871
1882
|
}
|
|
1872
1883
|
}
|
|
1873
1884
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1874
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\
|
|
1885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "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"] }] }); }
|
|
1875
1886
|
}
|
|
1876
1887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1877
1888
|
type: Component,
|
|
@@ -1882,7 +1893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1882
1893
|
FormlyModule,
|
|
1883
1894
|
IconComponent,
|
|
1884
1895
|
MatTooltipModule
|
|
1885
|
-
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\
|
|
1896
|
+
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}\n"] }]
|
|
1886
1897
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
1887
1898
|
type: ViewChild,
|
|
1888
1899
|
args: ['formInput']
|
|
@@ -1962,7 +1973,7 @@ class FormSelectComponent extends FieldType {
|
|
|
1962
1973
|
}
|
|
1963
1974
|
}
|
|
1964
1975
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1965
|
-
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)=\"checkForZero($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']\">\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 </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>\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}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "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 }] }); }
|
|
1976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 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}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "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 }] }); }
|
|
1966
1977
|
}
|
|
1967
1978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
1968
1979
|
type: Component,
|
|
@@ -1978,7 +1989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1978
1989
|
IconComponent,
|
|
1979
1990
|
CommonModule,
|
|
1980
1991
|
MatTooltipModule
|
|
1981
|
-
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\
|
|
1992
|
+
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 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}\n"] }]
|
|
1982
1993
|
}], propDecorators: { hoverEvent: [{
|
|
1983
1994
|
type: Output,
|
|
1984
1995
|
args: ['hoverEvent']
|
|
@@ -2041,7 +2052,7 @@ class GridCellComponent {
|
|
|
2041
2052
|
return false; // not sure what this return value does.
|
|
2042
2053
|
}
|
|
2043
2054
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2044
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\
|
|
2055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
2045
2056
|
}
|
|
2046
2057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
|
|
2047
2058
|
type: Component,
|
|
@@ -2050,7 +2061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2050
2061
|
ChipsComponent,
|
|
2051
2062
|
ButtonComponent,
|
|
2052
2063
|
NgFor
|
|
2053
|
-
], template: "<div class=\"grid-cell {{params.cellType}}\">\
|
|
2064
|
+
], template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"] }]
|
|
2054
2065
|
}], propDecorators: { onClickButtonEvent: [{
|
|
2055
2066
|
type: Output
|
|
2056
2067
|
}], onClickChipEvent: [{
|
|
@@ -2092,11 +2103,11 @@ class HeaderComponent {
|
|
|
2092
2103
|
}
|
|
2093
2104
|
}
|
|
2094
2105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2095
|
-
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\">\
|
|
2106
|
+
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\">\n <div class=\"header-content\">\n @if (header?.text || header?.html || header.icon?.iconUrl) {\n <div class=\"heading\">\n <div class=\"header-name-container\">\n @if (header.icon?.iconUrl) {\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\n }\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\n </div>\n @for(chip of chipConfig; track chip.text) {\n <div>\n <sa-chip \n [id]=\"chip.id\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [text]=\"chip.text\"\n [iconPosition]=\"chip.iconPosition\"\n [iconPath]=\"chip.iconPath\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\"\n ></sa-chip>\n </div>\n }\n </div>\n }\n <div class=\"header-info\">\n @for(item of info; track item.text) {\n <div class=\"info-item\">\n @if(item.icon) {\n <img [src]=\"item.icon\" alt=\"\">\n }\n {{item.text}}\n </div>\n }\n </div>\n </div>\n <div class=\"actions\">\n @if(buttonHelper) {\n <sa-button \n (onClickEvent)=\"onButtonClick('secondary', $event)\"\n [id]=\"buttonHelper.id\"\n [text]=\"buttonHelper.text\"\n [type]=\"buttonHelper.type\"\n [size]=\"buttonHelper.size\"\n [state]=\"buttonHelper.state\"\n [ImagePath]=\"buttonHelper.imagePath\"\n [iconPosition]=\"buttonHelper.iconPosition\"\n [href]=\"buttonHelper.href\"\n [hrefTarget]=\"buttonHelper.hrefTarget\"\n [isSubmit]=\"buttonHelper.isSubmit\">\n </sa-button>\n }\n @if(buttonMain) {\n <sa-button\n (onClickEvent)=\"onButtonClick('primary', $event)\"\n [id]=\"buttonMain.id\"\n [text]=\"buttonMain.text\"\n [type]=\"buttonMain.type\"\n [size]=\"buttonMain.size\"\n [state]=\"buttonMain.state\"\n [ImagePath]=\"buttonMain.imagePath\"\n [iconPosition]=\"buttonMain.iconPosition\"\n [href]=\"buttonMain.href\"\n [hrefTarget]=\"buttonMain.hrefTarget\"\n [isSubmit]=\"buttonMain.isSubmit\">\n </sa-button>\n }\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-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 }] }); }
|
|
2096
2107
|
}
|
|
2097
2108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
2098
2109
|
type: Component,
|
|
2099
|
-
args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "<div class=\"header\">\
|
|
2110
|
+
args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "<div class=\"header\">\n <div class=\"header-content\">\n @if (header?.text || header?.html || header.icon?.iconUrl) {\n <div class=\"heading\">\n <div class=\"header-name-container\">\n @if (header.icon?.iconUrl) {\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\n }\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\n </div>\n @for(chip of chipConfig; track chip.text) {\n <div>\n <sa-chip \n [id]=\"chip.id\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [text]=\"chip.text\"\n [iconPosition]=\"chip.iconPosition\"\n [iconPath]=\"chip.iconPath\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\"\n ></sa-chip>\n </div>\n }\n </div>\n }\n <div class=\"header-info\">\n @for(item of info; track item.text) {\n <div class=\"info-item\">\n @if(item.icon) {\n <img [src]=\"item.icon\" alt=\"\">\n }\n {{item.text}}\n </div>\n }\n </div>\n </div>\n <div class=\"actions\">\n @if(buttonHelper) {\n <sa-button \n (onClickEvent)=\"onButtonClick('secondary', $event)\"\n [id]=\"buttonHelper.id\"\n [text]=\"buttonHelper.text\"\n [type]=\"buttonHelper.type\"\n [size]=\"buttonHelper.size\"\n [state]=\"buttonHelper.state\"\n [ImagePath]=\"buttonHelper.imagePath\"\n [iconPosition]=\"buttonHelper.iconPosition\"\n [href]=\"buttonHelper.href\"\n [hrefTarget]=\"buttonHelper.hrefTarget\"\n [isSubmit]=\"buttonHelper.isSubmit\">\n </sa-button>\n }\n @if(buttonMain) {\n <sa-button\n (onClickEvent)=\"onButtonClick('primary', $event)\"\n [id]=\"buttonMain.id\"\n [text]=\"buttonMain.text\"\n [type]=\"buttonMain.type\"\n [size]=\"buttonMain.size\"\n [state]=\"buttonMain.state\"\n [ImagePath]=\"buttonMain.imagePath\"\n [iconPosition]=\"buttonMain.iconPosition\"\n [href]=\"buttonMain.href\"\n [hrefTarget]=\"buttonMain.hrefTarget\"\n [isSubmit]=\"buttonMain.isSubmit\">\n </sa-button>\n }\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-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"] }]
|
|
2100
2111
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
2101
2112
|
type: Input
|
|
2102
2113
|
}], chipConfig: [{
|
|
@@ -2122,7 +2133,7 @@ class LayoutSectionComponent {
|
|
|
2122
2133
|
}
|
|
2123
2134
|
}
|
|
2124
2135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2125
|
-
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\">\
|
|
2136
|
+
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\">\n <div class=\"layout-section__header\">\n <div class=\"layout-section__title\">\n <div class=\"header-name-container\">\n @if (config?.headerIcon?.icon) {\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\n [icon]=\"config?.headerIcon.icon\"\n [size]=\"config?.headerIcon.size || '24'\" />\n }\n <h2>{{ config?.headerText }}</h2>\n </div>\n @if (config?.chips?.length) {\n <div class=\"layout-section__chips\">\n @for (chip of config?.chips; track chip.id) {\n <sa-chip\n [id]=\"chip.id\"\n [text]=\"chip.text\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [iconPath]=\"chip.iconPath\"\n [iconPosition]=\"chip.iconPosition\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\">\n </sa-chip>\n }\n </div>\n }\n </div>\n <div class=\"layout-section__actions\">\n @if (config?.secondaryButton) {\n <sa-button \n [id]=\"config.secondaryButton.id\"\n [text]=\"config.secondaryButton.text\"\n [type]=\"config.secondaryButton.type\"\n [state]=\"config.secondaryButton.state\"\n [size]=\"config.secondaryButton.size\"\n [ImagePath]=\"config.secondaryButton.imagePath\"\n [icon]=\"config.secondaryButton.icon\"\n [iconPosition]=\"config.secondaryButton.iconPosition\"\n [href]=\"config.secondaryButton.href\"\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\n [width]=\"config?.secondaryButton.width\"\n [isSubmit]=\"config.secondaryButton.isSubmit\"\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\n [showSpinner]=\"config.secondaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\n </sa-button>\n }\n @if (config?.primaryButton) {\n <sa-button\n [id]=\"config.primaryButton.id\"\n [text]=\"config.primaryButton.text\"\n [type]=\"config.primaryButton.type\"\n [state]=\"config.primaryButton.state\"\n [size]=\"config.primaryButton.size\"\n [ImagePath]=\"config.primaryButton.imagePath\"\n [icon]=\"config.primaryButton.icon\"\n [iconPosition]=\"config.primaryButton.iconPosition\"\n [href]=\"config.primaryButton.href\"\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\n [width]=\"config.primaryButton.width\"\n [isSubmit]=\"config.primaryButton.isSubmit\"\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\n [showSpinner]=\"config.primaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('primary', $event)\">\n </sa-button>\n }\n </div>\n </div>\n \n <div class=\"layout-section__content\">\n <ng-content></ng-content>\n </div>\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 }] }); }
|
|
2126
2137
|
}
|
|
2127
2138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, decorators: [{
|
|
2128
2139
|
type: Component,
|
|
@@ -2132,7 +2143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2132
2143
|
ChipsComponent,
|
|
2133
2144
|
IconComponent,
|
|
2134
2145
|
HttpClientModule
|
|
2135
|
-
], providers: [IconService], standalone: true, template: "<div class=\"layout-section\">\
|
|
2146
|
+
], providers: [IconService], standalone: true, template: "<div class=\"layout-section\">\n <div class=\"layout-section__header\">\n <div class=\"layout-section__title\">\n <div class=\"header-name-container\">\n @if (config?.headerIcon?.icon) {\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\n [icon]=\"config?.headerIcon.icon\"\n [size]=\"config?.headerIcon.size || '24'\" />\n }\n <h2>{{ config?.headerText }}</h2>\n </div>\n @if (config?.chips?.length) {\n <div class=\"layout-section__chips\">\n @for (chip of config?.chips; track chip.id) {\n <sa-chip\n [id]=\"chip.id\"\n [text]=\"chip.text\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [iconPath]=\"chip.iconPath\"\n [iconPosition]=\"chip.iconPosition\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\">\n </sa-chip>\n }\n </div>\n }\n </div>\n <div class=\"layout-section__actions\">\n @if (config?.secondaryButton) {\n <sa-button \n [id]=\"config.secondaryButton.id\"\n [text]=\"config.secondaryButton.text\"\n [type]=\"config.secondaryButton.type\"\n [state]=\"config.secondaryButton.state\"\n [size]=\"config.secondaryButton.size\"\n [ImagePath]=\"config.secondaryButton.imagePath\"\n [icon]=\"config.secondaryButton.icon\"\n [iconPosition]=\"config.secondaryButton.iconPosition\"\n [href]=\"config.secondaryButton.href\"\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\n [width]=\"config?.secondaryButton.width\"\n [isSubmit]=\"config.secondaryButton.isSubmit\"\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\n [showSpinner]=\"config.secondaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\n </sa-button>\n }\n @if (config?.primaryButton) {\n <sa-button\n [id]=\"config.primaryButton.id\"\n [text]=\"config.primaryButton.text\"\n [type]=\"config.primaryButton.type\"\n [state]=\"config.primaryButton.state\"\n [size]=\"config.primaryButton.size\"\n [ImagePath]=\"config.primaryButton.imagePath\"\n [icon]=\"config.primaryButton.icon\"\n [iconPosition]=\"config.primaryButton.iconPosition\"\n [href]=\"config.primaryButton.href\"\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\n [width]=\"config.primaryButton.width\"\n [isSubmit]=\"config.primaryButton.isSubmit\"\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\n [showSpinner]=\"config.primaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('primary', $event)\">\n </sa-button>\n }\n </div>\n </div>\n \n <div class=\"layout-section__content\">\n <ng-content></ng-content>\n </div>\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"] }]
|
|
2136
2147
|
}], propDecorators: { config: [{
|
|
2137
2148
|
type: Input
|
|
2138
2149
|
}], buttonClick: [{
|
|
@@ -2149,26 +2160,26 @@ class StatusDotComponent {
|
|
|
2149
2160
|
};
|
|
2150
2161
|
}
|
|
2151
2162
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StatusDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StatusDotComponent, isStandalone: true, selector: "sa-status-dot", inputs: { config: "config" }, ngImport: i0, template: `
|
|
2153
|
-
<div [matTooltip]="config.tooltip"
|
|
2154
|
-
class="status-dot"
|
|
2155
|
-
[class]="config.status"
|
|
2156
|
-
[class.outline]="config.theme === 'outline'"
|
|
2157
|
-
[style.width.px]="config.size"
|
|
2158
|
-
[style.height.px]="config.size">
|
|
2159
|
-
</div>
|
|
2163
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StatusDotComponent, isStandalone: true, selector: "sa-status-dot", inputs: { config: "config" }, ngImport: i0, template: `
|
|
2164
|
+
<div [matTooltip]="config.tooltip"
|
|
2165
|
+
class="status-dot"
|
|
2166
|
+
[class]="config.status"
|
|
2167
|
+
[class.outline]="config.theme === 'outline'"
|
|
2168
|
+
[style.width.px]="config.size"
|
|
2169
|
+
[style.height.px]="config.size">
|
|
2170
|
+
</div>
|
|
2160
2171
|
`, isInline: true, styles: [":host{display:inline-block}.status-dot{border-radius:50%;display:inline-block;cursor:pointer}.primary{background-color:var(--primary-500, #007bff);border:2px solid var(--primary-500, #007bff)}.secondary{background-color:var(--secondary-500, #6c757d);border:2px solid var(--secondary-500, #6c757d)}.success{background-color:var(--semantic-success-500, #33961F);border:2px solid var(--semantic-success-500, #33961F)}.error{background-color:var(--semantic-error-500, #dc3545);border:2px solid var(--semantic-error-500, #dc3545)}.warning{background-color:var(--semantic-yellow-600, #DC9408);border:2px solid var(--semantic-yellow-600, #DC9408)}.outline{background-color:transparent!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2161
2172
|
}
|
|
2162
2173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StatusDotComponent, decorators: [{
|
|
2163
2174
|
type: Component,
|
|
2164
|
-
args: [{ selector: 'sa-status-dot', standalone: true, imports: [CommonModule, MatTooltipModule], template: `
|
|
2165
|
-
<div [matTooltip]="config.tooltip"
|
|
2166
|
-
class="status-dot"
|
|
2167
|
-
[class]="config.status"
|
|
2168
|
-
[class.outline]="config.theme === 'outline'"
|
|
2169
|
-
[style.width.px]="config.size"
|
|
2170
|
-
[style.height.px]="config.size">
|
|
2171
|
-
</div>
|
|
2175
|
+
args: [{ selector: 'sa-status-dot', standalone: true, imports: [CommonModule, MatTooltipModule], template: `
|
|
2176
|
+
<div [matTooltip]="config.tooltip"
|
|
2177
|
+
class="status-dot"
|
|
2178
|
+
[class]="config.status"
|
|
2179
|
+
[class.outline]="config.theme === 'outline'"
|
|
2180
|
+
[style.width.px]="config.size"
|
|
2181
|
+
[style.height.px]="config.size">
|
|
2182
|
+
</div>
|
|
2172
2183
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.status-dot{border-radius:50%;display:inline-block;cursor:pointer}.primary{background-color:var(--primary-500, #007bff);border:2px solid var(--primary-500, #007bff)}.secondary{background-color:var(--secondary-500, #6c757d);border:2px solid var(--secondary-500, #6c757d)}.success{background-color:var(--semantic-success-500, #33961F);border:2px solid var(--semantic-success-500, #33961F)}.error{background-color:var(--semantic-error-500, #dc3545);border:2px solid var(--semantic-error-500, #dc3545)}.warning{background-color:var(--semantic-yellow-600, #DC9408);border:2px solid var(--semantic-yellow-600, #DC9408)}.outline{background-color:transparent!important}\n"] }]
|
|
2173
2184
|
}], propDecorators: { config: [{
|
|
2174
2185
|
type: Input
|
|
@@ -2190,13 +2201,13 @@ class SAMenuItemComponent {
|
|
|
2190
2201
|
this.onEvent.emit({ type: 'click', item });
|
|
2191
2202
|
}
|
|
2192
2203
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2193
|
-
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\">\
|
|
2204
|
+
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\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\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>\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\n </div>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\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"] }] }); }
|
|
2194
2205
|
}
|
|
2195
2206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, decorators: [{
|
|
2196
2207
|
type: Component,
|
|
2197
2208
|
args: [{ selector: 'sa-menu-item', standalone: true, imports: [CommonModule, ChipsComponent, HttpClientModule, IconComponent, StatusDotComponent,
|
|
2198
2209
|
forwardRef(() => MenuDirective)
|
|
2199
|
-
], providers: [IconService], template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\
|
|
2210
|
+
], providers: [IconService], template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\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>\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\n </div>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\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"] }]
|
|
2200
2211
|
}], propDecorators: { item: [{
|
|
2201
2212
|
type: Input,
|
|
2202
2213
|
args: ['item']
|
|
@@ -2272,7 +2283,7 @@ class SAMenuComponent {
|
|
|
2272
2283
|
this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
|
|
2273
2284
|
}
|
|
2274
2285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$5.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2275
|
-
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' : ''\"\
|
|
2286
|
+
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' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\n (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n } @else if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n } -->\n\n\n <!-- Tab Content or Item Groups -->\n <div class=\"sa-menu-content\">\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \n />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n \n <!-- Tabs -->\n @if(menu?.tabs){\n <div class=\"sa-menu-tabs\">\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\n (click)=\"setActiveTab(i,tab.label)\">\n {{ tab.label }}\n <!-- ({{ tab.itemGroups.length }}) -->\n </button>\n </div>\n }\n <!-- Tabs End -->\n\n @if(menu?.tabs?.length){\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n } @else if(menu?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n </div>\n </div>\n\n @if(menu?.items && menu?.items?.length){\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\n <div class=\"avatar\">\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\n </div>\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\n </div>\n </div>\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\n }\n </div>\n }\n\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"] }] }); }
|
|
2276
2287
|
}
|
|
2277
2288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
|
|
2278
2289
|
type: Component,
|
|
@@ -2285,7 +2296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2285
2296
|
HttpClientModule,
|
|
2286
2297
|
IconComponent,
|
|
2287
2298
|
AvatarComponent,
|
|
2288
|
-
], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\
|
|
2299
|
+
], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\n (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n } @else if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n } -->\n\n\n <!-- Tab Content or Item Groups -->\n <div class=\"sa-menu-content\">\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \n />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n \n <!-- Tabs -->\n @if(menu?.tabs){\n <div class=\"sa-menu-tabs\">\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\n (click)=\"setActiveTab(i,tab.label)\">\n {{ tab.label }}\n <!-- ({{ tab.itemGroups.length }}) -->\n </button>\n </div>\n }\n <!-- Tabs End -->\n\n @if(menu?.tabs?.length){\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n } @else if(menu?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n </div>\n </div>\n\n @if(menu?.items && menu?.items?.length){\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\n <div class=\"avatar\">\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\n </div>\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\n </div>\n </div>\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\n }\n </div>\n }\n\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"] }]
|
|
2289
2300
|
}], ctorParameters: () => [{ type: i1$5.Overlay }], propDecorators: { position: [{
|
|
2290
2301
|
type: Input
|
|
2291
2302
|
}], menu: [{
|
|
@@ -2660,7 +2671,7 @@ class LeftNavComponent {
|
|
|
2660
2671
|
});
|
|
2661
2672
|
}
|
|
2662
2673
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2663
|
-
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"] }] }); }
|
|
2674
|
+
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\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\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>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n\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>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\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>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 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"] }] }); }
|
|
2664
2675
|
}
|
|
2665
2676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
2666
2677
|
type: Component,
|
|
@@ -2672,7 +2683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2672
2683
|
MenuDirective,
|
|
2673
2684
|
SAMenuComponent,
|
|
2674
2685
|
IconComponent
|
|
2675
|
-
], providers: [IconService], 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"] }]
|
|
2686
|
+
], providers: [IconService], template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\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>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n\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>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\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>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 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"] }]
|
|
2676
2687
|
}], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i1$6.Router }], propDecorators: { config: [{
|
|
2677
2688
|
type: Input,
|
|
2678
2689
|
args: ['config']
|
|
@@ -2782,13 +2793,13 @@ class MiniCardComponent {
|
|
|
2782
2793
|
this.onCardClickEvent.emit({ source, button, event });
|
|
2783
2794
|
}
|
|
2784
2795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MiniCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2785
|
-
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\"\
|
|
2796
|
+
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\"\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-mini-card-title-icon-container\">\n <div class=\"sa-mini-card-custom-title\">\n @if(card?.source?.logoUrl){\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n }\n <span [matTooltip]=\"card?.source?.tooltip\">\n {{card?.source?.name}}\n @if(card?.source?.count){\n <ng-container>\n <span>({{card?.source?.count}})</span>\n </ng-container>\n }\n </span>\n @if(card?.statusDot){\n <span>\n <sa-status-dot [config]=\"card.statusDot\">\n </sa-status-dot>\n </span>\n }\n @if(card?.chipData){\n <span>\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\n [iconPosition]='card?.chipData.iconPosition'\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\n </sa-chip>\n </span>\n }\n </div>\n </div>\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n }\n </div>\n </sa-card-title-header>\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"] }] }); }
|
|
2786
2797
|
}
|
|
2787
2798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MiniCardComponent, decorators: [{
|
|
2788
2799
|
type: Component,
|
|
2789
2800
|
args: [{ selector: 'sa-mini-card', standalone: true, imports: [CardComponent, CardCustomHeaderComponent, IconComponent, MatTooltip, ChipsComponent,
|
|
2790
2801
|
CardTitleActionsComponent, ButtonComponent, StatusDotComponent
|
|
2791
|
-
], providers: [IconService], template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\
|
|
2802
|
+
], providers: [IconService], template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-mini-card-title-icon-container\">\n <div class=\"sa-mini-card-custom-title\">\n @if(card?.source?.logoUrl){\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n }\n <span [matTooltip]=\"card?.source?.tooltip\">\n {{card?.source?.name}}\n @if(card?.source?.count){\n <ng-container>\n <span>({{card?.source?.count}})</span>\n </ng-container>\n }\n </span>\n @if(card?.statusDot){\n <span>\n <sa-status-dot [config]=\"card.statusDot\">\n </sa-status-dot>\n </span>\n }\n @if(card?.chipData){\n <span>\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\n [iconPosition]='card?.chipData.iconPosition'\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\n </sa-chip>\n </span>\n }\n </div>\n </div>\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n }\n </div>\n </sa-card-title-header>\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"] }]
|
|
2792
2803
|
}], propDecorators: { cardData: [{
|
|
2793
2804
|
type: Input
|
|
2794
2805
|
}], onCardClickEvent: [{
|
|
@@ -2801,11 +2812,11 @@ class PageLayoutComponent {
|
|
|
2801
2812
|
this.showFooterContent = false;
|
|
2802
2813
|
}
|
|
2803
2814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\
|
|
2815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }); }
|
|
2805
2816
|
}
|
|
2806
2817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
2807
2818
|
type: Component,
|
|
2808
|
-
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\
|
|
2819
|
+
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }]
|
|
2809
2820
|
}], propDecorators: { showRightContent: [{
|
|
2810
2821
|
type: Input
|
|
2811
2822
|
}], showFooterContent: [{
|
|
@@ -2825,11 +2836,11 @@ class ProgressBarComponent {
|
|
|
2825
2836
|
ngOnInit() {
|
|
2826
2837
|
}
|
|
2827
2838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2828
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\
|
|
2839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2829
2840
|
}
|
|
2830
2841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2831
2842
|
type: Component,
|
|
2832
|
-
args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\
|
|
2843
|
+
args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"] }]
|
|
2833
2844
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
|
|
2834
2845
|
type: Input
|
|
2835
2846
|
}], borderRadius: [{
|
|
@@ -2854,11 +2865,11 @@ class RadioButtonComponent extends FieldType {
|
|
|
2854
2865
|
radio.checked = true;
|
|
2855
2866
|
}
|
|
2856
2867
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\
|
|
2868
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
2858
2869
|
}
|
|
2859
2870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
2860
2871
|
type: Component,
|
|
2861
|
-
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\
|
|
2872
|
+
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
2862
2873
|
}] });
|
|
2863
2874
|
|
|
2864
2875
|
class ScrollingCardsComponent {
|
|
@@ -2931,11 +2942,11 @@ class ScrollingCardsComponent {
|
|
|
2931
2942
|
}
|
|
2932
2943
|
}
|
|
2933
2944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\
|
|
2945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2935
2946
|
}
|
|
2936
2947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
2937
2948
|
type: Component,
|
|
2938
|
-
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\
|
|
2949
|
+
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
2939
2950
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
2940
2951
|
type: Input,
|
|
2941
2952
|
args: [{ required: true }]
|
|
@@ -2989,18 +3000,18 @@ class SkeletonContainerComponent {
|
|
|
2989
3000
|
};
|
|
2990
3001
|
}
|
|
2991
3002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
|
|
2993
|
-
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
2994
|
-
<ng-content></ng-content>
|
|
2995
|
-
</div>
|
|
3003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
|
|
3004
|
+
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
3005
|
+
<ng-content></ng-content>
|
|
3006
|
+
</div>
|
|
2996
3007
|
`, isInline: true, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2997
3008
|
}
|
|
2998
3009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
|
|
2999
3010
|
type: Component,
|
|
3000
|
-
args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
|
|
3001
|
-
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
3002
|
-
<ng-content></ng-content>
|
|
3003
|
-
</div>
|
|
3011
|
+
args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
|
|
3012
|
+
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
3013
|
+
<ng-content></ng-content>
|
|
3014
|
+
</div>
|
|
3004
3015
|
`, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"] }]
|
|
3005
3016
|
}], propDecorators: { gap: [{
|
|
3006
3017
|
type: Input
|
|
@@ -3142,102 +3153,102 @@ class SkeletonLoaderComponent {
|
|
|
3142
3153
|
}
|
|
3143
3154
|
}
|
|
3144
3155
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config" }, usesOnChanges: true, ngImport: i0, template: `
|
|
3146
|
-
<sa-skeleton-container
|
|
3147
|
-
[gap]="config?.containerConfig?.gap"
|
|
3148
|
-
[padding]="config?.containerConfig?.padding"
|
|
3149
|
-
[direction]="config?.containerConfig?.direction || 'column'"
|
|
3150
|
-
>
|
|
3151
|
-
@for (item of config?.items; track $index) {
|
|
3152
|
-
@switch (item.type) {
|
|
3153
|
-
@case ('text') {
|
|
3154
|
-
<sa-skeleton-text
|
|
3155
|
-
[width]="item.width"
|
|
3156
|
-
[height]="item.height"
|
|
3157
|
-
></sa-skeleton-text>
|
|
3158
|
-
}
|
|
3159
|
-
@case ('circle') {
|
|
3160
|
-
<sa-skeleton-circle
|
|
3161
|
-
[size]="item.size"
|
|
3162
|
-
></sa-skeleton-circle>
|
|
3163
|
-
}
|
|
3164
|
-
@case ('rectangle') {
|
|
3165
|
-
<sa-skeleton-rectangle
|
|
3166
|
-
[width]="item.width"
|
|
3167
|
-
[height]="item.height"
|
|
3168
|
-
></sa-skeleton-rectangle>
|
|
3169
|
-
}
|
|
3170
|
-
@case ('elliptical') {
|
|
3171
|
-
<sa-skeleton-elliptical
|
|
3172
|
-
[width]="item.width"
|
|
3173
|
-
[height]="item.height"
|
|
3174
|
-
></sa-skeleton-elliptical>
|
|
3175
|
-
}
|
|
3176
|
-
@case ('container') {
|
|
3177
|
-
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
3178
|
-
@for (subItem of item.items; track $index) {
|
|
3179
|
-
@switch (subItem.type) {
|
|
3180
|
-
@case ('text') {
|
|
3181
|
-
<sa-skeleton-text
|
|
3182
|
-
[width]="subItem.width"
|
|
3183
|
-
[height]="subItem.height"
|
|
3184
|
-
></sa-skeleton-text>
|
|
3185
|
-
}
|
|
3186
|
-
@case ('circle') {
|
|
3187
|
-
<sa-skeleton-circle
|
|
3188
|
-
[size]="subItem.size"
|
|
3189
|
-
></sa-skeleton-circle>
|
|
3190
|
-
}
|
|
3191
|
-
@case ('rectangle') {
|
|
3192
|
-
<sa-skeleton-rectangle
|
|
3193
|
-
[width]="subItem.width"
|
|
3194
|
-
[height]="subItem.height"
|
|
3195
|
-
></sa-skeleton-rectangle>
|
|
3196
|
-
}
|
|
3197
|
-
@case ('elliptical') {
|
|
3198
|
-
<sa-skeleton-elliptical
|
|
3199
|
-
[width]="subItem.width"
|
|
3200
|
-
[height]="subItem.height"
|
|
3201
|
-
></sa-skeleton-elliptical>
|
|
3202
|
-
}
|
|
3203
|
-
@case ('container') {
|
|
3204
|
-
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
3205
|
-
@for (subSubItem of subItem.items; track $index) {
|
|
3206
|
-
@switch (subSubItem.type) {
|
|
3207
|
-
@case ('text') {
|
|
3208
|
-
<sa-skeleton-text
|
|
3209
|
-
[width]="subSubItem.width"
|
|
3210
|
-
[height]="subSubItem.height"
|
|
3211
|
-
></sa-skeleton-text>
|
|
3212
|
-
}
|
|
3213
|
-
@case ('circle') {
|
|
3214
|
-
<sa-skeleton-circle
|
|
3215
|
-
[size]="subSubItem.size"
|
|
3216
|
-
></sa-skeleton-circle>
|
|
3217
|
-
}
|
|
3218
|
-
@case ('rectangle') {
|
|
3219
|
-
<sa-skeleton-rectangle
|
|
3220
|
-
[width]="subSubItem.width"
|
|
3221
|
-
[height]="subSubItem.height"
|
|
3222
|
-
></sa-skeleton-rectangle>
|
|
3223
|
-
}
|
|
3224
|
-
@case ('elliptical') {
|
|
3225
|
-
<sa-skeleton-elliptical
|
|
3226
|
-
[width]="subSubItem.width"
|
|
3227
|
-
[height]="subSubItem.height"
|
|
3228
|
-
></sa-skeleton-elliptical>
|
|
3229
|
-
}
|
|
3230
|
-
}
|
|
3231
|
-
}
|
|
3232
|
-
</sa-skeleton-container>
|
|
3233
|
-
}
|
|
3234
|
-
}
|
|
3235
|
-
}
|
|
3236
|
-
</sa-skeleton-container>
|
|
3237
|
-
}
|
|
3238
|
-
}
|
|
3239
|
-
}
|
|
3240
|
-
</sa-skeleton-container>
|
|
3156
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config" }, usesOnChanges: true, ngImport: i0, template: `
|
|
3157
|
+
<sa-skeleton-container
|
|
3158
|
+
[gap]="config?.containerConfig?.gap"
|
|
3159
|
+
[padding]="config?.containerConfig?.padding"
|
|
3160
|
+
[direction]="config?.containerConfig?.direction || 'column'"
|
|
3161
|
+
>
|
|
3162
|
+
@for (item of config?.items; track $index) {
|
|
3163
|
+
@switch (item.type) {
|
|
3164
|
+
@case ('text') {
|
|
3165
|
+
<sa-skeleton-text
|
|
3166
|
+
[width]="item.width"
|
|
3167
|
+
[height]="item.height"
|
|
3168
|
+
></sa-skeleton-text>
|
|
3169
|
+
}
|
|
3170
|
+
@case ('circle') {
|
|
3171
|
+
<sa-skeleton-circle
|
|
3172
|
+
[size]="item.size"
|
|
3173
|
+
></sa-skeleton-circle>
|
|
3174
|
+
}
|
|
3175
|
+
@case ('rectangle') {
|
|
3176
|
+
<sa-skeleton-rectangle
|
|
3177
|
+
[width]="item.width"
|
|
3178
|
+
[height]="item.height"
|
|
3179
|
+
></sa-skeleton-rectangle>
|
|
3180
|
+
}
|
|
3181
|
+
@case ('elliptical') {
|
|
3182
|
+
<sa-skeleton-elliptical
|
|
3183
|
+
[width]="item.width"
|
|
3184
|
+
[height]="item.height"
|
|
3185
|
+
></sa-skeleton-elliptical>
|
|
3186
|
+
}
|
|
3187
|
+
@case ('container') {
|
|
3188
|
+
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
3189
|
+
@for (subItem of item.items; track $index) {
|
|
3190
|
+
@switch (subItem.type) {
|
|
3191
|
+
@case ('text') {
|
|
3192
|
+
<sa-skeleton-text
|
|
3193
|
+
[width]="subItem.width"
|
|
3194
|
+
[height]="subItem.height"
|
|
3195
|
+
></sa-skeleton-text>
|
|
3196
|
+
}
|
|
3197
|
+
@case ('circle') {
|
|
3198
|
+
<sa-skeleton-circle
|
|
3199
|
+
[size]="subItem.size"
|
|
3200
|
+
></sa-skeleton-circle>
|
|
3201
|
+
}
|
|
3202
|
+
@case ('rectangle') {
|
|
3203
|
+
<sa-skeleton-rectangle
|
|
3204
|
+
[width]="subItem.width"
|
|
3205
|
+
[height]="subItem.height"
|
|
3206
|
+
></sa-skeleton-rectangle>
|
|
3207
|
+
}
|
|
3208
|
+
@case ('elliptical') {
|
|
3209
|
+
<sa-skeleton-elliptical
|
|
3210
|
+
[width]="subItem.width"
|
|
3211
|
+
[height]="subItem.height"
|
|
3212
|
+
></sa-skeleton-elliptical>
|
|
3213
|
+
}
|
|
3214
|
+
@case ('container') {
|
|
3215
|
+
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
3216
|
+
@for (subSubItem of subItem.items; track $index) {
|
|
3217
|
+
@switch (subSubItem.type) {
|
|
3218
|
+
@case ('text') {
|
|
3219
|
+
<sa-skeleton-text
|
|
3220
|
+
[width]="subSubItem.width"
|
|
3221
|
+
[height]="subSubItem.height"
|
|
3222
|
+
></sa-skeleton-text>
|
|
3223
|
+
}
|
|
3224
|
+
@case ('circle') {
|
|
3225
|
+
<sa-skeleton-circle
|
|
3226
|
+
[size]="subSubItem.size"
|
|
3227
|
+
></sa-skeleton-circle>
|
|
3228
|
+
}
|
|
3229
|
+
@case ('rectangle') {
|
|
3230
|
+
<sa-skeleton-rectangle
|
|
3231
|
+
[width]="subSubItem.width"
|
|
3232
|
+
[height]="subSubItem.height"
|
|
3233
|
+
></sa-skeleton-rectangle>
|
|
3234
|
+
}
|
|
3235
|
+
@case ('elliptical') {
|
|
3236
|
+
<sa-skeleton-elliptical
|
|
3237
|
+
[width]="subSubItem.width"
|
|
3238
|
+
[height]="subSubItem.height"
|
|
3239
|
+
></sa-skeleton-elliptical>
|
|
3240
|
+
}
|
|
3241
|
+
}
|
|
3242
|
+
}
|
|
3243
|
+
</sa-skeleton-container>
|
|
3244
|
+
}
|
|
3245
|
+
}
|
|
3246
|
+
}
|
|
3247
|
+
</sa-skeleton-container>
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3250
|
+
}
|
|
3251
|
+
</sa-skeleton-container>
|
|
3241
3252
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonTextComponent, selector: "sa-skeleton-text", inputs: ["width", "height"] }, { kind: "component", type: SkeletonCircleComponent, selector: "sa-skeleton-circle", inputs: ["size"] }, { kind: "component", type: SkeletonRectangleComponent, selector: "sa-skeleton-rectangle", inputs: ["width", "height"] }, { kind: "component", type: SkeletonEllipticalComponent, selector: "sa-skeleton-elliptical", inputs: ["width", "height"] }, { kind: "component", type: SkeletonContainerComponent, selector: "sa-skeleton-container", inputs: ["gap", "padding", "direction"] }] }); }
|
|
3242
3253
|
}
|
|
3243
3254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
@@ -3254,102 +3265,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3254
3265
|
SkeletonEllipticalComponent,
|
|
3255
3266
|
SkeletonContainerComponent
|
|
3256
3267
|
],
|
|
3257
|
-
template: `
|
|
3258
|
-
<sa-skeleton-container
|
|
3259
|
-
[gap]="config?.containerConfig?.gap"
|
|
3260
|
-
[padding]="config?.containerConfig?.padding"
|
|
3261
|
-
[direction]="config?.containerConfig?.direction || 'column'"
|
|
3262
|
-
>
|
|
3263
|
-
@for (item of config?.items; track $index) {
|
|
3264
|
-
@switch (item.type) {
|
|
3265
|
-
@case ('text') {
|
|
3266
|
-
<sa-skeleton-text
|
|
3267
|
-
[width]="item.width"
|
|
3268
|
-
[height]="item.height"
|
|
3269
|
-
></sa-skeleton-text>
|
|
3270
|
-
}
|
|
3271
|
-
@case ('circle') {
|
|
3272
|
-
<sa-skeleton-circle
|
|
3273
|
-
[size]="item.size"
|
|
3274
|
-
></sa-skeleton-circle>
|
|
3275
|
-
}
|
|
3276
|
-
@case ('rectangle') {
|
|
3277
|
-
<sa-skeleton-rectangle
|
|
3278
|
-
[width]="item.width"
|
|
3279
|
-
[height]="item.height"
|
|
3280
|
-
></sa-skeleton-rectangle>
|
|
3281
|
-
}
|
|
3282
|
-
@case ('elliptical') {
|
|
3283
|
-
<sa-skeleton-elliptical
|
|
3284
|
-
[width]="item.width"
|
|
3285
|
-
[height]="item.height"
|
|
3286
|
-
></sa-skeleton-elliptical>
|
|
3287
|
-
}
|
|
3288
|
-
@case ('container') {
|
|
3289
|
-
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
3290
|
-
@for (subItem of item.items; track $index) {
|
|
3291
|
-
@switch (subItem.type) {
|
|
3292
|
-
@case ('text') {
|
|
3293
|
-
<sa-skeleton-text
|
|
3294
|
-
[width]="subItem.width"
|
|
3295
|
-
[height]="subItem.height"
|
|
3296
|
-
></sa-skeleton-text>
|
|
3297
|
-
}
|
|
3298
|
-
@case ('circle') {
|
|
3299
|
-
<sa-skeleton-circle
|
|
3300
|
-
[size]="subItem.size"
|
|
3301
|
-
></sa-skeleton-circle>
|
|
3302
|
-
}
|
|
3303
|
-
@case ('rectangle') {
|
|
3304
|
-
<sa-skeleton-rectangle
|
|
3305
|
-
[width]="subItem.width"
|
|
3306
|
-
[height]="subItem.height"
|
|
3307
|
-
></sa-skeleton-rectangle>
|
|
3308
|
-
}
|
|
3309
|
-
@case ('elliptical') {
|
|
3310
|
-
<sa-skeleton-elliptical
|
|
3311
|
-
[width]="subItem.width"
|
|
3312
|
-
[height]="subItem.height"
|
|
3313
|
-
></sa-skeleton-elliptical>
|
|
3314
|
-
}
|
|
3315
|
-
@case ('container') {
|
|
3316
|
-
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
3317
|
-
@for (subSubItem of subItem.items; track $index) {
|
|
3318
|
-
@switch (subSubItem.type) {
|
|
3319
|
-
@case ('text') {
|
|
3320
|
-
<sa-skeleton-text
|
|
3321
|
-
[width]="subSubItem.width"
|
|
3322
|
-
[height]="subSubItem.height"
|
|
3323
|
-
></sa-skeleton-text>
|
|
3324
|
-
}
|
|
3325
|
-
@case ('circle') {
|
|
3326
|
-
<sa-skeleton-circle
|
|
3327
|
-
[size]="subSubItem.size"
|
|
3328
|
-
></sa-skeleton-circle>
|
|
3329
|
-
}
|
|
3330
|
-
@case ('rectangle') {
|
|
3331
|
-
<sa-skeleton-rectangle
|
|
3332
|
-
[width]="subSubItem.width"
|
|
3333
|
-
[height]="subSubItem.height"
|
|
3334
|
-
></sa-skeleton-rectangle>
|
|
3335
|
-
}
|
|
3336
|
-
@case ('elliptical') {
|
|
3337
|
-
<sa-skeleton-elliptical
|
|
3338
|
-
[width]="subSubItem.width"
|
|
3339
|
-
[height]="subSubItem.height"
|
|
3340
|
-
></sa-skeleton-elliptical>
|
|
3341
|
-
}
|
|
3342
|
-
}
|
|
3343
|
-
}
|
|
3344
|
-
</sa-skeleton-container>
|
|
3345
|
-
}
|
|
3346
|
-
}
|
|
3347
|
-
}
|
|
3348
|
-
</sa-skeleton-container>
|
|
3349
|
-
}
|
|
3350
|
-
}
|
|
3351
|
-
}
|
|
3352
|
-
</sa-skeleton-container>
|
|
3268
|
+
template: `
|
|
3269
|
+
<sa-skeleton-container
|
|
3270
|
+
[gap]="config?.containerConfig?.gap"
|
|
3271
|
+
[padding]="config?.containerConfig?.padding"
|
|
3272
|
+
[direction]="config?.containerConfig?.direction || 'column'"
|
|
3273
|
+
>
|
|
3274
|
+
@for (item of config?.items; track $index) {
|
|
3275
|
+
@switch (item.type) {
|
|
3276
|
+
@case ('text') {
|
|
3277
|
+
<sa-skeleton-text
|
|
3278
|
+
[width]="item.width"
|
|
3279
|
+
[height]="item.height"
|
|
3280
|
+
></sa-skeleton-text>
|
|
3281
|
+
}
|
|
3282
|
+
@case ('circle') {
|
|
3283
|
+
<sa-skeleton-circle
|
|
3284
|
+
[size]="item.size"
|
|
3285
|
+
></sa-skeleton-circle>
|
|
3286
|
+
}
|
|
3287
|
+
@case ('rectangle') {
|
|
3288
|
+
<sa-skeleton-rectangle
|
|
3289
|
+
[width]="item.width"
|
|
3290
|
+
[height]="item.height"
|
|
3291
|
+
></sa-skeleton-rectangle>
|
|
3292
|
+
}
|
|
3293
|
+
@case ('elliptical') {
|
|
3294
|
+
<sa-skeleton-elliptical
|
|
3295
|
+
[width]="item.width"
|
|
3296
|
+
[height]="item.height"
|
|
3297
|
+
></sa-skeleton-elliptical>
|
|
3298
|
+
}
|
|
3299
|
+
@case ('container') {
|
|
3300
|
+
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
3301
|
+
@for (subItem of item.items; track $index) {
|
|
3302
|
+
@switch (subItem.type) {
|
|
3303
|
+
@case ('text') {
|
|
3304
|
+
<sa-skeleton-text
|
|
3305
|
+
[width]="subItem.width"
|
|
3306
|
+
[height]="subItem.height"
|
|
3307
|
+
></sa-skeleton-text>
|
|
3308
|
+
}
|
|
3309
|
+
@case ('circle') {
|
|
3310
|
+
<sa-skeleton-circle
|
|
3311
|
+
[size]="subItem.size"
|
|
3312
|
+
></sa-skeleton-circle>
|
|
3313
|
+
}
|
|
3314
|
+
@case ('rectangle') {
|
|
3315
|
+
<sa-skeleton-rectangle
|
|
3316
|
+
[width]="subItem.width"
|
|
3317
|
+
[height]="subItem.height"
|
|
3318
|
+
></sa-skeleton-rectangle>
|
|
3319
|
+
}
|
|
3320
|
+
@case ('elliptical') {
|
|
3321
|
+
<sa-skeleton-elliptical
|
|
3322
|
+
[width]="subItem.width"
|
|
3323
|
+
[height]="subItem.height"
|
|
3324
|
+
></sa-skeleton-elliptical>
|
|
3325
|
+
}
|
|
3326
|
+
@case ('container') {
|
|
3327
|
+
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
3328
|
+
@for (subSubItem of subItem.items; track $index) {
|
|
3329
|
+
@switch (subSubItem.type) {
|
|
3330
|
+
@case ('text') {
|
|
3331
|
+
<sa-skeleton-text
|
|
3332
|
+
[width]="subSubItem.width"
|
|
3333
|
+
[height]="subSubItem.height"
|
|
3334
|
+
></sa-skeleton-text>
|
|
3335
|
+
}
|
|
3336
|
+
@case ('circle') {
|
|
3337
|
+
<sa-skeleton-circle
|
|
3338
|
+
[size]="subSubItem.size"
|
|
3339
|
+
></sa-skeleton-circle>
|
|
3340
|
+
}
|
|
3341
|
+
@case ('rectangle') {
|
|
3342
|
+
<sa-skeleton-rectangle
|
|
3343
|
+
[width]="subSubItem.width"
|
|
3344
|
+
[height]="subSubItem.height"
|
|
3345
|
+
></sa-skeleton-rectangle>
|
|
3346
|
+
}
|
|
3347
|
+
@case ('elliptical') {
|
|
3348
|
+
<sa-skeleton-elliptical
|
|
3349
|
+
[width]="subSubItem.width"
|
|
3350
|
+
[height]="subSubItem.height"
|
|
3351
|
+
></sa-skeleton-elliptical>
|
|
3352
|
+
}
|
|
3353
|
+
}
|
|
3354
|
+
}
|
|
3355
|
+
</sa-skeleton-container>
|
|
3356
|
+
}
|
|
3357
|
+
}
|
|
3358
|
+
}
|
|
3359
|
+
</sa-skeleton-container>
|
|
3360
|
+
}
|
|
3361
|
+
}
|
|
3362
|
+
}
|
|
3363
|
+
</sa-skeleton-container>
|
|
3353
3364
|
`
|
|
3354
3365
|
}]
|
|
3355
3366
|
}], propDecorators: { preset: [{
|
|
@@ -3400,11 +3411,11 @@ class StepperComponent extends FieldType {
|
|
|
3400
3411
|
});
|
|
3401
3412
|
}
|
|
3402
3413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\
|
|
3414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
3404
3415
|
}
|
|
3405
3416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
|
|
3406
3417
|
type: Component,
|
|
3407
|
-
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\
|
|
3418
|
+
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
|
|
3408
3419
|
}], propDecorators: { latestStep: [{
|
|
3409
3420
|
type: Input
|
|
3410
3421
|
}], editable: [{
|
|
@@ -3436,11 +3447,11 @@ class TabsComponent {
|
|
|
3436
3447
|
this.tabChanged.emit(evt.target.value);
|
|
3437
3448
|
}
|
|
3438
3449
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\
|
|
3450
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
3440
3451
|
}
|
|
3441
3452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
3442
3453
|
type: Component,
|
|
3443
|
-
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\
|
|
3454
|
+
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
|
|
3444
3455
|
}], propDecorators: { tabs: [{
|
|
3445
3456
|
type: Input
|
|
3446
3457
|
}], type: [{
|
|
@@ -3493,11 +3504,11 @@ class ToastComponent {
|
|
|
3493
3504
|
});
|
|
3494
3505
|
}
|
|
3495
3506
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3496
|
-
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\">\
|
|
3507
|
+
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\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div>\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$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"] }] }); }
|
|
3497
3508
|
}
|
|
3498
3509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
|
|
3499
3510
|
type: Component,
|
|
3500
|
-
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\
|
|
3511
|
+
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div>\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
3501
3512
|
}], propDecorators: { finishPercentage: [{
|
|
3502
3513
|
type: Input
|
|
3503
3514
|
}], heading: [{
|
|
@@ -3572,11 +3583,11 @@ class ToolTipComponent {
|
|
|
3572
3583
|
this.toolTipSkipped.emit();
|
|
3573
3584
|
}
|
|
3574
3585
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\
|
|
3586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n <div class=\"tool-tip\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}\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"] }] }); }
|
|
3576
3587
|
}
|
|
3577
3588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
|
|
3578
3589
|
type: Component,
|
|
3579
|
-
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\
|
|
3590
|
+
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n <div class=\"tool-tip\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}\n"] }]
|
|
3580
3591
|
}], propDecorators: { messages: [{
|
|
3581
3592
|
type: Input
|
|
3582
3593
|
}], pointerPosition: [{
|
|
@@ -3636,7 +3647,7 @@ class TypographyAnimationComponent {
|
|
|
3636
3647
|
}, 100);
|
|
3637
3648
|
}
|
|
3638
3649
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TypographyAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-animation\">\
|
|
3650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;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:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\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"] }], animations: [
|
|
3640
3651
|
trigger('slideAnimation', [
|
|
3641
3652
|
state('hidden', style({
|
|
3642
3653
|
opacity: 0,
|
|
@@ -3674,7 +3685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3674
3685
|
animate('{{duration}}ms ease-in')
|
|
3675
3686
|
], { params: { duration: 300 } })
|
|
3676
3687
|
])
|
|
3677
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"text-animation\">\
|
|
3688
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;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:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"] }]
|
|
3678
3689
|
}], propDecorators: { config: [{
|
|
3679
3690
|
type: Input
|
|
3680
3691
|
}] } });
|