@ifsworld/granite-components 3.2.0 → 3.5.0

package/esm2015/lib/table/table.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraniteTableComponent":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"granite-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"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","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)}"]}]}],"members":{"dataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["aria-label"]}]}],"tableColumnsComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":35,"character":3},"arguments":[{"__symbolic":"reference","module":"./column/table-column.directive","name":"GraniteTableColumnDirective","line":35,"character":19}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraniteTableComponent":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"granite-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"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 row; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"row[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n      [row]=\"row\"\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","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;height:calc(var(--granite-spacing-m) * 2.5)}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]}]}],"members":{"dataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["aria-label"]}]}],"tableColumnsComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":35,"character":3},"arguments":[{"__symbolic":"reference","module":"./column/table-column.directive","name":"GraniteTableColumnDirective","line":35,"character":19}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}}}}]

package/fesm2015/ifsworld-granite-components.js

@@ -2274,6 +2274,101 @@ GraniteRadioButtonModule.decorators = [
             },] }
 ];
 
+class GraniteCheckboxComponent {
+    constructor(_focusMonitor) {
+        this._focusMonitor = _focusMonitor;
+        this.id = null;
+        this.checked = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.labelPosition = 'after';
+        this.ariaLabel = null;
+        this.ariaLabelledby = null;
+        this.valueChange = new EventEmitter();
+        this.checkboxChange = new EventEmitter();
+        this.checkboxBlur = new EventEmitter();
+        this._positionBefore = false;
+        this._checkboxDisabled = false;
+    }
+    ngOnChanges(changes) {
+        if (changes.checked) {
+            this.checked = coerceBooleanProperty(changes.checked.currentValue);
+        }
+        if (changes.disabled) {
+            this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
+        }
+        if (changes.readonly) {
+            this.readonly = coerceBooleanProperty(changes.readonly.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._checkboxDisabled = true;
+        }
+    }
+    focus(origin = 'program', options) {
+        this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+    }
+    _onBlur() {
+        this.checkboxBlur.emit();
+    }
+    _checkboxChange() {
+        this.checked = this._getInputElement().checked;
+        this.valueChange.emit(this.checked);
+    }
+    _checkboxClick() {
+        this.checkboxChange.emit();
+    }
+    _getInputElement() {
+        return this._inputElement.nativeElement;
+    }
+}
+GraniteCheckboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'granite-checkbox',
+                exportAs: 'graniteCheckbox',
+                host: {
+                    class: 'granite-checkbox',
+                    '[class.granite-checkbox-checked]': 'checked',
+                    '[class.granite-checkbox-disabled]': 'disabled',
+                    '[class.granite-checkbox-readonly]': 'readonly',
+                    '[class.granite-checkbox-label-before]': '_positionBefore',
+                },
+                template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n  <div class=\"granite-checkbox-box\">\n    <input\n      #input\n      [id]=\"id\"\n      class=\"granite-checkbox-input cdk-visually-hidden\"\n      role=\"checkbox\"\n      type=\"checkbox\"\n      [attr.aria-checked]=\"checked.toString()\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [checked]=\"checked\"\n      [disabled]=\"_checkboxDisabled\"\n      [readonly]=\"readonly\"\n      (click)=\"_checkboxClick()\"\n      (change)=\"_checkboxChange()\"\n      (blur)=\"_onBlur()\"\n    />\n    <div class=\"granite-checkbox-check\"></div>\n  </div>\n  <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{-webkit-animation:fadeInAnimation .2s;animation:fadeInAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{-webkit-animation:fadeOutAnimation .2s;animation:fadeOutAnimation .2s;-webkit-animation-iteration-count:1;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *,:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--granite-spacing-s);padding-inline-end:var(--granite-spacing-s)}.granite-checkbox-label{display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.granite-checkbox-box{width:var(--granite-spacing-m);height:var(--granite-spacing-m);border:solid var(--granite-color-background-inactive);border-width:calc(var(--granite-spacing-xs) / 4);border-radius:var(--granite-spacing-xs);display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:calc(var(--granite-spacing-xs) / 4) solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:calc(var(--granite-spacing-s) + (var(--granite-spacing-xs) / 4));height:calc(var(--granite-spacing-xs) + (var(--granite-spacing-xs) / 4));background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-left-width:calc(var(--granite-spacing-xs) / 2);border-bottom-width:calc(var(--granite-spacing-xs) / 2);border-right-width:0;border-top-width:0}.granite-checkbox-text{-webkit-padding-start:var(--granite-spacing-s);padding-inline-start:var(--granite-spacing-s)}.granite-checkbox-text:empty{display:none}@-webkit-keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}"]
+            },] }
+];
+GraniteCheckboxComponent.ctorParameters = () => [
+    { type: FocusMonitor }
+];
+GraniteCheckboxComponent.propDecorators = {
+    id: [{ type: Input }],
+    checked: [{ type: Input }],
+    disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
+    labelPosition: [{ type: Input }],
+    ariaLabel: [{ type: Input, args: ['aria-label',] }],
+    ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
+    valueChange: [{ type: Output }],
+    checkboxChange: [{ type: Output }],
+    checkboxBlur: [{ type: Output }],
+    _inputElement: [{ type: ViewChild, args: ['input',] }]
+};
+
+class GraniteCheckboxModule {
+}
+GraniteCheckboxModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [GraniteCheckboxComponent],
+                exports: [GraniteCheckboxComponent],
+            },] }
+];
+
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 const disabledMixin = (Base = class {
 }) => {
@@ -2428,9 +2523,9 @@ class GraniteTableComponent {
 GraniteTableComponent.decorators = [
     { type: 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",
+                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 row; let rowI = dataIndex\"\n      [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n      [value]=\"row[column.name]\"\n      [rowIndex]=\"rowI\"\n      [columnIndex]=\"columnI\"\n      [staticType]=\"column.staticType\"\n      [column]=\"column\"\n      [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n      [row]=\"row\"\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: 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)}"]
+                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;height:calc(var(--granite-spacing-m) * 2.5)}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]
             },] }
 ];
 GraniteTableComponent.propDecorators = {
@@ -2456,8 +2551,8 @@ GraniteTableDataCellComponent.decorators = [
     { type: 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)}"]
+                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      row: row\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: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;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 = {
@@ -2465,7 +2560,8 @@ GraniteTableDataCellComponent.propDecorators = {
     staticType: [{ type: Input }],
     rowIndex: [{ type: Input }],
     columnIndex: [{ type: Input }],
-    tableCellTemplateRef: [{ type: Input }]
+    tableCellTemplateRef: [{ type: Input }],
+    row: [{ type: Input }]
 };
 
 class GraniteTableHeaderCellComponent extends GraniteCell {
@@ -2475,7 +2571,7 @@ GraniteTableHeaderCellComponent.decorators = [
                 // 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)}"]
+                styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;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)}"]
             },] }
 ];
 
