@progressio_resources/gravity-design-system 4.0.27 → 4.0.28
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.
|
@@ -5006,12 +5006,18 @@ class GravityNotificationComponent {
|
|
|
5006
5006
|
closeModal() {
|
|
5007
5007
|
this.ngbActiveModal.close();
|
|
5008
5008
|
}
|
|
5009
|
+
onCustomAction() {
|
|
5010
|
+
if (this.notificationContent.buttonAction) {
|
|
5011
|
+
this.notificationContent.buttonAction();
|
|
5012
|
+
}
|
|
5013
|
+
this.closeModal();
|
|
5014
|
+
}
|
|
5009
5015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityNotificationComponent, isStandalone: true, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\" [attr.data-cy]=\"'notification'\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\" [attr.data-cy]=\"'notification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\" [attr.data-cy]=\"'notification_title'\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body md-regular\" [attr.data-cy]=\"'notification_body'\"
|
|
5016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityNotificationComponent, isStandalone: true, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\" [attr.data-cy]=\"'notification'\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\" [attr.data-cy]=\"'notification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\" [attr.data-cy]=\"'notification_title'\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body md-regular\" [attr.data-cy]=\"'notification_body'\" [innerHTML]=\"notificationContent.text\"></h2>\n @if (notificationContent.details) {\n <h2 class=\"hr-body md-regular\">\n Detail: <b>{{notificationContent.details}}</b>\n </h2>\n }\n @if (notificationContent.errorCode) {\n <h2 class=\"hr-body md-regular\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n }\n </div>\n\n @if (notificationContent.buttonText) {\n <div class=\"notification-action\">\n <gravity-button [type]=\"'primary'\" [size]=\"'sm'\" (click)=\"onCustomAction()\" [attr.data-cy]=\"'notification_customButton'\">\n {{notificationContent.buttonText}}\n </gravity-button>\n </div>\n }\n</main>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;gap:var(--gravity-spacing-sm);padding:1.5rem 1.5rem 1rem;position:relative;display:grid}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}.notification-action{display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
5011
5017
|
}
|
|
5012
5018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationComponent, decorators: [{
|
|
5013
5019
|
type: Component,
|
|
5014
|
-
args: [{ standalone: true, imports: [GravityIconComponent], template: "<main class=\"alert-content {{notificationContent.state}}\" [attr.data-cy]=\"'notification'\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\" [attr.data-cy]=\"'notification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\" [attr.data-cy]=\"'notification_title'\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body md-regular\" [attr.data-cy]=\"'notification_body'\"
|
|
5020
|
+
args: [{ standalone: true, imports: [GravityIconComponent, GravityButtonComponent], template: "<main class=\"alert-content {{notificationContent.state}}\" [attr.data-cy]=\"'notification'\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\" [attr.data-cy]=\"'notification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\" [attr.data-cy]=\"'notification_title'\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body md-regular\" [attr.data-cy]=\"'notification_body'\" [innerHTML]=\"notificationContent.text\"></h2>\n @if (notificationContent.details) {\n <h2 class=\"hr-body md-regular\">\n Detail: <b>{{notificationContent.details}}</b>\n </h2>\n }\n @if (notificationContent.errorCode) {\n <h2 class=\"hr-body md-regular\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n }\n </div>\n\n @if (notificationContent.buttonText) {\n <div class=\"notification-action\">\n <gravity-button [type]=\"'primary'\" [size]=\"'sm'\" (click)=\"onCustomAction()\" [attr.data-cy]=\"'notification_customButton'\">\n {{notificationContent.buttonText}}\n </gravity-button>\n </div>\n }\n</main>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;gap:var(--gravity-spacing-sm);padding:1.5rem 1.5rem 1rem;position:relative;display:grid}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}.notification-action{display:flex;justify-content:center}\n"] }]
|
|
5015
5021
|
}], ctorParameters: () => [{ type: i1$2.NgbActiveModal }], propDecorators: { notificationContent: [{
|
|
5016
5022
|
type: Input
|
|
5017
5023
|
}] } });
|
|
@@ -5054,11 +5060,11 @@ class GravityNotificationInstantContainerComponent {
|
|
|
5054
5060
|
}
|
|
5055
5061
|
}
|
|
5056
5062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5057
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityNotificationInstantContainerComponent, isStandalone: true, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "@for (notification of gravityInstantNotificationsService.notifications; track notification; let i = $index) {\n <ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n >\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\"
|
|
5063
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityNotificationInstantContainerComponent, isStandalone: true, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "@for (notification of gravityInstantNotificationsService.notifications; track notification; let i = $index) {\n <ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n >\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\" [innerHTML]=\"notification.text\"></h2>\n @if (notification.errorCode) {\n <h2 class=\"hr-body sm-regular\">\n Error code: <b>{{notification.errorCode}}</b>\n </h2>\n }\n </div>\n </main>\n </ngb-toast>\n}\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:absolute;right:0;top:0;z-index:10}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "component", type: NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5058
5064
|
}
|
|
5059
5065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationInstantContainerComponent, decorators: [{
|
|
5060
5066
|
type: Component,
|
|
5061
|
-
args: [{ selector: 'gravity-notification-instant-container', standalone: true, imports: [NgbToast, GravityIconComponent], template: "@for (notification of gravityInstantNotificationsService.notifications; track notification; let i = $index) {\n <ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n >\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\"
|
|
5067
|
+
args: [{ selector: 'gravity-notification-instant-container', standalone: true, imports: [NgbToast, GravityIconComponent], template: "@for (notification of gravityInstantNotificationsService.notifications; track notification; let i = $index) {\n <ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n >\n <main class=\"alert-content {{notification.state}}\" [attr.data-cy]=\"'instantNotification'\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\" [attr.data-cy]=\"'instantNotification_closeButton'\"></gravity-icon>\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState(notification.state)\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title md-bold\" [attr.data-cy]=\"'instantNotification_title'\">{{notification.title}}</h1>\n </div>\n <div class=\"content\">\n <h2 class=\"hr-body sm-regular\" [attr.data-cy]=\"'notification_body'\" [innerHTML]=\"notification.text\"></h2>\n @if (notification.errorCode) {\n <h2 class=\"hr-body sm-regular\">\n Error code: <b>{{notification.errorCode}}</b>\n </h2>\n }\n </div>\n </main>\n </ngb-toast>\n}\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;position:absolute;right:0;top:0;z-index:10}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
|
|
5062
5068
|
}], ctorParameters: () => [{ type: GravityInstantNotificationsService }], propDecorators: { delay: [{
|
|
5063
5069
|
type: Input
|
|
5064
5070
|
}] } });
|