@ifsworld/granite-components 3.0.0 → 3.3.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')) :
-    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/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) {
@@ -2659,6 +2659,126 @@
                 },] }
     ];
 
+    var GraniteRadioButtonComponent = /** @class */ (function () {
+        function GraniteRadioButtonComponent(_focusMonitor, _radioDispatcher) {
+            var _this = this;
+            this._focusMonitor = _focusMonitor;
+            this._radioDispatcher = _radioDispatcher;
+            this.id = null;
+            this.checked = false;
+            this.required = false;
+            this.disabled = false;
+            this.readonly = false;
+            this.labelPosition = 'after';
+            this.ariaLabel = null;
+            this.ariaLabelledby = null;
+            this.radioChange = new core.EventEmitter();
+            this.radioBlur = new core.EventEmitter();
+            this._positionBefore = false;
+            this._radioDisabled = false;
+            this._removeUniqueSelectionListener = function () {
+                // Function used to deregister listener
+            };
+            this._removeUniqueSelectionListener = _radioDispatcher.listen(function (id, name) {
+                if (id !== _this.id && name === _this.name) {
+                    _this.checked = false;
+                }
+            });
+        }
+        GraniteRadioButtonComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.checked) {
+                this.checked = coercion.coerceBooleanProperty(changes.checked.currentValue);
+            }
+            if (changes.required) {
+                this.required = coercion.coerceBooleanProperty(changes.required.currentValue);
+            }
+            if (changes.readonly) {
+                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
+            }
+            if (changes.disabled) {
+                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
+            }
+            if (changes.labelPosition != null) {
+                this._positionBefore =
+                    changes.labelPosition.currentValue != null &&
+                        changes.labelPosition.currentValue === 'before';
+            }
+            if ((changes.disabled || changes.readonly) &&
+                (this.disabled || this.readonly)) {
+                this._radioDisabled = true;
+            }
+        };
+        GraniteRadioButtonComponent.prototype.ngOnDestroy = function () {
+            this._removeUniqueSelectionListener();
+        };
+        // Focuses the radio button.
+        GraniteRadioButtonComponent.prototype.focus = function (origin, options) {
+            if (origin === void 0) { origin = 'program'; }
+            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+        };
+        GraniteRadioButtonComponent.prototype._radioClick = function (targetValue) {
+            this.radioChange.emit(targetValue);
+        };
+        GraniteRadioButtonComponent.prototype._radioChange = function () {
+            this.checked = this._getInputElement().checked;
+            // Notify all radio buttons with the same name to un-check
+            this._radioDispatcher.notify(this.id, this.name);
+        };
+        GraniteRadioButtonComponent.prototype._onBlur = function () {
+            this.radioBlur.emit();
+        };
+        GraniteRadioButtonComponent.prototype._getInputElement = function () {
+            return this._inputElement.nativeElement;
+        };
+        return GraniteRadioButtonComponent;
+    }());
+    GraniteRadioButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-radio-button',
+                    exportAs: 'graniteRadioButton',
+                    host: {
+                        class: 'granite-radio-button',
+                        '[class.granite-radio-button-disabled]': 'disabled',
+                        '[class.granite-radio-button-label-before]': '_positionBefore',
+                        '[class.granite-radio-button-checked]': 'checked',
+                        '[class.granite-radio-button-readonly]': 'readonly',
+                    },
+                    template: "<label class=\"granite-radio-button-label\">\n  <div class=\"granite-radio-button-outer-circle\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-radio-button-input cdk-visually-hidden\"\n      type=\"radio\"\n      [attr.name]=\"name\"\n      [disabled]=\"_radioDisabled\"\n      [checked]=\"checked\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [value]=\"value\"\n      (click)=\"_radioClick($event.target.value)\"\n      (change)=\"_radioChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-radio-button-inner-circle\"></div>\n  </div>\n  <span class=\"granite-radio-button-text\">\n    <ng-content></ng-content>\n  </span>\n</label>\n",
+                    styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:1px solid var(--granite-color-focus)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;-webkit-animation:growAnimation .1s;animation:growAnimation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:1px solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:1px solid var(--granite-color-text)}.granite-radio-button-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s);color:var(--granite-color-text)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;-webkit-margin-end:var(--granite-spacing-xl);margin-inline-end:var(--granite-spacing-xl)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:var(--granite-spacing-m);width:var(--granite-spacing-m);border-radius:50%;box-sizing:border-box;border:1px solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:calc(var(--granite-spacing-s) * 1.25);height:calc(var(--granite-spacing-s) * 1.25);visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@-webkit-keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes growAnimation{0%{transform:scale(0)}to{transform:scale(1)}}"]
+                },] }
+    ];
+    GraniteRadioButtonComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor },
+        { type: collections.UniqueSelectionDispatcher }
+    ]; };
+    GraniteRadioButtonComponent.propDecorators = {
+        value: [{ type: core.Input }],
+        id: [{ type: core.Input }],
+        name: [{ type: core.Input }],
+        checked: [{ type: core.Input }],
+        required: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        labelPosition: [{ type: core.Input }],
+        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
+        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
+        radioChange: [{ type: core.Output }],
+        radioBlur: [{ type: core.Output }],
+        _inputElement: [{ type: core.ViewChild, args: ['input',] }]
+    };
+
+    var GraniteRadioButtonModule = /** @class */ (function () {
+        function GraniteRadioButtonModule() {
+        }
+        return GraniteRadioButtonModule;
+    }());
+    GraniteRadioButtonModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [GraniteRadioButtonComponent],
+                    exports: [GraniteRadioButtonComponent],
+                },] }
+    ];
+
     var disabledMixin = function (Base) {
         if (Base === void 0) { Base = /** @class */ (function () {
             function class_1() {
@@ -2805,6 +2925,314 @@
                 },] }
     ];
 
+    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 GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];
+    var GraniteInputFieldComponent = /** @class */ (function () {
+        function GraniteInputFieldComponent(_focusMonitor) {
+            this._focusMonitor = _focusMonitor;
+            this.id = null;
+            this.name = null;
+            this.type = 'text';
+            this.value = '';
+            this.required = false;
+            this.readonly = false;
+            this.invalid = false;
+            this.disabled = false;
+            this.placeholder = '';
+            this.maxlength = 255;
+            this.countcharacters = false;
+            this.ariaLabel = null;
+            this.ariaLabelledby = null;
+            this.valueChange = new core.EventEmitter();
+            this._supported = true;
+            this._empty = false;
+            this._passwordFieldIcon = 'view';
+            this._passwordField = false;
+            this._passwordToggled = false;
+            this._currentCharCount = 0;
+        }
+        GraniteInputFieldComponent.prototype.ngOnInit = function () {
+            this._validateType();
+            this._passwordField = this.type == 'password';
+            this._empty = this.value == null || this.value === '';
+        };
+        GraniteInputFieldComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.required) {
+                this.required = coercion.coerceBooleanProperty(changes.required.currentValue);
+            }
+            if (changes.readonly) {
+                this.readonly = coercion.coerceBooleanProperty(changes.readonly.currentValue);
+            }
+            if (changes.invalid) {
+                this.invalid = coercion.coerceBooleanProperty(changes.invalid.currentValue);
+            }
+            if (changes.disabled) {
+                this.disabled = coercion.coerceBooleanProperty(changes.disabled.currentValue);
+            }
+            if (changes.countcharacters) {
+                this.countcharacters = coercion.coerceBooleanProperty(changes.countcharacters.currentValue);
+            }
+            if (changes.value) {
+                this._empty = this.value == null || this.value === '';
+            }
+            if (changes.type) {
+                this._validateType();
+            }
+        };
+        GraniteInputFieldComponent.prototype.focus = function (origin, options) {
+            if (origin === void 0) { origin = 'program'; }
+            if (this.type === 'text') {
+                this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+            }
+            else if (this.type === 'textarea') {
+                this._focusMonitor.focusVia(this._getTextareaElement(), origin, options);
+            }
+        };
+        GraniteInputFieldComponent.prototype._togglePassword = function () {
+            if (this._passwordToggled) {
+                this._passwordToggled = false;
+                this.type = 'password';
+                this._passwordFieldIcon = 'view';
+            }
+            else {
+                this._passwordToggled = true;
+                this.type = 'text';
+                this._passwordFieldIcon = 'view-disabled';
+            }
+        };
+        GraniteInputFieldComponent.prototype._onKeyUp = function (event) {
+            var inputEvent = event.target;
+            this._applyCharacterCount(inputEvent.value);
+            this._empty = inputEvent.value == null || inputEvent.value === '';
+            this.valueChange.emit(inputEvent.value);
+        };
+        GraniteInputFieldComponent.prototype._onInput = function (event) {
+            var inputEvent = event.target;
+            this._empty = inputEvent.value == null || inputEvent.value === '';
+            this.valueChange.emit(inputEvent.value);
+        };
+        GraniteInputFieldComponent.prototype._validateType = function () {
+            if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
+                this._supported = false;
+                throw Error("Input type \"" + this.type + "\" isn't supported by graniteInputField.");
+            }
+        };
+        GraniteInputFieldComponent.prototype._applyCharacterCount = function (inputString) {
+            if (this.countcharacters) {
+                this._currentCharCount = inputString.length;
+                if (this._currentCharCount > this.maxlength) {
+                    inputString = inputString.slice(0, this.maxlength);
+                    this._currentCharCount = this.maxlength;
+                }
+            }
+        };
+        GraniteInputFieldComponent.prototype._getInputElement = function () {
+            return this._inputElement.nativeElement;
+        };
+        GraniteInputFieldComponent.prototype._getTextareaElement = function () {
+            return this._textareaElement.nativeElement;
+        };
+        return GraniteInputFieldComponent;
+    }());
+    GraniteInputFieldComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'granite-input-field',
+                    exportAs: 'graniteInputField',
+                    template: "<div\n  *ngIf=\"_supported\"\n  class=\"granite-input-container\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n>\n  <div\n    class=\"granite-input-top-row\"\n    [class.granite-input-required]=\"required\"\n    [class.granite-input-empty]=\"_empty\"\n    [class.granite-input-disabled]=\"disabled\"\n    [class.granite-input-readonly]=\"readonly\"\n  >\n    <div\n      *ngIf=\"prefixicon\"\n      class=\"granite-input-prepend\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n    >\n      <granite-icon class=\"granite-input-prepend-icon\">\n        {{ prefixicon }}\n      </granite-icon>\n    </div>\n\n    <ng-container\n      *ngIf=\"type != 'textarea'; then inputElement; else textareaElement\"\n    ></ng-container>\n\n    <ng-template #inputElement>\n      <input\n        #input\n        [id]=\"id\"\n        class=\"granite-input-base\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [value]=\"value\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-invalid]=\"invalid\"\n        (keyup)=\"_onKeyUp($event)\"\n        (input)=\"_onInput($event)\"\n      />\n    </ng-template>\n\n    <button\n      *ngIf=\"_passwordField\"\n      class=\"granite-input-append\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n      (click)=\"_togglePassword()\"\n    >\n      <granite-icon class=\"granite-input-password-toggle-icon\">\n        {{ _passwordFieldIcon }}\n      </granite-icon>\n    </button>\n\n    <ng-template #textareaElement>\n      <textarea\n        #textarea\n        [id]=\"id\"\n        class=\"granite-input-base granite-text-area\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        rows=\"1\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"invalid\"\n        (keyup)=\"_onKeyUp($event)\"\n        (input)=\"_onInput($event)\"\n      ></textarea>\n    </ng-template>\n\n    <div\n      class=\"granite-input-hover-bar\"\n      [class.granite-input-invalid]=\"invalid\"\n      [class.granite-input-empty]=\"_empty\"\n    ></div>\n  </div>\n\n  <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n    <div class=\"granite-input-char-count\">\n      {{ _currentCharCount }}/{{ maxlength }}\n    </div>\n  </div>\n</div>\n",
+                    host: {
+                        class: 'granite-input-field',
+                    },
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{transition:all .2s ease-out;width:calc(var(--granite-spacing-3-xl) * 3.625);height:var(--granite-spacing-xl);box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-input-container{height:inherit;width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;height:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:calc(var(--granite-spacing-xs)/2)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar.granite-input-invalid.granite-input-empty{background-color:var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:calc(var(--granite-spacing-3-xl) * 3.625);min-height:var(--granite-spacing-xl)}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-disabled .granite-input-hover-bar,.granite-input-container .granite-input-top-row.granite-input-readonly .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-s);width:inherit;height:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:100%}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::-moz-placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:required:-ms-input-placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:-moz-read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base::-moz-placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:-ms-input-placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:hover::-moz-placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:hover:-ms-input-placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 calc(var(--granite-spacing-xs)/2) var(--granite-color-focus),inset calc(var(--granite-spacing-xs)/2) 0 var(--granite-color-focus),inset calc(var(--granite-spacing-xs)/2 * -1) 0 var(--granite-color-focus),inset 0 calc(var(--granite-spacing-xs)/2 * -1) var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 calc(var(--granite-spacing-xs)/2 * -1) var(--granite-color-signal-failure),inset 0 calc(var(--granite-spacing-xs)/2) var(--granite-color-focus),inset calc(var(--granite-spacing-xs)/2) 0 var(--granite-color-focus),inset calc(var(--granite-spacing-xs)/2 * -1) 0 var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus::-moz-placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:focus:-ms-input-placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-top-row .granite-input-hover-bar{height:calc(var(--granite-spacing-xs)/4);background-color:var(--granite-color-border-hard);position:absolute;width:inherit;bottom:0}.granite-input-container .granite-input-top-row .granite-input-hover-bar.granite-input-invalid{background-color:var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row:focus-within .granite-input-hover-bar{background-color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-s);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:var(--granite-spacing-m);height:var(--granite-spacing-m);color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 calc(var(--granite-spacing-xs)/2) var(--granite-color-focus),inset calc(var(--granite-spacing-xs)/2) 0 var(--granite-color-focus),inset calc(var(--granite-spacing-xs)/2 * -1) 0 var(--granite-color-focus),inset 0 calc(var(--granite-spacing-xs)/2 * -1) var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 var(--granite-spacing-xs) var(--granite-spacing-xs);padding:var(--granite-spacing-s);background-size:contain;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}"]
+                },] }
+    ];
+    GraniteInputFieldComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor }
+    ]; };
+    GraniteInputFieldComponent.propDecorators = {
+        id: [{ type: core.Input }],
+        name: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        required: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        invalid: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        prefixicon: [{ type: core.Input }],
+        maxlength: [{ type: core.Input }],
+        countcharacters: [{ type: core.Input }],
+        ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
+        ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
+        valueChange: [{ type: core.Output }],
+        _inputElement: [{ type: core.ViewChild, args: ['input',] }],
+        _textareaElement: [{ type: core.ViewChild, args: ['textarea',] }]
+    };
+
+    var GraniteInputFieldModule = /** @class */ (function () {
+        function GraniteInputFieldModule() {
+        }
+        return GraniteInputFieldModule;
+    }());
+    GraniteInputFieldModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [common.CommonModule, GraniteIconModule, GraniteButtonModule],
+                    declarations: [GraniteInputFieldComponent],
+                    exports: [GraniteInputFieldComponent],
+                },] }
+    ];
+
     var ɵ0 = deviceDesktop.output;
     /**
      * Directive used to tell components and their sub components that client output
@@ -2946,6 +3374,8 @@
     exports.GraniteGridModule = GraniteGridModule;
     exports.GraniteIconComponent = GraniteIconComponent;
     exports.GraniteIconModule = GraniteIconModule;
+    exports.GraniteInputFieldComponent = GraniteInputFieldComponent;
+    exports.GraniteInputFieldModule = GraniteInputFieldModule;
     exports.GraniteMenuComponent = GraniteMenuComponent;
     exports.GraniteMenuHarness = GraniteMenuHarness;
     exports.GraniteMenuItemComponent = GraniteMenuItemComponent;
@@ -2954,6 +3384,11 @@
     exports.GraniteMenuTouchCloseComponent = GraniteMenuTouchCloseComponent;
     exports.GraniteMenuTouchTitleItemComponent = GraniteMenuTouchTitleItemComponent;
     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;
@@ -2966,6 +3401,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 });