@sarasanalytics-com/design-system 0.0.103 → 0.0.105
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/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/lib/accordion/accordion.component.mjs +5 -5
- package/esm2022/lib/avatar/avatar.component.mjs +5 -5
- package/esm2022/lib/button/button.component.mjs +5 -5
- package/esm2022/lib/calendar-header/calendar-header.component.mjs +5 -5
- package/esm2022/lib/card/card-body/card-body.component.mjs +4 -4
- package/esm2022/lib/card/card-custom-header/card-custom-header.component.mjs +4 -4
- package/esm2022/lib/card/card-footer-actions/card-footer-actions.component.mjs +5 -5
- package/esm2022/lib/card/card-icon/card-icon.component.mjs +4 -4
- package/esm2022/lib/card/card-title-actions/card-title-actions.component.mjs +4 -4
- package/esm2022/lib/card/card.component.mjs +5 -5
- package/esm2022/lib/card/checkbox-card/checkbox-card.component.mjs +5 -5
- package/esm2022/lib/card/guide-card/guide-card.component.mjs +5 -5
- package/esm2022/lib/card/menu-card/menu-card.component.mjs +5 -5
- package/esm2022/lib/card/thumbnail-card/thumbnail-card.component.mjs +5 -5
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +5 -5
- package/esm2022/lib/checkbox/checkbox.component.mjs +5 -5
- package/esm2022/lib/chips/chips.component.mjs +5 -5
- package/esm2022/lib/component-library.component.mjs +11 -11
- package/esm2022/lib/component-library.service.mjs +4 -4
- package/esm2022/lib/datepicker/datepicker.component.mjs +5 -5
- package/esm2022/lib/dialog/dialog.component.mjs +5 -5
- package/esm2022/lib/form-input/form-input.component.mjs +5 -5
- package/esm2022/lib/form-select/form-select.component.mjs +5 -5
- package/esm2022/lib/grid-cell/grid-cell.component.mjs +5 -5
- package/esm2022/lib/header/header.component.mjs +5 -5
- package/esm2022/lib/icon/icon.component.mjs +26 -6
- package/esm2022/lib/icon/icon.service.mjs +4 -4
- package/esm2022/lib/layout-section/layout-section.component.mjs +5 -5
- package/esm2022/lib/left-nav/left-nav.component.mjs +5 -5
- package/esm2022/lib/list/list.component.mjs +5 -5
- package/esm2022/lib/message-banner/message-banner.component.mjs +5 -5
- package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +5 -5
- package/esm2022/lib/mini-card/mini-card.component.mjs +5 -5
- package/esm2022/lib/page-layout/page-layout.component.mjs +5 -5
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +5 -5
- package/esm2022/lib/radio-button/radio-button.component.mjs +5 -5
- package/esm2022/lib/scrolling-cards/scrolling-cards.component.mjs +5 -5
- package/esm2022/lib/skeleton/skeleton-base.component.mjs +4 -4
- package/esm2022/lib/skeleton/skeleton-container.component.mjs +11 -11
- package/esm2022/lib/skeleton/skeleton-loader.component.mjs +195 -195
- package/esm2022/lib/skeleton/skeleton-presets.mjs +1 -1
- package/esm2022/lib/skeleton/skeleton-shapes.component.mjs +13 -13
- package/esm2022/lib/spinner/spinner.component.mjs +4 -4
- package/esm2022/lib/status-dot/status-dot.component.mjs +19 -19
- package/esm2022/lib/stepper/stepper.component.mjs +5 -5
- package/esm2022/lib/tabs/tabs.component.mjs +5 -5
- package/esm2022/lib/toast/toast.component.mjs +14 -5
- package/esm2022/lib/tool-tip/tool-tip.component.mjs +5 -5
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/utils/validators.mjs +1 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +433 -404
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/icon/icon.component.d.ts +7 -2
- package/lib/toast/toast.component.d.ts +4 -1
- package/package.json +2 -2
- package/styles/styles.css +0 -428
|
@@ -40,10 +40,10 @@ import * as i1$6 from '@angular/material/radio';
|
|
|
40
40
|
import { MatRadioButton, MatRadioModule } from '@angular/material/radio';
|
|
41
41
|
|
|
42
42
|
class CardCustomHeaderComponent {
|
|
43
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
44
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardCustomHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardCustomHeaderComponent, isStandalone: true, selector: "sa-card-title-header", ngImport: i0, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}.sa-card-accordion-title-container{display:flex;align-items:center;justify-content:flex-start;gap:var(--small-8px)}.sa-card-title-icon-container{display:flex;align-items:center;gap:var(--small-4px)}.sa-card-accordion-wrapper .sa-card-custom-title{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}.sa-menu-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}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardCustomHeaderComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
48
|
args: [{ selector: 'sa-card-title-header', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}.sa-card-accordion-title-container{display:flex;align-items:center;justify-content:flex-start;gap:var(--small-8px)}.sa-card-title-icon-container{display:flex;align-items:center;gap:var(--small-4px)}.sa-card-accordion-wrapper .sa-card-custom-title{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}.sa-menu-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}\n"] }]
|
|
49
49
|
}] });
|
|
@@ -76,12 +76,12 @@ class ChipsComponent {
|
|
|
76
76
|
evt
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
80
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
80
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\" [matTooltip]=\"tooltip\">\r\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\r\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n\r\n {{text}}\r\n\r\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\r\n\r\n {{type == 'large' ? largeStateText : \"\"}}\r\n\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n</div>\r\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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
81
81
|
}
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
83
83
|
type: Component,
|
|
84
|
-
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\" [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"] }]
|
|
84
|
+
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\" [matTooltip]=\"tooltip\">\r\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\r\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n\r\n {{text}}\r\n\r\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\r\n\r\n {{type == 'large' ? largeStateText : \"\"}}\r\n\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n</div>\r\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"] }]
|
|
85
85
|
}], propDecorators: { id: [{
|
|
86
86
|
type: Input
|
|
87
87
|
}], iconPath: [{
|
|
@@ -121,10 +121,10 @@ class IconService {
|
|
|
121
121
|
if (path)
|
|
122
122
|
this.path = path;
|
|
123
123
|
}
|
|
124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
125
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
124
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
125
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, providedIn: 'root' }); }
|
|
126
126
|
}
|
|
127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, decorators: [{
|
|
128
128
|
type: Injectable,
|
|
129
129
|
args: [{
|
|
130
130
|
providedIn: 'root'
|
|
@@ -139,6 +139,8 @@ class IconComponent {
|
|
|
139
139
|
this.iconPath = "";
|
|
140
140
|
this.iconUrl = "";
|
|
141
141
|
this.customClass = "";
|
|
142
|
+
this.onClickEvent = new EventEmitter();
|
|
143
|
+
this.eventEmitObject = {};
|
|
142
144
|
this.iconStyles = {
|
|
143
145
|
// fontSize: '44px',
|
|
144
146
|
// color: 'red'
|
|
@@ -171,12 +173,24 @@ class IconComponent {
|
|
|
171
173
|
this.iconStyles.color = this.color;
|
|
172
174
|
}
|
|
173
175
|
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
+
iconClicked(evt) {
|
|
177
|
+
this.onClickEvent.emit({
|
|
178
|
+
...this.eventEmitObject,
|
|
179
|
+
evt
|
|
180
|
+
});
|
|
181
|
+
if (this.href != "") {
|
|
182
|
+
if (this.hrefTarget == "blank")
|
|
183
|
+
window.open(this.href);
|
|
184
|
+
else if (this.hrefTarget == "self")
|
|
185
|
+
location.href = this.href;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\r\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\r\n}@else{\r\n<span class=\"sa-icon\" [ngClass]=\"{\r\n 'url-icon': iconUrl\r\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\r\n\r\n</span>\r\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
176
190
|
}
|
|
177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
|
|
178
192
|
type: Component,
|
|
179
|
-
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
193
|
+
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\r\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\r\n}@else{\r\n<span class=\"sa-icon\" [ngClass]=\"{\r\n 'url-icon': iconUrl\r\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\r\n\r\n</span>\r\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
180
194
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
|
|
181
195
|
type: Input,
|
|
182
196
|
args: ['img']
|
|
@@ -196,6 +210,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
196
210
|
}], customClass: [{
|
|
197
211
|
type: Input,
|
|
198
212
|
args: ['customClass']
|
|
213
|
+
}], href: [{
|
|
214
|
+
type: Input
|
|
215
|
+
}], hrefTarget: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], onClickEvent: [{
|
|
218
|
+
type: Output
|
|
199
219
|
}] } });
|
|
200
220
|
|
|
201
221
|
class AvatarComponent {
|
|
@@ -228,12 +248,12 @@ class AvatarComponent {
|
|
|
228
248
|
evt
|
|
229
249
|
});
|
|
230
250
|
}
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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)\"\r\n (mouseleave)=\"mouseLeave($event)\">\r\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\r\n <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\r\n</div>\r\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
233
253
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
235
255
|
type: Component,
|
|
236
|
-
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"] }]
|
|
256
|
+
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\r\n (mouseleave)=\"mouseLeave($event)\">\r\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\r\n <p *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</p>\r\n</div>\r\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none}.avatar:hover{cursor:pointer}\n"] }]
|
|
237
257
|
}], propDecorators: { id: [{
|
|
238
258
|
type: Input
|
|
239
259
|
}], imagePath: [{
|
|
@@ -283,12 +303,12 @@ class CardComponent {
|
|
|
283
303
|
location.href = this.href;
|
|
284
304
|
}
|
|
285
305
|
}
|
|
286
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
287
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:inherit;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], 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"] }] }); }
|
|
288
308
|
}
|
|
289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
|
|
290
310
|
type: Component,
|
|
291
|
-
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\n </div>\n }\n @if (showCustomCardBody) {\n <ng-content select=\"sa-card-custom-body\"></ng-content>\n }\n @if(showCardBody && body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:inherit;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);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)}\n"] }]
|
|
311
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:inherit;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px)}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);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)}\n"] }]
|
|
292
312
|
}], propDecorators: { title: [{
|
|
293
313
|
type: Input,
|
|
294
314
|
args: ['title']
|
|
@@ -358,10 +378,10 @@ class SpinnerComponent {
|
|
|
358
378
|
constructor() {
|
|
359
379
|
this.default = false;
|
|
360
380
|
}
|
|
361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
381
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
382
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SpinnerComponent, isStandalone: true, selector: "sa-spinner", inputs: { default: "default", size: "size" }, ngImport: i0, template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
363
383
|
}
|
|
364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
365
385
|
type: Component,
|
|
366
386
|
args: [{ selector: 'sa-spinner', standalone: true, imports: [CommonModule], template: "<span class=\"sa-spinner\" [ngClass]=\"default ? 'default' : ''\" [ngStyle]=\"{'fontSize': size+'px'}\"></span>", styles: [".sa-spinner{width:1em;height:1em;border-radius:50%;display:inline-block;position:relative;border:2px solid var(--primary-500);box-sizing:border-box;animation:rotation 1s linear infinite}.sa-spinner:after{content:\"\";box-sizing:border-box;position:absolute;left:.1em;top:.1em;border:2px solid var(--primary-500);width:.25em;height:.25em;border-radius:50%}.sa-spinner.default,.sa-spinner.default:after{border-color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:inherit}\n"] }]
|
|
367
387
|
}], propDecorators: { default: [{
|
|
@@ -420,12 +440,12 @@ class ButtonComponent {
|
|
|
420
440
|
return;
|
|
421
441
|
this.onMouseOutEvent.emit();
|
|
422
442
|
}
|
|
423
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
443
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
444
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\r\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\r\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\r\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\r\n class=\"sa-button {{state}} {{type}} {{size}}\">\r\n @if(showSpinner){\r\n <sa-spinner [default]=\"true\"></sa-spinner>\r\n }\r\n @if(ImagePath) {\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n {{text}}\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n } @else if (icon) {\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n {{text}}\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n } @else {\r\n {{text}}\r\n }\r\n</label>\r\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
|
|
425
445
|
}
|
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
427
447
|
type: Component,
|
|
428
|
-
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"] }]
|
|
448
|
+
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\"\r\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\r\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\r\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\r\n class=\"sa-button {{state}} {{type}} {{size}}\">\r\n @if(showSpinner){\r\n <sa-spinner [default]=\"true\"></sa-spinner>\r\n }\r\n @if(ImagePath) {\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n {{text}}\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n } @else if (icon) {\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n {{text}}\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n } @else {\r\n {{text}}\r\n }\r\n</label>\r\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
|
|
429
449
|
}], propDecorators: { id: [{
|
|
430
450
|
type: Input
|
|
431
451
|
}], type: [{
|
|
@@ -556,12 +576,12 @@ class AccordionComponent extends FieldType {
|
|
|
556
576
|
ngOnDestroy() {
|
|
557
577
|
this.buttonClick.complete();
|
|
558
578
|
}
|
|
559
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
560
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.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)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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"], 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"] }] }); }
|
|
579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
580
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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(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 </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(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){\r\n <div class=\"chip-container\">\r\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\r\n [state]=\"subFeature.featureChip?.['state']\"\r\n [filling]=\"subFeature.featureChip?.['filling']\"\r\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\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)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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"], 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"] }] }); }
|
|
561
581
|
}
|
|
562
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
563
583
|
type: Component,
|
|
564
|
-
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.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)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::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"] }]
|
|
584
|
+
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(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 </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(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){\r\n <div class=\"chip-container\">\r\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\r\n [state]=\"subFeature.featureChip?.['state']\"\r\n [filling]=\"subFeature.featureChip?.['filling']\"\r\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\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)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::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"] }]
|
|
565
585
|
}] });
|
|
566
586
|
|
|
567
587
|
let nextId$2 = 0; // used to give unique ids to inputs used in html
|
|
@@ -706,53 +726,53 @@ class CalendarHeaderComponent {
|
|
|
706
726
|
ngOnDestroy() {
|
|
707
727
|
this.destroy$.next(); // will trigger unsubscription in takeUntil
|
|
708
728
|
}
|
|
709
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
710
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
729
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 }); }
|
|
730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\r\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\r\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\r\n for=\"preset-radio-{{i}}\">{{preset}}</label>\r\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\r\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\r\n </div>\r\n</div>\r\n\r\n<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked('month')\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n\r\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked('month')\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\r\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
711
731
|
}
|
|
712
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
713
733
|
type: Component,
|
|
714
734
|
args: [{ standalone: true, imports: [
|
|
715
735
|
NgFor,
|
|
716
736
|
MatIconModule,
|
|
717
737
|
MatButton
|
|
718
|
-
], 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"] }]
|
|
738
|
+
], template: "<div class=\"range-preset\">\r\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\r\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\r\n for=\"preset-radio-{{i}}\">{{preset}}</label>\r\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\r\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\r\n </div>\r\n</div>\r\n\r\n<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked('month')\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n\r\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked('month')\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\r\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"] }]
|
|
719
739
|
}], ctorParameters: () => [{ type: i2$1.MatCalendar }, { type: i2$2.DateAdapter }, { type: i2$1.MatDateRangePicker }, { type: undefined, decorators: [{
|
|
720
740
|
type: Inject,
|
|
721
741
|
args: [MAT_DATE_FORMATS]
|
|
722
742
|
}] }, { type: i0.ChangeDetectorRef }] });
|
|
723
743
|
|
|
724
744
|
class CardBodyComponent {
|
|
725
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
726
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
745
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardBodyComponent, isStandalone: true, selector: "sa-card-custom-body", ngImport: i0, template: "<div class=\"sa-card-body\"><ng-content></ng-content></div>", styles: [""] }); }
|
|
727
747
|
}
|
|
728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardBodyComponent, decorators: [{
|
|
729
749
|
type: Component,
|
|
730
750
|
args: [{ selector: 'sa-card-custom-body', standalone: true, imports: [], template: "<div class=\"sa-card-body\"><ng-content></ng-content></div>" }]
|
|
731
751
|
}] });
|
|
732
752
|
|
|
733
753
|
class CardFooterActionsComponent {
|
|
734
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
735
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
754
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
755
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
|
|
736
756
|
}
|
|
737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
|
|
738
758
|
type: Component,
|
|
739
|
-
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"] }]
|
|
759
|
+
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
|
|
740
760
|
}] });
|
|
741
761
|
|
|
742
762
|
class CardIconComponent {
|
|
743
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
744
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
764
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardIconComponent, isStandalone: true, selector: "sa-card-icon", ngImport: i0, template: "<ng-content></ng-content>", styles: [""] }); }
|
|
745
765
|
}
|
|
746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardIconComponent, decorators: [{
|
|
747
767
|
type: Component,
|
|
748
768
|
args: [{ selector: 'sa-card-icon', standalone: true, imports: [], template: "<ng-content></ng-content>" }]
|
|
749
769
|
}] });
|
|
750
770
|
|
|
751
771
|
class CardTitleActionsComponent {
|
|
752
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
753
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
772
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardTitleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
773
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardTitleActionsComponent, isStandalone: true, selector: "sa-card-title-actions", ngImport: i0, template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }); }
|
|
754
774
|
}
|
|
755
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardTitleActionsComponent, decorators: [{
|
|
756
776
|
type: Component,
|
|
757
777
|
args: [{ selector: 'sa-card-title-actions', standalone: true, imports: [], template: "<div class=\"sa-card-title-actions\"><ng-content></ng-content></div>", styles: [".sa-card-title-actions{margin-bottom:8px}\n"] }]
|
|
758
778
|
}] });
|
|
@@ -762,12 +782,12 @@ class ListComponent {
|
|
|
762
782
|
this.listData = [];
|
|
763
783
|
this.featuresIcon = '';
|
|
764
784
|
}
|
|
765
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
766
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
785
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\r\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\r\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\r\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\r\n </div>\r\n <div>\r\n <span class=\"feature-text\">{{ item?.text }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
767
787
|
}
|
|
768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, decorators: [{
|
|
769
789
|
type: Component,
|
|
770
|
-
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"] }]
|
|
790
|
+
args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\r\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\r\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\r\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\r\n </div>\r\n <div>\r\n <span class=\"feature-text\">{{ item?.text }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"] }]
|
|
771
791
|
}], propDecorators: { listData: [{
|
|
772
792
|
type: Input
|
|
773
793
|
}], featuresIcon: [{
|
|
@@ -792,12 +812,12 @@ class CheckboxCardComponent extends FieldType {
|
|
|
792
812
|
actionHandler(button) {
|
|
793
813
|
this.field.props['onButtonClick'](this.field);
|
|
794
814
|
}
|
|
795
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
815
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
816
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\r\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\r\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\r\n [style.width]=\"props['width']\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <div class=\"sa-card-title-logo-container\">\r\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\r\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\r\n </div>\r\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-card-title-actions>\r\n <div class=\"sa-document-action\">\r\n @if(props['disabled']){\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\r\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\r\n }\r\n </div>\r\n </sa-card-title-actions>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n <sa-card-custom-body>\r\n @if(props['listItems']){\r\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\r\n }@else if(props['showButtons']){\r\n <div class=\"buttons-container\">\r\n <ng-container *ngFor=\"let button of props['showButtons']\">\r\n <ng-container *ngIf=\"button.type === 'submit'\">\r\n <div class=\"button-content\">\r\n @if(props['description']){\r\n @if(props['descriptionIcon']){\r\n <div class=\"description-container\">\r\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\r\n class=\"description-icon\"></sa-icon>\r\n <span class=\"description-style\">{{props['description']}}</span>\r\n </div>\r\n }\r\n }\r\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\r\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\r\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\r\n [buttonIconSize]=\"button.iconSize\"></sa-button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-card-custom-body>\r\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
797
817
|
}
|
|
798
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
818
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
799
819
|
type: Component,
|
|
800
|
-
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"] }]
|
|
820
|
+
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']\"\r\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\r\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\r\n [style.width]=\"props['width']\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <div class=\"sa-card-title-logo-container\">\r\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\r\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\r\n </div>\r\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-card-title-actions>\r\n <div class=\"sa-document-action\">\r\n @if(props['disabled']){\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\r\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\r\n }\r\n </div>\r\n </sa-card-title-actions>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n <sa-card-custom-body>\r\n @if(props['listItems']){\r\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\r\n }@else if(props['showButtons']){\r\n <div class=\"buttons-container\">\r\n <ng-container *ngFor=\"let button of props['showButtons']\">\r\n <ng-container *ngIf=\"button.type === 'submit'\">\r\n <div class=\"button-content\">\r\n @if(props['description']){\r\n @if(props['descriptionIcon']){\r\n <div class=\"description-container\">\r\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\r\n class=\"description-icon\"></sa-icon>\r\n <span class=\"description-style\">{{props['description']}}</span>\r\n </div>\r\n }\r\n }\r\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\r\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\r\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\r\n [buttonIconSize]=\"button.iconSize\"></sa-button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-card-custom-body>\r\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"] }]
|
|
801
821
|
}] });
|
|
802
822
|
|
|
803
823
|
class GuideCardComponent {
|
|
@@ -824,12 +844,12 @@ class GuideCardComponent {
|
|
|
824
844
|
//console.log(this.selectedStep)
|
|
825
845
|
this.onStepClicked.emit(step);
|
|
826
846
|
}
|
|
827
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
828
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
848
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\r\n <div class=\"guide-header\">\r\n <p class=\"guide-header-title\">{{ title }}</p>\r\n </div>\r\n <div class=\"guide-content\">\r\n @for (step of steps; track step; let last = $last) {\r\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\r\n <div class=\"step-indicator\">\r\n @if(selectable) {\r\n @if(step?.isCompleted){\r\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\r\n size=\"20\"></sa-icon>\r\n }\r\n @else{\r\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\r\n </div>\r\n }\r\n }@else{\r\n <div class=\"step-circle\"></div>\r\n }\r\n @if (!last) {\r\n <div class=\"step-line\"></div>\r\n }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\r\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\r\n {{ step.title }}\r\n @if(step?.chipData) {\r\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\r\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\r\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\r\n }\r\n </div>\r\n @if (step?.description) {\r\n <p class=\"step-description\">{{ step.description }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap: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:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], 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 }); }
|
|
829
849
|
}
|
|
830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GuideCardComponent, decorators: [{
|
|
831
851
|
type: Component,
|
|
832
|
-
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;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap: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:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;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"] }]
|
|
852
|
+
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\r\n <div class=\"guide-header\">\r\n <p class=\"guide-header-title\">{{ title }}</p>\r\n </div>\r\n <div class=\"guide-content\">\r\n @for (step of steps; track step; let last = $last) {\r\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\r\n <div class=\"step-indicator\">\r\n @if(selectable) {\r\n @if(step?.isCompleted){\r\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\r\n size=\"20\"></sa-icon>\r\n }\r\n @else{\r\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\r\n </div>\r\n }\r\n }@else{\r\n <div class=\"step-circle\"></div>\r\n }\r\n @if (!last) {\r\n <div class=\"step-line\"></div>\r\n }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\r\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\r\n {{ step.title }}\r\n @if(step?.chipData) {\r\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\r\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\r\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\r\n }\r\n </div>\r\n @if (step?.description) {\r\n <p class=\"step-description\">{{ step.description }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap: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:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;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"] }]
|
|
833
853
|
}], propDecorators: { title: [{
|
|
834
854
|
type: Input
|
|
835
855
|
}], steps: [{
|
|
@@ -865,12 +885,12 @@ class MessageBannerComponent {
|
|
|
865
885
|
}
|
|
866
886
|
this.actionClick.emit(button);
|
|
867
887
|
}
|
|
868
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
869
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
888
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
889
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", button: "button", onAction: "onAction" }, outputs: { actionClick: "actionClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\r\n <div class=\"content\">\r\n @if (bannerIcon) {\r\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n @if (actionText) {\r\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\r\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\r\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\r\n actionText\r\n }}</sa-button>\r\n }\r\n @else if(button) {\r\n <sa-button\r\n [text]=\"button?.text\"\r\n [icon]=\"button?.icon\"\r\n [size]=\"button?.size\"\r\n [type]=\"button?.type\"\r\n [iconPosition]=\"button?.iconPosition\"\r\n [buttonIconSize]=\"button?.buttonIconSize\"\r\n (onClickEvent)=\"handleButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button?.text\"\r\n >\r\n \r\n </sa-button>\r\n }\r\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
870
890
|
}
|
|
871
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBannerComponent, decorators: [{
|
|
872
892
|
type: Component,
|
|
873
|
-
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"] }]
|
|
893
|
+
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\r\n <div class=\"content\">\r\n @if (bannerIcon) {\r\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n @if (actionText) {\r\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\r\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\r\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\r\n actionText\r\n }}</sa-button>\r\n }\r\n @else if(button) {\r\n <sa-button\r\n [text]=\"button?.text\"\r\n [icon]=\"button?.icon\"\r\n [size]=\"button?.size\"\r\n [type]=\"button?.type\"\r\n [iconPosition]=\"button?.iconPosition\"\r\n [buttonIconSize]=\"button?.buttonIconSize\"\r\n (onClickEvent)=\"handleButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button?.text\"\r\n >\r\n \r\n </sa-button>\r\n }\r\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"] }]
|
|
874
894
|
}], propDecorators: { type: [{
|
|
875
895
|
type: Input
|
|
876
896
|
}], actionText: [{
|
|
@@ -940,12 +960,12 @@ class MenuCardComponent extends FieldType {
|
|
|
940
960
|
//console.log(sourceType)
|
|
941
961
|
this.onStepChanged(sourceType);
|
|
942
962
|
}
|
|
943
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
944
|
-
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){\n <div class=\"message-container\">\n <sa-message-banner [type]=\"'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"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-primary, #825CEE);gap:var(--small-12px)}::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"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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"] }] }); }
|
|
963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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){\r\n <div class=\"message-container\">\r\n <sa-message-banner [type]=\"'info'\">\r\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\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-primary, #825CEE);gap:var(--small-12px)}::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"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "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: i3.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"] }] }); }
|
|
945
965
|
}
|
|
946
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuCardComponent, decorators: [{
|
|
947
967
|
type: Component,
|
|
948
|
-
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){\n <div class=\"message-container\">\n <sa-message-banner [type]=\"'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"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-primary, #825CEE);gap:var(--small-12px)}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"] }]
|
|
968
|
+
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){\r\n <div class=\"message-container\">\r\n <sa-message-banner [type]=\"'info'\">\r\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\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-primary, #825CEE);gap:var(--small-12px)}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"] }]
|
|
949
969
|
}], propDecorators: { title: [{
|
|
950
970
|
type: Input
|
|
951
971
|
}], steps: [{
|
|
@@ -1035,10 +1055,10 @@ class ThumbnailCardComponent {
|
|
|
1035
1055
|
return '';
|
|
1036
1056
|
}
|
|
1037
1057
|
}
|
|
1038
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
1058
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThumbnailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1059
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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'\"\r\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\r\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\r\n <sa-card-custom-body>\r\n <div class=\"thumbnail-content\">\r\n <div class=\"thumbnail-container\">\r\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\r\n </div>\r\n <div class=\"thumbnail-info\">\r\n <div class=\"thumbnail-header\">\r\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\r\n <div class=\"status-chips\">\r\n @for (status of data?.statuses; track status.text) {\r\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\r\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\r\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\r\n </sa-chip>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"thumbnail-metadata\">\r\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\r\n <span class=\"separator\"></span>\r\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </sa-card-custom-body>\r\n </sa-card>\r\n</div>\r\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"], 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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1040
1060
|
}
|
|
1041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1061
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ThumbnailCardComponent, decorators: [{
|
|
1042
1062
|
type: Component,
|
|
1043
1063
|
args: [{ selector: 'sa-thumbnail-card', standalone: true, imports: [
|
|
1044
1064
|
CommonModule,
|
|
@@ -1048,7 +1068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1048
1068
|
CardBodyComponent,
|
|
1049
1069
|
CardCustomHeaderComponent,
|
|
1050
1070
|
MatTooltipModule,
|
|
1051
|
-
], 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"] }]
|
|
1071
|
+
], template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\r\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\r\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\r\n <sa-card-custom-body>\r\n <div class=\"thumbnail-content\">\r\n <div class=\"thumbnail-container\">\r\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\r\n </div>\r\n <div class=\"thumbnail-info\">\r\n <div class=\"thumbnail-header\">\r\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\r\n <div class=\"status-chips\">\r\n @for (status of data?.statuses; track status.text) {\r\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\r\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\r\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\r\n </sa-chip>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"thumbnail-metadata\">\r\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\r\n <span class=\"separator\"></span>\r\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </sa-card-custom-body>\r\n </sa-card>\r\n</div>\r\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"] }]
|
|
1052
1072
|
}], propDecorators: { data: [{
|
|
1053
1073
|
type: Input
|
|
1054
1074
|
}], size: [{
|
|
@@ -1165,12 +1185,12 @@ class CardCarouselComponent {
|
|
|
1165
1185
|
});
|
|
1166
1186
|
}
|
|
1167
1187
|
}
|
|
1168
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
1188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, usesOnChanges: true, ngImport: i0, template: "<!-- card-carousel.component.html -->\r\n<div class=\"carousel-container\">\r\n <div class=\"carousel-top-wrapper\">\r\n <div class=\"controls\">\r\n @if (showIndicators) {\r\n <div class=\"dots\">\r\n @for (card of cards; track card.id; let i = $index) {\r\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\r\n }\r\n </div>\r\n }\r\n @if (showNavigationArrows) {\r\n <div class=\"arrow-controls\">\r\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\r\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"card-container\">\r\n @if (cards[currentIndex]) {\r\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\r\n [showHeaderBodyDivider]=\"true\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\r\n <div class=\"sa-card-title-subtitle-container\">\r\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\r\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showBrandFooter) {\r\n <div class=\"brand-logos-container\">\r\n <div class=\"brand-logos\">\r\n @for (logo of visibleLogos; track logo.id) {\r\n <div> \r\n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\r\n [customClass]=\"'logo-style'\">\r\n </sa-icon>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1170
1190
|
}
|
|
1171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
1172
1192
|
type: Component,
|
|
1173
|
-
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"] }]
|
|
1193
|
+
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- card-carousel.component.html -->\r\n<div class=\"carousel-container\">\r\n <div class=\"carousel-top-wrapper\">\r\n <div class=\"controls\">\r\n @if (showIndicators) {\r\n <div class=\"dots\">\r\n @for (card of cards; track card.id; let i = $index) {\r\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\r\n }\r\n </div>\r\n }\r\n @if (showNavigationArrows) {\r\n <div class=\"arrow-controls\">\r\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\r\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"card-container\">\r\n @if (cards[currentIndex]) {\r\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\r\n [showHeaderBodyDivider]=\"true\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\r\n <div class=\"sa-card-title-subtitle-container\">\r\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\r\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showBrandFooter) {\r\n <div class=\"brand-logos-container\">\r\n <div class=\"brand-logos\">\r\n @for (logo of visibleLogos; track logo.id) {\r\n <div> \r\n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\r\n [customClass]=\"'logo-style'\">\r\n </sa-icon>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
|
|
1174
1194
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { cards: [{
|
|
1175
1195
|
type: Input
|
|
1176
1196
|
}], interval: [{
|
|
@@ -1205,28 +1225,28 @@ class CheckboxComponent extends FieldType {
|
|
|
1205
1225
|
const options = this.props?.options;
|
|
1206
1226
|
return isObservable(options) ? options : of(options || []);
|
|
1207
1227
|
}
|
|
1208
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1209
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
1228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\r\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\r\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\r\n {{ option.label }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1210
1230
|
}
|
|
1211
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1212
1232
|
type: Component,
|
|
1213
|
-
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"] }]
|
|
1233
|
+
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\r\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\r\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\r\n {{ option.label }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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"] }]
|
|
1214
1234
|
}] });
|
|
1215
1235
|
|
|
1216
1236
|
class TestLibraryComponent {
|
|
1217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1219
|
-
<p>
|
|
1220
|
-
component-library works!
|
|
1221
|
-
</p>
|
|
1237
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
1239
|
+
<p>
|
|
1240
|
+
component-library works!
|
|
1241
|
+
</p>
|
|
1222
1242
|
`, isInline: true, styles: [""] }); }
|
|
1223
1243
|
}
|
|
1224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestLibraryComponent, decorators: [{
|
|
1225
1245
|
type: Component,
|
|
1226
|
-
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
1227
|
-
<p>
|
|
1228
|
-
component-library works!
|
|
1229
|
-
</p>
|
|
1246
|
+
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
1247
|
+
<p>
|
|
1248
|
+
component-library works!
|
|
1249
|
+
</p>
|
|
1230
1250
|
` }]
|
|
1231
1251
|
}] });
|
|
1232
1252
|
|
|
@@ -1235,10 +1255,10 @@ class DatepickerComponent extends FieldType {
|
|
|
1235
1255
|
super(...arguments);
|
|
1236
1256
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
1237
1257
|
}
|
|
1238
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>MM/DD/YYYY</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n</mat-form-field>\r\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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
1240
1260
|
}
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1242
1262
|
type: Component,
|
|
1243
1263
|
args: [{ selector: 'sa-datepicker', standalone: true, providers: [], imports: [
|
|
1244
1264
|
MatFormFieldModule,
|
|
@@ -1250,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1250
1270
|
CalendarHeaderComponent,
|
|
1251
1271
|
CommonModule,
|
|
1252
1272
|
MatNativeDateModule
|
|
1253
|
-
], 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"] }]
|
|
1273
|
+
], template: "<mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>MM/DD/YYYY</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n</mat-form-field>\r\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"] }]
|
|
1254
1274
|
}], propDecorators: { range: [{
|
|
1255
1275
|
type: Input
|
|
1256
1276
|
}] } });
|
|
@@ -1328,12 +1348,12 @@ class MessageBannerV2Component {
|
|
|
1328
1348
|
originalEvent: event
|
|
1329
1349
|
});
|
|
1330
1350
|
}
|
|
1331
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1332
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
1351
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1352
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "@if (bannerContent(); as content) {\r\n <div class=\"error-page message-banner-v2\">\r\n <div class=\"content-container\">\r\n <div class=\"image-container\">\r\n <img [src]=\"content.messageIcon\" \r\n [alt]=\"content.type + ' image'\"\r\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n </div>\r\n <div class=\"details\">\r\n <div class=\"title-description\">\r\n <div class=\"title-class\" [innerHTML]=\"content.title\"></div>\r\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\r\n </div>\r\n @if(buttons){\r\n <div class=\"button-group\">\r\n @for (button of buttons; track button.text) {\r\n <sa-button \r\n [text]=\"button.text\"\r\n [icon]=\"button.icon\"\r\n [size]=\"button.size\"\r\n [type]=\"button.type\"\r\n [iconPosition]=\"button.iconPosition\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (onClickEvent)=\"onButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button.text\">\r\n </sa-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}\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: "ngmodule", type: HttpClientModule }] }); }
|
|
1333
1353
|
}
|
|
1334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
1335
1355
|
type: Component,
|
|
1336
|
-
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\">\n <div class=\"image-container\">\n <img [src]=\"content.messageIcon\" \n [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\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\n </div>\n @if(buttons){\n <div class=\"button-group\">\n @for (button of 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 </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n}\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}\n"] }]
|
|
1356
|
+
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\r\n <div class=\"error-page message-banner-v2\">\r\n <div class=\"content-container\">\r\n <div class=\"image-container\">\r\n <img [src]=\"content.messageIcon\" \r\n [alt]=\"content.type + ' image'\"\r\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n </div>\r\n <div class=\"details\">\r\n <div class=\"title-description\">\r\n <div class=\"title-class\" [innerHTML]=\"content.title\"></div>\r\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\r\n </div>\r\n @if(buttons){\r\n <div class=\"button-group\">\r\n @for (button of buttons; track button.text) {\r\n <sa-button \r\n [text]=\"button.text\"\r\n [icon]=\"button.icon\"\r\n [size]=\"button.size\"\r\n [type]=\"button.type\"\r\n [iconPosition]=\"button.iconPosition\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (onClickEvent)=\"onButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button.text\">\r\n </sa-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, fit-content)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}\n"] }]
|
|
1337
1357
|
}], propDecorators: { messageType: [{
|
|
1338
1358
|
type: Input
|
|
1339
1359
|
}], messageIcon: [{
|
|
@@ -1372,12 +1392,12 @@ class DialogComponent {
|
|
|
1372
1392
|
onCloseButtonClick(event) {
|
|
1373
1393
|
this.dialogButtonClick.emit({ event: event, type: 'close' });
|
|
1374
1394
|
}
|
|
1375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1376
|
-
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", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
|
|
1395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: i1$3.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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 }] }); }
|
|
1377
1397
|
}
|
|
1378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1379
1399
|
type: Component,
|
|
1380
|
-
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"] }]
|
|
1400
|
+
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule], 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"] }]
|
|
1381
1401
|
}], ctorParameters: () => [{ type: i1$3.MatDialogRef, decorators: [{
|
|
1382
1402
|
type: Optional
|
|
1383
1403
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1729,10 +1749,10 @@ class FormInputComponent extends FieldType {
|
|
|
1729
1749
|
return '0px'; // No gap
|
|
1730
1750
|
}
|
|
1731
1751
|
}
|
|
1732
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1733
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
1752
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1753
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-label\">\r\n {{props?.['label']}}\r\n </span>\r\n @if(!!props?.['tooltip']){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(!!props?.['description']) {\r\n <p class=\"sa-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1734
1754
|
}
|
|
1735
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1736
1756
|
type: Component,
|
|
1737
1757
|
args: [{ selector: 'sa-input', standalone: true, imports: [
|
|
1738
1758
|
CommonModule,
|
|
@@ -1741,7 +1761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1741
1761
|
FormlyModule,
|
|
1742
1762
|
IconComponent,
|
|
1743
1763
|
MatTooltipModule
|
|
1744
|
-
], 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"] }]
|
|
1764
|
+
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-label\">\r\n {{props?.['label']}}\r\n </span>\r\n @if(!!props?.['tooltip']){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(!!props?.['description']) {\r\n <p class=\"sa-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border: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"] }]
|
|
1745
1765
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
1746
1766
|
type: ViewChild,
|
|
1747
1767
|
args: ['formInput']
|
|
@@ -1820,10 +1840,10 @@ class FormSelectComponent extends FieldType {
|
|
|
1820
1840
|
tooltip.show();
|
|
1821
1841
|
}
|
|
1822
1842
|
}
|
|
1823
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1824
|
-
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);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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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);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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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 }] }); }
|
|
1825
1845
|
}
|
|
1826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
1827
1847
|
type: Component,
|
|
1828
1848
|
args: [{ selector: 'lib-form-select', standalone: true, imports: [
|
|
1829
1849
|
ReactiveFormsModule,
|
|
@@ -1837,7 +1857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1837
1857
|
IconComponent,
|
|
1838
1858
|
CommonModule,
|
|
1839
1859
|
MatTooltipModule
|
|
1840
|
-
], 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);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"] }]
|
|
1860
|
+
], 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);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"] }]
|
|
1841
1861
|
}], propDecorators: { hoverEvent: [{
|
|
1842
1862
|
type: Output,
|
|
1843
1863
|
args: ['hoverEvent']
|
|
@@ -1899,17 +1919,17 @@ class GridCellComponent {
|
|
|
1899
1919
|
refresh(params) {
|
|
1900
1920
|
return false; // not sure what this return value does.
|
|
1901
1921
|
}
|
|
1902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1903
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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}}\">\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\r\n\r\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\r\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\r\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\r\n </sa-avatar>\r\n\r\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\r\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\r\n </div>\r\n\r\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\r\n </div>\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\r\n\r\n\r\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\r\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\r\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\r\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\r\n\r\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\r\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\r\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\r\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\r\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\r\n\r\n</div>\r\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"], 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"] }] }); }
|
|
1904
1924
|
}
|
|
1905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridCellComponent, decorators: [{
|
|
1906
1926
|
type: Component,
|
|
1907
1927
|
args: [{ selector: 'lib-grid-cell', standalone: true, imports: [
|
|
1908
1928
|
AvatarComponent,
|
|
1909
1929
|
ChipsComponent,
|
|
1910
1930
|
ButtonComponent,
|
|
1911
1931
|
NgFor
|
|
1912
|
-
], 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"] }]
|
|
1932
|
+
], template: "<div class=\"grid-cell {{params.cellType}}\">\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\r\n\r\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\r\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\r\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\r\n </sa-avatar>\r\n\r\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\r\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\r\n </div>\r\n\r\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\r\n </div>\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\r\n\r\n\r\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\r\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\r\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\r\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\r\n\r\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\r\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\r\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\r\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\r\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\r\n\r\n</div>\r\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"] }]
|
|
1913
1933
|
}], propDecorators: { onClickButtonEvent: [{
|
|
1914
1934
|
type: Output
|
|
1915
1935
|
}], onClickChipEvent: [{
|
|
@@ -1950,12 +1970,12 @@ class HeaderComponent {
|
|
|
1950
1970
|
this.buttonClick.emit({ type, button, originalEvent: event });
|
|
1951
1971
|
}
|
|
1952
1972
|
}
|
|
1953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
1973
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1974
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { header: "header", chipConfig: "chipConfig", info: "info", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], 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 }] }); }
|
|
1955
1975
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1957
1977
|
type: Component,
|
|
1958
|
-
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"] }]
|
|
1978
|
+
args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"] }]
|
|
1959
1979
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
1960
1980
|
type: Input
|
|
1961
1981
|
}], chipConfig: [{
|
|
@@ -1980,10 +2000,10 @@ class LayoutSectionComponent {
|
|
|
1980
2000
|
this.buttonClick.emit({ type, button, originalEvent: event });
|
|
1981
2001
|
}
|
|
1982
2002
|
}
|
|
1983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2003
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2004
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LayoutSectionComponent, isStandalone: true, selector: "sa-layout-section", inputs: { config: "config" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"layout-section\">\r\n <div class=\"layout-section__header\">\r\n <div class=\"layout-section__title\">\r\n <div class=\"header-name-container\">\r\n @if (config?.headerIcon?.icon) {\r\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\r\n [icon]=\"config?.headerIcon.icon\"\r\n [size]=\"config?.headerIcon.size || '24'\" />\r\n }\r\n <h2>{{ config?.headerText }}</h2>\r\n </div>\r\n @if (config?.chips?.length) {\r\n <div class=\"layout-section__chips\">\r\n @for (chip of config?.chips; track chip.id) {\r\n <sa-chip\r\n [id]=\"chip.id\"\r\n [text]=\"chip.text\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [iconPath]=\"chip.iconPath\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\">\r\n </sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"layout-section__actions\">\r\n @if (config?.secondaryButton) {\r\n <sa-button \r\n [id]=\"config.secondaryButton.id\"\r\n [text]=\"config.secondaryButton.text\"\r\n [type]=\"config.secondaryButton.type\"\r\n [state]=\"config.secondaryButton.state\"\r\n [size]=\"config.secondaryButton.size\"\r\n [ImagePath]=\"config.secondaryButton.imagePath\"\r\n [icon]=\"config.secondaryButton.icon\"\r\n [iconPosition]=\"config.secondaryButton.iconPosition\"\r\n [href]=\"config.secondaryButton.href\"\r\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\r\n [width]=\"config?.secondaryButton.width\"\r\n [isSubmit]=\"config.secondaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.secondaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\r\n </sa-button>\r\n }\r\n @if (config?.primaryButton) {\r\n <sa-button\r\n [id]=\"config.primaryButton.id\"\r\n [text]=\"config.primaryButton.text\"\r\n [type]=\"config.primaryButton.type\"\r\n [state]=\"config.primaryButton.state\"\r\n [size]=\"config.primaryButton.size\"\r\n [ImagePath]=\"config.primaryButton.imagePath\"\r\n [icon]=\"config.primaryButton.icon\"\r\n [iconPosition]=\"config.primaryButton.iconPosition\"\r\n [href]=\"config.primaryButton.href\"\r\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\r\n [width]=\"config.primaryButton.width\"\r\n [isSubmit]=\"config.primaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.primaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('primary', $event)\">\r\n </sa-button>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div class=\"layout-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], 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 }] }); }
|
|
1985
2005
|
}
|
|
1986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2006
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutSectionComponent, decorators: [{
|
|
1987
2007
|
type: Component,
|
|
1988
2008
|
args: [{ selector: 'sa-layout-section', imports: [
|
|
1989
2009
|
CommonModule,
|
|
@@ -1991,7 +2011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1991
2011
|
ChipsComponent,
|
|
1992
2012
|
IconComponent,
|
|
1993
2013
|
HttpClientModule
|
|
1994
|
-
], 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"] }]
|
|
2014
|
+
], providers: [IconService], standalone: true, template: "<div class=\"layout-section\">\r\n <div class=\"layout-section__header\">\r\n <div class=\"layout-section__title\">\r\n <div class=\"header-name-container\">\r\n @if (config?.headerIcon?.icon) {\r\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\r\n [icon]=\"config?.headerIcon.icon\"\r\n [size]=\"config?.headerIcon.size || '24'\" />\r\n }\r\n <h2>{{ config?.headerText }}</h2>\r\n </div>\r\n @if (config?.chips?.length) {\r\n <div class=\"layout-section__chips\">\r\n @for (chip of config?.chips; track chip.id) {\r\n <sa-chip\r\n [id]=\"chip.id\"\r\n [text]=\"chip.text\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [iconPath]=\"chip.iconPath\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\">\r\n </sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"layout-section__actions\">\r\n @if (config?.secondaryButton) {\r\n <sa-button \r\n [id]=\"config.secondaryButton.id\"\r\n [text]=\"config.secondaryButton.text\"\r\n [type]=\"config.secondaryButton.type\"\r\n [state]=\"config.secondaryButton.state\"\r\n [size]=\"config.secondaryButton.size\"\r\n [ImagePath]=\"config.secondaryButton.imagePath\"\r\n [icon]=\"config.secondaryButton.icon\"\r\n [iconPosition]=\"config.secondaryButton.iconPosition\"\r\n [href]=\"config.secondaryButton.href\"\r\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\r\n [width]=\"config?.secondaryButton.width\"\r\n [isSubmit]=\"config.secondaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.secondaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\r\n </sa-button>\r\n }\r\n @if (config?.primaryButton) {\r\n <sa-button\r\n [id]=\"config.primaryButton.id\"\r\n [text]=\"config.primaryButton.text\"\r\n [type]=\"config.primaryButton.type\"\r\n [state]=\"config.primaryButton.state\"\r\n [size]=\"config.primaryButton.size\"\r\n [ImagePath]=\"config.primaryButton.imagePath\"\r\n [icon]=\"config.primaryButton.icon\"\r\n [iconPosition]=\"config.primaryButton.iconPosition\"\r\n [href]=\"config.primaryButton.href\"\r\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\r\n [width]=\"config.primaryButton.width\"\r\n [isSubmit]=\"config.primaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.primaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('primary', $event)\">\r\n </sa-button>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div class=\"layout-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"] }]
|
|
1995
2015
|
}], propDecorators: { config: [{
|
|
1996
2016
|
type: Input
|
|
1997
2017
|
}], buttonClick: [{
|
|
@@ -2069,17 +2089,17 @@ class LeftNavComponent {
|
|
|
2069
2089
|
tooltip.show();
|
|
2070
2090
|
}
|
|
2071
2091
|
}
|
|
2072
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2073
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2092
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2093
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\r\n\r\n <div class=\"sa-left-nav-container\">\r\n <div class=\"sa-left-nav-logo\">\r\n <!-- <span class=\"sa-logo\"></span> -->\r\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\r\n </div>\r\n <div class=\"sa-left-nav-items\">\r\n @if(data && data.items && !!data.items.length){\r\n <div class=\"sa-left-nav-items-container\">\r\n <ng-container *ngFor=\"let item of data.items; let i = index\">\r\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\r\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\r\n\r\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></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\">{{item.iconLabel}}</p>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-left-nav-footer\">\r\n @if(data && data.footerItems && !!data.footerItems.length){\r\n <div class=\"sa-left-nav-footer-container\">\r\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\r\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onFooterItemClick(item, i, $event)\"\r\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\r\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\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 class=\"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\">{{item.iconLabel}}</p>\r\n </ng-container>\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 - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:4px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2074
2094
|
}
|
|
2075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
2076
2096
|
type: Component,
|
|
2077
2097
|
args: [{ selector: 'sa-left-nav', standalone: true, imports: [
|
|
2078
2098
|
CommonModule,
|
|
2079
2099
|
AvatarComponent,
|
|
2080
2100
|
IconComponent,
|
|
2081
2101
|
MatTooltipModule
|
|
2082
|
-
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span>{{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\">{{item.iconLabel}}</p>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\">{{item.iconLabel}}</p>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:4px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
|
|
2102
|
+
], template: "<div class=\"sa-left-nav\">\r\n\r\n <div class=\"sa-left-nav-container\">\r\n <div class=\"sa-left-nav-logo\">\r\n <!-- <span class=\"sa-logo\"></span> -->\r\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\r\n </div>\r\n <div class=\"sa-left-nav-items\">\r\n @if(data && data.items && !!data.items.length){\r\n <div class=\"sa-left-nav-items-container\">\r\n <ng-container *ngFor=\"let item of data.items; let i = index\">\r\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\r\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\r\n\r\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></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\">{{item.iconLabel}}</p>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-left-nav-footer\">\r\n @if(data && data.footerItems && !!data.footerItems.length){\r\n <div class=\"sa-left-nav-footer-container\">\r\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\r\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onFooterItemClick(item, i, $event)\"\r\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\r\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\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 class=\"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\">{{item.iconLabel}}</p>\r\n </ng-container>\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 - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:4px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}.sa-icon-label{color:var(--icon-white,#fff);font-size:var(--small-10px,10px);text-align:center;margin:0}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
|
|
2083
2103
|
}], ctorParameters: () => [{ type: i1$4.ActivatedRoute }, { type: i1$4.Router }], propDecorators: { data: [{
|
|
2084
2104
|
type: Input,
|
|
2085
2105
|
args: ['data']
|
|
@@ -2143,27 +2163,27 @@ class StatusDotComponent {
|
|
|
2143
2163
|
tooltip: ''
|
|
2144
2164
|
};
|
|
2145
2165
|
}
|
|
2146
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2147
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2148
|
-
<div [matTooltip]="config.tooltip"
|
|
2149
|
-
class="status-dot"
|
|
2150
|
-
[class]="config.status"
|
|
2151
|
-
[class.outline]="config.theme === 'outline'"
|
|
2152
|
-
[style.width.px]="config.size"
|
|
2153
|
-
[style.height.px]="config.size">
|
|
2154
|
-
</div>
|
|
2166
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StatusDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StatusDotComponent, isStandalone: true, selector: "sa-status-dot", inputs: { config: "config" }, ngImport: i0, template: `
|
|
2168
|
+
<div [matTooltip]="config.tooltip"
|
|
2169
|
+
class="status-dot"
|
|
2170
|
+
[class]="config.status"
|
|
2171
|
+
[class.outline]="config.theme === 'outline'"
|
|
2172
|
+
[style.width.px]="config.size"
|
|
2173
|
+
[style.height.px]="config.size">
|
|
2174
|
+
</div>
|
|
2155
2175
|
`, 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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2156
2176
|
}
|
|
2157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StatusDotComponent, decorators: [{
|
|
2158
2178
|
type: Component,
|
|
2159
|
-
args: [{ selector: 'sa-status-dot', standalone: true, imports: [CommonModule, MatTooltipModule], template: `
|
|
2160
|
-
<div [matTooltip]="config.tooltip"
|
|
2161
|
-
class="status-dot"
|
|
2162
|
-
[class]="config.status"
|
|
2163
|
-
[class.outline]="config.theme === 'outline'"
|
|
2164
|
-
[style.width.px]="config.size"
|
|
2165
|
-
[style.height.px]="config.size">
|
|
2166
|
-
</div>
|
|
2179
|
+
args: [{ selector: 'sa-status-dot', standalone: true, imports: [CommonModule, MatTooltipModule], template: `
|
|
2180
|
+
<div [matTooltip]="config.tooltip"
|
|
2181
|
+
class="status-dot"
|
|
2182
|
+
[class]="config.status"
|
|
2183
|
+
[class.outline]="config.theme === 'outline'"
|
|
2184
|
+
[style.width.px]="config.size"
|
|
2185
|
+
[style.height.px]="config.size">
|
|
2186
|
+
</div>
|
|
2167
2187
|
`, 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"] }]
|
|
2168
2188
|
}], propDecorators: { config: [{
|
|
2169
2189
|
type: Input
|
|
@@ -2223,14 +2243,14 @@ class MiniCardComponent {
|
|
|
2223
2243
|
onCardClick(source, button, event) {
|
|
2224
2244
|
this.onCardClickEvent.emit({ source, button, event });
|
|
2225
2245
|
}
|
|
2226
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2246
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MiniCardComponent, isStandalone: true, selector: "sa-mini-card", inputs: { cardData: "cardData" }, outputs: { onCardClickEvent: "onCardClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\r\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-mini-card-title-icon-container\">\r\n <div class=\"sa-mini-card-custom-title\">\r\n @if(card?.source?.logoUrl){\r\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n }\r\n <span [matTooltip]=\"card?.source?.tooltip\">\r\n {{card?.source?.name}}\r\n @if(card?.source?.count){\r\n <ng-container>\r\n <span>({{card?.source?.count}})</span>\r\n </ng-container>\r\n }\r\n </span>\r\n @if(card?.statusDot){\r\n <span>\r\n <sa-status-dot [config]=\"card.statusDot\">\r\n </sa-status-dot>\r\n </span>\r\n }\r\n @if(card?.chipData){\r\n <span>\r\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\r\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\r\n [iconPosition]='card?.chipData.iconPosition'\r\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\r\n </sa-chip>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\r\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\r\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip"], 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"] }] }); }
|
|
2228
2248
|
}
|
|
2229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniCardComponent, decorators: [{
|
|
2230
2250
|
type: Component,
|
|
2231
2251
|
args: [{ selector: 'sa-mini-card', standalone: true, imports: [CardComponent, CardCustomHeaderComponent, IconComponent, MatTooltip, ChipsComponent,
|
|
2232
2252
|
CardTitleActionsComponent, ButtonComponent, StatusDotComponent
|
|
2233
|
-
], 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"] }]
|
|
2253
|
+
], providers: [IconService], template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\r\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-mini-card-title-icon-container\">\r\n <div class=\"sa-mini-card-custom-title\">\r\n @if(card?.source?.logoUrl){\r\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n }\r\n <span [matTooltip]=\"card?.source?.tooltip\">\r\n {{card?.source?.name}}\r\n @if(card?.source?.count){\r\n <ng-container>\r\n <span>({{card?.source?.count}})</span>\r\n </ng-container>\r\n }\r\n </span>\r\n @if(card?.statusDot){\r\n <span>\r\n <sa-status-dot [config]=\"card.statusDot\">\r\n </sa-status-dot>\r\n </span>\r\n }\r\n @if(card?.chipData){\r\n <span>\r\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\r\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\r\n [iconPosition]='card?.chipData.iconPosition'\r\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\r\n </sa-chip>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\r\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\r\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"] }]
|
|
2234
2254
|
}], propDecorators: { cardData: [{
|
|
2235
2255
|
type: Input
|
|
2236
2256
|
}], onCardClickEvent: [{
|
|
@@ -2242,12 +2262,12 @@ class PageLayoutComponent {
|
|
|
2242
2262
|
this.showRightContent = false;
|
|
2243
2263
|
this.showFooterContent = false;
|
|
2244
2264
|
}
|
|
2245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2246
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2265
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2266
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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'\">\r\n <div class=\"layout-inner-container\"\r\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\r\n @if (showProgressBarContent) {\r\n <div class=\"progress-bar-container\">\r\n <ng-content select=\"[progress-bar-content]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"content-container\">\r\n <div class=\"left-section\">\r\n <div class=\"top-section\">\r\n <ng-content select=\"[top-content]\"></ng-content>\r\n </div>\r\n <div class=\"left-wrapper\">\r\n <ng-content select=\"[left-content]\"></ng-content>\r\n </div>\r\n @if (showFooterContent) {\r\n <div class=\"footer-section\">\r\n <ng-content select=\"[footer-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n @if (showRightContent) {\r\n <div class=\"right-section\">\r\n <ng-content select=\"[right-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\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"] }); }
|
|
2247
2267
|
}
|
|
2248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
2249
2269
|
type: Component,
|
|
2250
|
-
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"] }]
|
|
2270
|
+
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\r\n <div class=\"layout-inner-container\"\r\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\r\n @if (showProgressBarContent) {\r\n <div class=\"progress-bar-container\">\r\n <ng-content select=\"[progress-bar-content]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"content-container\">\r\n <div class=\"left-section\">\r\n <div class=\"top-section\">\r\n <ng-content select=\"[top-content]\"></ng-content>\r\n </div>\r\n <div class=\"left-wrapper\">\r\n <ng-content select=\"[left-content]\"></ng-content>\r\n </div>\r\n @if (showFooterContent) {\r\n <div class=\"footer-section\">\r\n <ng-content select=\"[footer-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n @if (showRightContent) {\r\n <div class=\"right-section\">\r\n <ng-content select=\"[right-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\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"] }]
|
|
2251
2271
|
}], propDecorators: { showRightContent: [{
|
|
2252
2272
|
type: Input
|
|
2253
2273
|
}], showFooterContent: [{
|
|
@@ -2266,12 +2286,12 @@ class ProgressBarComponent {
|
|
|
2266
2286
|
}
|
|
2267
2287
|
ngOnInit() {
|
|
2268
2288
|
}
|
|
2269
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2289
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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]=\"{\r\n '--dynamic-height': height ,\r\n '--dynamic-border-radius': borderRadius \r\n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2271
2291
|
}
|
|
2272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2273
2293
|
type: Component,
|
|
2274
|
-
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"] }]
|
|
2294
|
+
args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\r\n '--dynamic-height': height ,\r\n '--dynamic-border-radius': borderRadius \r\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"] }]
|
|
2275
2295
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
|
|
2276
2296
|
type: Input
|
|
2277
2297
|
}], borderRadius: [{
|
|
@@ -2295,12 +2315,12 @@ class RadioButtonComponent extends FieldType {
|
|
|
2295
2315
|
this.formControl.setValue(value);
|
|
2296
2316
|
radio.checked = true;
|
|
2297
2317
|
}
|
|
2298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2299
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\r\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\r\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
2300
2320
|
}
|
|
2301
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
2302
2322
|
type: Component,
|
|
2303
|
-
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"] }]
|
|
2323
|
+
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\r\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\r\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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"] }]
|
|
2304
2324
|
}] });
|
|
2305
2325
|
|
|
2306
2326
|
class ScrollingCardsComponent {
|
|
@@ -2372,12 +2392,12 @@ class ScrollingCardsComponent {
|
|
|
2372
2392
|
cancelAnimationFrame(this.animationFrame);
|
|
2373
2393
|
}
|
|
2374
2394
|
}
|
|
2375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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()\"\r\n (mouseleave)=\"resumeScroll()\">\r\n <div #cardContainer class=\"card-container\">\r\n @for (card of displayCards; track card.title) {\r\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardBody]=\"true\">\r\n </sa-card>\r\n }\r\n </div>\r\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 }); }
|
|
2377
2397
|
}
|
|
2378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
2379
2399
|
type: Component,
|
|
2380
|
-
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"] }]
|
|
2400
|
+
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()\"\r\n (mouseleave)=\"resumeScroll()\">\r\n <div #cardContainer class=\"card-container\">\r\n @for (card of displayCards; track card.title) {\r\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardBody]=\"true\">\r\n </sa-card>\r\n }\r\n </div>\r\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"] }]
|
|
2381
2401
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
2382
2402
|
type: Input,
|
|
2383
2403
|
args: [{ required: true }]
|
|
@@ -2401,10 +2421,10 @@ class SkeletonBaseComponent {
|
|
|
2401
2421
|
get getHeight() {
|
|
2402
2422
|
return this.height;
|
|
2403
2423
|
}
|
|
2404
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2424
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2425
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SkeletonBaseComponent, isStandalone: true, selector: "sa-skeleton-base", inputs: { width: "width", height: "height" }, host: { properties: { "style.width": "this.getWidth", "style.height": "this.getHeight" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;position:relative;overflow:hidden;background:var(--sa-skeleton-background, #e9ecef);border-radius:var(--sa-skeleton-radius, 4px)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:shimmer var(--sa-skeleton-animation-duration, 1.5s) infinite}@keyframes shimmer{to{transform:translate(100%)}}\n"] }); }
|
|
2406
2426
|
}
|
|
2407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonBaseComponent, decorators: [{
|
|
2408
2428
|
type: Component,
|
|
2409
2429
|
args: [{ selector: 'sa-skeleton-base', standalone: true, template: `<ng-content></ng-content>`, styles: [":host{display:block;position:relative;overflow:hidden;background:var(--sa-skeleton-background, #e9ecef);border-radius:var(--sa-skeleton-radius, 4px)}:host:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--sa-skeleton-shine, rgba(255, 255, 255, .3)),transparent);animation:shimmer var(--sa-skeleton-animation-duration, 1.5s) infinite}@keyframes shimmer{to{transform:translate(100%)}}\n"] }]
|
|
2410
2430
|
}], propDecorators: { width: [{
|
|
@@ -2430,19 +2450,19 @@ class SkeletonContainerComponent {
|
|
|
2430
2450
|
flexDirection: this.direction
|
|
2431
2451
|
};
|
|
2432
2452
|
}
|
|
2433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2434
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2435
|
-
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
2436
|
-
<ng-content></ng-content>
|
|
2437
|
-
</div>
|
|
2453
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
|
|
2455
|
+
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
2456
|
+
<ng-content></ng-content>
|
|
2457
|
+
</div>
|
|
2438
2458
|
`, 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"] }] }); }
|
|
2439
2459
|
}
|
|
2440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
|
|
2441
2461
|
type: Component,
|
|
2442
|
-
args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
|
|
2443
|
-
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
2444
|
-
<ng-content></ng-content>
|
|
2445
|
-
</div>
|
|
2462
|
+
args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
|
|
2463
|
+
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
2464
|
+
<ng-content></ng-content>
|
|
2465
|
+
</div>
|
|
2446
2466
|
`, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"] }]
|
|
2447
2467
|
}], propDecorators: { gap: [{
|
|
2448
2468
|
type: Input
|
|
@@ -2457,10 +2477,10 @@ class SkeletonTextComponent {
|
|
|
2457
2477
|
this.width = '100%';
|
|
2458
2478
|
this.height = '1rem';
|
|
2459
2479
|
}
|
|
2460
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2461
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2480
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SkeletonTextComponent, isStandalone: true, selector: "sa-skeleton-text", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
|
|
2462
2482
|
}
|
|
2463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonTextComponent, decorators: [{
|
|
2464
2484
|
type: Component,
|
|
2465
2485
|
args: [{
|
|
2466
2486
|
selector: 'sa-skeleton-text',
|
|
@@ -2477,10 +2497,10 @@ class SkeletonCircleComponent {
|
|
|
2477
2497
|
constructor() {
|
|
2478
2498
|
this.size = '3rem';
|
|
2479
2499
|
}
|
|
2480
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2481
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2500
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SkeletonCircleComponent, isStandalone: true, selector: "sa-skeleton-circle", inputs: { size: "size" }, ngImport: i0, template: `<sa-skeleton-base [width]="size" [height]="size" style="border-radius: 50%"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
|
|
2482
2502
|
}
|
|
2483
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonCircleComponent, decorators: [{
|
|
2484
2504
|
type: Component,
|
|
2485
2505
|
args: [{
|
|
2486
2506
|
selector: 'sa-skeleton-circle',
|
|
@@ -2496,10 +2516,10 @@ class SkeletonRectangleComponent {
|
|
|
2496
2516
|
this.width = '100%';
|
|
2497
2517
|
this.height = '100px';
|
|
2498
2518
|
}
|
|
2499
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2519
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonRectangleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SkeletonRectangleComponent, isStandalone: true, selector: "sa-skeleton-rectangle", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
|
|
2501
2521
|
}
|
|
2502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonRectangleComponent, decorators: [{
|
|
2503
2523
|
type: Component,
|
|
2504
2524
|
args: [{
|
|
2505
2525
|
selector: 'sa-skeleton-rectangle',
|
|
@@ -2517,10 +2537,10 @@ class SkeletonEllipticalComponent {
|
|
|
2517
2537
|
this.width = '200px';
|
|
2518
2538
|
this.height = '48px';
|
|
2519
2539
|
}
|
|
2520
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2540
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonEllipticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SkeletonEllipticalComponent, isStandalone: true, selector: "sa-skeleton-elliptical", inputs: { width: "width", height: "height" }, ngImport: i0, template: `<sa-skeleton-base [width]="width" [height]="height" style="border-radius: 100px;"></sa-skeleton-base>`, isInline: true, dependencies: [{ kind: "component", type: SkeletonBaseComponent, selector: "sa-skeleton-base", inputs: ["width", "height"] }] }); }
|
|
2522
2542
|
}
|
|
2523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2543
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonEllipticalComponent, decorators: [{
|
|
2524
2544
|
type: Component,
|
|
2525
2545
|
args: [{
|
|
2526
2546
|
selector: 'sa-skeleton-elliptical',
|
|
@@ -2583,106 +2603,106 @@ class SkeletonLoaderComponent {
|
|
|
2583
2603
|
this.config = SKELETON_PRESETS[this.preset];
|
|
2584
2604
|
}
|
|
2585
2605
|
}
|
|
2586
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2588
|
-
<sa-skeleton-container
|
|
2589
|
-
[gap]="config?.containerConfig?.gap"
|
|
2590
|
-
[padding]="config?.containerConfig?.padding"
|
|
2591
|
-
[direction]="config?.containerConfig?.direction || 'column'"
|
|
2592
|
-
>
|
|
2593
|
-
@for (item of config?.items; track $index) {
|
|
2594
|
-
@switch (item.type) {
|
|
2595
|
-
@case ('text') {
|
|
2596
|
-
<sa-skeleton-text
|
|
2597
|
-
[width]="item.width"
|
|
2598
|
-
[height]="item.height"
|
|
2599
|
-
></sa-skeleton-text>
|
|
2600
|
-
}
|
|
2601
|
-
@case ('circle') {
|
|
2602
|
-
<sa-skeleton-circle
|
|
2603
|
-
[size]="item.size"
|
|
2604
|
-
></sa-skeleton-circle>
|
|
2605
|
-
}
|
|
2606
|
-
@case ('rectangle') {
|
|
2607
|
-
<sa-skeleton-rectangle
|
|
2608
|
-
[width]="item.width"
|
|
2609
|
-
[height]="item.height"
|
|
2610
|
-
></sa-skeleton-rectangle>
|
|
2611
|
-
}
|
|
2612
|
-
@case ('elliptical') {
|
|
2613
|
-
<sa-skeleton-elliptical
|
|
2614
|
-
[width]="item.width"
|
|
2615
|
-
[height]="item.height"
|
|
2616
|
-
></sa-skeleton-elliptical>
|
|
2617
|
-
}
|
|
2618
|
-
@case ('container') {
|
|
2619
|
-
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
2620
|
-
@for (subItem of item.items; track $index) {
|
|
2621
|
-
@switch (subItem.type) {
|
|
2622
|
-
@case ('text') {
|
|
2623
|
-
<sa-skeleton-text
|
|
2624
|
-
[width]="subItem.width"
|
|
2625
|
-
[height]="subItem.height"
|
|
2626
|
-
></sa-skeleton-text>
|
|
2627
|
-
}
|
|
2628
|
-
@case ('circle') {
|
|
2629
|
-
<sa-skeleton-circle
|
|
2630
|
-
[size]="subItem.size"
|
|
2631
|
-
></sa-skeleton-circle>
|
|
2632
|
-
}
|
|
2633
|
-
@case ('rectangle') {
|
|
2634
|
-
<sa-skeleton-rectangle
|
|
2635
|
-
[width]="subItem.width"
|
|
2636
|
-
[height]="subItem.height"
|
|
2637
|
-
></sa-skeleton-rectangle>
|
|
2638
|
-
}
|
|
2639
|
-
@case ('elliptical') {
|
|
2640
|
-
<sa-skeleton-elliptical
|
|
2641
|
-
[width]="subItem.width"
|
|
2642
|
-
[height]="subItem.height"
|
|
2643
|
-
></sa-skeleton-elliptical>
|
|
2644
|
-
}
|
|
2645
|
-
@case ('container') {
|
|
2646
|
-
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
2647
|
-
@for (subSubItem of subItem.items; track $index) {
|
|
2648
|
-
@switch (subSubItem.type) {
|
|
2649
|
-
@case ('text') {
|
|
2650
|
-
<sa-skeleton-text
|
|
2651
|
-
[width]="subSubItem.width"
|
|
2652
|
-
[height]="subSubItem.height"
|
|
2653
|
-
></sa-skeleton-text>
|
|
2654
|
-
}
|
|
2655
|
-
@case ('circle') {
|
|
2656
|
-
<sa-skeleton-circle
|
|
2657
|
-
[size]="subSubItem.size"
|
|
2658
|
-
></sa-skeleton-circle>
|
|
2659
|
-
}
|
|
2660
|
-
@case ('rectangle') {
|
|
2661
|
-
<sa-skeleton-rectangle
|
|
2662
|
-
[width]="subSubItem.width"
|
|
2663
|
-
[height]="subSubItem.height"
|
|
2664
|
-
></sa-skeleton-rectangle>
|
|
2665
|
-
}
|
|
2666
|
-
@case ('elliptical') {
|
|
2667
|
-
<sa-skeleton-elliptical
|
|
2668
|
-
[width]="subSubItem.width"
|
|
2669
|
-
[height]="subSubItem.height"
|
|
2670
|
-
></sa-skeleton-elliptical>
|
|
2671
|
-
}
|
|
2672
|
-
}
|
|
2673
|
-
}
|
|
2674
|
-
</sa-skeleton-container>
|
|
2675
|
-
}
|
|
2676
|
-
}
|
|
2677
|
-
}
|
|
2678
|
-
</sa-skeleton-container>
|
|
2679
|
-
}
|
|
2680
|
-
}
|
|
2681
|
-
}
|
|
2682
|
-
</sa-skeleton-container>
|
|
2606
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config" }, usesOnChanges: true, ngImport: i0, template: `
|
|
2608
|
+
<sa-skeleton-container
|
|
2609
|
+
[gap]="config?.containerConfig?.gap"
|
|
2610
|
+
[padding]="config?.containerConfig?.padding"
|
|
2611
|
+
[direction]="config?.containerConfig?.direction || 'column'"
|
|
2612
|
+
>
|
|
2613
|
+
@for (item of config?.items; track $index) {
|
|
2614
|
+
@switch (item.type) {
|
|
2615
|
+
@case ('text') {
|
|
2616
|
+
<sa-skeleton-text
|
|
2617
|
+
[width]="item.width"
|
|
2618
|
+
[height]="item.height"
|
|
2619
|
+
></sa-skeleton-text>
|
|
2620
|
+
}
|
|
2621
|
+
@case ('circle') {
|
|
2622
|
+
<sa-skeleton-circle
|
|
2623
|
+
[size]="item.size"
|
|
2624
|
+
></sa-skeleton-circle>
|
|
2625
|
+
}
|
|
2626
|
+
@case ('rectangle') {
|
|
2627
|
+
<sa-skeleton-rectangle
|
|
2628
|
+
[width]="item.width"
|
|
2629
|
+
[height]="item.height"
|
|
2630
|
+
></sa-skeleton-rectangle>
|
|
2631
|
+
}
|
|
2632
|
+
@case ('elliptical') {
|
|
2633
|
+
<sa-skeleton-elliptical
|
|
2634
|
+
[width]="item.width"
|
|
2635
|
+
[height]="item.height"
|
|
2636
|
+
></sa-skeleton-elliptical>
|
|
2637
|
+
}
|
|
2638
|
+
@case ('container') {
|
|
2639
|
+
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
2640
|
+
@for (subItem of item.items; track $index) {
|
|
2641
|
+
@switch (subItem.type) {
|
|
2642
|
+
@case ('text') {
|
|
2643
|
+
<sa-skeleton-text
|
|
2644
|
+
[width]="subItem.width"
|
|
2645
|
+
[height]="subItem.height"
|
|
2646
|
+
></sa-skeleton-text>
|
|
2647
|
+
}
|
|
2648
|
+
@case ('circle') {
|
|
2649
|
+
<sa-skeleton-circle
|
|
2650
|
+
[size]="subItem.size"
|
|
2651
|
+
></sa-skeleton-circle>
|
|
2652
|
+
}
|
|
2653
|
+
@case ('rectangle') {
|
|
2654
|
+
<sa-skeleton-rectangle
|
|
2655
|
+
[width]="subItem.width"
|
|
2656
|
+
[height]="subItem.height"
|
|
2657
|
+
></sa-skeleton-rectangle>
|
|
2658
|
+
}
|
|
2659
|
+
@case ('elliptical') {
|
|
2660
|
+
<sa-skeleton-elliptical
|
|
2661
|
+
[width]="subItem.width"
|
|
2662
|
+
[height]="subItem.height"
|
|
2663
|
+
></sa-skeleton-elliptical>
|
|
2664
|
+
}
|
|
2665
|
+
@case ('container') {
|
|
2666
|
+
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
2667
|
+
@for (subSubItem of subItem.items; track $index) {
|
|
2668
|
+
@switch (subSubItem.type) {
|
|
2669
|
+
@case ('text') {
|
|
2670
|
+
<sa-skeleton-text
|
|
2671
|
+
[width]="subSubItem.width"
|
|
2672
|
+
[height]="subSubItem.height"
|
|
2673
|
+
></sa-skeleton-text>
|
|
2674
|
+
}
|
|
2675
|
+
@case ('circle') {
|
|
2676
|
+
<sa-skeleton-circle
|
|
2677
|
+
[size]="subSubItem.size"
|
|
2678
|
+
></sa-skeleton-circle>
|
|
2679
|
+
}
|
|
2680
|
+
@case ('rectangle') {
|
|
2681
|
+
<sa-skeleton-rectangle
|
|
2682
|
+
[width]="subSubItem.width"
|
|
2683
|
+
[height]="subSubItem.height"
|
|
2684
|
+
></sa-skeleton-rectangle>
|
|
2685
|
+
}
|
|
2686
|
+
@case ('elliptical') {
|
|
2687
|
+
<sa-skeleton-elliptical
|
|
2688
|
+
[width]="subSubItem.width"
|
|
2689
|
+
[height]="subSubItem.height"
|
|
2690
|
+
></sa-skeleton-elliptical>
|
|
2691
|
+
}
|
|
2692
|
+
}
|
|
2693
|
+
}
|
|
2694
|
+
</sa-skeleton-container>
|
|
2695
|
+
}
|
|
2696
|
+
}
|
|
2697
|
+
}
|
|
2698
|
+
</sa-skeleton-container>
|
|
2699
|
+
}
|
|
2700
|
+
}
|
|
2701
|
+
}
|
|
2702
|
+
</sa-skeleton-container>
|
|
2683
2703
|
`, 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"] }] }); }
|
|
2684
2704
|
}
|
|
2685
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
2686
2706
|
type: Component,
|
|
2687
2707
|
args: [{
|
|
2688
2708
|
selector: 'sa-skeleton-loader',
|
|
@@ -2696,102 +2716,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2696
2716
|
SkeletonEllipticalComponent,
|
|
2697
2717
|
SkeletonContainerComponent
|
|
2698
2718
|
],
|
|
2699
|
-
template: `
|
|
2700
|
-
<sa-skeleton-container
|
|
2701
|
-
[gap]="config?.containerConfig?.gap"
|
|
2702
|
-
[padding]="config?.containerConfig?.padding"
|
|
2703
|
-
[direction]="config?.containerConfig?.direction || 'column'"
|
|
2704
|
-
>
|
|
2705
|
-
@for (item of config?.items; track $index) {
|
|
2706
|
-
@switch (item.type) {
|
|
2707
|
-
@case ('text') {
|
|
2708
|
-
<sa-skeleton-text
|
|
2709
|
-
[width]="item.width"
|
|
2710
|
-
[height]="item.height"
|
|
2711
|
-
></sa-skeleton-text>
|
|
2712
|
-
}
|
|
2713
|
-
@case ('circle') {
|
|
2714
|
-
<sa-skeleton-circle
|
|
2715
|
-
[size]="item.size"
|
|
2716
|
-
></sa-skeleton-circle>
|
|
2717
|
-
}
|
|
2718
|
-
@case ('rectangle') {
|
|
2719
|
-
<sa-skeleton-rectangle
|
|
2720
|
-
[width]="item.width"
|
|
2721
|
-
[height]="item.height"
|
|
2722
|
-
></sa-skeleton-rectangle>
|
|
2723
|
-
}
|
|
2724
|
-
@case ('elliptical') {
|
|
2725
|
-
<sa-skeleton-elliptical
|
|
2726
|
-
[width]="item.width"
|
|
2727
|
-
[height]="item.height"
|
|
2728
|
-
></sa-skeleton-elliptical>
|
|
2729
|
-
}
|
|
2730
|
-
@case ('container') {
|
|
2731
|
-
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
2732
|
-
@for (subItem of item.items; track $index) {
|
|
2733
|
-
@switch (subItem.type) {
|
|
2734
|
-
@case ('text') {
|
|
2735
|
-
<sa-skeleton-text
|
|
2736
|
-
[width]="subItem.width"
|
|
2737
|
-
[height]="subItem.height"
|
|
2738
|
-
></sa-skeleton-text>
|
|
2739
|
-
}
|
|
2740
|
-
@case ('circle') {
|
|
2741
|
-
<sa-skeleton-circle
|
|
2742
|
-
[size]="subItem.size"
|
|
2743
|
-
></sa-skeleton-circle>
|
|
2744
|
-
}
|
|
2745
|
-
@case ('rectangle') {
|
|
2746
|
-
<sa-skeleton-rectangle
|
|
2747
|
-
[width]="subItem.width"
|
|
2748
|
-
[height]="subItem.height"
|
|
2749
|
-
></sa-skeleton-rectangle>
|
|
2750
|
-
}
|
|
2751
|
-
@case ('elliptical') {
|
|
2752
|
-
<sa-skeleton-elliptical
|
|
2753
|
-
[width]="subItem.width"
|
|
2754
|
-
[height]="subItem.height"
|
|
2755
|
-
></sa-skeleton-elliptical>
|
|
2756
|
-
}
|
|
2757
|
-
@case ('container') {
|
|
2758
|
-
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
2759
|
-
@for (subSubItem of subItem.items; track $index) {
|
|
2760
|
-
@switch (subSubItem.type) {
|
|
2761
|
-
@case ('text') {
|
|
2762
|
-
<sa-skeleton-text
|
|
2763
|
-
[width]="subSubItem.width"
|
|
2764
|
-
[height]="subSubItem.height"
|
|
2765
|
-
></sa-skeleton-text>
|
|
2766
|
-
}
|
|
2767
|
-
@case ('circle') {
|
|
2768
|
-
<sa-skeleton-circle
|
|
2769
|
-
[size]="subSubItem.size"
|
|
2770
|
-
></sa-skeleton-circle>
|
|
2771
|
-
}
|
|
2772
|
-
@case ('rectangle') {
|
|
2773
|
-
<sa-skeleton-rectangle
|
|
2774
|
-
[width]="subSubItem.width"
|
|
2775
|
-
[height]="subSubItem.height"
|
|
2776
|
-
></sa-skeleton-rectangle>
|
|
2777
|
-
}
|
|
2778
|
-
@case ('elliptical') {
|
|
2779
|
-
<sa-skeleton-elliptical
|
|
2780
|
-
[width]="subSubItem.width"
|
|
2781
|
-
[height]="subSubItem.height"
|
|
2782
|
-
></sa-skeleton-elliptical>
|
|
2783
|
-
}
|
|
2784
|
-
}
|
|
2785
|
-
}
|
|
2786
|
-
</sa-skeleton-container>
|
|
2787
|
-
}
|
|
2788
|
-
}
|
|
2789
|
-
}
|
|
2790
|
-
</sa-skeleton-container>
|
|
2791
|
-
}
|
|
2792
|
-
}
|
|
2793
|
-
}
|
|
2794
|
-
</sa-skeleton-container>
|
|
2719
|
+
template: `
|
|
2720
|
+
<sa-skeleton-container
|
|
2721
|
+
[gap]="config?.containerConfig?.gap"
|
|
2722
|
+
[padding]="config?.containerConfig?.padding"
|
|
2723
|
+
[direction]="config?.containerConfig?.direction || 'column'"
|
|
2724
|
+
>
|
|
2725
|
+
@for (item of config?.items; track $index) {
|
|
2726
|
+
@switch (item.type) {
|
|
2727
|
+
@case ('text') {
|
|
2728
|
+
<sa-skeleton-text
|
|
2729
|
+
[width]="item.width"
|
|
2730
|
+
[height]="item.height"
|
|
2731
|
+
></sa-skeleton-text>
|
|
2732
|
+
}
|
|
2733
|
+
@case ('circle') {
|
|
2734
|
+
<sa-skeleton-circle
|
|
2735
|
+
[size]="item.size"
|
|
2736
|
+
></sa-skeleton-circle>
|
|
2737
|
+
}
|
|
2738
|
+
@case ('rectangle') {
|
|
2739
|
+
<sa-skeleton-rectangle
|
|
2740
|
+
[width]="item.width"
|
|
2741
|
+
[height]="item.height"
|
|
2742
|
+
></sa-skeleton-rectangle>
|
|
2743
|
+
}
|
|
2744
|
+
@case ('elliptical') {
|
|
2745
|
+
<sa-skeleton-elliptical
|
|
2746
|
+
[width]="item.width"
|
|
2747
|
+
[height]="item.height"
|
|
2748
|
+
></sa-skeleton-elliptical>
|
|
2749
|
+
}
|
|
2750
|
+
@case ('container') {
|
|
2751
|
+
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
2752
|
+
@for (subItem of item.items; track $index) {
|
|
2753
|
+
@switch (subItem.type) {
|
|
2754
|
+
@case ('text') {
|
|
2755
|
+
<sa-skeleton-text
|
|
2756
|
+
[width]="subItem.width"
|
|
2757
|
+
[height]="subItem.height"
|
|
2758
|
+
></sa-skeleton-text>
|
|
2759
|
+
}
|
|
2760
|
+
@case ('circle') {
|
|
2761
|
+
<sa-skeleton-circle
|
|
2762
|
+
[size]="subItem.size"
|
|
2763
|
+
></sa-skeleton-circle>
|
|
2764
|
+
}
|
|
2765
|
+
@case ('rectangle') {
|
|
2766
|
+
<sa-skeleton-rectangle
|
|
2767
|
+
[width]="subItem.width"
|
|
2768
|
+
[height]="subItem.height"
|
|
2769
|
+
></sa-skeleton-rectangle>
|
|
2770
|
+
}
|
|
2771
|
+
@case ('elliptical') {
|
|
2772
|
+
<sa-skeleton-elliptical
|
|
2773
|
+
[width]="subItem.width"
|
|
2774
|
+
[height]="subItem.height"
|
|
2775
|
+
></sa-skeleton-elliptical>
|
|
2776
|
+
}
|
|
2777
|
+
@case ('container') {
|
|
2778
|
+
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
2779
|
+
@for (subSubItem of subItem.items; track $index) {
|
|
2780
|
+
@switch (subSubItem.type) {
|
|
2781
|
+
@case ('text') {
|
|
2782
|
+
<sa-skeleton-text
|
|
2783
|
+
[width]="subSubItem.width"
|
|
2784
|
+
[height]="subSubItem.height"
|
|
2785
|
+
></sa-skeleton-text>
|
|
2786
|
+
}
|
|
2787
|
+
@case ('circle') {
|
|
2788
|
+
<sa-skeleton-circle
|
|
2789
|
+
[size]="subSubItem.size"
|
|
2790
|
+
></sa-skeleton-circle>
|
|
2791
|
+
}
|
|
2792
|
+
@case ('rectangle') {
|
|
2793
|
+
<sa-skeleton-rectangle
|
|
2794
|
+
[width]="subSubItem.width"
|
|
2795
|
+
[height]="subSubItem.height"
|
|
2796
|
+
></sa-skeleton-rectangle>
|
|
2797
|
+
}
|
|
2798
|
+
@case ('elliptical') {
|
|
2799
|
+
<sa-skeleton-elliptical
|
|
2800
|
+
[width]="subSubItem.width"
|
|
2801
|
+
[height]="subSubItem.height"
|
|
2802
|
+
></sa-skeleton-elliptical>
|
|
2803
|
+
}
|
|
2804
|
+
}
|
|
2805
|
+
}
|
|
2806
|
+
</sa-skeleton-container>
|
|
2807
|
+
}
|
|
2808
|
+
}
|
|
2809
|
+
}
|
|
2810
|
+
</sa-skeleton-container>
|
|
2811
|
+
}
|
|
2812
|
+
}
|
|
2813
|
+
}
|
|
2814
|
+
</sa-skeleton-container>
|
|
2795
2815
|
`
|
|
2796
2816
|
}]
|
|
2797
2817
|
}], propDecorators: { preset: [{
|
|
@@ -2841,12 +2861,12 @@ class StepperComponent extends FieldType {
|
|
|
2841
2861
|
id: this.latestStep
|
|
2842
2862
|
});
|
|
2843
2863
|
}
|
|
2844
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2845
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2864
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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'}}\">\r\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\r\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\r\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\r\n <div\r\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\r\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\r\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\r\n </label>\r\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\r\n </div>\r\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\r\n </div>\r\n</div>\r\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"] }] }); }
|
|
2846
2866
|
}
|
|
2847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperComponent, decorators: [{
|
|
2848
2868
|
type: Component,
|
|
2849
|
-
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"] }]
|
|
2869
|
+
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\r\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\r\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\r\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\r\n <div\r\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\r\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\r\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\r\n </label>\r\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\r\n </div>\r\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\r\n </div>\r\n</div>\r\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"] }]
|
|
2850
2870
|
}], propDecorators: { latestStep: [{
|
|
2851
2871
|
type: Input
|
|
2852
2872
|
}], editable: [{
|
|
@@ -2877,12 +2897,12 @@ class TabsComponent {
|
|
|
2877
2897
|
tabChange(evt) {
|
|
2878
2898
|
this.tabChanged.emit(evt.target.value);
|
|
2879
2899
|
}
|
|
2880
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2881
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
2900
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2901
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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}}\">\r\n <div class=\"tabs\">\r\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\r\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\r\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\r\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\r\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n {{item.tabName}}\r\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\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"] }] }); }
|
|
2882
2902
|
}
|
|
2883
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, decorators: [{
|
|
2884
2904
|
type: Component,
|
|
2885
|
-
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"] }]
|
|
2905
|
+
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\r\n <div class=\"tabs\">\r\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\r\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\r\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\r\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\r\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n {{item.tabName}}\r\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\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"] }]
|
|
2886
2906
|
}], propDecorators: { tabs: [{
|
|
2887
2907
|
type: Input
|
|
2888
2908
|
}], type: [{
|
|
@@ -2897,8 +2917,11 @@ class ToastComponent {
|
|
|
2897
2917
|
constructor() {
|
|
2898
2918
|
this.finishPercentage = -1;
|
|
2899
2919
|
this.statusIcon = '';
|
|
2920
|
+
this.toastCloseIcon = 'closeOutlined';
|
|
2900
2921
|
this.filled = true;
|
|
2901
2922
|
this.width = '';
|
|
2923
|
+
this.toastIconSize = '24';
|
|
2924
|
+
this.toastCloseIconSize = '24';
|
|
2902
2925
|
this.toastEvent = new EventEmitter();
|
|
2903
2926
|
this.firstButton = new EventEmitter();
|
|
2904
2927
|
this.secondButton = new EventEmitter();
|
|
@@ -2931,12 +2954,12 @@ class ToastComponent {
|
|
|
2931
2954
|
params: {}
|
|
2932
2955
|
});
|
|
2933
2956
|
}
|
|
2934
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2935
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
2957
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2958
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
|
|
2936
2959
|
}
|
|
2937
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2938
2961
|
type: Component,
|
|
2939
|
-
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=\"
|
|
2962
|
+
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
2940
2963
|
}], propDecorators: { finishPercentage: [{
|
|
2941
2964
|
type: Input
|
|
2942
2965
|
}], heading: [{
|
|
@@ -2945,6 +2968,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2945
2968
|
type: Input
|
|
2946
2969
|
}], statusIcon: [{
|
|
2947
2970
|
type: Input
|
|
2971
|
+
}], toastCloseIcon: [{
|
|
2972
|
+
type: Input
|
|
2948
2973
|
}], status: [{
|
|
2949
2974
|
type: Input
|
|
2950
2975
|
}], firstButtonName: [{
|
|
@@ -2957,6 +2982,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2957
2982
|
type: Input
|
|
2958
2983
|
}], width: [{
|
|
2959
2984
|
type: Input
|
|
2985
|
+
}], toastIconSize: [{
|
|
2986
|
+
type: Input
|
|
2987
|
+
}], toastCloseIconSize: [{
|
|
2988
|
+
type: Input
|
|
2960
2989
|
}], toastEvent: [{
|
|
2961
2990
|
type: Output
|
|
2962
2991
|
}], firstButton: [{
|
|
@@ -3004,12 +3033,12 @@ class ToolTipComponent {
|
|
|
3004
3033
|
skipToolTip() {
|
|
3005
3034
|
this.toolTipSkipped.emit();
|
|
3006
3035
|
}
|
|
3007
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3008
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
3036
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\r\n <div class=\"tool-tip\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}\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"] }] }); }
|
|
3009
3038
|
}
|
|
3010
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolTipComponent, decorators: [{
|
|
3011
3040
|
type: Component,
|
|
3012
|
-
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"] }]
|
|
3041
|
+
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\r\n <div class=\"tool-tip\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}\n"] }]
|
|
3013
3042
|
}], propDecorators: { messages: [{
|
|
3014
3043
|
type: Input
|
|
3015
3044
|
}], pointerPosition: [{
|
|
@@ -3022,10 +3051,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3022
3051
|
|
|
3023
3052
|
class TestLibraryService {
|
|
3024
3053
|
constructor() { }
|
|
3025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3026
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
3054
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestLibraryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3055
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestLibraryService, providedIn: 'root' }); }
|
|
3027
3056
|
}
|
|
3028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3057
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestLibraryService, decorators: [{
|
|
3029
3058
|
type: Injectable,
|
|
3030
3059
|
args: [{
|
|
3031
3060
|
providedIn: 'root'
|