@progressio_resources/gravity-design-system 2.0.13 → 2.1.1

package/fesm2022/progressio_resources-gravity-design-system.mjs

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDatepickerModule, NgbToastModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i1 from 'angular-svg-icon';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import * as i3 from '@ng-select/ng-select';
@@ -1499,6 +1499,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class GravityTableComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.tableDensity = "standard";
+        this.tableSizeInput = "auto";
+        this.firstTime = true;
+        this.tableElement = null;
+        this.tableSize = 'xl';
+        let milliseconds = new Date().getTime();
+        let randomNumber = Math.random() * 10;
+        this.tableId = '' + (milliseconds * randomNumber / 2);
+    }
+    ngAfterViewInit() {
+        this.tableElement = this.tableContainer?.nativeElement?.childNodes[0];
+        this.renderer.setAttribute(this.tableElement, 'table-id', this.tableId);
+        let tableHeaders = this.getTableHeaders();
+        this.initializeTable(tableHeaders);
+        this.adjustTableDensity(this.tableDensity);
+        this.adjustButtonsSize();
+        this.onResize();
+    }
+    ngOnChanges(changes) {
+        if (this.tableElement) {
+            if (changes['tableDensity']) {
+                this.adjustTableDensity(changes['tableDensity'].currentValue);
+            }
+            if (changes['tableSizeInput']) {
+                this.tableSizeInput = changes['tableSizeInput'].currentValue;
+                this.onResize();
+            }
+        }
+    }
+    ngAfterContentChecked() {
+        if (this.tableElement) {
+            let tableHeaders = this.getTableHeaders();
+            this.initializeTable(tableHeaders);
+            this.adjustTableDensity(this.tableDensity);
+            this.adjustButtonsSize();
+            this.onResize();
+        }
+    }
+    getTableHeaders() {
+        let tableHeaderItems = document.querySelectorAll('thead tr th');
+        let tableHeaders = [];
+        tableHeaderItems.forEach((tableHeaderItem) => {
+            tableHeaders.push(tableHeaderItem.childNodes[0].nodeValue);
+        });
+        return tableHeaders;
+    }
+    initializeTable(tableHeaders) {
+        if (this.firstTime) {
+            this.firstTime = false;
+            //Set corresponding tableHeader as an attribute of each td
+            let tableBody = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr td');
+            tableBody.forEach((tableBodyRow, index) => {
+                this.renderer.setAttribute(tableBodyRow, 'header-name', tableHeaders[index % tableHeaders.length]);
+            });
+            //Creates a copy of mobile-menu-trigger element for each tr
+            let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
+            let closeButtons = document.querySelectorAll('gravity-button[id-reference="close-button"]');
+            tableBodyRows.forEach((tr, index) => {
+                let mobileMenuTrigger = document.createElement('div');
+                this.renderer.addClass(mobileMenuTrigger, 'mobile-menu-trigger');
+                this.renderer.setAttribute(mobileMenuTrigger, 'cloned-node', 'true');
+                let menuToggle = document.createElement('div');
+                this.renderer.addClass(menuToggle, 'menu-toggle');
+                menuToggle.appendChild(document.createElement('span'));
+                menuToggle.appendChild(document.createElement('span'));
+                menuToggle.appendChild(document.createElement('span'));
+                menuToggle.addEventListener("click", () => {
+                    if (menuToggle.classList.contains('open')) {
+                        this.renderer.removeClass(menuToggle, 'open');
+                        this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
+                    }
+                    else {
+                        this.renderer.addClass(menuToggle, 'open');
+                        this.renderer.addClass(menuToggle.parentElement.lastElementChild, 'open');
+                    }
+                });
+                mobileMenuTrigger.appendChild(menuToggle);
+                let panel = document.createElement('div');
+                this.renderer.addClass(panel, 'panel');
+                let closeButtonFromNodeList = closeButtons.item(index);
+                let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
+                this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
+                closeButtonRemoved.addEventListener("click", () => {
+                    this.renderer.removeClass(menuToggle, 'open');
+                    this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
+                });
+                panel.append(closeButtonRemoved);
+                mobileMenuTrigger.appendChild(panel);
+                tr.insertBefore(mobileMenuTrigger, tr.firstChild);
+            });
+        }
+    }
+    adjustTableDensity(densityValue) {
+        this.renderer.removeClass(this.tableElement, 'standard-table');
+        this.renderer.removeClass(this.tableElement, 'compressed-table');
+        this.renderer.addClass(this.tableElement, densityValue + '-table');
+    }
+    adjustButtonsSize() {
+        let actionsColumns = document.querySelectorAll('table[table-id="' + this.tableId + '"] .actions-column');
+        actionsColumns.forEach((actionsColumn) => {
+            actionsColumn.childNodes.forEach((gravityButton) => {
+                let button = gravityButton.childNodes[0];
+                this.renderer.removeClass(button, 'gravity-size-lg');
+                this.renderer.removeClass(button, 'gravity-size-md');
+                this.renderer.removeClass(button, 'gravity-size-sm');
+                this.renderer.removeClass(button, 'lg-bold');
+                this.renderer.removeClass(button, 'md-bold');
+                this.renderer.removeClass(button, 'sm-bold');
+                this.renderer.addClass(button, 'gravity-size-sm');
+                this.renderer.addClass(button, 'sm-bold');
+            });
+        });
+    }
+    onResize() {
+        if (window.innerWidth <= 576) {
+            this.tableSize = 'sm';
+        }
+        else if (window.innerWidth <= 992) {
+            this.tableSize = 'md';
+        }
+        else if (window.innerWidth <= 1440) {
+            this.tableSize = 'lg';
+        }
+        else {
+            this.tableSize = 'xl';
+        }
+        this.adjustTableSize();
+    }
+    adjustTableSize() {
+        this.renderer.removeClass(this.tableElement, 'sm-table');
+        this.renderer.removeClass(this.tableElement, 'md-table');
+        this.renderer.removeClass(this.tableElement, 'lg-table');
+        this.renderer.removeClass(this.tableElement, 'xl-table');
+        if (this.tableSizeInput != 'auto') {
+            this.tableSize = this.tableSizeInput;
+        }
+        this.renderer.addClass(this.tableElement, this.tableSize + '-table');
+        this.adjustTable();
+    }
+    adjustTable() {
+        if (this.tableSize == 'md' || this.tableSize == 'sm') {
+            let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
+            let tableBodyRowsActions = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr td.actions-column');
+            let tableBodyRowsMenuTrigger = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr .mobile-menu-trigger[cloned-node="true"]');
+            tableBodyRows.forEach((tr, index) => {
+                let mobileMenuTrigger = tableBodyRowsMenuTrigger.item(index);
+                let mobileMenuTriggerPanel = mobileMenuTrigger.lastChild;
+                if (tableBodyRowsActions.item(index) && mobileMenuTriggerPanel) {
+                    this.appendNodesList(mobileMenuTriggerPanel, tableBodyRowsActions.item(index).childNodes);
+                }
+            });
+        }
+        if (this.tableSize == 'lg' || this.tableSize == 'xl') {
+            let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
+            let tableBodyRowsActions = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr td.actions-column');
+            let tableBodyRowsMenuTrigger = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr .mobile-menu-trigger[cloned-node="true"]');
+            tableBodyRows.forEach((tr, index) => {
+                if (tableBodyRowsActions.item(index)) {
+                    this.appendNodesList(tableBodyRowsActions.item(index), tableBodyRowsMenuTrigger.item(index).lastChild.childNodes);
+                }
+            });
+        }
+    }
+    appendNodesList(elementToAppend, nodesList) {
+        if (this.tableSize == 'md' || this.tableSize == 'sm') {
+            let nodeListIndex = nodesList.length - 1;
+            while (nodesList.length != 0) {
+                let removedNode = nodesList.item(nodeListIndex).parentNode.removeChild(nodesList.item(nodeListIndex));
+                elementToAppend.insertBefore(removedNode, elementToAppend.firstChild);
+                nodeListIndex--;
+            }
+            return elementToAppend;
+        }
+        if (this.tableSize == 'lg' || this.tableSize == 'xl') {
+            let nodeListIndex = nodesList.length - 1;
+            while (nodesList.length != 1) {
+                let item = nodesList.item(nodeListIndex);
+                let closeButtonNode = item.parentNode.querySelectorAll('gravity-button[id-reference="close-button"]').item(0);
+                if (item != closeButtonNode) {
+                    let removedNode = item.parentNode.removeChild(item);
+                    elementToAppend.insertBefore(removedNode, elementToAppend.firstChild);
+                }
+                nodeListIndex--;
+            }
+            return elementToAppend;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [".table-container{overflow-x:auto}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [".table-container{overflow-x:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { tableDensity: [{
+                type: Input
+            }], tableSizeInput: [{
+                type: Input
+            }], tableContainer: [{
+                type: ViewChild,
+                args: ['tableContainer']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
 class GravityDesignSystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
@@ -1513,13 +1721,14 @@ class GravityDesignSystemModule {
             GravityNotificationInstantContainerComponent,
             GravityRadioButtonComponent,
             GravitySwitchComponent,
+            GravityTableComponent,
             GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
             FormsModule, GravityTooltipModule, NgbDatepickerModule,
+            NgbProgressbarModule,
             NgbToastModule,
             NgSelectModule,
             NgxPrettyCheckboxModule,
-            ReactiveFormsModule,
-            NgbProgressbarModule], exports: [GravityAttachFileComponent,
+            ReactiveFormsModule], exports: [GravityAttachFileComponent,
             GravityButtonComponent,
             GravityCalendarComponent,
             GravityCheckboxComponent,
@@ -1529,6 +1738,7 @@ class GravityDesignSystemModule {
             GravityNotificationInstantContainerComponent,
             GravityRadioButtonComponent,
             GravitySwitchComponent,
+            GravityTableComponent,
             GravityTextFieldComponent,
             GravityTooltipModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
@@ -1539,11 +1749,11 @@ class GravityDesignSystemModule {
             FormsModule,
             GravityTooltipModule.forRoot({}),
             NgbDatepickerModule,
+            NgbProgressbarModule,
             NgbToastModule,
             NgSelectModule,
             NgxPrettyCheckboxModule,
-            ReactiveFormsModule,
-            NgbProgressbarModule, GravityTooltipModule] }); }
+            ReactiveFormsModule, GravityTooltipModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, decorators: [{
             type: NgModule,
@@ -1561,6 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityNotificationInstantContainerComponent,
                         GravityRadioButtonComponent,
                         GravitySwitchComponent,
+                        GravityTableComponent,
                         GravityTextFieldComponent
                     ],
                     imports: [
@@ -1572,11 +1783,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormsModule,
                         GravityTooltipModule.forRoot({}),
                         NgbDatepickerModule,
+                        NgbProgressbarModule,
                         NgbToastModule,
                         NgSelectModule,
                         NgxPrettyCheckboxModule,
-                        ReactiveFormsModule,
-                        NgbProgressbarModule
+                        ReactiveFormsModule
                     ],
                     exports: [
                         GravityAttachFileComponent,
@@ -1589,6 +1800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityNotificationInstantContainerComponent,
                         GravityRadioButtonComponent,
                         GravitySwitchComponent,
+                        GravityTableComponent,
                         GravityTextFieldComponent,
                         GravityTooltipModule
                     ]
@@ -1638,5 +1850,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
+export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map