@ifsworld/granite-components 3.1.0 → 3.2.0

package/bundles/ifsworld-granite-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/cdk/collections')) :
-    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/cdk/collections'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform, global.ng.cdk.collections));
-}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform, collections) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/testing'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/cdk/keycodes'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/cdk/collections'), require('@angular/cdk/table')) :
+    typeof define === 'function' && define.amd ? define('@ifsworld/granite-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/testing', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/cdk/keycodes', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/cdk/collections', '@angular/cdk/table'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ifsworld = global.ifsworld || {}, global.ifsworld['granite-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion, global.rxjs, global.rxjs.operators, global.ng.cdk.testing, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.cdk.keycodes, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.platform, global.ng.cdk.collections, global.ng.cdk.table));
+}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform, collections, table) { 'use strict';
 
     var GraniteArrangeGridItemComponent = /** @class */ (function () {
         function GraniteArrangeGridItemComponent(element) {
@@ -2925,6 +2925,158 @@
                 },] }
     ];
 
+    var GraniteTableColumnDirective = /** @class */ (function () {
+        function GraniteTableColumnDirective() {
+        }
+        return GraniteTableColumnDirective;
+    }());
+    GraniteTableColumnDirective.decorators = [
+        { type: core.Directive, args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'granite-table-column',
+                },] }
+    ];
+    GraniteTableColumnDirective.propDecorators = {
+        name: [{ type: core.Input }],
+        title: [{ type: core.Input }],
+        staticType: [{ type: core.Input }],
+        tableCellTemplateRef: [{ type: core.ContentChild, args: ['graniteTableCellTemplate', { static: false },] }]
+    };
+
+    var TableConstants = /** @class */ (function () {
+        function TableConstants() {
+        }
+        return TableConstants;
+    }());
+    TableConstants.CELL_ID_PREFIX = 'granite-cell';
+
+    var GraniteTableComponent = /** @class */ (function () {
+        function GraniteTableComponent() {
+            this.ariaLabel = null;
+            this.cellIdPrefix = TableConstants.CELL_ID_PREFIX;
+        }
+        GraniteTableComponent.prototype.ngAfterContentInit = function () {
+            this.columns = this.tableColumnsComponent.toArray();
+            this.renderedColumns = this.columns.map(function (column) { return column.name; });
+        };
+        return GraniteTableComponent;
+    }());
+    GraniteTableComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-table',
+                    template: "<cdk-table\n  [dataSource]=\"dataSource\"\n  multiTemplateDataRows\n  [trackBy]=\"trackBy\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  <ng-container\n    *ngFor=\"let column of columns; index as columnI\"\n    [cdkColumnDef]=\"column.name\"\n  >\n    <!-- Cell Header -->\n    <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n      {{ (column.title ? column.title : column.name) | graniteTitle }}\n    </cdk-header-cell>\n\n    <!-- Cell Data -->\n    <cdk-cell\n      graniteTableDataCell\n      *cdkCellDef=\"let element; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"element[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n    ></cdk-cell>\n  </ng-container>\n\n  <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n  <cdk-row\n    *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n    [attr.aria-rowindex]=\"rowI + 1\"\n  ></cdk-row>\n</cdk-table>\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1}cdk-cell{height:calc(var(--granite-spacing-m) * 2.5);border-top:1px solid var(--granite-color-border-soft)}"]
+                },] }
+    ];
+    GraniteTableComponent.propDecorators = {
+        dataSource: [{ type: core.Input }],
+        trackBy: [{ type: core.Input }],
+        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
+        tableColumnsComponent: [{ type: core.ContentChildren, args: [GraniteTableColumnDirective,] }]
+    };
+
+    var GraniteCell = /** @class */ (function () {
+        function GraniteCell() {
+        }
+        return GraniteCell;
+    }());
+    GraniteCell.decorators = [
+        { type: core.Directive }
+    ];
+    GraniteCell.propDecorators = {
+        id: [{ type: core.Input }],
+        column: [{ type: core.Input }]
+    };
+
+    var GraniteTableDataCellComponent = /** @class */ (function (_super) {
+        __extends(GraniteTableDataCellComponent, _super);
+        function GraniteTableDataCellComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return GraniteTableDataCellComponent;
+    }(GraniteCell));
+    GraniteTableDataCellComponent.decorators = [
+        { type: core.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'cdk-cell[graniteTableDataCell]',
+                    template: "<span class=\"granite-table-data-cell-static-container\">\n  <ng-template\n    [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n    [ngTemplateOutletContext]=\"{\n      data: value,\n      rowIndex: rowIndex,\n      columnIndex: columnIndex,\n      column: column\n    }\"\n  ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n  <ng-container [ngSwitch]=\"staticType\">\n    <ng-container *ngSwitchCase=\"'badge'\">\n      <granite-badge>{{ value }}</granite-badge>\n    </ng-container>\n    <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n  </ng-container>\n</ng-template>\n",
+                    styles: [".granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:var(--granite-spacing-l);font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]
+                },] }
+    ];
+    GraniteTableDataCellComponent.propDecorators = {
+        value: [{ type: core.Input }],
+        staticType: [{ type: core.Input }],
+        rowIndex: [{ type: core.Input }],
+        columnIndex: [{ type: core.Input }],
+        tableCellTemplateRef: [{ type: core.Input }]
+    };
+
+    var GraniteTableHeaderCellComponent = /** @class */ (function (_super) {
+        __extends(GraniteTableHeaderCellComponent, _super);
+        function GraniteTableHeaderCellComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return GraniteTableHeaderCellComponent;
+    }(GraniteCell));
+    GraniteTableHeaderCellComponent.decorators = [
+        { type: core.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'cdk-header-cell[graniteTableHeaderCell]',
+                    template: "<span class=\"granite-table-header-cell-title\">\n  <ng-content></ng-content>\n</span>\n",
+                    styles: [".granite-table-header-cell-title{padding:var(--granite-spacing-s);height:var(--granite-spacing-l);font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]
+                },] }
+    ];
+
+    var GraniteTitlePipe = /** @class */ (function () {
+        function GraniteTitlePipe() {
+        }
+        GraniteTitlePipe.prototype.transform = function (value) {
+            var words = value.split(/(?=[A-Z ])/);
+            return words
+                .map(function (word) { return word.trim(); })
+                .filter(Boolean)
+                .map(function (word) { return word.charAt(0).toLocaleUpperCase() + word.slice(1); })
+                .join(' ');
+        };
+        return GraniteTitlePipe;
+    }());
+    GraniteTitlePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'graniteTitle',
+                },] }
+    ];
+
+    var PurePipesModule = /** @class */ (function () {
+        function PurePipesModule() {
+        }
+        return PurePipesModule;
+    }());
+    PurePipesModule.decorators = [
+        { type: core.NgModule, args: [{
+                    exports: [GraniteTitlePipe],
+                    declarations: [GraniteTitlePipe],
+                },] }
+    ];
+
+    var GraniteTableModule = /** @class */ (function () {
+        function GraniteTableModule() {
+        }
+        return GraniteTableModule;
+    }());
+    GraniteTableModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        GraniteTableComponent,
+                        GraniteTableDataCellComponent,
+                        GraniteTableHeaderCellComponent,
+                        GraniteTableColumnDirective,
+                    ],
+                    imports: [common.CommonModule, table.CdkTableModule, GraniteBadgeModule, PurePipesModule],
+                    exports: [GraniteTableComponent, GraniteTableColumnDirective],
+                },] }
+    ];
+
     var ɵ0 = deviceDesktop.output;
     /**
      * Directive used to tell components and their sub components that client output
@@ -3076,6 +3228,9 @@
     exports.GraniteMenuTriggerForDirective = GraniteMenuTriggerForDirective;
     exports.GraniteRadioButtonComponent = GraniteRadioButtonComponent;
     exports.GraniteRadioButtonModule = GraniteRadioButtonModule;
+    exports.GraniteTableColumnDirective = GraniteTableColumnDirective;
+    exports.GraniteTableComponent = GraniteTableComponent;
+    exports.GraniteTableModule = GraniteTableModule;
     exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
     exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
     exports._MenuBaseComponent = _MenuBaseComponent;
@@ -3088,6 +3243,11 @@
     exports.ɵa = GRANITE_MENU_PANEL;
     exports.ɵc = getEaseOutSteep;
     exports.ɵd = getEaseLinear;
+    exports.ɵe = GraniteTableDataCellComponent;
+    exports.ɵf = GraniteCell;
+    exports.ɵg = GraniteTableHeaderCellComponent;
+    exports.ɵh = PurePipesModule;
+    exports.ɵi = GraniteTitlePipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });