@progressio_resources/gravity-design-system 2.0.12 → 2.1.0

package/lib/components/gravity-table/gravity-table.component.d.ts

@@ -0,0 +1,23 @@
+import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class GravityTableComponent implements AfterViewInit {
+    private readonly renderer;
+    type: 'standard' | 'compressed';
+    readonly tableContainer: ElementRef;
+    private firstTime;
+    private tableElement;
+    tableId: string;
+    tableSize: string;
+    constructor(renderer: Renderer2);
+    ngAfterViewInit(): void;
+    private getTableHeaders;
+    private initializeTable;
+    private adjustTableType;
+    private adjustButtonsSize;
+    private onResize;
+    private adjustTableSize;
+    private adjustTable;
+    private appendNodesList;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GravityTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GravityTableComponent, "gravity-table", never, { "type": { "alias": "type"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { NgbModal, NgbModalRef } 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-content.interface";
@@ -7,9 +7,10 @@ export declare class GravityDialogManagerService {
     private readonly ngbModal;
     private readonly gravityInstantNotificationsService;
     constructor(ngbModal: NgbModal, gravityInstantNotificationsService: GravityInstantNotificationsService);
-    openModal(gravityDialogContentInterface: GravityDialogContentInterface, scrollableDialog?: boolean, modalSize?: 'sm' | 'md' | 'lg' | 'xl'): void;
+    openModal(gravityDialogContentInterface: GravityDialogContentInterface, scrollableDialog?: boolean, modalSize?: 'sm' | 'md' | 'lg' | 'xl'): NgbModalRef;
     throwInformativeNotification(notificationContent: GravityNotificationContent): void;
     throwInstantNotification(notificationContent: GravityNotificationContent): void;
+    closeModal(modalToClose: NgbModalRef, returnValue?: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<GravityDialogManagerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GravityDialogManagerService>;
 }

package/package.json

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

package/public-api.d.ts

@@ -9,6 +9,7 @@ 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-table/gravity-table.component';
 export * from './lib/components/gravity-text-field/gravity-text-field.component';
 export * from './lib/services/gravity-dialog-manager.service';
 export * from './lib/vendor/gravity-tooltip';

package/src/lib/styles/components/_tables.scss

@@ -0,0 +1,271 @@
+@import "./link";
+@import "../foundations/border-radius/hero.border-radius";
+@import "../foundations/breakpoints/breakpoints";
+@import "../foundations/typography/hero.typography";
+
+.table-container.xl, .table-container.lg {
+  table {
+    border-collapse: collapse;
+    text-align: left;
+    width: 100%;
+
+    thead tr {
+      @extend .hr-title, .sm-bold;
+
+      background-color: var(--surface-primary);
+      color: var(--text-primary);
+
+      th:first-of-type {
+        border-top-left-radius: $border-radius-sm;
+      }
+
+      th:last-of-type {
+        border-top-right-radius: $border-radius-sm;
+      }
+    }
+
+    tbody {
+      tr {
+        background-color: var(--surface-secondary);
+        border-bottom: 1px solid var(--surface-primary);
+        color: var(--text-primary);
+
+        &:has(td.actions-column) {
+          @for $dataColumnsCount from 3 through 9 {
+            /* N data columns (between 3 and 9) and 1 actions column */
+            /* We need to fill the table space with all N columns, and the actions column is fixed width */
+            &:has(> :nth-last-child(2):nth-child(#{$dataColumnsCount})) > :not(:last-child) {
+              width: calc(100% / #{$dataColumnsCount});
+            }
+          }
+        }
+
+        &:not(:has(td.actions-column)) {
+          @for $dataColumnsCount from 3 through 9 {
+            /* N data columns (between 3 and 9) */
+            /* We need to fill the table space with all N columns */
+            &:has(> :last-child:nth-child(#{$dataColumnsCount})) > * {
+              width: calc(100% / #{$dataColumnsCount});
+            }
+          }
+        }
+
+        &:hover {
+          background-color: var(--surface-primary);
+        }
+
+        .mobile-menu-trigger {
+          display: none;
+        }
+      }
+
+      a {
+        @extend .gravity-link;
+      }
+    }
+
+    &.xl-table {
+      &.standard-table {
+        tr th, tr td {
+          padding: 1.5rem; //24px
+        }
+      }
+
+      &.compressed-table {
+        tr th, tr td {
+          padding: 1rem; //16px
+        }
+      }
+
+      tbody tr {
+        @extend .hr-body-text, .md-regular;
+      }
+    }
+
+    &.lg-table {
+      &.standard-table {
+        tr th, tr td {
+          padding: 1.5rem 1rem; //24px 16px
+        }
+      }
+
+      &.compressed-table {
+        tr th, tr td {
+          padding: 1rem; //16px
+        }
+      }
+
+      tbody tr {
+        @extend .hr-body-text, .sm-regular;
+      }
+    }
+
+    td.actions-column {
+      display: flex;
+
+      table.xl-table.standard-table & {
+        padding: 0.9375rem 1.5rem !important;
+      }
+
+      table.xl-table.compressed-table & {
+        padding: 0.4375rem 1rem !important;
+      }
+
+      table.lg-table.standard-table & {
+        padding: 0.875rem 1rem !important;
+      }
+
+      table.lg-table.compressed-table & {
+        padding: 0.375rem 1rem !important;
+      }
+
+      gravity-button:not(:last-of-type) {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+}
+
+.table-container.md, .table-container.sm {
+  table {
+    /* Force table to not be like tables anymore */
+    &, thead, tbody, th, td, tr {
+      display: block;
+    }
+
+    /* Hide table headers (but not display: none;, for accessibility) */
+    thead tr {
+      left: -9999px;
+      position: absolute;
+      top: -9999px;
+    }
+
+    tr {
+      background-color: var(--surface-secondary);
+      border-radius: $border-radius-sm;
+      margin-bottom: 0.625rem;
+      padding: 0.75rem 1rem; //12px 16px
+
+      &:has(.actions-column) td:not(:nth-last-of-type(2)):not(.mobile-menu-trigger), &:not(:has(.actions-column)) td:not(:last-of-type):not(.mobile-menu-trigger) {
+        border-bottom: 1px solid var(--surface-primary);
+      }
+    }
+
+    /* Behave like a "row" */
+    td {
+      @extend .hr-body-text, .sm-regular;
+
+      border: none;
+      padding-block: 1rem; //16px -> spacing-sm
+      position: relative;
+      text-align: right;
+    }
+
+    td:before {
+      @extend .hr-body-text, .sm-bold;
+
+      content: attr(header-name);
+      font-weight: bold;
+      left: 0;
+      position: absolute;
+      text-align: left;
+      width: 20%;
+      white-space: nowrap;
+    }
+
+    .actions-column {
+      display: none;
+    }
+  }
+
+  .mobile-menu-trigger {
+    margin-left: auto;
+    padding-block: 1rem;
+    position: relative;
+    width: fit-content;
+  }
+
+  .menu-toggle {
+    cursor: pointer;
+    margin-left: auto;
+    width: fit-content;
+
+    span {
+      background-color: var(--text-primary);
+      display: block;
+      height: 0.16875rem; //2.7px
+      margin-bottom: 0.175rem;
+      transform-origin: 0.25rem; //4px
+      -webkit-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
+      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
+      width: 1.16875rem; // 27px
+    }
+
+    &.open {
+      span {
+        width: 1.6rem;
+
+        &:first-child {
+          transform: rotate(45deg) translate(-2px, -1px);
+        }
+
+        &:nth-child(2) {
+          opacity: 0;
+        }
+
+        &:last-child {
+          transform: rotate(-45deg) translate(0, -1px);
+        }
+      }
+    }
+  }
+
+  .panel {
+    background-color: var(--surface-secondary);
+    border: 0.5px solid var(--divider-primary);
+    border-radius: $border-radius-sm;
+    padding: 0.25rem 1rem;
+    position: absolute;
+    right: 0;
+    top: 3rem;
+    width: 12rem;
+    z-index: 1;
+
+    &:not(.open) {
+      display: none;
+    }
+
+    gravity-button {
+      width: 100%;
+
+      &:not(:last-of-type) {
+        border-bottom: 0.2px solid var(--text-primary);
+      }
+
+      button {
+        --button-background-color: transparent;
+        --button-border-color: transparent;
+        border-radius: 0;
+        --button-text-color: var(--text-primary);
+        justify-content: space-between;
+        padding: 1.5rem 0.5rem !important;
+
+        &:hover {
+          --button-background-color: transparent !important;
+          --button-border-color: transparent !important;
+          --button-text-color: var(--text-primary) !important;
+        }
+
+        gravity-icon {
+          --icon-height: 1rem !important;
+          --icon-width: 1rem !important;
+          order: 1;
+        }
+      }
+    }
+  }
+}
+
+gravity-button[id-reference="close-button"]:not([cloned-button="true"]) {
+  display: none;
+}

package/src/lib/styles/gravity-design-system.scss

@@ -5,6 +5,7 @@
 @import "./components/card_highlight";
 @import "./components/datepicker";
 @import "./components/link";
+@import "./components/tables";
 
 //Foundations
 @import "./foundations/breakpoints/breakpoints";