@testgorilla/tgo-ui 0.0.1 → 0.0.4

package/fesm2020/testgorilla-tgo-ui.mjs

@@ -1,14 +1,196 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, NgModule } from '@angular/core';
-import * as i2 from '@angular/material/sort';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule, Pipe, ViewChild } from '@angular/core';
+import * as i1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i1$1 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i3$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i1 from '@angular/material/table';
+import * as i2$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i5$1 from 'ngx-date-fns';
+import { DateFnsModule } from 'ngx-date-fns';
 
-class TableComponent {
+class NavbarComponent {
+    constructor() {
+        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
+        // https://github.com/storybookjs/storybook/issues/16865
+        // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * Routes object
+         *
+         * @type {IRoute}
+         * @memberof NavbarComponent
+         * @ignore
+         */
+        this.routes = [];
+        /**
+         * Actived route id
+         *
+         * @type {string}
+         * @memberof NavbarComponent
+         */
+        this.activedRoute = '';
+        /**
+         * User first name and last name initials
+         *
+         * @type {string}
+         * @memberof NavbarComponent
+         */
+        this.userInitials = '';
+        /**
+         * @ignore
+         */
+        this.navigateEvent = new EventEmitter();
+    }
+    navigate(route) {
+        this.navigateEvent.emit(route.id);
+    }
+}
+NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userInitials: "userInitials" }, outputs: { navigateEvent: "navigateEvent" }, ngImport: i0, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button>\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button>\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n", styles: [".mat-toolbar{height:80px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%}.mat-toolbar .custom-toolbar .init-gradient{width:160px;height:100%;background:linear-gradient(270deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.mat-toolbar .custom-toolbar .content{background-color:#e9f0f1;width:100%}.mat-toolbar .custom-toolbar .content .logo{width:140px}.mat-toolbar .custom-toolbar .content .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .content .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .content .navigation a.active{box-shadow:inset 0 5px 0 -1px #46a997}.mat-toolbar .custom-toolbar .content .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .content .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .content .actions .profile-circle{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:32px;height:32px;background:#D4E0E4;border-radius:128px;font-weight:600;font-size:14px;text-align:center;margin-left:32px}.mat-toolbar .custom-toolbar .final-gradient{width:160px;height:100%;background:linear-gradient(90deg,rgb(233,240,241) 0%,rgba(233,240,241,0) 100%)}.row{display:flex;flex-direction:row}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { routes: [{
+                type: Input
+            }], activedRoute: [{
+                type: Input
+            }], userInitials: [{
+                type: Input
+            }], navigateEvent: [{
+                type: Output
+            }] } });
+
+class NavbarComponentModule {
+}
+NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule], exports: [NavbarComponent] });
+NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavbarComponent],
+                    imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule],
+                    exports: [NavbarComponent],
+                    providers: [],
+                }]
+        }] });
+
+class PaginatorComponent {
     constructor() {
+        // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
+        // https://github.com/storybookjs/storybook/issues/16865
+        // https://github.com/storybookjs/storybook/issues/17004
+        /**
+         * Data length
+         *
+         * @type {number}
+         * @memberof PaginatorComponent
+         */
+        this.length = 0;
+        /**
+         * Default page size
+         *
+         * @type {number}
+         * @memberof PaginatorComponent
+         */
+        this.defaultPageSize = 10;
+        /**
+         * @ignore
+         */
+        this.paginatorChangedEvent = new EventEmitter();
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() { }
+    paginatorChanged(paginator) {
+        this.paginatorChangedEvent.emit(paginator);
+    }
+}
+PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;background:rgba(233,240,241,.5);font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{background:rgba(233,240,241,.5);height:100%;width:70px;border-radius:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { length: [{
+                type: Input
+            }], defaultPageSize: [{
+                type: Input
+            }], paginatorChangedEvent: [{
+                type: Output
+            }] } });
+
+class PaginatorComponentModule {
+}
+PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponentModule, declarations: [PaginatorComponent], imports: [CommonModule, MatPaginatorModule], exports: [PaginatorComponent] });
+PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponentModule, providers: [], imports: [[CommonModule, MatPaginatorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PaginatorComponent],
+                    imports: [CommonModule, MatPaginatorModule],
+                    exports: [PaginatorComponent],
+                    providers: [],
+                }]
+        }] });
+
+var DataType;
+(function (DataType) {
+    DataType["Date"] = "date";
+    DataType["String"] = "string";
+    DataType["Label"] = "label";
+    DataType["Percentage"] = "percentage";
+})(DataType || (DataType = {}));
+var DateFormat;
+(function (DateFormat) {
+    DateFormat["Short"] = "short";
+    DateFormat["TimeAgo"] = "timeAgo";
+})(DateFormat || (DateFormat = {}));
+
+class DataPropertyGetterPipe {
+    transform(object, keyName) {
+        return this.getDeepVal(object, keyName);
+    }
+    getDeepVal(obj, path) {
+        if (typeof obj === 'undefined' || obj === null) {
+            return '';
+        }
+        const splittedPath = path.split(/[\.\[\]\"\']{1,2}/);
+        for (let i = 0, l = splittedPath.length; i < l; i++) {
+            if (splittedPath[i] === '') {
+                continue;
+            }
+            obj = obj[splittedPath[i]];
+            if (typeof obj === 'undefined' || obj === null) {
+                return '';
+            }
+        }
+        return obj;
+    }
+}
+DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataPropertyGetterPipe, name: "dataPropertyGetter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dataPropertyGetter',
+                }]
+        }] });
+
+class TableComponent {
+    constructor(dataPropertyGetterPipe) {
+        this.dataPropertyGetterPipe = dataPropertyGetterPipe;
         // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
         // https://github.com/storybookjs/storybook/issues/16865
         // https://github.com/storybookjs/storybook/issues/17004
@@ -20,6 +202,14 @@ class TableComponent {
          * @ignore
          */
         this.displayedColumns = [];
+        /**
+         * @ignore
+         */
+        this.DataType = DataType;
+        /**
+         * @ignore
+         */
+        this.DateFormat = DateFormat;
         /**
          * Data structure to select which columns should be rendered and their capabilities
          *
@@ -43,7 +233,9 @@ class TableComponent {
      * @memberof TableComponent
      */
     set tableData(data) {
-        this.setTableDataSource(data);
+        if (data?.length) {
+            this.setTableDataSource(data);
+        }
     }
     /**
      * @ignore
@@ -66,15 +258,16 @@ class TableComponent {
      */
     setTableDataSource(data) {
         this.dataSource = new MatTableDataSource(data);
+        this.dataSource.sortingDataAccessor = (item, property) => this.dataPropertyGetterPipe.transform(item, property);
         this.dataSource.sort = this.sort;
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.isSortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey\" arrowPosition=\"after\">\n        {{tableColumn.name}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      {{element[tableColumn.dataKey]}}\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n", styles: ["table{width:100%}table .mat-header-cell{font-weight:700}\n"], components: [{ type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1.MatCellDef, selector: "[matCellDef]" }, { type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey\" arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <span class=\"label\" [ngClass]=\"(element | dataPropertyGetter: tableColumn.dataKey)\">\n            {{(element | dataPropertyGetter: tableColumn.dataKey)}}\n          </span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0}table .mat-header-cell{font-weight:700;color:#000;background:rgba(233,240,241,.5)}table td,table th,table .mat-row{border:none}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table .label.active{background-color:#46a997;color:#fff}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "dfnsFormat": i5$1.FormatPipe, "dfnsParseIso": i5$1.ParseIsoPipe, "dfnsFormatDistanceToNow": i5$1.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.isSortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey\" arrowPosition=\"after\">\n        {{tableColumn.name}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      {{element[tableColumn.dataKey]}}\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n", styles: ["table{width:100%}table .mat-header-cell{font-weight:700}\n"] }]
-        }], propDecorators: { sort: [{
+            args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey\" arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <span class=\"label\" [ngClass]=\"(element | dataPropertyGetter: tableColumn.dataKey)\">\n            {{(element | dataPropertyGetter: tableColumn.dataKey)}}\n          </span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0}table .mat-header-cell{font-weight:700;color:#000;background:rgba(233,240,241,.5)}table td,table th,table .mat-row{border:none}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table .label.active{background-color:#46a997;color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort, { static: true }]
             }], tableData: [{
@@ -90,22 +283,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class TableComponentModule {
 }
 TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent], imports: [CommonModule, MatTableModule, MatSortModule], exports: [TableComponent] });
-TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, imports: [[CommonModule, MatTableModule, MatSortModule]] });
+TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe], imports: [CommonModule, MatTableModule, MatSortModule, DateFnsModule], exports: [TableComponent] });
+TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, DateFnsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TableComponent],
-                    imports: [CommonModule, MatTableModule, MatSortModule],
+                    declarations: [TableComponent, DataPropertyGetterPipe],
+                    imports: [CommonModule, MatTableModule, MatSortModule, DateFnsModule],
                     exports: [TableComponent],