@@ -2519,6 +2615,157 @@ GraniteTableModule.decorators = [
             },] }
 ];
 
+const GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];
+class GraniteInputFieldComponent {
+    constructor(_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 EventEmitter();
+        this._supported = true;
+        this._empty = false;
+        this._passwordFieldIcon = 'view';
+        this._passwordField = false;
+        this._passwordToggled = false;
+        this._currentCharCount = 0;
+    }
+    ngOnInit() {
+        this._validateType();
+        this._passwordField = this.type == 'password';
+        this._empty = this.value == null || this.value === '';
+    }
+    ngOnChanges(changes) {
+        if (changes.required) {
+            this.required = coerceBooleanProperty(changes.required.currentValue);
+        }
+        if (changes.readonly) {
+            this.readonly = coerceBooleanProperty(changes.readonly.currentValue);
+        }
+        if (changes.invalid) {
+            this.invalid = coerceBooleanProperty(changes.invalid.currentValue);
+        }
+        if (changes.disabled) {
+            this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
+        }
+        if (changes.countcharacters) {
+            this.countcharacters = coerceBooleanProperty(changes.countcharacters.currentValue);
+        }
+        if (changes.value) {
+            this._empty = this.value == null || this.value === '';
+        }
+        if (changes.type) {
+            this._validateType();
+        }
+    }
+    focus(origin = 'program', options) {
+        if (this.type === 'text') {
+            this._focusMonitor.focusVia(this._getInputElement(), origin, options);
+        }
+        else if (this.type === 'textarea') {
+            this._focusMonitor.focusVia(this._getTextareaElement(), origin, options);
+        }
+    }
+    _togglePassword() {
+        if (this._passwordToggled) {
+            this._passwordToggled = false;
+            this.type = 'password';
+            this._passwordFieldIcon = 'view';
+        }
+        else {
+            this._passwordToggled = true;
+            this.type = 'text';
+            this._passwordFieldIcon = 'view-disabled';
+        }
+    }
+    _onKeyUp(event) {
+        const inputEvent = event.target;
+        this._applyCharacterCount(inputEvent.value);
+        this._empty = inputEvent.value == null || inputEvent.value === '';
+        this.valueChange.emit(inputEvent.value);
+    }
+    _onInput(event) {
+        const inputEvent = event.target;
+        this._empty = inputEvent.value == null || inputEvent.value === '';
+        this.valueChange.emit(inputEvent.value);
+    }
+    _validateType() {
+        if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
+            this._supported = false;
+            throw Error(`Input type "${this.type}" isn't supported by graniteInputField.`);
+        }
+    }
+    _applyCharacterCount(inputString) {
+        if (this.countcharacters) {
+            this._currentCharCount = inputString.length;
+            if (this._currentCharCount > this.maxlength) {
+                inputString = inputString.slice(0, this.maxlength);
+                this._currentCharCount = this.maxlength;
+            }
+        }
+    }
+    _getInputElement() {
+        return this._inputElement.nativeElement;
+    }
+    _getTextareaElement() {
+        return this._textareaElement.nativeElement;
+    }
+}
+GraniteInputFieldComponent.decorators = [
+    { type: 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: 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 = () => [
+    { type: FocusMonitor }
+];
+GraniteInputFieldComponent.propDecorators = {
+    id: [{ type: Input }],
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    value: [{ type: Input }],
+    required: [{ type: Input }],
+    readonly: [{ type: Input }],
+    invalid: [{ type: Input }],
+    disabled: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    prefixicon: [{ type: Input }],
+    maxlength: [{ type: Input }],
+    countcharacters: [{ type: Input }],
+    ariaLabel: [{ type: Input, args: ['aria-label',] }],
+    ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
+    valueChange: [{ type: Output }],
+    _inputElement: [{ type: ViewChild, args: ['input',] }],
+    _textareaElement: [{ type: ViewChild, args: ['textarea',] }]
+};
+
+class GraniteInputFieldModule {
+}
+GraniteInputFieldModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, GraniteIconModule, GraniteButtonModule],
+                declarations: [GraniteInputFieldComponent],
+                exports: [GraniteInputFieldComponent],
+            },] }
+];
+
 const ɵ0 = deviceDesktop.output;
 /**
  * Directive used to tell components and their sub components that client output
@@ -2623,5 +2870,5 @@ GraniteCoreModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteTableDataCellComponent as ɵe, GraniteCell as ɵf, GraniteTableHeaderCellComponent as ɵg, PurePipesModule as ɵh, GraniteTitlePipe as ɵi };
+export { ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteTableColumnDirective, GraniteTableComponent, GraniteTableModule, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, _MenuBaseComponent, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations, ɵ0$1 as ɵ0, GRANITE_MENU_PANEL as ɵa, getEaseOutSteep as ɵc, getEaseLinear as ɵd, GraniteTableDataCellComponent as ɵe, GraniteCell as ɵf, GraniteTableHeaderCellComponent as ɵg, PurePipesModule as ɵh, GraniteTitlePipe as ɵi };
 //# sourceMappingURL=ifsworld-granite-components.js.map