@sarasanalytics-com/design-system 0.0.104 → 0.0.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -11,8 +11,11 @@ export class ToastComponent {
|
|
|
11
11
|
constructor() {
|
|
12
12
|
this.finishPercentage = -1;
|
|
13
13
|
this.statusIcon = '';
|
|
14
|
+
this.toastCloseIcon = 'closeOutlined';
|
|
14
15
|
this.filled = true;
|
|
15
16
|
this.width = '';
|
|
17
|
+
this.toastIconSize = '24';
|
|
18
|
+
this.toastCloseIconSize = '24';
|
|
16
19
|
this.toastEvent = new EventEmitter();
|
|
17
20
|
this.firstButton = new EventEmitter();
|
|
18
21
|
this.secondButton = new EventEmitter();
|
|
@@ -46,11 +49,11 @@ export class ToastComponent {
|
|
|
46
49
|
});
|
|
47
50
|
}
|
|
48
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", 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\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" size=\"
|
|
52
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
|
|
50
53
|
}
|
|
51
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, decorators: [{
|
|
52
55
|
type: Component,
|
|
53
|
-
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" size=\"
|
|
56
|
+
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
54
57
|
}], propDecorators: { finishPercentage: [{
|
|
55
58
|
type: Input
|
|
56
59
|
}], heading: [{
|
|
@@ -59,6 +62,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
59
62
|
type: Input
|
|
60
63
|
}], statusIcon: [{
|
|
61
64
|
type: Input
|
|
65
|
+
}], toastCloseIcon: [{
|
|
66
|
+
type: Input
|
|
62
67
|
}], status: [{
|
|
63
68
|
type: Input
|
|
64
69
|
}], firstButtonName: [{
|
|
@@ -71,6 +76,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
71
76
|
type: Input
|
|
72
77
|
}], width: [{
|
|
73
78
|
type: Input
|
|
79
|
+
}], toastIconSize: [{
|
|
80
|
+
type: Input
|
|
81
|
+
}], toastCloseIconSize: [{
|
|
82
|
+
type: Input
|
|
74
83
|
}], toastEvent: [{
|
|
75
84
|
type: Output
|
|
76
85
|
}], firstButton: [{
|
|
@@ -97,4 +106,4 @@ const toastInfo = {
|
|
|
97
106
|
color: ''
|
|
98
107
|
}
|
|
99
108
|
};
|
|
100
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
109
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi90b2FzdC90b2FzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3RvYXN0L3RvYXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUNsRixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2pELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7QUFTdkQsTUFBTSxPQUFPLGNBQWM7SUFQM0I7UUFRVyxxQkFBZ0IsR0FBVyxDQUFDLENBQUMsQ0FBQztRQUc5QixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBQ3hCLG1CQUFjLEdBQVcsZUFBZSxDQUFDO1FBS3pDLFdBQU0sR0FBWSxJQUFJLENBQUM7UUFDdkIsVUFBSyxHQUFvQixFQUFFLENBQUM7UUFDNUIsa0JBQWEsR0FBVyxJQUFJLENBQUM7UUFDN0IsdUJBQWtCLEdBQVcsSUFBSSxDQUFDO1FBRWpDLGVBQVUsR0FBOEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMzRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDakMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FB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QVM7S0FDakI7SUFDRCxTQUFTLEVBQUU7UUFDVCxJQUFJLEVBQUUsb0JBQW9CO1FBQzFCLE9BQU8sRUFBRSxTQUFTO1FBQ2xCLEtBQUssRUFBRSxTQUFTO0tBQ2pCO0lBQ0QsU0FBUyxFQUFFO1FBQ1QsSUFBSSxFQUFFLHNCQUFzQjtRQUM1QixPQUFPLEVBQUUsRUFBRTtRQUNYLEtBQUssRUFBRSxFQUFFO0tBQ1Y7Q0FDRixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0SWNvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xyXG5pbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzYS10b2FzdCcsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBCdXR0b25Db21wb25lbnQsIEljb25Db21wb25lbnQsIEJ1dHRvbkNvbXBvbmVudCwgTWF0SWNvbiwgTmdJZl0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RvYXN0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vdG9hc3QuY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvYXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcclxuICBASW5wdXQoKSBmaW5pc2hQZXJjZW50YWdlOiBudW1iZXIgPSAtMTtcclxuICBASW5wdXQoKSBoZWFkaW5nOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc3ViSGVhZGluZzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHN0YXR1c0ljb246IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIHRvYXN0Q2xvc2VJY29uOiBzdHJpbmcgPSAnY2xvc2VPdXRsaW5lZCc7XHJcbiAgQElucHV0KCkgc3RhdHVzOiAnc3VjY2VzcycgfCAnZmFpbHVyZScgfCAnY2F1dGlvbicgfCAncG9zaXRpdmUnIHwgJ25lZ2F0aXZlJyB8ICd0ZW50YXRpdmUnO1xyXG4gIEBJbnB1dCgpIGZpcnN0QnV0dG9uTmFtZTogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHNlY29uZEJ1dHRvbk5hbWU6IHN0cmluZztcclxuICBASW5wdXQoKSBjbG9zYWJsZTogYm9vbGVhbjtcclxuICBASW5wdXQoKSBmaWxsZWQ6IGJvb2xlYW4gPSB0cnVlO1xyXG4gIEBJbnB1dCgpIHdpZHRoOiBudW1iZXIgfCBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSB0b2FzdEljb25TaXplOiBzdHJpbmcgPSAnMjQnO1xyXG4gIEBJbnB1dCgpIHRvYXN0Q2xvc2VJY29uU2l6ZTogc3RyaW5nID0gJzI0JztcclxuXHJcbiAgQE91dHB1dCgpIHRvYXN0RXZlbnQ6IEV2ZW50RW1pdHRlcjxJVG9hc3RFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGZpcnN0QnV0dG9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBzZWNvbmRCdXR0b24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGNsb3NlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcblxyXG4gIHRvYXN0U3R5bGVzID0geyBiYWNrZ3JvdW5kQ29sb3I6ICd0cmFuc3BhcmVudCcsIGNvbG9yOiAnJywgd2lkdGg6IHRoaXMud2lkdGggKyAnJScgfTtcclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xyXG4gICAgaWYgKGNoYW5nZXMgJiYgKGNoYW5nZXNbJ3N0YXR1cyddIHx8IGNoYW5nZXNbJ2ZpbGxlZCddKSkge1xyXG4gICAgICB0aGlzLnN0YXR1c0ljb24gPSB0b2FzdEluZm9bdGhpcy5zdGF0dXNdPy5pY29uO1xyXG4gICAgICB0aGlzLnRvYXN0U3R5bGVzLmJhY2tncm91bmRDb2xvciA9IHRvYXN0SW5mb1t0aGlzLnN0YXR1c10/LmJnQ29sb3I7XHJcbiAgICAgIHRoaXMudG9hc3RTdHlsZXMuY29sb3IgPSB0b2FzdEluZm9bdGhpcy5zdGF0dXNdPy5jb2xvcjtcclxuICAgIH1cclxuICAgIGlmIChjaGFuZ2VzICYmIGNoYW5nZXNbJ3dpZHRoJ10pIHtcclxuICAgICAgdGhpcy50b2FzdFN0eWxlcy53aWR0aCA9IHR5cGVvZiB0aGlzLndpZHRoID09PSAnbnVtYmVyJyA/IHRoaXMud2lkdGggKyAnJScgOiB0aGlzLndpZHRoO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICh0aGlzLmZpbmlzaFBlcmNlbnRhZ2UgPiAxMDApIHRoaXMuZmluaXNoUGVyY2VudGFnZSA9IDEwMDtcclxuXHJcbiAgfVxyXG5cclxuICBjbGlja2VkKG51bTogbnVtYmVyKSB7XHJcbiAgICBpZiAobnVtID09IDApIHRoaXMuZmlyc3RCdXR0b24uZW1pdCgpO1xyXG4gICAgZWxzZSBpZiAobnVtID09IDEpIHRoaXMuc2Vjb25kQnV0dG9uLmVtaXQoKTtcclxuICAgIGVsc2UgaWYgKG51bSA9PSAyKSB0aGlzLmNsb3NlZC5lbWl0KCk7XHJcbiAgfVxyXG5cclxuICBjbG9zZVRvYXN0KCkge1xyXG4gICAgdGhpcy50b2FzdEV2ZW50LmVtaXQoe1xyXG4gICAgICB0eXBlOiAnVE9BU1RfQ0xPU0VEJyxcclxuICAgICAgcGFyYW1zOiB7fVxyXG4gICAgfSlcclxuICB9XHJcblxyXG59XHJcblxyXG5jb25zdCB0b2FzdEluZm86IGFueSA9IHtcclxuICAnc3VjY2Vzcyc6IHtcclxuICAgIGljb246ICdjaGVja0NpcmNsZU91dGxpbmVkJyxcclxuICAgIGJnQ29sb3I6ICcjRUJGNUU5JyxcclxuICAgIGNvbG9yOiAnIzI0NkIxNidcclxuICB9LFxyXG4gICdmYWlsdXJlJzoge1xyXG4gICAgaWNvbjogJ2luZm9DaXJjbGVPdXRsaW5lZCcsXHJcbiAgICBiZ0NvbG9yOiAnI0Y4RTlFOScsXHJcbiAgICBjb2xvcjogJyM4NjFDMTUnXHJcbiAgfSxcclxuICAnY2F1dGlvbic6IHtcclxuICAgIGljb246ICdpbmZvVHJpYW5nbGVPdXRsaW5lZCcsXHJcbiAgICBiZ0NvbG9yOiAnJyxcclxuICAgIGNvbG9yOiAnJ1xyXG4gIH1cclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBJVG9hc3RFdmVudCB7XHJcbiAgdHlwZTogJ1RPQVNUX0NMT1NFRCcgfCAnQUNUSU9OX0NMSUNLRUQnO1xyXG4gIGV2ZW50PzogYW55O1xyXG4gIHBhcmFtcz86IGFueTtcclxufSIsIjxkaXYgY2xhc3M9XCJ0b2FzdFwiIFtuZ1N0eWxlXT1cInRvYXN0U3R5bGVzXCI+XHJcbiAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJ0b2FzdC1pY29uIHt7c3RhdHVzfX1cIj5cclxuICAgICAgPHNhLWljb24gW2ljb25dPVwic3RhdHVzSWNvblwiIFtzaXplXT1cInRvYXN0SWNvblNpemVcIj48L3NhLWljb24+XHJcbiAgICAgIDwhLS0gPGltZyBbc3JjXT1cInN0YXR1c0ljb25cIiBhbHQ9XCJcIj4gLS0+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJoZWFkLXN1YmhlYWRcIj5cclxuICAgICAgPHAgY2xhc3M9XCJoZWFkaW5nXCI+e3toZWFkaW5nfX08L3A+XHJcbiAgICAgIDxwIGNsYXNzPVwic3ViaGVhZGluZ1wiPnt7c3ViSGVhZGluZ319PC9wPlxyXG4gICAgPC9kaXY+XHJcbiAgICBAaWYoY2xvc2FibGUpe1xyXG4gICAgPCEtLSA8aW1nIGNsYXNzPVwiY3Jvc3NcIiAoY2xpY2spPVwiY2xvc2VUb2FzdCgpXCIgW3NyY109XCJjcm9zc21hcmtcIiBhbHQ9XCJcIj4gLS0+XHJcbiAgICA8c2EtaWNvbiBjbGFzcz1cImNyb3NzXCIgW2ljb25dPVwidG9hc3RDbG9zZUljb25cIiBbc2l6ZV09XCJ0b2FzdENsb3NlSWNvblNpemVcIiAoY2xpY2spPVwiY2xvc2VUb2FzdCgpXCI+PC9zYS1pY29uPlxyXG4gICAgfVxyXG4gIDwvZGl2PlxyXG4gIDwhLS0gPGRpdiBjbGFzcz1cImNvbnRyb2xzXCI+XHJcbiAgICA8c2EtYnV0dG9uICpuZ0lmPVwiZmlyc3RCdXR0b25OYW1lXCIgKG9uQ2xpY2tFdmVudCk9XCJjbGlja2VkKDApXCIgW3RleHRdPVwiZmlyc3RCdXR0b25OYW1lXCIgdHlwZT1cInRyYW5zcGFyZW50XCJcclxuICAgICAgc2l6ZT1cIm1lZGl1bVwiIHN0YXRlPVwiZGVmYXVsdFwiPlxyXG4gICAgPC9zYS1idXR0b24+XHJcbiAgICA8c2EtYnV0dG9uICpuZ0lmPVwic2Vjb25kQnV0dG9uTmFtZVwiIChvbkNsaWNrRXZlbnQpPVwiY2xpY2tlZCgxKVwiIFt0ZXh0XT1cInNlY29uZEJ1dHRvbk5hbWVcIiB0eXBlPVwib3V0bGluZVwiXHJcbiAgICAgIHNpemU9XCJtZWRpdW1cIiBzdGF0ZT1cImRlZmF1bHRcIj5cclxuICAgIDwvc2EtYnV0dG9uPlxyXG4gIDwvZGl2PiAtLT5cclxuXHJcbiAgPGRpdiAqbmdJZj1cImZpbmlzaFBlcmNlbnRhZ2UgPj0gMFwiIGNsYXNzPVwicHJvZ3Jlc3MtYmFyXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtZG9uZVwiIFtzdHlsZS53aWR0aF09XCJmaW5pc2hQZXJjZW50YWdlKyclJ1wiPjwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWxlZnRcIiBbc3R5bGUud2lkdGhdPVwiMTAwLWZpbmlzaFBlcmNlbnRhZ2UrJyUnXCI+PC9kaXY+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -2917,8 +2917,11 @@ class ToastComponent {
|
|
|
2917
2917
|
constructor() {
|
|
2918
2918
|
this.finishPercentage = -1;
|
|
2919
2919
|
this.statusIcon = '';
|
|
2920
|
+
this.toastCloseIcon = 'closeOutlined';
|
|
2920
2921
|
this.filled = true;
|
|
2921
2922
|
this.width = '';
|
|
2923
|
+
this.toastIconSize = '24';
|
|
2924
|
+
this.toastCloseIconSize = '24';
|
|
2922
2925
|
this.toastEvent = new EventEmitter();
|
|
2923
2926
|
this.firstButton = new EventEmitter();
|
|
2924
2927
|
this.secondButton = new EventEmitter();
|
|
@@ -2952,11 +2955,11 @@ class ToastComponent {
|
|
|
2952
2955
|
});
|
|
2953
2956
|
}
|
|
2954
2957
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2955
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", 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\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" size=\"
|
|
2958
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget"], outputs: ["onClickEvent"] }] }); }
|
|
2956
2959
|
}
|
|
2957
2960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2958
2961
|
type: Component,
|
|
2959
|
-
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" size=\"
|
|
2962
|
+
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
2960
2963
|
}], propDecorators: { finishPercentage: [{
|
|
2961
2964
|
type: Input
|
|
2962
2965
|
}], heading: [{
|
|
@@ -2965,6 +2968,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2965
2968
|
type: Input
|
|
2966
2969
|
}], statusIcon: [{
|
|
2967
2970
|
type: Input
|
|
2971
|
+
}], toastCloseIcon: [{
|
|
2972
|
+
type: Input
|
|
2968
2973
|
}], status: [{
|
|
2969
2974
|
type: Input
|
|
2970
2975
|
}], firstButtonName: [{
|
|
@@ -2977,6 +2982,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2977
2982
|
type: Input
|
|
2978
2983
|
}], width: [{
|
|
2979
2984
|
type: Input
|
|
2985
|
+
}], toastIconSize: [{
|
|
2986
|
+
type: Input
|
|
2987
|
+
}], toastCloseIconSize: [{
|
|
2988
|
+
type: Input
|
|
2980
2989
|
}], toastEvent: [{
|
|
2981
2990
|
type: Output
|
|
2982
2991
|
}], firstButton: [{
|