+                    providers: [DataPropertyGetterPipe],
                 }]
         }] });
 
-// PUBLIC API
+// Navbar Component
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TableComponent, TableComponentModule };
+export { DataPropertyGetterPipe, DataType, DateFormat, NavbarComponent, NavbarComponentModule, PaginatorComponent, PaginatorComponentModule, TableComponent, TableComponentModule };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map

package/fesm2020/testgorilla-tgo-ui.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui.mjs","sources":["../../../src/components/table/table.component.ts","../../../src/components/table/table.component.html","../../../src/components/table/table.component.module.ts","../../../src/public-api.ts","../../../src/testgorilla-tgo-ui.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\nimport { MatSort, Sort } from '@angular/material/sort';\nimport { MatTableDataSource } from '@angular/material/table';\nimport { IDataSource, ITableColumn } from './table.types';\n\n@Component({\n  selector: 'ui-table',\n  templateUrl: './table.component.html',\n  styleUrls: ['./table.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TableComponent implements OnInit {\n  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13\n  // https://github.com/storybookjs/storybook/issues/16865\n  // https://github.com/storybookjs/storybook/issues/17004\n\n  /**\n   * @ignore\n   */\n  dataSource = new MatTableDataSource<any>([]);\n\n  /**\n   * @ignore\n   */\n  displayedColumns: string[] = [];\n\n  /**\n   * @ignore\n   */\n  @ViewChild(MatSort, { static: true }) sort!: MatSort;\n\n  /**\n   * Data to be rendered\n   *\n   * @type {IDataSource}\n   * @memberof TableComponent\n   */\n  @Input() set tableData(data: IDataSource[]) {\n    this.setTableDataSource(data);\n  }\n\n  /**\n   * Data structure to select which columns should be rendered and their capabilities\n   *\n   * @type {ITableColumn}\n   * @memberof TableComponent\n   */\n  @Input() tableColumns: ITableColumn[] = [];\n\n  /**\n   * @ignore\n   */\n  @Output() onSortEvent: EventEmitter<Sort> = new EventEmitter<Sort>();\n\n  /**\n   * @ignore\n   */\n  @Output() onRowClickEvent: EventEmitter<any> = new EventEmitter<any>();\n\n  /**\n   * @ignore\n   */\n  ngOnInit(): void {\n    this.displayedColumns = this.tableColumns.map((tableColumn: ITableColumn) => tableColumn.name);\n  }\n\n  onSort(sortParams: Sort) {\n    const column = this.tableColumns.find((column: ITableColumn) => column.name === sortParams.active);\n    if (column?.dataKey) {\n      sortParams.active = column?.dataKey;\n    }\n    this.onSortEvent.emit(sortParams);\n  }\n\n  onRowClick(rowParams: any) {\n    this.onRowClickEvent.emit(rowParams);\n  }\n\n  /**\n   * @ignore\n   */\n  private setTableDataSource(data: IDataSource[]) {\n    this.dataSource = new MatTableDataSource<any>(data);\n    this.dataSource.sort = this.sort;\n  }\n}\n","<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.isSortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey\" arrowPosition=\"after\">\n        {{tableColumn.name}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      {{element[tableColumn.dataKey]}}\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatSortModule } from '@angular/material/sort';\nimport { MatTableModule } from '@angular/material/table';\nimport { TableComponent } from './table.component';\n\n@NgModule({\n  declarations: [TableComponent],\n  imports: [CommonModule, MatTableModule, MatSortModule],\n  exports: [TableComponent],\n})\nexport class TableComponentModule {}\n","// PUBLIC API\n\n// Table Component\nexport * from './components/table/table.component';\nexport * from './components/table/table.component.module';\nexport * from './components/table/table.types';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui.mjs","sources":["../../../src/components/navbar/navbar.component.ts","../../../src/components/navbar/navbar.component.html","../../../src/components/navbar/navbar.component.module.ts","../../../src/components/paginator/paginator.component.ts","../../../src/components/paginator/paginator.component.html","../../../src/components/paginator/paginator.component.module.ts","../../../src/components/table/table.types.ts","../../../src/shared/pipes/dataPropertyGetter.ts","../../../src/components/table/table.component.ts","../../../src/components/table/table.component.html","../../../src/components/table/table.component.module.ts","../../../src/public-api.ts","../../../src/testgorilla-tgo-ui.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { IRoute } from './navbar.types';\n\n@Component({\n  selector: 'ui-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class NavbarComponent {\n  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13\n  // https://github.com/storybookjs/storybook/issues/16865\n  // https://github.com/storybookjs/storybook/issues/17004\n\n  /**\n   * Routes object\n   *\n   * @type {IRoute}\n   * @memberof NavbarComponent\n   * @ignore\n   */\n  @Input() routes: IRoute[] = [];\n\n  /**\n   * Actived route id\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() activedRoute = '';\n\n  /**\n   * User first name and last name initials\n   *\n   * @type {string}\n   * @memberof NavbarComponent\n   */\n  @Input() userInitials = '';\n\n  /**\n   * @ignore\n   */\n  @Output() navigateEvent: EventEmitter<string> = new EventEmitter<string>();\n\n  constructor() {}\n\n  navigate(route: IRoute) {\n    this.navigateEvent.emit(route.id);\n  }\n}\n","<mat-toolbar>\n    <div class=\"custom-toolbar row\">\n        <div class=\"init-gradient\"></div>\n        <div class=\"content row\">\n            <img class=\"logo\" src=\"/images/testgorilla.svg\">\n            <div class=\"navigation row\">\n                <a *ngFor=\"let route of routes\" (click)=\"navigate(route)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n                    <span>{{ route.title }}</span>\n                </a>\n            </div>\n            <div class=\"actions\">\n                <button mat-icon-button>\n                    <mat-icon>help_outline</mat-icon>\n                </button>\n                <div class=\"profile-circle\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\">\n                    {{ userInitials }}\n                </div>\n            </div>\n        </div>\n        <div class=\"final-gradient\"></div>\n    </div>\n</mat-toolbar>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { NavbarComponent } from './navbar.component';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatRippleModule } from '@angular/material/core';\n\n@NgModule({\n  declarations: [NavbarComponent],\n  imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule],\n  exports: [NavbarComponent],\n  providers: [],\n})\nexport class NavbarComponentModule {}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';\nimport { PageEvent } from '@angular/material/paginator';\n\n@Component({\n  selector: 'ui-paginator',\n  templateUrl: './paginator.component.html',\n  styleUrls: ['./paginator.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class PaginatorComponent implements OnInit {\n  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13\n  // https://github.com/storybookjs/storybook/issues/16865\n  // https://github.com/storybookjs/storybook/issues/17004\n\n  /**\n   * Data length\n   *\n   * @type {number}\n   * @memberof PaginatorComponent\n   */\n  @Input() length = 0;\n\n  /**\n   * Default page size\n   *\n   * @type {number}\n   * @memberof PaginatorComponent\n   */\n  @Input() defaultPageSize = 10;\n\n  /**\n   * @ignore\n   */\n  @Output() paginatorChangedEvent: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();\n\n  /**\n   * @ignore\n   */\n  ngOnInit(): void {}\n\n  constructor() {}\n\n  paginatorChanged(paginator: PageEvent) {\n    this.paginatorChangedEvent.emit(paginator);\n  }\n}\n","<mat-paginator [length]=\"length\"\n              [pageSize]=\"defaultPageSize\"\n              [pageSizeOptions]=\"[10, 25, 50]\"\n              (page)=\"paginatorChanged($event)\">\n</mat-paginator>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatPaginatorModule } from '@angular/material/paginator';\nimport { PaginatorComponent } from './paginator.component';\n\n@NgModule({\n  declarations: [PaginatorComponent],\n  imports: [CommonModule, MatPaginatorModule],\n  exports: [PaginatorComponent],\n  providers: [],\n})\nexport class PaginatorComponentModule {}\n","export type IDataSource = {\n  [key: string]: any;\n};\n\nexport interface ITableColumn {\n  name: string;\n  dataKey: string;\n  sortable?: boolean;\n  dataType?: DataType;\n  dateFormat?: DateFormat;\n}\n\nexport enum DataType {\n  Date = 'date',\n  String = 'string',\n  Label = 'label',\n  Percentage = 'percentage',\n}\n\nexport enum DateFormat {\n  Short = 'short',\n  TimeAgo = 'timeAgo',\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { IDataSource } from '../../components/table/table.types';\n\n// TODO: Check type (backend could return a number)\ntype DataPropertyGetterType = string;\n\n@Pipe({\n  name: 'dataPropertyGetter',\n})\nexport class DataPropertyGetterPipe<T extends IDataSource> implements PipeTransform {\n  transform(object: T, keyName: string): DataPropertyGetterType {\n    return this.getDeepVal(object, keyName);\n  }\n\n  private getDeepVal(obj: any, path: string): DataPropertyGetterType {\n    if (typeof obj === 'undefined' || obj === null) {\n      return '';\n    }\n    const splittedPath = path.split(/[\\.\\[\\]\\\"\\']{1,2}/);\n    for (let i = 0, l = splittedPath.length; i < l; i++) {\n      if (splittedPath[i] === '') {\n        continue;\n      }\n      obj = obj[splittedPath[i]];\n      if (typeof obj === 'undefined' || obj === null) {\n        return '';\n      }\n    }\n    return obj;\n  }\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';\nimport { MatSort, Sort } from '@angular/material/sort';\nimport { MatTableDataSource } from '@angular/material/table';\nimport { DataPropertyGetterPipe } from '../../shared/pipes/dataPropertyGetter';\nimport { DataType, DateFormat, IDataSource, ITableColumn } from './table.types';\n\n@Component({\n  selector: 'ui-table',\n  templateUrl: './table.component.html',\n  styleUrls: ['./table.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TableComponent<T extends IDataSource> implements OnInit {\n  // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13\n  // https://github.com/storybookjs/storybook/issues/16865\n  // https://github.com/storybookjs/storybook/issues/17004\n\n  /**\n   * @ignore\n   */\n  dataSource = new MatTableDataSource<any>([]);\n\n  /**\n   * @ignore\n   */\n  displayedColumns: string[] = [];\n\n  /**\n   * @ignore\n   */\n  DataType = DataType;\n\n  /**\n   * @ignore\n   */\n  DateFormat = DateFormat;\n\n  /**\n   * @ignore\n   */\n  @ViewChild(MatSort, { static: true }) sort!: MatSort;\n\n  /**\n   * Data to be rendered\n   *\n   * @type {IDataSource}\n   * @memberof TableComponent\n   */\n  @Input() set tableData(data: T[] | null) {\n    if (data?.length) {\n      this.setTableDataSource(data);\n    }\n  }\n\n  /**\n   * Data structure to select which columns should be rendered and their capabilities\n   *\n   * @type {ITableColumn}\n   * @memberof TableComponent\n   */\n  @Input() tableColumns: ITableColumn[] = [];\n\n  /**\n   * @ignore\n   */\n  @Output() onSortEvent: EventEmitter<Sort> = new EventEmitter<Sort>();\n\n  /**\n   * @ignore\n   */\n  @Output() onRowClickEvent: EventEmitter<any> = new EventEmitter<any>();\n\n  /**\n   * @ignore\n   */\n  ngOnInit(): void {\n    this.displayedColumns = this.tableColumns.map((tableColumn: ITableColumn) => tableColumn.name);\n  }\n\n  constructor(private dataPropertyGetterPipe: DataPropertyGetterPipe<T>) {}\n\n  onSort(sortParams: Sort) {\n    const column = this.tableColumns.find((column: ITableColumn) => column.name === sortParams.active);\n    if (column?.dataKey) {\n      sortParams.active = column?.dataKey;\n    }\n    this.onSortEvent.emit(sortParams);\n  }\n\n  onRowClick(rowParams: any) {\n    this.onRowClickEvent.emit(rowParams);\n  }\n\n  /**\n   * @ignore\n   */\n  private setTableDataSource(data: T[]) {\n    this.dataSource = new MatTableDataSource<any>(data);\n    this.dataSource.sortingDataAccessor = (item, property) => this.dataPropertyGetterPipe.transform(item, property);\n    this.dataSource.sort = this.sort;\n  }\n}\n","<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n  <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n    <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n      <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey\" arrowPosition=\"after\">\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-container>\n    <ng-template #notSortable>\n      <th mat-header-cell *matHeaderCellDef>\n        {{tableColumn.name | uppercase}}\n      </th>\n    </ng-template>\n    <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n      <ng-container [ngSwitch]=\"tableColumn.dataType\">\n        <ng-container *ngSwitchCase=\"DataType.String\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Date\">\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd MMM yyyy'}}</span>\n          <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n            tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow}}</span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Label\">\n          <span class=\"label\" [ngClass]=\"(element | dataPropertyGetter: tableColumn.dataKey)\">\n            {{(element | dataPropertyGetter: tableColumn.dataKey)}}\n          </span>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"DataType.Percentage\">\n          {{element | dataPropertyGetter: tableColumn.dataKey}}%\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          {{element | dataPropertyGetter: tableColumn.dataKey}}\n        </ng-container>\n      </ng-container>\n    </td>\n  </ng-container>\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatSortModule } from '@angular/material/sort';\nimport { MatTableModule } from '@angular/material/table';\nimport { DateFnsModule } from 'ngx-date-fns';\nimport { DataPropertyGetterPipe } from '../../shared/pipes/dataPropertyGetter';\nimport { TableComponent } from './table.component';\n\n@NgModule({\n  declarations: [TableComponent, DataPropertyGetterPipe],\n  imports: [CommonModule, MatTableModule, MatSortModule, DateFnsModule],\n  exports: [TableComponent],\n  providers: [DataPropertyGetterPipe],\n})\nexport class TableComponentModule {}\n","// Navbar Component\nexport * from './components/navbar/navbar.component';\nexport * from './components/navbar/navbar.component.module';\nexport * from './components/navbar/navbar.types';\n// Paginator Component\nexport * from './components/paginator/paginator.component';\nexport * from './components/paginator/paginator.component.module';\n// Table Component\nexport * from './components/table/table.component';\nexport * from './components/table/table.component.module';\nexport * from './components/table/table.types';\n// Pipes\nexport * from './shared/pipes/dataPropertyGetter';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1","i1.DataPropertyGetterPipe","i2","i3","i5"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "lint-staged": {
     "src/**/*.ts": [
       "eslint --fix",
@@ -27,7 +27,9 @@
     "@angular/platform-browser-dynamic": "^13.3.4",
     "@angular/router": "^13.3.4",
     "rxjs": "^7.5.5",
-    "zone.js": "^0.11.5"
+    "zone.js": "^0.11.5",
+    "date-fns": "^2.28.0",
+    "ngx-date-fns": "^9.0.0"
   },
   "module": "fesm2015/testgorilla-tgo-ui.mjs",
   "es2020": "fesm2020/testgorilla-tgo-ui.mjs",

package/public-api.d.ts

@@ -1,3 +1,9 @@
+export * from './components/navbar/navbar.component';
+export * from './components/navbar/navbar.component.module';
+export * from './components/navbar/navbar.types';
+export * from './components/paginator/paginator.component';
+export * from './components/paginator/paginator.component.module';
 export * from './components/table/table.component';
 export * from './components/table/table.component.module';
 export * from './components/table/table.types';
+export * from './shared/pipes/dataPropertyGetter';

package/shared/pipes/dataPropertyGetter.d.ts

@@ -0,0 +1,11 @@
+import { PipeTransform } from '@angular/core';
+import { IDataSource } from '../../components/table/table.types';
+import * as i0 from "@angular/core";
+declare type DataPropertyGetterType = string;
+export declare class DataPropertyGetterPipe<T extends IDataSource> implements PipeTransform {
+    transform(object: T, keyName: string): DataPropertyGetterType;
+    private getDeepVal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataPropertyGetterPipe<any>, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DataPropertyGetterPipe<any>, "dataPropertyGetter">;
+}
+export {};

package/src/assets/images/testgorilla.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 390"><defs><style>.cls-1{fill:#ccc;}.cls-2{fill:#fff;}</style></defs><title>Artboard 1</title><path class="cls-1" d="M191.72,317.52c0,4.56-22.8,8.25-50.93,8.25s-50.92-3.69-50.92-8.25,22.8-8.26,50.92-8.26S191.72,313,191.72,317.52Z"/><path d="M87.79,231.82V95.75L89,94.27c4.75-6,25.93-14.64,51.82-14.64s47.06,8.65,51.81,14.64l1.18,1.48V231.82l-53,56.27Z"/><path class="cls-2" d="M174.11,180.39c6.32-5.18,12.78-14.58,12.78-31.37,0-13.41-7-13.58-16.33-13.58H111c-9.34,0-16.33.17-16.33,13.58,0,16.79,6.47,26.19,12.79,31.37C98.53,191,93.23,204.27,93.23,217v19.68l47.56,49.25,47.55-49.25V217C188.34,204.27,183,191,174.11,180.39Z"/><polygon points="120.47 264.87 140.79 285.91 161.1 264.87 120.47 264.87"/><path d="M181.22,79.16c-11.85-4.47-26.2-6.93-40.43-6.93s-28.58,2.46-40.43,6.93c-9.11,3.44-20,9.29-20,17.64V232.21a6.44,6.44,0,0,0,1.75,4.4l54,57.32a6.42,6.42,0,0,0,9.35,0l54-57.32a6.44,6.44,0,0,0,1.75-4.4V96.8C201.19,88.45,190.33,82.6,181.22,79.16Zm7.12,150.5-47.55,50.5-47.56-50.5v-132c3.13-4,22.22-12.59,47.56-12.59s44.42,8.64,47.55,12.59Z"/><path d="M140.79,239.81a258.93,258.93,0,0,1-55.07-5.95,5.14,5.14,0,0,1,2.18-10,247.55,247.55,0,0,0,105.77,0,5.14,5.14,0,1,1,2.18,10A258.91,258.91,0,0,1,140.79,239.81Z"/><path d="M138.23,183.26a5.79,5.79,0,1,1-5.79-5.79A5.79,5.79,0,0,1,138.23,183.26Z"/><path d="M154.92,183.26a5.79,5.79,0,1,1-5.79-5.79A5.79,5.79,0,0,1,154.92,183.26Z"/><path d="M131.67,163.13a5.08,5.08,0,0,1-1.94-.38,21.41,21.41,0,0,0-16.84,0,5.14,5.14,0,1,1-3.88-9.51,31.6,31.6,0,0,1,24.59,0,5.13,5.13,0,0,1-1.93,9.89Z"/><path d="M170.62,163.13a5.06,5.06,0,0,1-1.93-.38,21.44,21.44,0,0,0-16.85,0,5.13,5.13,0,1,1-3.87-9.51,31.6,31.6,0,0,1,24.59,0,5.13,5.13,0,0,1-1.94,9.89Z"/><path d="M301.79,160.48H275.35V248a2.58,2.58,0,0,1-2.44,2.71h-7.46A2.58,2.58,0,0,1,263,248V160.48H236.56c-1.49,0-2.71-.67-2.71-2.17v-6a2.58,2.58,0,0,1,2.71-2.44h65.23a2.39,2.39,0,0,1,2.58,2.44v6C304.37,159.67,303.28,160.48,301.79,160.48Z"/><path d="M373.26,217.17H327.82v1.9c0,16.14,6.38,22.11,18.86,22.11a185.54,185.54,0,0,0,24.13-1.49h.68a1.92,1.92,0,0,1,2.17,1.89v4.62c0,1.76-.54,2.71-2.71,3.12a123.13,123.13,0,0,1-24.27,2.3c-15.6,0-30.79-7.33-30.79-32.55V206.86c0-19.39,10.71-31.73,30.11-31.73,19.8,0,29.83,12.48,29.83,31.73v7.33C375.83,216,374.88,217.17,373.26,217.17Zm-9.5-10.31c0-15.32-5.83-21.29-17.76-21.29-11.67,0-18.18,6.65-18.18,21.29v1.23h35.94Z"/><path d="M413.93,251.62c-5,0-14.78-.41-21.43-2-1.76-.4-2.84-1.21-2.84-2.71v-4.75a2.2,2.2,0,0,1,2.44-2h.54c6.51.82,16.41,1.49,21.29,1.49,8.82,0,13.43-2.3,13.43-9.62,0-4.07-2.44-6.65-10.17-11.26l-13.7-8.14c-8.27-5-13.83-10.85-13.83-19.39,0-14.11,10.58-18,24.55-18a127.53,127.53,0,0,1,21.15,1.76c1.76.28,2.58,1.22,2.58,2.72v4.47a2.08,2.08,0,0,1-2.31,2.31h-.41c-4.74-.41-13.42-1.09-21-1.09s-12.62.95-12.62,7.87c0,4.07,3.12,6.64,9.36,10.3l13.43,8c11.25,6.64,14.91,12.47,14.91,20.48C439.29,245.79,429.12,251.62,413.93,251.62Z"/><path d="M492.45,250.94a65.47,65.47,0,0,1-8.82.68c-12.47,0-18.44-3.25-18.44-18.17V186.12L452,184.62c-1.49-.13-2.57-.94-2.57-2.44v-3.66a2.38,2.38,0,0,1,2.57-2.44h13.16V162.79a2.76,2.76,0,0,1,2.44-2.71l7.05-1.09h.41a2.16,2.16,0,0,1,2,2.31v14.78h14.65a2.72,2.72,0,0,1,2.71,2.71v4.61a2.73,2.73,0,0,1-2.71,2.72H477.12v47.33c0,7.46,1.9,8.54,7.33,8.54H492c1.9,0,2.85.54,2.85,1.9v4.74C494.89,249.86,494.21,250.67,492.45,250.94Z"/><path d="M585.31,170h-.41c-6.51-.27-16.68-1.09-28.21-1.09-11,0-17.77,5.29-17.77,23.06v17c0,18.72,8.55,23.06,15.19,23.06,3.8,0,7.19-.14,10.45-.41V200.36a2.61,2.61,0,0,1,2.57-2.72h17.36a2.74,2.74,0,0,1,2.72,2.72v45.56c0,1.9-.68,2.71-2.72,3.12a147.18,147.18,0,0,1-30.38,2.85c-15.45,0-38.65-8.81-38.65-43.13V192c0-34.59,21.57-43.27,41.23-43.27A128.12,128.12,0,0,1,585,151.81c1.35.27,2.3.81,2.3,2v14.38C587.34,169.71,586.53,170,585.31,170Z"/><path d="M636.16,251.89c-22,0-34-13.7-34-35.26v-9.49c0-21.57,12.06-35.26,34-35.26s33.9,13.69,33.9,35.26v9.49C670.06,238.19,658.12,251.89,636.16,251.89Zm12.07-44.75c0-11-4.21-16.55-12.07-16.55S624,196.15,624,207.14v9.49c0,11,4.34,16.68,12.21,16.68s12.07-5.69,12.07-16.68Z"/><path d="M724.7,190.05h-1.08a36.55,36.55,0,0,0-17.5,4.74v53a2.83,2.83,0,0,1-2.71,2.85H687a3,3,0,0,1-2.84-2.85V175.67a2.72,2.72,0,0,1,2.71-2.71H703a2.72,2.72,0,0,1,2.71,2.71v2.72A29,29,0,0,1,724,171.88a2.72,2.72,0,0,1,2.71,2.71v12.88C726.74,188.69,725.93,190.05,724.7,190.05Z"/><path d="M758.2,164.15H740.57a2.72,2.72,0,0,1-2.71-2.72V148.82a2.71,2.71,0,0,1,2.71-2.71H758.2a2.72,2.72,0,0,1,2.71,2.71v12.61A2.73,2.73,0,0,1,758.2,164.15Zm-.55,86.52H741.11A2.72,2.72,0,0,1,738.4,248V175.67a2.72,2.72,0,0,1,2.71-2.71h16.54a2.72,2.72,0,0,1,2.72,2.71V248A2.72,2.72,0,0,1,757.65,250.67Z"/><path d="M796.57,250.67H780a3,3,0,0,1-2.85-2.85V149.36a2.84,2.84,0,0,1,2.85-2.71h16.54a2.6,2.6,0,0,1,2.58,2.71v98.46A2.72,2.72,0,0,1,796.57,250.67Z"/><path d="M834.81,250.67H818.27a3,3,0,0,1-2.85-2.85V149.36a2.84,2.84,0,0,1,2.85-2.71h16.54a2.6,2.6,0,0,1,2.58,2.71v98.46A2.72,2.72,0,0,1,834.81,250.67Z"/><path d="M910.89,250.67H895.7A2.72,2.72,0,0,1,893,248v-2.17a29.93,29.93,0,0,1-18.85,6.1c-11.8,0-23.19-5.69-23.19-23.33v-1.22c0-15.86,10.17-22.92,33.36-22.92h7.33v-4.88c0-7.73-3.8-9.36-10.18-9.36-8.68,0-18.31.55-22.51.95h-.68a2.21,2.21,0,0,1-2.44-2.44v-11a3,3,0,0,1,2.58-3,109.33,109.33,0,0,1,23.46-2.84c19.53,0,31.74,7.86,31.74,27.66V248A2.73,2.73,0,0,1,910.89,250.67ZM892,217.44h-7.73c-9.49,0-11.93,3.26-11.93,9.9v1.22c0,5.7,2.85,6.79,8.54,6.79a25.05,25.05,0,0,0,11.12-3Z"/></svg>

package/src/theme/_variables.scss

@@ -1,2 +1,2 @@
-$margin: 16px;
-
+/* global */
+$background: #ffffff;

package/src/theme/base.scss

@@ -1,9 +1,11 @@
-@use 'palette.scss';
+@use "palette.scss" as *;
+@use "variables.scss" as *;
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
 body {
   margin: 0;
-  background: #f6f6f6;
+  background: $background;
   font-size: 14px;
   color: #888888;
 
@@ -91,5 +93,3 @@ input {
 input::placeholder {
   font-size: 16px !important;
 }
-
-