@ifsworld/granite-components 3.0.0-beta.8 → 4.0.0-beta.2

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')) :
-    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'], 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));
-}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform) { '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/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/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.table));
+}(this, (function (exports, core, common, coercion, rxjs, operators, testing, overlay, portal, a11y, keycodes, animations, bidi, platform, table) { 'use strict';
 
     var GraniteArrangeGridItemComponent = /** @class */ (function () {
         function GraniteArrangeGridItemComponent(element) {
@@ -1502,7 +1502,7 @@
                     providers: [
                         { provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
                     ],
-                    styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:calc(var(--granite-spacing-m) * 7)}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - var(--granite-spacing-m) * 7)}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
+                    styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));min-width:calc(var(--granite-spacing-m) * 7);overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs);max-height:calc(100% - var(--granite-spacing-m) * 7)}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;min-height:var(--granite-spacing-xl);max-height:calc(100vh - var(--granite-spacing-xl));outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.08)) drop-shadow(0 4px 20px rgba(0,0,0,.1));border-radius:calc(var(--granite-radius-m) / 2);-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.close:not(:empty).ng-animating{pointer-events:none}"]
                 },] }
     ];
 
@@ -2571,8 +2571,7 @@
             this.ariaLabelledby = null;
             this.valueChange = new core.EventEmitter();
             this.toggleChange = new core.EventEmitter();
-            // eslint-disable-next-line @angular-eslint/no-output-native
-            this.blur = new core.EventEmitter();
+            this.toggleBlur = new core.EventEmitter();
             this._positionBefore = false;
             this._toggleSwitchDisabled = false;
         }
@@ -2601,7 +2600,7 @@
             this._focusMonitor.focusVia(this._getInputElement(), origin, options);
         };
         GraniteToggleSwitchComponent.prototype._onBlur = function () {
-            this.blur.emit();
+            this.toggleBlur.emit();
         };
         GraniteToggleSwitchComponent.prototype._toggleSwitchChange = function () {
             this.checked = this._getInputElement().checked;
@@ -2644,7 +2643,7 @@
         ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
         valueChange: [{ type: core.Output }],
         toggleChange: [{ type: core.Output }],
-        blur: [{ type: core.Output }],
+        toggleBlur: [{ type: core.Output }],
         _inputElement: [{ type: core.ViewChild, args: ['input',] }]
     };
 
@@ -2806,165 +2805,125 @@
                 },] }
     ];
 
