@sarasanalytics-com/design-system 0.0.42 → 0.0.44
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/icon-interface.mjs +1 -1
- package/esm2022/interfaces/message-banner.mjs +1 -1
- package/esm2022/interfaces/option-interface.mjs +1 -1
- package/esm2022/interfaces/select-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 +3 -3
- package/esm2022/lib/avatar/avatar.component.mjs +3 -3
- package/esm2022/lib/button/button.component.mjs +3 -3
- package/esm2022/lib/calendar-header/calendar-header.component.mjs +3 -3
- package/esm2022/lib/card/card-body/card-body.component.mjs +1 -1
- package/esm2022/lib/card/card-custom-header/card-custom-header.component.mjs +1 -1
- package/esm2022/lib/card/card-footer-actions/card-footer-actions.component.mjs +3 -3
- package/esm2022/lib/card/card-icon/card-icon.component.mjs +1 -1
- package/esm2022/lib/card/card-title-actions/card-title-actions.component.mjs +1 -1
- package/esm2022/lib/card/card.component.mjs +3 -17
- package/esm2022/lib/card/checkbox-card/checkbox-card.component.mjs +3 -3
- package/esm2022/lib/card/guide-card/guide-card.component.mjs +3 -3
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +3 -3
- package/esm2022/lib/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/chips/chips.component.mjs +3 -3
- package/esm2022/lib/component-library.component.mjs +9 -9
- package/esm2022/lib/component-library.service.mjs +1 -1
- package/esm2022/lib/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/lib/form-input/form-input.component.mjs +3 -3
- package/esm2022/lib/form-select/form-select.component.mjs +3 -3
- package/esm2022/lib/grid-cell/grid-cell.component.mjs +3 -3
- package/esm2022/lib/header/header.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon/icon.service.mjs +1 -1
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/list/list.component.mjs +3 -3
- package/esm2022/lib/message-banner/message-banner.component.mjs +3 -3
- package/esm2022/lib/page-layout/page-layout.component.mjs +3 -3
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2022/lib/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/scrolling-cards/scrolling-cards.component.mjs +3 -3
- package/esm2022/lib/spinner/spinner.component.mjs +1 -1
- package/esm2022/lib/stepper/stepper.component.mjs +3 -3
- package/esm2022/lib/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/toast/toast.component.mjs +3 -3
- package/esm2022/lib/tool-tip/tool-tip.component.mjs +3 -3
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/utils/validators.mjs +1 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +64 -78
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/card/card.component.d.ts +1 -4
- package/package.json +1 -1
- package/styles/styles.css +388 -0
|
@@ -75,11 +75,11 @@ class ChipsComponent {
|
|
|
75
75
|
});
|
|
76
76
|
}
|
|
77
77
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
78
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\
|
|
78
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\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}.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 }] }); }
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\
|
|
82
|
+
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule], template: "<div class=\"chip {{type}} {{state}} {{filling}}\">\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}.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"] }]
|
|
83
83
|
}], propDecorators: { id: [{
|
|
84
84
|
type: Input
|
|
85
85
|
}], iconPath: [{
|
|
@@ -168,11 +168,11 @@ class IconComponent {
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
171
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\
|
|
171
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass" }, usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.accordion-info-icon.colored-icon{color:var(--icon-grey1)}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.accordion-info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
172
172
|
}
|
|
173
173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
174
174
|
type: Component,
|
|
175
|
-
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\
|
|
175
|
+
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.accordion-info-icon.colored-icon{color:var(--icon-grey1)}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.accordion-info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
176
176
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
|
|
177
177
|
type: Input,
|
|
178
178
|
args: ['img']
|
|
@@ -225,11 +225,11 @@ class AvatarComponent {
|
|
|
225
225
|
});
|
|
226
226
|
}
|
|
227
227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
228
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\
|
|
228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <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"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
229
229
|
}
|
|
230
230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
231
231
|
type: Component,
|
|
232
|
-
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\
|
|
232
|
+
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"] }]
|
|
233
233
|
}], propDecorators: { id: [{
|
|
234
234
|
type: Input
|
|
235
235
|
}], imagePath: [{
|
|
@@ -271,20 +271,12 @@ class CardComponent {
|
|
|
271
271
|
this.cardStyles['height'] = typeof changes['height']?.currentValue === 'string' ? changes['height']?.currentValue : changes['height']?.currentValue + '%';
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
|
-
cardClicked(evt) {
|
|
275
|
-
if (this.href != "") {
|
|
276
|
-
if (this.hrefTarget == "blank")
|
|
277
|
-
window.open(this.href);
|
|
278
|
-
else if (this.hrefTarget == "self")
|
|
279
|
-
location.href = this.href;
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
283
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize",
|
|
275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", 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\">\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"], 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"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
284
276
|
}
|
|
285
277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
286
278
|
type: Component,
|
|
287
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\"
|
|
279
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\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"] }]
|
|
288
280
|
}], propDecorators: { title: [{
|
|
289
281
|
type: Input,
|
|
290
282
|
args: ['title']
|
|
@@ -321,12 +313,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
321
313
|
}], avatarSize: [{
|
|
322
314
|
type: Input,
|
|
323
315
|
args: ['avatarSize']
|
|
324
|
-
}], href: [{
|
|
325
|
-
type: Input,
|
|
326
|
-
args: ['href']
|
|
327
|
-
}], hrefTarget: [{
|
|
328
|
-
type: Input,
|
|
329
|
-
args: ['hrefTarget']
|
|
330
316
|
}], icon: [{
|
|
331
317
|
type: Input,
|
|
332
318
|
args: ['icon']
|
|
@@ -417,11 +403,11 @@ class ButtonComponent {
|
|
|
417
403
|
this.onMouseOutEvent.emit();
|
|
418
404
|
}
|
|
419
405
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\
|
|
406
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n @if(ImagePath) {\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n } @else if (icon) {\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n {{text}}\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n } @else {\n {{text}}\n }\n</label>", 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"] }] }); }
|
|
421
407
|
}
|
|
422
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
423
409
|
type: Component,
|
|
424
|
-
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\"\
|
|
410
|
+
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>", 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"] }]
|
|
425
411
|
}], propDecorators: { id: [{
|
|
426
412
|
type: Input
|
|
427
413
|
}], type: [{
|
|
@@ -545,11 +531,11 @@ class AccordionComponent extends FieldType {
|
|
|
545
531
|
this.buttonClick.complete();
|
|
546
532
|
}
|
|
547
533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: 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\"\r\n size=\"16\"></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\"\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=\"accordion-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\">\r\n <sa-icon icon=\"sourcesOutlined\" class=\"d-flex\" customClass=\"colored-icon\"\r\n size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"material-icons\">\r\n expand_more\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=\"accordion-info-icon\"\r\n 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=\"accordion-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{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available;margin-bottom:1.5rem}.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 .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)}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n\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 hey {{props?.['accordionExpanded']}}\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon']\" class=\"d-flex\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon']\" class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}} hey {{props?.['accordionExpanded']}}</span>\n <div>\n <!-- <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip> -->\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || 'false'\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon icon=\"sourcesOutlined\" class=\"d-flex\" customClass=\"colored-icon\"\n size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"material-icons\">\n expand_more\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"accordion-info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .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)}\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", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
549
535
|
}
|
|
550
536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
551
537
|
type: Component,
|
|
552
|
-
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\"\r\n size=\"16\"></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\"\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=\"accordion-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\">\r\n <sa-icon icon=\"sourcesOutlined\" class=\"d-flex\" customClass=\"colored-icon\"\r\n size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"material-icons\">\r\n expand_more\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=\"accordion-info-icon\"\r\n 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=\"accordion-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{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available;margin-bottom:1.5rem}.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 .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)}\n"] }]
|
|
538
|
+
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n\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 hey {{props?.['accordionExpanded']}}\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon']\" class=\"d-flex\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon']\" class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}} hey {{props?.['accordionExpanded']}}</span>\n <div>\n <!-- <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip> -->\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || 'false'\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon icon=\"sourcesOutlined\" class=\"d-flex\" customClass=\"colored-icon\"\n size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"material-icons\">\n expand_more\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"accordion-info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"accordion-info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .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)}\n"] }]
|
|
553
539
|
}] });
|
|
554
540
|
|
|
555
541
|
let nextId$2 = 0; // used to give unique ids to inputs used in html
|
|
@@ -695,7 +681,7 @@ class CalendarHeaderComponent {
|
|
|
695
681
|
this.destroy$.next(); // will trigger unsubscription in takeUntil
|
|
696
682
|
}
|
|
697
683
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2$1.MatCalendar }, { token: i2$2.DateAdapter }, { token: i2$1.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\
|
|
684
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
699
685
|
}
|
|
700
686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
701
687
|
type: Component,
|
|
@@ -703,7 +689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
703
689
|
NgFor,
|
|
704
690
|
MatIconModule,
|
|
705
691
|
MatButton
|
|
706
|
-
], template: "<div class=\"range-preset\">\
|
|
692
|
+
], 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"] }]
|
|
707
693
|
}], ctorParameters: () => [{ type: i2$1.MatCalendar }, { type: i2$2.DateAdapter }, { type: i2$1.MatDateRangePicker }, { type: undefined, decorators: [{
|
|
708
694
|
type: Inject,
|
|
709
695
|
args: [MAT_DATE_FORMATS]
|
|
@@ -720,11 +706,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
720
706
|
|
|
721
707
|
class CardFooterActionsComponent {
|
|
722
708
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\
|
|
709
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
|
|
724
710
|
}
|
|
725
711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
|
|
726
712
|
type: Component,
|
|
727
|
-
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\
|
|
713
|
+
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"] }]
|
|
728
714
|
}] });
|
|
729
715
|
|
|
730
716
|
class CardIconComponent {
|
|
@@ -751,11 +737,11 @@ class ListComponent {
|
|
|
751
737
|
this.featuresIcon = '';
|
|
752
738
|
}
|
|
753
739
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
754
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\
|
|
740
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n </div>\n <div>\n <span class=\"feature-text\">{{ item?.text }}</span>\n </div>\n </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { 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"] }] }); }
|
|
755
741
|
}
|
|
756
742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, decorators: [{
|
|
757
743
|
type: Component,
|
|
758
|
-
args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\
|
|
744
|
+
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"] }]
|
|
759
745
|
}], propDecorators: { listData: [{
|
|
760
746
|
type: Input
|
|
761
747
|
}], featuresIcon: [{
|
|
@@ -781,11 +767,11 @@ class CheckboxCardComponent extends FieldType {
|
|
|
781
767
|
this.field.props['onButtonClick'](this.field);
|
|
782
768
|
}
|
|
783
769
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\
|
|
770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
785
771
|
}
|
|
786
772
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
787
773
|
type: Component,
|
|
788
|
-
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']\"\
|
|
774
|
+
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"] }]
|
|
789
775
|
}] });
|
|
790
776
|
|
|
791
777
|
class GuideCardComponent {
|
|
@@ -794,11 +780,11 @@ class GuideCardComponent {
|
|
|
794
780
|
this.steps = [];
|
|
795
781
|
}
|
|
796
782
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
797
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps" }, ngImport: i0, template: "<div class=\"guide-container\">\
|
|
783
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps" }, ngImport: i0, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\">\n <div class=\"step-indicator\">\n <div class=\"step-circle\"></div>\n\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <p class=\"step-title\">{{ step.title }}</p>\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}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
798
784
|
}
|
|
799
785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
|
|
800
786
|
type: Component,
|
|
801
|
-
args: [{ selector: 'sa-guide-card', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\
|
|
787
|
+
args: [{ selector: 'sa-guide-card', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\">\n <div class=\"step-indicator\">\n <div class=\"step-circle\"></div>\n\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <p class=\"step-title\">{{ step.title }}</p>\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}\n"] }]
|
|
802
788
|
}], propDecorators: { title: [{
|
|
803
789
|
type: Input
|
|
804
790
|
}], steps: [{
|
|
@@ -868,11 +854,11 @@ class CardCarouselComponent {
|
|
|
868
854
|
}
|
|
869
855
|
}
|
|
870
856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
871
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\
|
|
857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n <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-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\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\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\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 $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.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);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .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}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
872
858
|
}
|
|
873
859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
874
860
|
type: Component,
|
|
875
|
-
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, template: "<!-- card-carousel.component.html -->\
|
|
861
|
+
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, 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 <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-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\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\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\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 $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.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);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .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}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
|
|
876
862
|
}], propDecorators: { cards: [{
|
|
877
863
|
type: Input
|
|
878
864
|
}], interval: [{
|
|
@@ -908,27 +894,27 @@ class CheckboxComponent extends FieldType {
|
|
|
908
894
|
return isObservable(options) ? options : of(options || []);
|
|
909
895
|
}
|
|
910
896
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
911
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\
|
|
897
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$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 }] }); }
|
|
912
898
|
}
|
|
913
899
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
914
900
|
type: Component,
|
|
915
|
-
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\
|
|
901
|
+
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"] }]
|
|
916
902
|
}] });
|
|
917
903
|
|
|
918
904
|
class TestLibraryComponent {
|
|
919
905
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
921
|
-
<p>
|
|
922
|
-
component-library works!
|
|
923
|
-
</p>
|
|
906
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
907
|
+
<p>
|
|
908
|
+
component-library works!
|
|
909
|
+
</p>
|
|
924
910
|
`, isInline: true, styles: [""] }); }
|
|
925
911
|
}
|
|
926
912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
|
|
927
913
|
type: Component,
|
|
928
|
-
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
929
|
-
<p>
|
|
930
|
-
component-library works!
|
|
931
|
-
</p>
|
|
914
|
+
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
915
|
+
<p>
|
|
916
|
+
component-library works!
|
|
917
|
+
</p>
|
|
932
918
|
` }]
|
|
933
919
|
}] });
|
|
934
920
|
|
|
@@ -938,7 +924,7 @@ class DatepickerComponent extends FieldType {
|
|
|
938
924
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
939
925
|
}
|
|
940
926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\
|
|
927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
942
928
|
}
|
|
943
929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
944
930
|
type: Component,
|
|
@@ -952,7 +938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
952
938
|
CalendarHeaderComponent,
|
|
953
939
|
CommonModule,
|
|
954
940
|
MatNativeDateModule
|
|
955
|
-
], template: "<mat-form-field class=\"date-picker\">\
|
|
941
|
+
], 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"] }]
|
|
956
942
|
}], propDecorators: { range: [{
|
|
957
943
|
type: Input
|
|
958
944
|
}] } });
|
|
@@ -1238,7 +1224,7 @@ class FormInputComponent extends FieldType {
|
|
|
1238
1224
|
}
|
|
1239
1225
|
}
|
|
1240
1226
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container\">\
|
|
1227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n \n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n \n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n }\n \n \n <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
|
|
1242
1228
|
}
|
|
1243
1229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1244
1230
|
type: Component,
|
|
@@ -1248,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1248
1234
|
ReactiveFormsModule,
|
|
1249
1235
|
FormlyModule,
|
|
1250
1236
|
IconComponent,
|
|
1251
|
-
], template: "<div class=\"sa-input-container\">\
|
|
1237
|
+
], template: "<div class=\"sa-input-container\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if(pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n \n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n \n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon.size || '24'\" [color]=\"icon.color || ''\"\n [ngClass]=\"icon.show ? '' : 'hide'\"></sa-icon>\n }\n \n \n <!-- <sa-icon [icon]=\"icon\" size=\"24\" (click)=\"inputIconClick()\"></sa-icon> -->\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle'\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:#e25c61!important}.sa-input-field.invalid{--border: 1px solid #e25c61}.sa-input-field.invalid sa-icon{--form-email-icon-color: #e25c61}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}\n"] }]
|
|
1252
1238
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
1253
1239
|
type: ViewChild,
|
|
1254
1240
|
args: ['formInput']
|
|
@@ -1314,7 +1300,7 @@ class FormSelectComponent extends FieldType {
|
|
|
1314
1300
|
}
|
|
1315
1301
|
}
|
|
1316
1302
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\
|
|
1303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", usesInheritance: true, ngImport: i0, template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
1318
1304
|
}
|
|
1319
1305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
1320
1306
|
type: Component,
|
|
@@ -1326,7 +1312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1326
1312
|
ChipsComponent,
|
|
1327
1313
|
NgIf,
|
|
1328
1314
|
NgFor
|
|
1329
|
-
], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\
|
|
1315
|
+
], template: "<div [style.visibility]=\"(openState || topLabel) ? 'visible' : 'hidden'\" class=\"clicked-label\">{{params.label}}</div>\n<div class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}\">\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\" *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\" class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div>\n\n</div>\n<div class=\"support-label\">{{params.supportText}}</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}\n"] }]
|
|
1330
1316
|
}] });
|
|
1331
1317
|
|
|
1332
1318
|
class GridCellComponent {
|
|
@@ -1386,7 +1372,7 @@ class GridCellComponent {
|
|
|
1386
1372
|
return false; // not sure what this return value does.
|
|
1387
1373
|
}
|
|
1388
1374
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\
|
|
1375
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "lib-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n\n\n <sa-chip *ngFor=\"let config of params.chipConfig, let i = index\" [id]=\"config.id\" [filling]=\"config.filling\"\n id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\" [iconPosition]=\"config.iconPosition\"\n [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\" [type]=\"config.type\" [text]=\"config.text\"\n [style.display]=\"(params.viewChip) ? 'block' : 'none'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], 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"] }] }); }
|
|
1390
1376
|
}
|
|
1391
1377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
|
|
1392
1378
|
type: Component,
|
|
@@ -1395,7 +1381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1395
1381
|
ChipsComponent,
|
|
1396
1382
|
ButtonComponent,
|
|
1397
1383
|
NgFor
|
|
1398
|
-
], template: "<div class=\"grid-cell {{params.cellType}}\">\
|
|
1384
|
+
], 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"] }]
|
|
1399
1385
|
}], propDecorators: { onClickButtonEvent: [{
|
|
1400
1386
|
type: Output
|
|
1401
1387
|
}], onClickChipEvent: [{
|
|
@@ -1415,11 +1401,11 @@ class HeaderComponent {
|
|
|
1415
1401
|
num ? this.mainButtonClicked.emit() : this.helperButtonClicked.emit();
|
|
1416
1402
|
}
|
|
1417
1403
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1418
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\
|
|
1404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { info: "info", headerName: "headerName", chipConfig: "chipConfig", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { mainButtonClicked: "mainButtonClicked", helperButtonClicked: "helperButtonClicked" }, ngImport: i0, template: "<div class=\"header\">\n <div class=\"header-content\">\n <div class=\"heading\">\n <div class=\"header-name\">{{headerName}}</div>\n <div *ngFor=\"let chip of chipConfig\">\n <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n </div>\n </div>\n <div class=\"header-info\">\n <div class=\"info-item\" *ngFor=\"let item of info\">\n <img [src]=\"item[1]\" alt=\"\">\n {{item[0]}}\n </div>\n </div>\n </div>\n <div class=\"actions\">\n <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n state=\"default\"></sa-button>\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{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.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)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1419
1405
|
}
|
|
1420
1406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1421
1407
|
type: Component,
|
|
1422
|
-
args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\
|
|
1408
|
+
args: [{ selector: 'sa-header', standalone: true, imports: [ChipsComponent, NgFor, ButtonComponent, NgIf], template: "<div class=\"header\">\n <div class=\"header-content\">\n <div class=\"heading\">\n <div class=\"header-name\">{{headerName}}</div>\n <div *ngFor=\"let chip of chipConfig\">\n <sa-chip type=\"regular\" [state]=\"chip[1]\" filling=\"filled\" [text]=\"chip[0]\"></sa-chip>\n </div>\n </div>\n <div class=\"header-info\">\n <div class=\"info-item\" *ngFor=\"let item of info\">\n <img [src]=\"item[1]\" alt=\"\">\n {{item[0]}}\n </div>\n </div>\n </div>\n <div class=\"actions\">\n <sa-button *ngIf=\"buttonHelper\" (onClickEvent)=\"clicked(0)\" [text]=\"buttonHelper\" type=\"transparent\" size=\"medium\"\n state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"buttonMain\" (onClickEvent)=\"clicked(1)\" [text]=\"buttonMain\" type=\"primary\" size=\"medium\"\n state=\"default\"></sa-button>\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{font-size:22px;font-style:normal;font-weight:500;line-height:28px}.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)}\n"] }]
|
|
1423
1409
|
}], propDecorators: { info: [{
|
|
1424
1410
|
type: Input
|
|
1425
1411
|
}], headerName: [{
|
|
@@ -1508,7 +1494,7 @@ class LeftNavComponent {
|
|
|
1508
1494
|
}
|
|
1509
1495
|
}
|
|
1510
1496
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\
|
|
1497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1512
1498
|
}
|
|
1513
1499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
1514
1500
|
type: Component,
|
|
@@ -1517,7 +1503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1517
1503
|
AvatarComponent,
|
|
1518
1504
|
IconComponent,
|
|
1519
1505
|
MatTooltipModule
|
|
1520
|
-
], template: "<div class=\"sa-left-nav\">\
|
|
1506
|
+
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
|
|
1521
1507
|
}], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i1$3.Router }], propDecorators: { data: [{
|
|
1522
1508
|
type: Input,
|
|
1523
1509
|
args: ['data']
|
|
@@ -1580,11 +1566,11 @@ class MessageBannerComponent {
|
|
|
1580
1566
|
this.onAction = () => { };
|
|
1581
1567
|
}
|
|
1582
1568
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", onAction: "onAction" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\
|
|
1569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", onAction: "onAction" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\">{{\n actionText\n }}</sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1584
1570
|
}
|
|
1585
1571
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, decorators: [{
|
|
1586
1572
|
type: Component,
|
|
1587
|
-
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\
|
|
1573
|
+
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\">{{\n actionText\n }}</sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"] }]
|
|
1588
1574
|
}], propDecorators: { type: [{
|
|
1589
1575
|
type: Input
|
|
1590
1576
|
}], actionText: [{
|
|
@@ -1615,11 +1601,11 @@ class PageLayoutComponent {
|
|
|
1615
1601
|
this.showFooterContent = false;
|
|
1616
1602
|
}
|
|
1617
1603
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\
|
|
1604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }); }
|
|
1619
1605
|
}
|
|
1620
1606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
1621
1607
|
type: Component,
|
|
1622
|
-
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\
|
|
1608
|
+
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"] }]
|
|
1623
1609
|
}], propDecorators: { showRightContent: [{
|
|
1624
1610
|
type: Input
|
|
1625
1611
|
}], showFooterContent: [{
|
|
@@ -1639,11 +1625,11 @@ class ProgressBarComponent {
|
|
|
1639
1625
|
ngOnInit() {
|
|
1640
1626
|
}
|
|
1641
1627
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\
|
|
1628
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1643
1629
|
}
|
|
1644
1630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
1645
1631
|
type: Component,
|
|
1646
|
-
args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\
|
|
1632
|
+
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"] }]
|
|
1647
1633
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
|
|
1648
1634
|
type: Input
|
|
1649
1635
|
}], borderRadius: [{
|
|
@@ -1668,11 +1654,11 @@ class RadioButtonComponent extends FieldType {
|
|
|
1668
1654
|
radio.checked = true;
|
|
1669
1655
|
}
|
|
1670
1656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\
|
|
1657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field,::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$5.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
1672
1658
|
}
|
|
1673
1659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
1674
1660
|
type: Component,
|
|
1675
|
-
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\
|
|
1661
|
+
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"] }]
|
|
1676
1662
|
}] });
|
|
1677
1663
|
|
|
1678
1664
|
class ScrollingCardsComponent {
|
|
@@ -1712,11 +1698,11 @@ class ScrollingCardsComponent {
|
|
|
1712
1698
|
this.cardContainer.nativeElement.style.animationPlayState = 'running';
|
|
1713
1699
|
}
|
|
1714
1700
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1715
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\
|
|
1701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }] }); }
|
|
1716
1702
|
}
|
|
1717
1703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
1718
1704
|
type: Component,
|
|
1719
|
-
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\
|
|
1705
|
+
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], 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\" [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"] }]
|
|
1720
1706
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
1721
1707
|
type: Input,
|
|
1722
1708
|
args: [{ required: true }]
|
|
@@ -1771,11 +1757,11 @@ class StepperComponent extends FieldType {
|
|
|
1771
1757
|
});
|
|
1772
1758
|
}
|
|
1773
1759
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\
|
|
1760
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1775
1761
|
}
|
|
1776
1762
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
|
|
1777
1763
|
type: Component,
|
|
1778
|
-
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\
|
|
1764
|
+
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"] }]
|
|
1779
1765
|
}], propDecorators: { latestStep: [{
|
|
1780
1766
|
type: Input
|
|
1781
1767
|
}], editable: [{
|
|
@@ -1807,11 +1793,11 @@ class TabsComponent {
|
|
|
1807
1793
|
this.tabChanged.emit(evt.target.value);
|
|
1808
1794
|
}
|
|
1809
1795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\
|
|
1796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1811
1797
|
}
|
|
1812
1798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1813
1799
|
type: Component,
|
|
1814
|
-
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\
|
|
1800
|
+
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"] }]
|
|
1815
1801
|
}], propDecorators: { tabs: [{
|
|
1816
1802
|
type: Input
|
|
1817
1803
|
}], type: [{
|
|
@@ -1861,11 +1847,11 @@ class ToastComponent {
|
|
|
1861
1847
|
});
|
|
1862
1848
|
}
|
|
1863
1849
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\
|
|
1850
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" size=\"24\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" icon=\"closeOutlined\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
|
|
1865
1851
|
}
|
|
1866
1852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
|
|
1867
1853
|
type: Component,
|
|
1868
|
-
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\
|
|
1854
|
+
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=\"24\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" icon=\"closeOutlined\" size=\"24\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <!-- <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div> -->\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
1869
1855
|
}], propDecorators: { finishPercentage: [{
|
|
1870
1856
|
type: Input
|
|
1871
1857
|
}], heading: [{
|
|
@@ -1934,11 +1920,11 @@ class ToolTipComponent {
|
|
|
1934
1920
|
this.toolTipSkipped.emit();
|
|
1935
1921
|
}
|
|
1936
1922
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1937
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\
|
|
1923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div>\n <div class=\"tool-tip\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1938
1924
|
}
|
|
1939
1925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
|
|
1940
1926
|
type: Component,
|
|
1941
|
-
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\
|
|
1927
|
+
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"] }]
|
|
1942
1928
|
}], propDecorators: { messages: [{
|
|
1943
1929
|
type: Input
|
|
1944
1930
|
}], pointerPosition: [{
|