@sarasanalytics-com/design-system 0.0.18 → 0.0.20
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/esm2022/interfaces/card-carousel-interface.mjs +2 -0
- package/esm2022/interfaces/guide-card-interface.mjs +2 -0
- package/esm2022/interfaces/option-interface.mjs +2 -0
- package/esm2022/interfaces/toast-interface.mjs +2 -0
- package/esm2022/lib/avatar/avatar.component.mjs +2 -2
- package/esm2022/lib/button/button.component.mjs +7 -3
- package/esm2022/lib/card/card-body/card-body.component.mjs +11 -0
- package/esm2022/lib/card/card-custom-header/card-custom-header.component.mjs +11 -0
- package/esm2022/lib/card/card.component.mjs +27 -3
- package/esm2022/lib/card/guide-card/guide-card.component.mjs +19 -0
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +87 -0
- package/esm2022/lib/form-input/form-input.component.mjs +9 -6
- package/esm2022/lib/grid-cell/grid-cell.component.mjs +2 -2
- package/esm2022/lib/header/header.component.mjs +2 -2
- package/esm2022/lib/icon/icon.component.mjs +7 -3
- package/esm2022/lib/left-nav/left-nav.component.mjs +5 -5
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +29 -0
- package/esm2022/lib/radio-button/radio-button.component.mjs +37 -0
- package/esm2022/lib/spinner/spinner.component.mjs +22 -0
- package/esm2022/lib/toast/toast.component.mjs +9 -9
- package/esm2022/lib/tool-tip/tool-tip.component.mjs +4 -4
- package/esm2022/public-api.mjs +33 -16
- package/esm2022/utils/validators.mjs +19 -3
- package/fesm2022/sarasanalytics-com-design-system.mjs +1171 -927
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/interfaces/card-carousel-interface.d.ts +8 -0
- package/interfaces/guide-card-interface.d.ts +4 -0
- package/interfaces/option-interface.d.ts +4 -0
- package/interfaces/toast-interface.d.ts +12 -0
- package/lib/button/button.component.d.ts +2 -1
- package/lib/card/card-body/card-body.component.d.ts +5 -0
- package/lib/card/card-custom-header/card-custom-header.component.d.ts +5 -0
- package/lib/card/card.component.d.ts +7 -1
- package/lib/card/guide-card/guide-card.component.d.ts +8 -0
- package/lib/card-carousel/card-carousel.component.d.ts +27 -0
- package/lib/icon/icon.component.d.ts +2 -1
- package/lib/progress-bar/progress-bar.component.d.ts +13 -0
- package/lib/radio-button/radio-button.component.d.ts +14 -0
- package/lib/spinner/spinner.component.d.ts +7 -0
- package/package.json +1 -1
- package/public-api.d.ts +28 -15
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1jYXJvdXNlbC1pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvaW50ZXJmYWNlcy9jYXJkLWNhcm91c2VsLWludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBDYXJkQ2Fyb3VzZWwge1xuICAgIGlkOiBudW1iZXI7XG4gICAgYXZhdGFySWNvbjogc3RyaW5nO1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgc3VidGl0bGU6IHN0cmluZztcbiAgICBsb2dvSWNvbjogc3RyaW5nO1xuICAgIGJvZHk6IHN0cmluZztcbn0iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3VpZGUtY2FyZC1pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvaW50ZXJmYWNlcy9ndWlkZS1jYXJkLWludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBHdWlkZVN0ZXAge1xuICAgIHRpdGxlOiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG59XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9pbnRlcmZhY2VzL29wdGlvbi1pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgT3B0aW9uSW50ZXJmYWNlIHtcbiAgICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyO1xuICAgIGxhYmVsOiBzdHJpbmc7XG59XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QtaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2ludGVyZmFjZXMvdG9hc3QtaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIElUb2FzdCB7XG4gICAgZmluaXNoUGVyY2VudGFnZT86IG51bWJlcjtcbiAgICBoZWFkaW5nPzogc3RyaW5nO1xuICAgIHN1YkhlYWRpbmc/OiBzdHJpbmc7XG4gICAgc3RhdHVzSWNvbj86IHN0cmluZztcbiAgICBzdGF0dXM/OiAnc3VjY2VzcycgfCAnZmFpbHVyZScgfCAnY2F1dGlvbicgfCAncG9zaXRpdmUnIHwgJ25lZ2F0aXZlJyB8ICd0ZW50YXRpdmUnO1xuICAgIGZpcnN0QnV0dG9uTmFtZT86IHN0cmluZztcbiAgICBzZWNvbmRCdXR0b25OYW1lPzogc3RyaW5nO1xuICAgIGNsb3NhYmxlPzogYm9vbGVhbjtcbiAgICBmaWxsZWQ/OiBib29sZWFuO1xuICAgIHdpZHRoPzogbnVtYmVyIHwgc3RyaW5nO1xufSJdfQ==
|
|
@@ -33,11 +33,11 @@ export class AvatarComponent {
|
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
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:
|
|
36
|
+
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"] }] }); }
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
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:
|
|
40
|
+
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"] }]
|
|
41
41
|
}], propDecorators: { id: [{
|
|
42
42
|
type: Input
|
|
43
43
|
}], imagePath: [{
|
|
@@ -3,11 +3,13 @@ import { Input } from '@angular/core';
|
|
|
3
3
|
import { EventEmitter } from '@angular/core';
|
|
4
4
|
import { NgIf } from '@angular/common';
|
|
5
5
|
import { NgStyle } from '@angular/common';
|
|
6
|
+
import { SpinnerComponent } from '../spinner/spinner.component';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
let nextId = 0; // used to give unique ids to inputs used in html
|
|
8
9
|
export class ButtonComponent {
|
|
9
10
|
constructor() {
|
|
10
11
|
this.isSubmit = false;
|
|
12
|
+
this.showSpinner = false;
|
|
11
13
|
this.onClickEvent = new EventEmitter();
|
|
12
14
|
this.onMouseInEvent = new EventEmitter();
|
|
13
15
|
this.onMouseOutEvent = new EventEmitter();
|
|
@@ -52,11 +54,11 @@ export class ButtonComponent {
|
|
|
52
54
|
this.onMouseOutEvent.emit();
|
|
53
55
|
}
|
|
54
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
55
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
57
|
+
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", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, 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 <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</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"] }] }); }
|
|
56
58
|
}
|
|
57
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
58
60
|
type: Component,
|
|
59
|
-
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle], 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 <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</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"] }]
|
|
61
|
+
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent], 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 <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</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"] }]
|
|
60
62
|
}], propDecorators: { id: [{
|
|
61
63
|
type: Input
|
|
62
64
|
}], type: [{
|
|
@@ -79,6 +81,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
79
81
|
type: Input
|
|
80
82
|
}], isSubmit: [{
|
|
81
83
|
type: Input
|
|
84
|
+
}], showSpinner: [{
|
|
85
|
+
type: Input
|
|
82
86
|
}], onClickEvent: [{
|
|
83
87
|
type: Output
|
|
84
88
|
}], onMouseInEvent: [{
|
|
@@ -86,4 +90,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
86
90
|
}], onMouseOutEvent: [{
|
|
87
91
|
type: Output
|
|
88
92
|
}] } });
|
|
89
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
93
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDOztBQUVoRSxJQUFJLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBSSxpREFBaUQ7QUFVcEUsTUFBTSxPQUFPLGVBQWU7SUFSNUI7UUFtQlcsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUUxQixnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUU1QixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDbEMsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3BDLG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUUvQyxhQUFRLEdBQUcsRUFBRSxDQUFBO1FBQ2Isb0JBQWUsR0FBRyxFQUFFLENBQUE7UUFDcEIsU0FBSSxHQUFXLE1BQU0sRUFBRSxDQUFDO0tBb0N6QjtJQWxDQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxDQUFDLFFBQVEsR0FBRztZQUNkLG9CQUFvQixFQUFFLE9BQU8sSUFBSSxDQUFDLFNBQVMsR0FBRztZQUM5QyxZQUFZLEVBQUUsT0FBTyxJQUFJLENBQUMsU0FBUyxHQUFHO1NBQ3ZDLENBQUE7UUFDRCxJQUFJLENBQUMsZUFBZSxHQUFHO1lBQ3JCLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRTtTQUNaLENBQUE7UUFDRCxJQUFJLE9BQU8sSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ2pFLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ3pCLENBQUM7SUFDSCxDQUFDO0lBRUQsYUFBYSxDQUFDLEdBQVU7UUFDdEIsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLFVBQVU7WUFBRSxPQUFPO1FBQ3JDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ3JCLEdBQUcsSUFBSSxDQUFDLGVBQWU7WUFDdkIsR0FBRztTQUNKLENBQUMsQ0FBQztRQUNILElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxFQUFFLEVBQUUsQ0FBQztZQUNwQixJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksT0FBTztnQkFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztpQkFDbEQsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLE1BQU07Z0JBQUUsUUFBUSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ2hFLENBQUM7SUFDSCxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxVQUFVO1lBQUUsT0FBTztRQUNyQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLFVBQVU7WUFBRSxPQUFPO1FBQ3JDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDOUIsQ0FBQzs4R0F4RFUsZUFBZTtrR0FBZixlQUFlLDJiQ2pCNUIsMDNCQWNRLHdpSERGVSxPQUFPLDJFQUFFLGdCQUFnQjs7MkZBSzlCLGVBQWU7a0JBUjNCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLENBQUM7OEJBTWpDLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTTtnQkFDRyxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLGVBQWU7c0JBQXhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ1N0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFNwaW5uZXJDb21wb25lbnQgfSBmcm9tICcuLi9zcGlubmVyL3NwaW5uZXIuY29tcG9uZW50JztcblxubGV0IG5leHRJZCA9IDA7ICAgIC8vIHVzZWQgdG8gZ2l2ZSB1bmlxdWUgaWRzIHRvIGlucHV0cyB1c2VkIGluIGh0bWxcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtYnV0dG9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW05nSWYsIE5nU3R5bGUsIFNwaW5uZXJDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuY3NzJ1xufSlcblxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGlkOiBzdHJpbmcgfCBudW1iZXI7XG4gIEBJbnB1dCgpIHR5cGU6IHN0cmluZztcbiAgQElucHV0KCkgc3RhdGU6IHN0cmluZztcbiAgQElucHV0KCkgc2l6ZTogc3RyaW5nO1xuICBASW5wdXQoKSB0ZXh0OiBzdHJpbmcgfCBudW1iZXI7XG4gIEBJbnB1dCgpIEltYWdlUGF0aDogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uUG9zaXRpb246IHN0cmluZztcbiAgQElucHV0KCkgaHJlZjogc3RyaW5nO1xuICBASW5wdXQoKSBocmVmVGFyZ2V0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGlzU3VibWl0OiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KCkgc2hvd1NwaW5uZXI6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAT3V0cHV0KCkgb25DbGlja0V2ZW50ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgb25Nb3VzZUluRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBvbk1vdXNlT3V0RXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgc3ZnU3R5bGUgPSB7fVxuICBldmVudEVtaXRPYmplY3QgPSB7fVxuICB1dWlkOiBudW1iZXIgPSBuZXh0SWQrKztcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy5zdmdTdHlsZSA9IHtcbiAgICAgICctd2Via2l0LW1hc2staW1hZ2UnOiBgdXJsKCR7dGhpcy5JbWFnZVBhdGh9KWAsXG4gICAgICAnbWFzay1pbWFnZSc6IGB1cmwoJHt0aGlzLkltYWdlUGF0aH0pYCxcbiAgICB9XG4gICAgdGhpcy5ldmVudEVtaXRPYmplY3QgPSB7XG4gICAgICBpZDogdGhpcy5pZFxuICAgIH1cbiAgICBpZiAoY2hhbmdlcyAmJiBjaGFuZ2VzWyd3aWR0aCddICYmIGNoYW5nZXNbJ3dpZHRoJ10uY3VycmVudFZhbHVlKSB7XG4gICAgICBjb25zb2xlLmxvZyh0aGlzLndpZHRoKVxuICAgIH1cbiAgfVxuXG4gIGJ1dHRvbkNsaWNrZWQoZXZ0OiBFdmVudCkge1xuICAgIGlmICh0aGlzLnN0YXRlID09IFwiZGlzYWJsZWRcIikgcmV0dXJuO1xuICAgIHRoaXMub25DbGlja0V2ZW50LmVtaXQoe1xuICAgICAgLi4udGhpcy5ldmVudEVtaXRPYmplY3QsXG4gICAgICBldnRcbiAgICB9KTtcbiAgICBpZiAodGhpcy5ocmVmICE9IFwiXCIpIHtcbiAgICAgIGlmICh0aGlzLmhyZWZUYXJnZXQgPT0gXCJibGFua1wiKSB3aW5kb3cub3Blbih0aGlzLmhyZWYpO1xuICAgICAgZWxzZSBpZiAodGhpcy5ocmVmVGFyZ2V0ID09IFwic2VsZlwiKSBsb2NhdGlvbi5ocmVmID0gdGhpcy5ocmVmO1xuICAgIH1cbiAgfVxuXG4gIG1vdXNlSW4oKSB7XG4gICAgaWYgKHRoaXMuc3RhdGUgPT0gXCJkaXNhYmxlZFwiKSByZXR1cm47XG4gICAgdGhpcy5vbk1vdXNlSW5FdmVudC5lbWl0KCk7XG4gIH1cblxuICBtb3VzZU91dCgpIHtcbiAgICBpZiAodGhpcy5zdGF0ZSA9PSBcImRpc2FibGVkXCIpIHJldHVybjtcbiAgICB0aGlzLm9uTW91c2VPdXRFdmVudC5lbWl0KCk7XG4gIH1cbn1cbiIsIjxidXR0b24gKGNsaWNrKT1cImJ1dHRvbkNsaWNrZWQoJGV2ZW50KVwiIGlkPVwic2EtYnV0dG9uLXt7dXVpZH19XCIgY2xhc3M9XCJidG4taGlkZVwiXG4gIFt0eXBlXT1cImlzU3VibWl0ID8gJ3N1Ym1pdCcgOiAnYnV0dG9uJ1wiPjwvYnV0dG9uPlxuPCEtLSAoY2xpY2spPVwiYnV0dG9uQ2xpY2tlZCgpXCIgb24gYnV0dG9uIGluc3RlYWQgb2YgbGFiZWwgYnJlYWtzIHdob2xlIHRoaW5nIC0tPlxuPGxhYmVsIGZvcj1cInNhLWJ1dHRvbi17e3V1aWR9fVwiIFtuZ1N0eWxlXT1cInsnd2lkdGgnOndpZHRofVwiIHJvbGU9XCJidXR0b25cIiB0YWJpbmRleD1cIjBcIiAobW91c2VlbnRlcik9XCJtb3VzZUluKClcIlxuICAobW91c2VsZWF2ZSk9XCJtb3VzZU91dCgpXCIgKGtleWRvd24uZW50ZXIpPVwiYnV0dG9uQ2xpY2tlZCgkZXZlbnQpXCIgZm9yPVwic2EtYnV0dG9uXCJcbiAgY2xhc3M9XCJzYS1idXR0b24ge3tzdGF0ZX19IHt7dHlwZX19IHt7c2l6ZX19XCI+XG4gIEBpZihzaG93U3Bpbm5lcil7XG4gIDxzYS1zcGlubmVyIFtkZWZhdWx0XT1cInRydWVcIj48L3NhLXNwaW5uZXI+XG4gIH1cbiAgPGRpdiBjbGFzcz1cInN2Zy1pY29uXCIgW3N0eWxlXT1cInN2Z1N0eWxlXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoaWNvblBvc2l0aW9uID09ICdsZWZ0JyB8fCBpY29uUG9zaXRpb24gPT0gJ2JvdGgnKSA/ICdibG9jaycgOiAnbm9uZSdcIj48L2Rpdj5cbiAge3t0ZXh0fX1cbiAgPGRpdiBjbGFzcz1cInN2Zy1pY29uXCIgW3N0eWxlXT1cInN2Z1N0eWxlXCJcbiAgICBbc3R5bGUuZGlzcGxheV09XCIoaWNvblBvc2l0aW9uID09ICdyaWdodCcgfHwgaWNvblBvc2l0aW9uID09ICdib3RoJykgPyAnYmxvY2snIDogJ25vbmUnXCI+PC9kaXY+XG48L2xhYmVsPiJdfQ==
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class CardBodyComponent {
|
|
4
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardBodyComponent, isStandalone: true, selector: "lib-card-body", ngImport: i0, template: "<p>card-body works!</p>\n", styles: [""] }); }
|
|
6
|
+
}
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardBodyComponent, decorators: [{
|
|
8
|
+
type: Component,
|
|
9
|
+
args: [{ selector: 'lib-card-body', standalone: true, imports: [], template: "<p>card-body works!</p>\n" }]
|
|
10
|
+
}] });
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1ib2R5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9jYXJkLWJvZHkvY2FyZC1ib2R5LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9jYXJkLWJvZHkvY2FyZC1ib2R5LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBUzFDLE1BQU0sT0FBTyxpQkFBaUI7OEdBQWpCLGlCQUFpQjtrR0FBakIsaUJBQWlCLHlFQ1Q5QiwyQkFDQTs7MkZEUWEsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNFLGVBQWUsY0FDYixJQUFJLFdBQ1AsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItY2FyZC1ib2R5JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWJvZHkuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vY2FyZC1ib2R5LmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIENhcmRCb2R5Q29tcG9uZW50IHtcblxufVxuIiwiPHA+Y2FyZC1ib2R5IHdvcmtzITwvcD5cbiJdfQ==
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class CardCustomHeaderComponent {
|
|
4
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardCustomHeaderComponent, isStandalone: true, selector: "sa-card-title-header", ngImport: i0, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6
|
+
}
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCustomHeaderComponent, decorators: [{
|
|
8
|
+
type: Component,
|
|
9
|
+
args: [{ selector: 'sa-card-title-header', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"sa-card-title-header\"><ng-content></ng-content></div>", styles: [".sa-card-title-header{display:flex;flex-direction:column-reverse;gap:var(--medium-20px)}.sa-card-custom-header-container{display:flex;gap:.625rem;align-items:center}.sa-card-titleIcon{display:flex;align-items:center;margin-left:auto}.sa-card-title-subtitle-container{display:flex;flex-direction:column;gap:.188rem}.sa-card-subtitle{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.sa-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px}\n"] }]
|
|
10
|
+
}] });
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1jdXN0b20taGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9jYXJkLWN1c3RvbS1oZWFkZXIvY2FyZC1jdXN0b20taGVhZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9jYXJkLWN1c3RvbS1oZWFkZXIvY2FyZC1jdXN0b20taGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVTdELE1BQU0sT0FBTyx5QkFBeUI7OEdBQXpCLHlCQUF5QjtrR0FBekIseUJBQXlCLGdGQ1Z0QyxxRUFBaUU7OzJGRFVwRCx5QkFBeUI7a0JBUnJDLFNBQVM7K0JBQ0Usc0JBQXNCLGNBQ3BCLElBQUksV0FDUCxFQUFFLGlCQUdJLGlCQUFpQixDQUFDLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLWNhcmQtdGl0bGUtaGVhZGVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlVXJsOiAnLi9jYXJkLWN1c3RvbS1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vY2FyZC1jdXN0b20taGVhZGVyLmNvbXBvbmVudC5jc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50IHtcblxufVxuIiwiPGRpdiBjbGFzcz1cInNhLWNhcmQtdGl0bGUtaGVhZGVyXCI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PjwvZGl2PiJdfQ==
|
|
@@ -2,15 +2,21 @@ import { CommonModule } from '@angular/common';
|
|
|
2
2
|
import { Component, Input } from '@angular/core';
|
|
3
3
|
import { ChipsComponent } from '../chips/chips.component';
|
|
4
4
|
import { IconComponent } from '../icon/icon.component';
|
|
5
|
+
import { AvatarComponent } from "../avatar/avatar.component";
|
|
5
6
|
import * as i0 from "@angular/core";
|
|
6
7
|
import * as i1 from "@angular/common";
|
|
7
8
|
export class CardComponent {
|
|
8
9
|
constructor() {
|
|
9
10
|
this.title = '';
|
|
11
|
+
this.showCardHeader = false;
|
|
12
|
+
this.showCardBody = false;
|
|
13
|
+
this.customWrapperClass = '';
|
|
10
14
|
this.chip = null;
|
|
11
15
|
this.body = '';
|
|
12
16
|
this.avatar = '';
|
|
13
17
|
this.icon = '';
|
|
18
|
+
this.subtitle = '';
|
|
19
|
+
this.logoIcon = '';
|
|
14
20
|
this.column = false;
|
|
15
21
|
this.cardStyles = {};
|
|
16
22
|
}
|
|
@@ -20,14 +26,23 @@ export class CardComponent {
|
|
|
20
26
|
}
|
|
21
27
|
}
|
|
22
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", chip: "chip", body: "body", avatar: "avatar", icon: "icon", iconSize: "iconSize", width: "width", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"column ? 'column' : ''\">\n <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <
|
|
29
|
+
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", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", avatarSize: "avatarSize", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", 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 ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\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 (showCardBody && 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\"></sa-chip>\n }\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n </div>\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;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;width:200px}.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}\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"] }] }); }
|
|
24
30
|
}
|
|
25
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
26
32
|
type: Component,
|
|
27
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"column ? 'column' : ''\">\n <div class=\"\" [ngClass]=\"avatar ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <
|
|
33
|
+
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 ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\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 (showCardBody && 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\"></sa-chip>\n }\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n\n </div>\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;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;width:200px}.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}\n"] }]
|
|
28
34
|
}], propDecorators: { title: [{
|
|
29
35
|
type: Input,
|
|
30
36
|
args: ['title']
|
|
37
|
+
}], showCardHeader: [{
|
|
38
|
+
type: Input,
|
|
39
|
+
args: ['showCardHeader']
|
|
40
|
+
}], showCardBody: [{
|
|
41
|
+
type: Input,
|
|
42
|
+
args: ['showCardBody']
|
|
43
|
+
}], customWrapperClass: [{
|
|
44
|
+
type: Input,
|
|
45
|
+
args: ['customWrapperClass']
|
|
31
46
|
}], chip: [{
|
|
32
47
|
type: Input,
|
|
33
48
|
args: ['chip']
|
|
@@ -37,12 +52,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
37
52
|
}], avatar: [{
|
|
38
53
|
type: Input,
|
|
39
54
|
args: ['avatar']
|
|
55
|
+
}], avatarSize: [{
|
|
56
|
+
type: Input,
|
|
57
|
+
args: ['avatarSize']
|
|
40
58
|
}], icon: [{
|
|
41
59
|
type: Input,
|
|
42
60
|
args: ['icon']
|
|
43
61
|
}], iconSize: [{
|
|
44
62
|
type: Input,
|
|
45
63
|
args: ['iconSize']
|
|
64
|
+
}], subtitle: [{
|
|
65
|
+
type: Input,
|
|
66
|
+
args: ['subtitle']
|
|
67
|
+
}], logoIcon: [{
|
|
68
|
+
type: Input,
|
|
69
|
+
args: ['logoIcon']
|
|
46
70
|
}], width: [{
|
|
47
71
|
type: Input,
|
|
48
72
|
args: ['width']
|
|
@@ -50,4 +74,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
50
74
|
type: Input,
|
|
51
75
|
args: ['column']
|
|
52
76
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUUxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDOzs7QUFTN0QsTUFBTSxPQUFPLGFBQWE7SUFQMUI7UUFRa0IsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNWLG1CQUFjLEdBQVksS0FBSyxDQUFDO1FBQ2xDLGlCQUFZLEdBQVksS0FBSyxDQUFDO1FBQ3hCLHVCQUFrQixHQUFXLEVBQUUsQ0FBQztRQUM5QyxTQUFJLEdBQXlCLElBQUksQ0FBQztRQUNsQyxTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2hCLFdBQU0sR0FBVyxFQUFFLENBQUM7UUFHdEIsU0FBSSxHQUFXLEVBQUUsQ0FBQztRQUdkLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFDdEIsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQUd4QixXQUFNLEdBQVksS0FBSyxDQUFDO1FBRXpDLGVBQVUsR0FBUSxFQUFFLENBQUM7S0FPdEI7SUFMQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsWUFBWSxFQUFFLENBQUM7WUFDbkMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsR0FBRyxPQUFPLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxZQUFZLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsWUFBWSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsWUFBWSxHQUFHLEdBQUcsQ0FBQztRQUN4SixDQUFDO0lBQ0gsQ0FBQzs4R0F6QlUsYUFBYTtrR0FBYixhQUFhLHdaQ2QxQixxbkRBdUNNLHVtREQ3Qk0sWUFBWSxrTkFBRSxjQUFjLG1NQUFFLGFBQWEsb0lBQUUsZUFBZTs7MkZBSTNELGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsU0FBUyxjQUNQLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxjQUFjLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQzs4QkFLdkQsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNXLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNBLFlBQVk7c0JBQWxDLEtBQUs7dUJBQUMsY0FBYztnQkFDUSxrQkFBa0I7c0JBQTlDLEtBQUs7dUJBQUMsb0JBQW9CO2dCQUNaLElBQUk7c0JBQWxCLEtBQUs7dUJBQUMsTUFBTTtnQkFDRSxJQUFJO3NCQUFsQixLQUFLO3VCQUFDLE1BQU07Z0JBQ0ksTUFBTTtzQkFBdEIsS0FBSzt1QkFBQyxRQUFRO2dCQUNNLFVBQVU7c0JBQTlCLEtBQUs7dUJBQUMsWUFBWTtnQkFFSixJQUFJO3NCQUFsQixLQUFLO3VCQUFDLE1BQU07Z0JBQ00sUUFBUTtzQkFBMUIsS0FBSzt1QkFBQyxVQUFVO2dCQUVFLFFBQVE7c0JBQTFCLEtBQUs7dUJBQUMsVUFBVTtnQkFDRSxRQUFRO3NCQUExQixLQUFLO3VCQUFDLFVBQVU7Z0JBRUQsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNHLE1BQU07c0JBQXRCLEtBQUs7dUJBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDaGlwc0NvbXBvbmVudCB9IGZyb20gJy4uL2NoaXBzL2NoaXBzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDaGlwSW50ZXJmYWNlIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9jaGlwLWludGVyZmFjZSc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBdmF0YXJDb21wb25lbnQgfSBmcm9tIFwiLi4vYXZhdGFyL2F2YXRhci5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtY2FyZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIENoaXBzQ29tcG9uZW50LCBJY29uQ29tcG9uZW50LCBBdmF0YXJDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9jYXJkLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIENhcmRDb21wb25lbnQge1xuICBASW5wdXQoJ3RpdGxlJykgdGl0bGU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoJ3Nob3dDYXJkSGVhZGVyJykgc2hvd0NhcmRIZWFkZXI6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCdzaG93Q2FyZEJvZHknKSBzaG93Q2FyZEJvZHk6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCdjdXN0b21XcmFwcGVyQ2xhc3MnKSBjdXN0b21XcmFwcGVyQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoJ2NoaXAnKSBjaGlwOiBDaGlwSW50ZXJmYWNlIHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgnYm9keScpIGJvZHk6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoJ2F2YXRhcicpIGF2YXRhcjogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgnYXZhdGFyU2l6ZScpIGF2YXRhclNpemU6IHN0cmluZztcblxuICBASW5wdXQoJ2ljb24nKSBpY29uOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCdpY29uU2l6ZScpIGljb25TaXplOiBzdHJpbmc7XG5cbiAgQElucHV0KCdzdWJ0aXRsZScpIHN1YnRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCdsb2dvSWNvbicpIGxvZ29JY29uOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoJ3dpZHRoJykgd2lkdGg6IHN0cmluZyB8IG51bWJlcjtcbiAgQElucHV0KCdjb2x1bW4nKSBjb2x1bW46IGJvb2xlYW4gPSBmYWxzZTtcblxuICBjYXJkU3R5bGVzOiBhbnkgPSB7fTtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXNbJ3dpZHRoJ10/LmN1cnJlbnRWYWx1ZSkge1xuICAgICAgdGhpcy5jYXJkU3R5bGVzWyd3aWR0aCddID0gdHlwZW9mIGNoYW5nZXNbJ3dpZHRoJ10/LmN1cnJlbnRWYWx1ZSA9PT0gJ3N0cmluZycgPyBjaGFuZ2VzWyd3aWR0aCddPy5jdXJyZW50VmFsdWUgOiBjaGFuZ2VzWyd3aWR0aCddPy5jdXJyZW50VmFsdWUgKyAnJSc7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2EtY2FyZFwiIFtuZ1N0eWxlXT1cImNhcmRTdHlsZXNcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC13cmFwcGVyXCIgW25nQ2xhc3NdPVwiW2NvbHVtbiA/ICdjb2x1bW4nIDogJycsIGN1c3RvbVdyYXBwZXJDbGFzc11cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIlwiIFtuZ0NsYXNzXT1cImF2YXRhciA/ICdzYS1jYXJkLWltZycgOiAnc2EtY2FyZC1pY29uJ1wiPlxuICAgICAgICAgICAgQGlmKGF2YXRhcil7XG4gICAgICAgICAgICA8c2EtYXZhdGFyIFtpbWFnZVBhdGhdPVwiYXZhdGFyXCIgW3NpemVdPVwiYXZhdGFyU2l6ZVwiPjwvc2EtYXZhdGFyPlxuICAgICAgICAgICAgfUBlbHNlIGlmKGljb24pe1xuICAgICAgICAgICAgPHNhLWljb24gW2ljb25dPVwiaWNvblwiIFtzaXplXT1cImljb25TaXplXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgfUBlbHNle1xuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2EtY2FyZC1pY29uXCI+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgQGlmKGNvbHVtbil7XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzYS1jYXJkLXRpdGxlLWFjdGlvbnNcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC1jb250YWluZXJcIiBbbmdDbGFzc109XCJzaG93Q2FyZEhlYWRlciA/ICdzYS1jYXJkLWN1c3RvbS1jb250YWluZXInIDogJydcIj5cbiAgICAgICAgICAgIEBpZihzaG93Q2FyZEhlYWRlcil7XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzYS1jYXJkLXRpdGxlLWhlYWRlclwiPjwvbmctY29udGVudD5cbiAgICAgICAgICAgIEBpZiAoc2hvd0NhcmRCb2R5ICYmIGJvZHkpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjdXN0b20tZGl2aWRlclwiPjwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgQGVsc2UgaWYodGl0bGUpe1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtdGl0bGUtY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtdGl0bGVcIj57e3RpdGxlfX08L2Rpdj5cbiAgICAgICAgICAgICAgICBAaWYoY2hpcCl7XG4gICAgICAgICAgICAgICAgPHNhLWNoaXAgW3RleHRdPVwiY2hpcC50ZXh0XCIgW3R5cGVdPVwiY2hpcC50eXBlXCIgW3N0YXRlXT1cImNoaXAuc3RhdGVcIj48L3NhLWNoaXA+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNhLWNhcmQtdGl0bGUtYWN0aW9uc1wiPjwvbmctY29udGVudD5cblxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBAaWYoc2hvd0NhcmRCb2R5ICYmIGJvZHkpe1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtYm9keVwiPlxuICAgICAgICAgICAgICAgIHt7Ym9keX19XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNhLWNhcmQtZm9vdGVyLWFjdGlvbnNcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class GuideCardComponent {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.title = '';
|
|
6
|
+
this.steps = [];
|
|
7
|
+
}
|
|
8
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
+
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{max-width:47.5rem;margin:0 auto;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:2.625rem}.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:.5rem;height:.5rem;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 }); }
|
|
10
|
+
}
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
|
|
12
|
+
type: Component,
|
|
13
|
+
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{max-width:47.5rem;margin:0 auto;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:2.625rem}.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:.5rem;height:.5rem;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"] }]
|
|
14
|
+
}], propDecorators: { title: [{
|
|
15
|
+
type: Input
|
|
16
|
+
}], steps: [{
|
|
17
|
+
type: Input
|
|
18
|
+
}] } });
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3VpZGUtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvZ3VpZGUtY2FyZC9ndWlkZS1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9ndWlkZS1jYXJkL2d1aWRlLWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBYXBFLE1BQU0sT0FBTyxrQkFBa0I7SUFSL0I7UUFTVyxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLFVBQUssR0FBZ0IsRUFBRSxDQUFBO0tBR2pDOzhHQUxZLGtCQUFrQjtrR0FBbEIsa0JBQWtCLHFIQ2IvQixreEJBdUJNOzsyRkRWTyxrQkFBa0I7a0JBUjlCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUCxFQUFFLGlCQUdJLGlCQUFpQixDQUFDLElBQUk7OEJBRzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgR3VpZGVTdGVwIH0gZnJvbSAnLi4vLi4vLi4vaW50ZXJmYWNlcy9ndWlkZS1jYXJkLWludGVyZmFjZSc7XG5cblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYS1ndWlkZS1jYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlVXJsOiAnLi9ndWlkZS1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2d1aWRlLWNhcmQuY29tcG9uZW50LmNzcycsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgR3VpZGVDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBzdGVwczogR3VpZGVTdGVwW10gPSBbXVxuXG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJndWlkZS1jb250YWluZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZ3VpZGUtaGVhZGVyXCI+XG4gICAgICAgIDxwIGNsYXNzPVwiZ3VpZGUtaGVhZGVyLXRpdGxlXCI+e3sgdGl0bGUgfX08L3A+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImd1aWRlLWNvbnRlbnRcIj5cbiAgICAgICAgQGZvciAoc3RlcCBvZiBzdGVwczsgdHJhY2sgc3RlcDsgbGV0IGxhc3QgPSAkbGFzdCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtaW5kaWNhdG9yXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtY2lyY2xlXCI+PC9kaXY+XG5cbiAgICAgICAgICAgICAgICBAaWYgKCFsYXN0KSB7XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtbGluZVwiPjwvZGl2PlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN0ZXAtY29udGVudFwiPlxuICAgICAgICAgICAgICAgIDxwIGNsYXNzPVwic3RlcC10aXRsZVwiPnt7IHN0ZXAudGl0bGUgfX08L3A+XG4gICAgICAgICAgICAgICAgQGlmIChzdGVwPy5kZXNjcmlwdGlvbikge1xuICAgICAgICAgICAgICAgIDxwIGNsYXNzPVwic3RlcC1kZXNjcmlwdGlvblwiPnt7IHN0ZXAuZGVzY3JpcHRpb24gfX08L3A+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import { CardComponent } from '../card/card.component';
|
|
3
|
+
import { IconComponent } from '../icon/icon.component';
|
|
4
|
+
import { CardCustomHeaderComponent } from '../card/card-custom-header/card-custom-header.component';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export class CardCarouselComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.cards = [];
|
|
9
|
+
this.interval = 5000;
|
|
10
|
+
this.autoPlay = true;
|
|
11
|
+
this.showNavigationArrows = true;
|
|
12
|
+
this.showIndicators = true;
|
|
13
|
+
this.showBrandFooter = true;
|
|
14
|
+
this.visibleLogos = [];
|
|
15
|
+
this.currentIndex = 0;
|
|
16
|
+
}
|
|
17
|
+
ngOnInit() {
|
|
18
|
+
this.updateVisibleLogos();
|
|
19
|
+
if (this.autoPlay) {
|
|
20
|
+
this.startTimer();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
ngOnDestroy() {
|
|
24
|
+
this.stopTimer();
|
|
25
|
+
}
|
|
26
|
+
startTimer() {
|
|
27
|
+
this.stopTimer();
|
|
28
|
+
this.timer = setInterval(() => {
|
|
29
|
+
this.next();
|
|
30
|
+
}, this.interval);
|
|
31
|
+
}
|
|
32
|
+
stopTimer() {
|
|
33
|
+
if (this.timer) {
|
|
34
|
+
clearInterval(this.timer);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
resetTimer() {
|
|
38
|
+
clearInterval(this.timer);
|
|
39
|
+
if (this.autoPlay) {
|
|
40
|
+
this.startTimer();
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
selectCard(index) {
|
|
44
|
+
this.currentIndex = index;
|
|
45
|
+
this.resetTimer();
|
|
46
|
+
this.updateVisibleLogos();
|
|
47
|
+
}
|
|
48
|
+
next() {
|
|
49
|
+
this.currentIndex = (this.currentIndex + 1) % this.cards.length;
|
|
50
|
+
this.resetTimer();
|
|
51
|
+
this.updateVisibleLogos();
|
|
52
|
+
}
|
|
53
|
+
prev() {
|
|
54
|
+
this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
|
|
55
|
+
this.resetTimer();
|
|
56
|
+
this.updateVisibleLogos();
|
|
57
|
+
}
|
|
58
|
+
updateVisibleLogos() {
|
|
59
|
+
this.visibleLogos = [];
|
|
60
|
+
for (let i = -1; i <= 4; i++) {
|
|
61
|
+
const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
|
|
62
|
+
this.visibleLogos.push({
|
|
63
|
+
...this.cards[index],
|
|
64
|
+
index: index
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
+
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 <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 20px;width:100%;min-height:32px}.dots{display:inline-flex;gap:4px;align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:4px;gap:12px;margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:6px;height:6px;border-radius:50%;background-color:var(--grey-200);margin:0 5px;cursor:pointer}.dot.active{background-color:var(--primary-500);width:8px;height:8px}.brand-logos-container{width:500px;margin-top:2rem;overflow:hidden;max-width:500px}.brand-logos{display:flex;gap:1.5rem;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:2rem;max-height:2rem;min-height:2rem}.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", "customWrapperClass", "chip", "body", "avatar", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "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 }); }
|
|
70
|
+
}
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
72
|
+
type: Component,
|
|
73
|
+
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 <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 20px;width:100%;min-height:32px}.dots{display:inline-flex;gap:4px;align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:4px;gap:12px;margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:6px;height:6px;border-radius:50%;background-color:var(--grey-200);margin:0 5px;cursor:pointer}.dot.active{background-color:var(--primary-500);width:8px;height:8px}.brand-logos-container{width:500px;margin-top:2rem;overflow:hidden;max-width:500px}.brand-logos{display:flex;gap:1.5rem;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:2rem;max-height:2rem;min-height:2rem}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
|
|
74
|
+
}], propDecorators: { cards: [{
|
|
75
|
+
type: Input
|
|
76
|
+
}], interval: [{
|
|
77
|
+
type: Input
|
|
78
|
+
}], autoPlay: [{
|
|
79
|
+
type: Input
|
|
80
|
+
}], showNavigationArrows: [{
|
|
81
|
+
type: Input
|
|
82
|
+
}], showIndicators: [{
|
|
83
|
+
type: Input
|
|
84
|
+
}], showBrandFooter: [{
|
|
85
|
+
type: Input
|
|
86
|
+
}] } });
|
|
87
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBYSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLHlEQUF5RCxDQUFDOztBQVlwRyxNQUFNLE9BQU8scUJBQXFCO0lBUmxDO1FBU1csVUFBSyxHQUFtQixFQUFFLENBQUM7UUFDM0IsYUFBUSxHQUFXLElBQUksQ0FBQztRQUN4QixhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3pCLHlCQUFvQixHQUFZLElBQUksQ0FBQztRQUNyQyxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUMvQixvQkFBZSxHQUFZLElBQUksQ0FBQztRQUV6QyxpQkFBWSxHQUF5QyxFQUFFLENBQUM7UUFFeEQsaUJBQVksR0FBVyxDQUFDLENBQUM7S0ErRDFCO0lBNURDLFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUMxQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDcEIsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFHRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUM1QixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDZCxDQUFDLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDZixhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVCLENBQUM7SUFDSCxDQUFDO0lBRUQsVUFBVTtRQUNSLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ3BCLENBQUM7SUFDSCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDMUIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7UUFDaEUsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUM7UUFDcEYsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFlBQVksR0FBRyxFQUFFLENBQUM7UUFDdkIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDN0IsTUFBTSxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDO1lBQzlFLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO2dCQUNyQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO2dCQUNwQixLQUFLLEVBQUUsS0FBSzthQUNiLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDOzhHQXhFVSxxQkFBcUI7a0dBQXJCLHFCQUFxQix3UUNmbEMsOHdFQW9ETSxna0NEMUNNLGFBQWEsc09BQUUsYUFBYSxvSUFBRSx5QkFBeUI7OzJGQUt0RCxxQkFBcUI7a0JBUmpDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRSxhQUFhLEVBQUUseUJBQXlCLENBQUMsaUJBR25ELGlCQUFpQixDQUFDLElBQUk7OEJBRzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT25EZXN0cm95LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FyZENvbXBvbmVudCB9IGZyb20gJy4uL2NhcmQvY2FyZC5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ2FyZEN1c3RvbUhlYWRlckNvbXBvbmVudCB9IGZyb20gJy4uL2NhcmQvY2FyZC1jdXN0b20taGVhZGVyL2NhcmQtY3VzdG9tLWhlYWRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ2FyZENhcm91c2VsIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9jYXJkLWNhcm91c2VsLWludGVyZmFjZSc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtY2FyZC1jYXJvdXNlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDYXJkQ29tcG9uZW50LCBJY29uQ29tcG9uZW50LCBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQtY2Fyb3VzZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ2Fyb3VzZWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIGNhcmRzOiBDYXJkQ2Fyb3VzZWxbXSA9IFtdO1xuICBASW5wdXQoKSBpbnRlcnZhbDogbnVtYmVyID0gNTAwMDtcbiAgQElucHV0KCkgYXV0b1BsYXk6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBzaG93TmF2aWdhdGlvbkFycm93czogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIHNob3dJbmRpY2F0b3JzOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgc2hvd0JyYW5kRm9vdGVyOiBib29sZWFuID0gdHJ1ZTtcblxuICB2aXNpYmxlTG9nb3M6IChDYXJkQ2Fyb3VzZWwgJiB7IGluZGV4OiBudW1iZXIgfSlbXSA9IFtdO1xuXG4gIGN1cnJlbnRJbmRleDogbnVtYmVyID0gMDtcbiAgcHJpdmF0ZSB0aW1lcjogYW55O1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgaWYgKHRoaXMuYXV0b1BsYXkpIHtcbiAgICAgIHRoaXMuc3RhcnRUaW1lcigpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuc3RvcFRpbWVyKCk7XG4gIH1cblxuXG4gIHN0YXJ0VGltZXIoKSB7XG4gICAgdGhpcy5zdG9wVGltZXIoKTtcbiAgICB0aGlzLnRpbWVyID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgdGhpcy5uZXh0KCk7XG4gICAgfSwgdGhpcy5pbnRlcnZhbCk7XG4gIH1cblxuICBzdG9wVGltZXIoKSB7XG4gICAgaWYgKHRoaXMudGltZXIpIHtcbiAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy50aW1lcik7XG4gICAgfVxuICB9XG5cbiAgcmVzZXRUaW1lcigpIHtcbiAgICBjbGVhckludGVydmFsKHRoaXMudGltZXIpO1xuICAgIGlmICh0aGlzLmF1dG9QbGF5KSB7XG4gICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9XG4gIH1cblxuICBzZWxlY3RDYXJkKGluZGV4OiBudW1iZXIpIHtcbiAgICB0aGlzLmN1cnJlbnRJbmRleCA9IGluZGV4O1xuICAgIHRoaXMucmVzZXRUaW1lcigpO1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gIH1cblxuICBuZXh0KCkge1xuICAgIHRoaXMuY3VycmVudEluZGV4ID0gKHRoaXMuY3VycmVudEluZGV4ICsgMSkgJSB0aGlzLmNhcmRzLmxlbmd0aDtcbiAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICB0aGlzLnVwZGF0ZVZpc2libGVMb2dvcygpO1xuICB9XG5cbiAgcHJldigpIHtcbiAgICB0aGlzLmN1cnJlbnRJbmRleCA9ICh0aGlzLmN1cnJlbnRJbmRleCAtIDEgKyB0aGlzLmNhcmRzLmxlbmd0aCkgJSB0aGlzLmNhcmRzLmxlbmd0aDtcbiAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICB0aGlzLnVwZGF0ZVZpc2libGVMb2dvcygpO1xuICB9XG5cbiAgdXBkYXRlVmlzaWJsZUxvZ29zKCkge1xuICAgIHRoaXMudmlzaWJsZUxvZ29zID0gW107XG4gICAgZm9yIChsZXQgaSA9IC0xOyBpIDw9IDQ7IGkrKykge1xuICAgICAgY29uc3QgaW5kZXggPSAodGhpcy5jdXJyZW50SW5kZXggKyBpICsgdGhpcy5jYXJkcy5sZW5ndGgpICUgdGhpcy5jYXJkcy5sZW5ndGg7XG4gICAgICB0aGlzLnZpc2libGVMb2dvcy5wdXNoKHtcbiAgICAgICAgLi4udGhpcy5jYXJkc1tpbmRleF0sXG4gICAgICAgIGluZGV4OiBpbmRleFxuICAgICAgfSk7XG4gICAgfVxuICB9XG59XG4iLCI8IS0tIGNhcmQtY2Fyb3VzZWwuY29tcG9uZW50Lmh0bWwgLS0+XG48ZGl2IGNsYXNzPVwiY2Fyb3VzZWwtY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcm91c2VsLXRvcC13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250cm9sc1wiPlxuICAgICAgICAgICAgQGlmIChzaG93SW5kaWNhdG9ycykge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRvdHNcIj5cbiAgICAgICAgICAgICAgICBAZm9yIChjYXJkIG9mIGNhcmRzOyB0cmFjayBjYXJkLmlkOyBsZXQgaSA9ICRpbmRleCkge1xuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZG90XCIgW2NsYXNzLmFjdGl2ZV09XCJpID09PSBjdXJyZW50SW5kZXhcIiAoY2xpY2spPVwic2VsZWN0Q2FyZChpKVwiPjwvc3Bhbj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBpZiAoc2hvd05hdmlnYXRpb25BcnJvd3MpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhcnJvdy1jb250cm9sc1wiPlxuICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cIidsZWZ0Q2hldnJvbkNpcmNsZSdcIiBzaXplPVwiMjRcIiAoY2xpY2spPVwicHJldigpXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cIidyaWdodENoZXZyb25DaXJjbGUnXCIgc2l6ZT1cIjI0XCIgKGNsaWNrKT1cIm5leHQoKVwiPjwvc2EtaWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxzYS1jYXJkIFtjdXN0b21XcmFwcGVyQ2xhc3NdPVwiJ3NhLWNhcmQtY3VzdG9tLXdyYXBwZXInXCIgW3dpZHRoXT1cIicyNC4wNjNyZW0nXCIgW2NvbHVtbl09XCJmYWxzZVwiXG4gICAgICAgICAgICAgICAgW3Nob3dDYXJkSGVhZGVyXT1cInRydWVcIiBbc2hvd0NhcmRCb2R5XT1cInRydWVcIiBbYm9keV09XCJjYXJkc1tjdXJyZW50SW5kZXhdLmJvZHlcIj5cbiAgICAgICAgICAgICAgICA8c2EtY2FyZC10aXRsZS1oZWFkZXI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLWN1c3RvbS1oZWFkZXItY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8c2EtaWNvbiBbaWNvbl09XCJjYXJkc1tjdXJyZW50SW5kZXhdLmF2YXRhckljb25cIiBzaXplPVwiNTBcIj48L3NhLWljb24+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC10aXRsZS1zdWJ0aXRsZS1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC1jdXN0b20tdGl0bGVcIj57eyBjYXJkc1tjdXJyZW50SW5kZXhdLnRpdGxlIH19PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtc3VidGl0bGVcIj57eyBjYXJkc1tjdXJyZW50SW5kZXhdLnN1YnRpdGxlIH19PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXRpdGxlSWNvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cImNhcmRzW2N1cnJlbnRJbmRleF0ubG9nb0ljb25cIiBjdXN0b21DbGFzcz1cImxvZ28tc3R5bGVcIj48L3NhLWljb24+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9zYS1jYXJkLXRpdGxlLWhlYWRlcj5cbiAgICAgICAgICAgIDwvc2EtY2FyZD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICBAaWYgKHNob3dCcmFuZEZvb3Rlcikge1xuICAgIDxkaXYgY2xhc3M9XCJicmFuZC1sb2dvcy1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJyYW5kLWxvZ29zXCI+XG4gICAgICAgICAgICBAZm9yIChsb2dvIG9mIHZpc2libGVMb2dvczsgdHJhY2sgJGluZGV4KSB7XG4gICAgICAgICAgICA8c2EtaWNvbiBbaWNvbl09XCJsb2dvLmxvZ29JY29uXCIgW2NsYXNzLmFjdGl2ZV09XCIkaW5kZXggPT09IDFcIiAoY2xpY2spPVwic2VsZWN0Q2FyZChsb2dvLmluZGV4KVwiXG4gICAgICAgICAgICAgICAgW2N1c3RvbUNsYXNzXT1cIidsb2dvLXN0eWxlJ1wiPlxuICAgICAgICAgICAgPC9zYS1pY29uPlxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICB9XG5cblxuXG48L2Rpdj4iXX0=
|