-    var GraniteFormFieldComponent = /** @class */ (function () {
-        function GraniteFormFieldComponent() {
+    var GraniteTableColumnDirective = /** @class */ (function () {
+        function GraniteTableColumnDirective() {
+            this.name = '';
+            this.title = '';
+            this.staticType = 'text';
         }
-        return GraniteFormFieldComponent;
+        return GraniteTableColumnDirective;
     }());
-    GraniteFormFieldComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'granite-form-field',
-                    exportAs: 'graniteFormField',
-                    template: "<ng-content></ng-content>\n",
-                    host: {
-                        class: 'granite-form-field',
-                    },
-                    encapsulation: core.ViewEncapsulation.None,
-                    styles: [""]
+    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 GraniteFormFieldModule = /** @class */ (function () {
-        function GraniteFormFieldModule() {
+    var TableConstants = /** @class */ (function () {
+        function TableConstants() {
         }
-        return GraniteFormFieldModule;
+        return TableConstants;
     }());
-    GraniteFormFieldModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule],
-                    declarations: [GraniteFormFieldComponent],
-                    exports: [GraniteFormFieldComponent],
-                },] }
-    ];
+    TableConstants.CELL_ID_PREFIX = 'granite-cell';
 
-    var GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textArea'];
-    var GraniteInputFieldComponent = /** @class */ (function () {
-        function GraniteInputFieldComponent() {
-            this.id = '';
-            this.name = '';
-            this.value = null;
-            this.isRequired = false;
-            this.isReadOnly = false;
-            this.isInvalid = false;
-            this.isDisabled = false;
-            this.placeholderText = '';
-            this.prefixIcon = '';
-            this.maxLength = 255;
-            this.enableCharacterCount = false;
-            this.ariaLabel = null;
-            this.ariaLabelledby = null;
-            this.valueChange = new core.EventEmitter();
-            this.isSupported = true;
-            this.isEmpty = false;
-            this.passwordFieldIcon = 'view';
-            this.currentCharCount = 0;
-            this._type = 'text';
-            this._hasError = false;
+    var GraniteTableComponent = /** @class */ (function () {
+        function GraniteTableComponent() {
+            this.cellIdPrefix = TableConstants.CELL_ID_PREFIX;
         }
-        Object.defineProperty(GraniteInputFieldComponent.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (value) {
-                this._type = value || 'text';
-                this._validateType();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(GraniteInputFieldComponent.prototype, "hasError", {
-            get: function () {
-                return this._hasError;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        GraniteInputFieldComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.value) {
-                this.isEmpty = this.value == null || this.value === '';
-            }
-        };
-        GraniteInputFieldComponent.prototype.ngOnInit = function () {
-            this.isEmpty = this.value == null || this.value === '';
+        GraniteTableComponent.prototype.ngAfterContentInit = function () {
+            this.columns = this.tableColumnsComponent.toArray();
+            this.renderedColumns = this.columns.map(function (column) { return column.name; });
         };
-        GraniteInputFieldComponent.prototype.togglePassword = function () {
-            if (this.isPasswordToggled) {
-                this.isPasswordToggled = false;
-                this._type = 'password';
-                this.passwordFieldIcon = 'view';
-            }
-            else {
-                this.isPasswordToggled = true;
-                this._type = 'text';
-                this.passwordFieldIcon = 'view-disabled';
-            }
-        };
-        GraniteInputFieldComponent.prototype.onKeyUp = function (event) {
-            var inputElement = event.target;
-            this.applyCharacterCount(event);
-            this.valueChange.emit(inputElement.value);
-        };
-        GraniteInputFieldComponent.prototype.onInput = function (event) {
-            var inputElement = event.target;
-            this.valueChange.emit(inputElement.value);
-        };
-        GraniteInputFieldComponent.prototype.applyCharacterCount = function (event) {
-            var inputElement = event.target;
-            if (this.enableCharacterCount) {
-                this.currentCharCount = inputElement.value.length;
-                if (this.currentCharCount > this.maxLength) {
-                    inputElement.value = inputElement.value.slice(0, this.maxLength);
-                    this.currentCharCount = this.maxLength;
-                }
-            }
-        };
-        GraniteInputFieldComponent.prototype._validateType = function () {
-            if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
-                this.isSupported = false;
-                throw Error("Input type \"" + this.type + "\" isn't supported by graniteInputField.");
-            }
-        };
-        return GraniteInputFieldComponent;
+        return GraniteTableComponent;
     }());
-    GraniteInputFieldComponent.decorators = [
+    GraniteTableComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'granite-input-field',
-                    exportAs: 'graniteInputField',
-                    template: "<div class=\"granite-input-container\" *ngIf=\"isSupported\">\n  <div class=\"granite-input-top-row\">\n    <div class=\"granite-input-prepend\" *ngIf=\"prefixIcon != ''\">\n      <granite-icon>{{ prefixIcon }}</granite-icon>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [name]=\"name\"\n      [attr.type]=\"type\"\n      [required]=\"isRequired\"\n      [readonly]=\"isReadOnly\"\n      [disabled]=\"isDisabled\"\n      [placeholder]=\"placeholderText\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      (keyup)=\"onKeyUp($event)\"\n      (input)=\"onInput($event)\"\n      *ngIf=\"type != 'textArea'\"\n      class=\"input-base\"\n      [class.invalid]=\"isInvalid\"\n      [class.empty]=\"isEmpty\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-required]=\"isRequired\"\n      [attr.aria-invalid]=\"isInvalid\"\n    />\n\n    <button\n      class=\"granite-input-append\"\n      *ngIf=\"type == 'password' || isPasswordToggled != null\"\n      (click)=\"togglePassword()\"\n    >\n      <granite-icon> {{ passwordFieldIcon }}</granite-icon>\n    </button>\n\n    <textarea\n      *ngIf=\"type === 'textArea'\"\n      [id]=\"id\"\n      [name]=\"name\"\n      [attr.type]=\"type\"\n      [required]=\"isRequired\"\n      [readonly]=\"isReadOnly\"\n      [disabled]=\"isDisabled\"\n      [placeholder]=\"placeholderText\"\n      [value]=\"value\"\n      [maxLength]=\"maxLength\"\n      (keyup)=\"onKeyUp($event)\"\n      (input)=\"onInput($event)\"\n      class=\"input-base\"\n      [class.invalid]=\"isInvalid\"\n      [class.empty]=\"isEmpty\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-required]=\"isRequired\"\n      [attr.aria-invalid]=\"isInvalid\"\n    ></textarea>\n  </div>\n\n  <div class=\"granite-input-bottom-row\">\n    <div class=\"granite-input-char-count\" *ngIf=\"enableCharacterCount\">\n      {{ currentCharCount }}/{{ maxLength }}\n    </div>\n  </div>\n\n  <div><br /></div>\n</div>\n",
-                    host: {
-                        class: 'granite-input-field',
-                    },
-                    styles: [":host{transition:all .2s ease-out;width:14.5rem}.granite-input-container{height:2rem;width:inherit;font-size:.75rem}.granite-input-container :hover{box-shadow:0 .0625rem 0 var(--granite-color-focus)}.granite-input-container .input-base{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background);padding:.5rem 0 .5rem .5rem;width:inherit;color:var(--granite-color-text);font:inherit;font-weight:400;line-height:.75rem}.granite-input-container .input-base.invalid{color:var(--granite-color-signal-failure);box-shadow:0 .0625rem 0 var(--granite-color-signal-failure)}.granite-input-container .input-base:required.empty{background-color:var(--granite-color-background-failure)}.granite-input-container .input-base:-moz-read-only{background-color:var(--granite-color-background-variant-2)}.granite-input-container .input-base:read-only{background-color:var(--granite-color-background-variant-2)}.granite-input-container .input-base::-moz-placeholder{color:#a2a2a5}.granite-input-container .input-base:-ms-input-placeholder{color:#a2a2a5}.granite-input-container .input-base::placeholder{color:#a2a2a5}.granite-input-container .granite-input-top-row{display:inline-flex;background:var(--granite-color-background);width:inherit}.granite-input-container .granite-input-top-row :focus-within{box-shadow:0 -.0625rem 0 var(--granite-color-focus),-.0625rem 0 0 var(--granite-color-focus),.0625rem 0 0 var(--granite-color-focus),0 .0625rem 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row :focus-within.invalid{box-shadow:0 -.0625rem 0 var(--granite-color-focus),-.0625rem 0 0 var(--granite-color-focus),.0625rem 0 0 var(--granite-color-focus),0 .0625rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 .5rem;background:var(--granite-color-background)}.granite-input-container .granite-input-prepend :hover{box-shadow:none}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;-webkit-margin-start:.05rem;margin-inline-start:.05rem;background:var(--granite-color-background);position:relative}.granite-input-container .granite-input-append :hover{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:.5rem;background-size:contain;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
+                    selector: 'granite-table',
+                    template: "<cdk-table [dataSource]=\"dataSource\" multiTemplateDataRows [trackBy]=\"trackBy\">\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 }}\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    >\n    </cdk-cell>\n  </ng-container>\n\n  <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n  <cdk-row *cdkRowDef=\"let row; columns: renderedColumns\"></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)}"]
                 },] }
     ];
-    GraniteInputFieldComponent.propDecorators = {
+    GraniteTableComponent.propDecorators = {
+        dataSource: [{ type: core.Input }],
+        trackBy: [{ type: core.Input }],
+        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 }],
-        name: [{ 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 *ngIf=\"staticType === 'text'\">\n    {{ value }}\n  </ng-container>\n  <ng-container *ngIf=\"staticType === 'badge'\">\n    <granite-badge>{{ value }}</granite-badge>\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 }],
-        isRequired: [{ type: core.Input }],
-        isReadOnly: [{ type: core.Input }],
-        isInvalid: [{ type: core.Input }],
-        isDisabled: [{ type: core.Input }],
-        placeholderText: [{ type: core.Input }],
-        prefixIcon: [{ type: core.Input }],
-        maxLength: [{ type: core.Input }],
-        enableCharacterCount: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
-        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
-        valueChange: [{ type: core.Output }],
-        type: [{ type: core.Input }]
+        staticType: [{ type: core.Input }],
+        rowIndex: [{ type: core.Input }],
+        columnIndex: [{ type: core.Input }],
+        tableCellTemplateRef: [{ type: core.Input }]
     };
 
-    var GraniteInputFieldModule = /** @class */ (function () {
-        function GraniteInputFieldModule() {
+    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 GraniteTableModule = /** @class */ (function () {
+        function GraniteTableModule() {
         }
-        return GraniteInputFieldModule;
+        return GraniteTableModule;
     }());
-    GraniteInputFieldModule.decorators = [
+    GraniteTableModule.decorators = [
         { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, GraniteIconModule, GraniteButtonModule],
-                    declarations: [GraniteInputFieldComponent],
-                    exports: [GraniteInputFieldComponent],
+                    declarations: [
+                        GraniteTableComponent,
+                        GraniteTableDataCellComponent,
+                        GraniteTableHeaderCellComponent,
+                        GraniteTableColumnDirective,
+                    ],
+                    imports: [common.CommonModule, table.CdkTableModule, GraniteBadgeModule],
+                    exports: [GraniteTableComponent, GraniteTableColumnDirective],
                 },] }
     ];
 
@@ -3104,15 +3063,11 @@
     exports.GraniteButtonModule = GraniteButtonModule;
     exports.GraniteCoreModule = GraniteCoreModule;
     exports.GraniteDividerDirective = GraniteDividerDirective;
-    exports.GraniteFormFieldComponent = GraniteFormFieldComponent;
-    exports.GraniteFormFieldModule = GraniteFormFieldModule;
     exports.GraniteGridComponent = GraniteGridComponent;
     exports.GraniteGridItemComponent = GraniteGridItemComponent;
     exports.GraniteGridModule = GraniteGridModule;
     exports.GraniteIconComponent = GraniteIconComponent;
     exports.GraniteIconModule = GraniteIconModule;
-    exports.GraniteInputFieldComponent = GraniteInputFieldComponent;
-    exports.GraniteInputFieldModule = GraniteInputFieldModule;
     exports.GraniteMenuComponent = GraniteMenuComponent;
     exports.GraniteMenuHarness = GraniteMenuHarness;
     exports.GraniteMenuItemComponent = GraniteMenuItemComponent;
@@ -3121,6 +3076,9 @@
     exports.GraniteMenuTouchCloseComponent = GraniteMenuTouchCloseComponent;
     exports.GraniteMenuTouchTitleItemComponent = GraniteMenuTouchTitleItemComponent;
     exports.GraniteMenuTriggerForDirective = GraniteMenuTriggerForDirective;
+    exports.GraniteTableColumnDirective = GraniteTableColumnDirective;
+    exports.GraniteTableComponent = GraniteTableComponent;
+    exports.GraniteTableModule = GraniteTableModule;
     exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
     exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
     exports._MenuBaseComponent = _MenuBaseComponent;
@@ -3133,6 +3091,9 @@
     exports.ɵa = GRANITE_MENU_PANEL;
     exports.ɵc = getEaseOutSteep;
     exports.ɵd = getEaseLinear;
+    exports.ɵe = GraniteTableDataCellComponent;
+    exports.ɵf = GraniteCell;
+    exports.ɵg = GraniteTableHeaderCellComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });