@progressio_resources/gravity-design-system 1.1.0 → 1.1.2

package/lib/gravity-design-system.module.d.ts

@@ -5,19 +5,21 @@ import * as i3 from "./components/gravity-checkbox/gravity-checkbox.component";
 import * as i4 from "./components/gravity-dialog/gravity-dialog.component";
 import * as i5 from "./components/gravity-dropdown-list/gravity-dropdown-list.component";
 import * as i6 from "./components/gravity-icon/gravity-icon.component";
-import * as i7 from "./components/gravity-radio-button/gravity-radio-button.component";
-import * as i8 from "./components/gravity-switch/gravity-switch.component";
-import * as i9 from "./components/gravity-text-field/gravity-text-field.component";
-import * as i10 from "angular-svg-icon";
-import * as i11 from "angular-svg-icon-preloader";
-import * as i12 from "@angular/common";
-import * as i13 from "@angular/forms";
-import * as i14 from "./vendor/gravity-tooltip/gravity-tooltip.module";
-import * as i15 from "@ng-bootstrap/ng-bootstrap";
-import * as i16 from "@ng-select/ng-select";
-import * as i17 from "ngx-pretty-checkbox";
+import * as i7 from "./components/gravity-notification/gravity-notification.component";
+import * as i8 from "./components/gravity-notification-instant/gravity-notification-instant-container.component";
+import * as i9 from "./components/gravity-radio-button/gravity-radio-button.component";
+import * as i10 from "./components/gravity-switch/gravity-switch.component";
+import * as i11 from "./components/gravity-text-field/gravity-text-field.component";
+import * as i12 from "angular-svg-icon";
+import * as i13 from "angular-svg-icon-preloader";
+import * as i14 from "@angular/common";
+import * as i15 from "@angular/forms";
+import * as i16 from "./vendor/gravity-tooltip/gravity-tooltip.module";
+import * as i17 from "@ng-bootstrap/ng-bootstrap";
+import * as i18 from "@ng-select/ng-select";
+import * as i19 from "ngx-pretty-checkbox";
 export declare class GravityDesignSystemModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<GravityDesignSystemModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GravityDesignSystemModule, [typeof i1.GravityButtonComponent, typeof i2.GravityCalendarComponent, typeof i3.GravityCheckboxComponent, typeof i4.GravityDialogComponent, typeof i5.GravityDropdownListComponent, typeof i6.GravityIconComponent, typeof i7.GravityRadioButtonComponent, typeof i8.GravitySwitchComponent, typeof i9.GravityTextFieldComponent], [typeof i10.AngularSvgIconModule, typeof i11.AngularSvgIconPreloaderModule, typeof i12.CommonModule, typeof i13.FormsModule, typeof i14.GravityTooltipModule, typeof i15.NgbDatepickerModule, typeof i16.NgSelectModule, typeof i17.NgxPrettyCheckboxModule, typeof i13.ReactiveFormsModule], [typeof i1.GravityButtonComponent, typeof i2.GravityCalendarComponent, typeof i3.GravityCheckboxComponent, typeof i4.GravityDialogComponent, typeof i5.GravityDropdownListComponent, typeof i6.GravityIconComponent, typeof i7.GravityRadioButtonComponent, typeof i8.GravitySwitchComponent, typeof i9.GravityTextFieldComponent, typeof i14.GravityTooltipModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GravityDesignSystemModule, [typeof i1.GravityButtonComponent, typeof i2.GravityCalendarComponent, typeof i3.GravityCheckboxComponent, typeof i4.GravityDialogComponent, typeof i5.GravityDropdownListComponent, typeof i6.GravityIconComponent, typeof i7.GravityNotificationComponent, typeof i8.GravityNotificationInstantContainerComponent, typeof i9.GravityRadioButtonComponent, typeof i10.GravitySwitchComponent, typeof i11.GravityTextFieldComponent], [typeof i12.AngularSvgIconModule, typeof i13.AngularSvgIconPreloaderModule, typeof i14.CommonModule, typeof i15.FormsModule, typeof i16.GravityTooltipModule, typeof i17.NgbDatepickerModule, typeof i17.NgbToastModule, typeof i18.NgSelectModule, typeof i19.NgxPrettyCheckboxModule, typeof i15.ReactiveFormsModule], [typeof i1.GravityButtonComponent, typeof i2.GravityCalendarComponent, typeof i3.GravityCheckboxComponent, typeof i4.GravityDialogComponent, typeof i5.GravityDropdownListComponent, typeof i6.GravityIconComponent, typeof i8.GravityNotificationInstantContainerComponent, typeof i9.GravityRadioButtonComponent, typeof i10.GravitySwitchComponent, typeof i11.GravityTextFieldComponent, typeof i16.GravityTooltipModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<GravityDesignSystemModule>;
 }

package/lib/services/gravity-dialog-manager.service.d.ts

@@ -1,10 +1,15 @@
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { GravityDialogContentInterface } from "../components/gravity-dialog/gravity-dialog.component";
+import { GravityInstantNotificationsService } from "./gravity-instant-notifications.service";
+import { GravityNotificationContent } from "../components/gravity-notification/gravity-notification.component";
 import * as i0 from "@angular/core";
 export declare class GravityDialogManagerService {
     private readonly ngbModal;
-    constructor(ngbModal: NgbModal);
+    private readonly gravityInstantNotificationsService;
+    constructor(ngbModal: NgbModal, gravityInstantNotificationsService: GravityInstantNotificationsService);
     openModal(gravityDialogContentInterface: GravityDialogContentInterface): void;
+    throwInformativeNotification(notificationContent: GravityNotificationContent): void;
+    throwInstantNotification(notificationContent: GravityNotificationContent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GravityDialogManagerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GravityDialogManagerService>;
 }

package/lib/services/gravity-instant-notifications.service.d.ts

@@ -0,0 +1,10 @@
+import { GravityNotificationContent } from "../components/gravity-notification/gravity-notification.component";
+import * as i0 from "@angular/core";
+export declare class GravityInstantNotificationsService {
+    readonly notifications: GravityNotificationContent[];
+    showNotification(content: GravityNotificationContent): void;
+    hideNotification(index: number): void;
+    clearNotifications(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GravityInstantNotificationsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GravityInstantNotificationsService>;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
     "@angular/common": "^15.1.0",

package/public-api.d.ts

@@ -5,6 +5,7 @@ export * from './lib/components/gravity-checkbox/gravity-checkbox.component';
 export * from './lib/components/gravity-dialog/gravity-dialog.component';
 export * from './lib/components/gravity-dropdown-list/gravity-dropdown-list.component';
 export * from './lib/components/gravity-icon/gravity-icon.component';
+export * from './lib/components/gravity-notification-instant/gravity-notification-instant-container.component';
 export * from './lib/components/gravity-radio-button/gravity-radio-button.component';
 export * from './lib/components/gravity-switch/gravity-switch.component';
 export * from './lib/components/gravity-text-field/gravity-text-field.component';

package/src/lib/assets/icons/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="11.115" viewBox="0 0 18 11.115">
+  <path d="M24.885,12.885,18,19.755l-6.885-6.87L9,15l9,9,9-9Z" transform="translate(-9 -12.885)" fill="var(--icon-color, #888)"/>
+</svg>

package/src/lib/assets/icons/arrow_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.115" height="18" viewBox="0 0 11.115 18">
+  <path d="M24.885,12.885,18,19.755l-6.885-6.87L9,15l9,9,9-9Z" transform="translate(-12.885 27) rotate(-90)" fill="var(--icon-color, #888)"/>
+</svg>

package/src/lib/assets/icons/arrow_up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="11.115" viewBox="0 0 18 11.115">
+  <path d="M24.885,12.885,18,19.755l-6.885-6.87L9,15l9,9,9-9Z" transform="translate(27 24) rotate(180)" fill="var(--icon-color, #888)"/>
+</svg>

package/src/lib/assets/icons/notifications/error.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.58" height="17.487" viewBox="0 0 13.58 17.487">
+  <g transform="translate(1.413 1.664)">
+    <path d="M0,0,10.754,10.016" transform="translate(0 2.071)" fill="none" stroke="var(--icon-color, #888)" stroke-linecap="round" stroke-width="2"/>
+    <path d="M0,0,12.766,7.058" transform="matrix(0.259, -0.966, 0.966, 0.259, 0.338, 12.331)" fill="none" stroke="var(--icon-color, #888)" stroke-linecap="round" stroke-width="2"/>
+  </g>
+</svg>

package/src/lib/assets/icons/notifications/success.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
+  <path d="M17.132,5,7.645,14.487,3.333,10.175" fill="none" stroke="var(--icon-color, #888)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/>
+</svg>

package/src/lib/assets/icons/notifications/warning.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.764" height="16.688" viewBox="0 0 18.764 16.688">
+  <g transform="translate(-5.75 -10.75)">
+    <path d="M15.132,11a1.642,1.642,0,0,0-1.414.837L6.473,24.069v.006A2.894,2.894,0,0,0,6,25.528a1.667,1.667,0,0,0,1.66,1.66H22.6a1.667,1.667,0,0,0,1.66-1.66,2.894,2.894,0,0,0-.473-1.453v-.006L16.546,11.837A1.643,1.643,0,0,0,15.132,11Zm0,.83a.705.705,0,0,1,.7.428L23.077,24.49a2.168,2.168,0,0,1,.357,1.038.824.824,0,0,1-.83.83H7.66a.824.824,0,0,1-.83-.83,2.168,2.168,0,0,1,.357-1.038l7.244-12.232A.705.705,0,0,1,15.132,11.83Zm-.045,4.144a.415.415,0,0,0-.37.422v5.4a.415.415,0,0,0,.83.012V16.4a.415.415,0,0,0-.406-.424A.4.4,0,0,0,15.086,15.975Zm.045,7.063a.623.623,0,1,0,.623.623A.623.623,0,0,0,15.132,23.037Z" fill="var(--icon-color, #888)" stroke="var(--icon-color, #888)" stroke-width="0.5"/>
+  </g>
+</svg>

package/src/lib/assets/json/icons.json

@@ -1,5 +1,17 @@
 {
   "iconImageFiles": [
+    {
+      "iconName": "arrow_down",
+      "iconPath": "/assets/gravity/icons/arrow_down.svg"
+    },
+    {
+      "iconName": "arrow_right",
+      "iconPath": "/assets/gravity/icons/arrow_right.svg"
+    },
+    {
+      "iconName": "arrow_up",
+      "iconPath": "/assets/gravity/icons/arrow_up.svg"
+    },
     {
       "iconName": "calendar",
       "iconPath": "/assets/gravity/icons/calendar.svg"
@@ -44,6 +56,18 @@
       "iconName": "mail",
       "iconPath": "/assets/gravity/icons/mail.svg"
     },
+    {
+      "iconName": "notification-error",
+      "iconPath": "/assets/gravity/icons/notifications/error.svg"
+    },
+    {
+      "iconName": "notification-success",
+      "iconPath": "/assets/gravity/icons/notifications/success.svg"
+    },
+    {
+      "iconName": "notification-warning",
+      "iconPath": "/assets/gravity/icons/notifications/warning.svg"
+    },
     {
       "iconName": "radio-on",
       "iconPath": "/assets/gravity/icons/radio-on.svg"

package/src/lib/styles/_datepicker.scss

@@ -12,9 +12,9 @@ ngb-datepicker.gravity-datepicker-dialog {
     border-top-left-radius: $border-radius-system;
     border-top-right-radius: $border-radius-system;
     color: var(--on-bg-calendar-nav-primary);
-    height: 50px;
-    min-width: 284px;
-    padding: 10px;
+    height: 3.125rem;
+    min-width: 17.75rem;
+    padding: 0.625rem;
 
     ngb-datepicker-navigation {
       .ngb-dp-arrow {
@@ -24,18 +24,18 @@ ngb-datepicker.gravity-datepicker-dialog {
           border-radius: 50%;
           color: var(--arrow-calendar-active-primary);
           cursor: pointer;
-          height: 32px;
+          height: 2rem;
           margin: 0;
           outline: none;
           padding: 0;
-          width: 32px;
+          width: 2rem;
 
           span {
             border: none;
             display: inline-block;
-            font-size: 28px;
+            font-size: 1.75rem;
             height: 100%;
-            line-height: 30px;
+            line-height: 1;
             margin: 0;
             position: relative;
             transform: none;
@@ -76,9 +76,8 @@ ngb-datepicker.gravity-datepicker-dialog {
   .ngb-dp-content {
     @extend .hr-label, .sm-regular;
 
-    min-height: 212px;
-    min-width: 264px;
-    padding: 10px;
+    min-width: 16.5rem;
+    padding: 0.625rem;
 
     .ngb-dp-weekdays {
       background-color: var(--bg-calender-primary);

package/src/lib/styles/_shared.scss

@@ -1,4 +1,5 @@
 $border-radius-system: 0.625rem;
+$input-height: 3rem;
 
 .text-negative {
   color: var(--negative-primary);

package/src/lib/styles/overwrite/bootstrap/_modal.scss

@@ -40,11 +40,20 @@ $modal-margin: 3.5rem;
     overflow: hidden;
   }
 
-  .modal-body {
+  .dialog-body {
     overflow-y: auto;
   }
 }
 
+.informative-notification {
+  width: 28rem;
+
+  .modal-content {
+    --dialog-background-color: var(--bg-notification-primary);
+    --dialog-text-color: var(--on-bg-notification-primary);
+  }
+}
+
 .modal-dialog-centered {
   align-items: center;
   display: flex;
@@ -62,21 +71,25 @@ $modal-margin: 3.5rem;
     height: 100%;
   }
 
-  .modal-header,
-  .modal-footer {
+  .dialog-header,
+  .dialog-footer {
     border-radius: 0;
   }
 
-  .modal-body {
+  .dialog-body {
     overflow-y: auto;
   }
 }
 
 .modal-content {
+  --dialog-background-color: var(--bg-dialog-primary);
+  --dialog-text-color: var(--text-primary);
+
   background-clip: padding-box;
-  background-color: var(--bg-dialog-primary);
+  background-color: var(--dialog-background-color);
   border-radius: $border-radius-system;
-  color: var(--text-primary);
+  box-shadow: 0 27px 34px #000c208f;
+  color: var(--dialog-text-color);
   display: flex;
   flex-direction: column;
   outline: 0;