@ifsworld/granite-components 3.4.0 → 3.5.2

package/esm2015/index.js

@@ -25,6 +25,8 @@ export * from './lib/toggle-switch/toggle-switch.module';
 export * from './lib/toggle-switch/toggle-switch.component';
 export * from './lib/radio-button/radio-button.module';
 export * from './lib/radio-button/radio-button.component';
+export * from './lib/checkbox/checkbox.module';
+export * from './lib/checkbox/checkbox.component';
 export * from './lib/button/button.module';
 export * from './lib/button/button.component';
 export * from './lib/table/table.module';

package/esm2015/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/granite-components/src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAElD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,0CAA0C,CAAC;AACzD,cAAc,6CAA6C,CAAC;AAE5D,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAE1D,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2CAA2C,CAAC;AAE1D,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AAExD,YAAY;AACZ,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAClE,cAAc,sCAAsC,CAAC","sourcesContent":["/*\n * Public API Surface of ui\n */\n\nexport * from './lib/arrange-grid/arrange-grid.module';\nexport * from './lib/arrange-grid/arrange-grid.component';\nexport * from './lib/arrange-grid/arrange-grid-item.component';\n\nexport * from './lib/grid/grid.module';\nexport * from './lib/grid/grid.component';\n\nexport * from './lib/badge/badge.module';\nexport * from './lib/badge/badge.component';\nexport * from './lib/badge/testing/badge.harness';\n\nexport * from './lib/menu/menu.module';\nexport * from './lib/menu/menu.component';\nexport * from './lib/menu/menu-desktop-animations';\nexport * from './lib/menu/menu-touch-animations';\nexport * from './lib/menu/menu-item.component';\nexport * from './lib/menu/menu-trigger-for.directive';\nexport * from './lib/menu/testing/menu.harness';\nexport * from './lib/menu/divider.directive';\nexport * from './lib/menu/menu-touch-close.component';\nexport * from './lib/menu/menu-touch-title.component';\n\nexport * from './lib/icon/icon.module';\nexport * from './lib/icon/icon.component';\n\nexport * from './lib/toggle-switch/toggle-switch.module';\nexport * from './lib/toggle-switch/toggle-switch.component';\n\nexport * from './lib/radio-button/radio-button.module';\nexport * from './lib/radio-button/radio-button.component';\n\nexport * from './lib/button/button.module';\nexport * from './lib/button/button.component';\n\nexport * from './lib/table/table.module';\nexport * from './lib/table/table.component';\nexport * from './lib/table/column/table-column.directive';\n\nexport * from './lib/input-field/input-field.module';\nexport * from './lib/input-field/input-field.component';\n\n// Temporary\nexport * from './lib/core/client-environment';\nexport * from './lib/core/core.module';\nexport * from './lib/core/devices/client-output-touch.directive';\nexport * from './lib/core/devices/client-output-desktop.directive';\nexport * from './lib/core/devices/client-input-touch.directive';\nexport * from './lib/core/devices/client-input-desktop.directive';\nexport * from './lib/core/common-behaviors/disabled';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/granite-components/src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAElD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,0CAA0C,CAAC;AACzD,cAAc,6CAA6C,CAAC;AAE5D,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAE1D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAElD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2CAA2C,CAAC;AAE1D,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AAExD,YAAY;AACZ,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAClE,cAAc,sCAAsC,CAAC","sourcesContent":["/*\n * Public API Surface of ui\n */\n\nexport * from './lib/arrange-grid/arrange-grid.module';\nexport * from './lib/arrange-grid/arrange-grid.component';\nexport * from './lib/arrange-grid/arrange-grid-item.component';\n\nexport * from './lib/grid/grid.module';\nexport * from './lib/grid/grid.component';\n\nexport * from './lib/badge/badge.module';\nexport * from './lib/badge/badge.component';\nexport * from './lib/badge/testing/badge.harness';\n\nexport * from './lib/menu/menu.module';\nexport * from './lib/menu/menu.component';\nexport * from './lib/menu/menu-desktop-animations';\nexport * from './lib/menu/menu-touch-animations';\nexport * from './lib/menu/menu-item.component';\nexport * from './lib/menu/menu-trigger-for.directive';\nexport * from './lib/menu/testing/menu.harness';\nexport * from './lib/menu/divider.directive';\nexport * from './lib/menu/menu-touch-close.component';\nexport * from './lib/menu/menu-touch-title.component';\n\nexport * from './lib/icon/icon.module';\nexport * from './lib/icon/icon.component';\n\nexport * from './lib/toggle-switch/toggle-switch.module';\nexport * from './lib/toggle-switch/toggle-switch.component';\n\nexport * from './lib/radio-button/radio-button.module';\nexport * from './lib/radio-button/radio-button.component';\n\nexport * from './lib/checkbox/checkbox.module';\nexport * from './lib/checkbox/checkbox.component';\n\nexport * from './lib/button/button.module';\nexport * from './lib/button/button.component';\n\nexport * from './lib/table/table.module';\nexport * from './lib/table/table.component';\nexport * from './lib/table/column/table-column.directive';\n\nexport * from './lib/input-field/input-field.module';\nexport * from './lib/input-field/input-field.component';\n\n// Temporary\nexport * from './lib/core/client-environment';\nexport * from './lib/core/core.module';\nexport * from './lib/core/devices/client-output-touch.directive';\nexport * from './lib/core/devices/client-output-desktop.directive';\nexport * from './lib/core/devices/client-input-touch.directive';\nexport * from './lib/core/devices/client-input-desktop.directive';\nexport * from './lib/core/common-behaviors/disabled';\n"]}

package/esm2015/index.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./lib/arrange-grid/arrange-grid.module"},{"from":"./lib/arrange-grid/arrange-grid.component"},{"from":"./lib/arrange-grid/arrange-grid-item.component"},{"from":"./lib/grid/grid.module"},{"from":"./lib/grid/grid.component"},{"from":"./lib/badge/badge.module"},{"from":"./lib/badge/badge.component"},{"from":"./lib/badge/testing/badge.harness"},{"from":"./lib/menu/menu.module"},{"from":"./lib/menu/menu.component"},{"from":"./lib/menu/menu-desktop-animations"},{"from":"./lib/menu/menu-touch-animations"},{"from":"./lib/menu/menu-item.component"},{"from":"./lib/menu/menu-trigger-for.directive"},{"from":"./lib/menu/testing/menu.harness"},{"from":"./lib/menu/divider.directive"},{"from":"./lib/menu/menu-touch-close.component"},{"from":"./lib/menu/menu-touch-title.component"},{"from":"./lib/icon/icon.module"},{"from":"./lib/icon/icon.component"},{"from":"./lib/toggle-switch/toggle-switch.module"},{"from":"./lib/toggle-switch/toggle-switch.component"},{"from":"./lib/radio-button/radio-button.module"},{"from":"./lib/radio-button/radio-button.component"},{"from":"./lib/button/button.module"},{"from":"./lib/button/button.component"},{"from":"./lib/table/table.module"},{"from":"./lib/table/table.component"},{"from":"./lib/table/column/table-column.directive"},{"from":"./lib/input-field/input-field.module"},{"from":"./lib/input-field/input-field.component"},{"from":"./lib/core/client-environment"},{"from":"./lib/core/core.module"},{"from":"./lib/core/devices/client-output-touch.directive"},{"from":"./lib/core/devices/client-output-desktop.directive"},{"from":"./lib/core/devices/client-input-touch.directive"},{"from":"./lib/core/devices/client-input-desktop.directive"},{"from":"./lib/core/common-behaviors/disabled"}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./lib/arrange-grid/arrange-grid.module"},{"from":"./lib/arrange-grid/arrange-grid.component"},{"from":"./lib/arrange-grid/arrange-grid-item.component"},{"from":"./lib/grid/grid.module"},{"from":"./lib/grid/grid.component"},{"from":"./lib/badge/badge.module"},{"from":"./lib/badge/badge.component"},{"from":"./lib/badge/testing/badge.harness"},{"from":"./lib/menu/menu.module"},{"from":"./lib/menu/menu.component"},{"from":"./lib/menu/menu-desktop-animations"},{"from":"./lib/menu/menu-touch-animations"},{"from":"./lib/menu/menu-item.component"},{"from":"./lib/menu/menu-trigger-for.directive"},{"from":"./lib/menu/testing/menu.harness"},{"from":"./lib/menu/divider.directive"},{"from":"./lib/menu/menu-touch-close.component"},{"from":"./lib/menu/menu-touch-title.component"},{"from":"./lib/icon/icon.module"},{"from":"./lib/icon/icon.component"},{"from":"./lib/toggle-switch/toggle-switch.module"},{"from":"./lib/toggle-switch/toggle-switch.component"},{"from":"./lib/radio-button/radio-button.module"},{"from":"./lib/radio-button/radio-button.component"},{"from":"./lib/checkbox/checkbox.module"},{"from":"./lib/checkbox/checkbox.component"},{"from":"./lib/button/button.module"},{"from":"./lib/button/button.component"},{"from":"./lib/table/table.module"},{"from":"./lib/table/table.component"},{"from":"./lib/table/column/table-column.directive"},{"from":"./lib/input-field/input-field.module"},{"from":"./lib/input-field/input-field.component"},{"from":"./lib/core/client-environment"},{"from":"./lib/core/core.module"},{"from":"./lib/core/devices/client-output-touch.directive"},{"from":"./lib/core/devices/client-output-desktop.directive"},{"from":"./lib/core/devices/client-input-touch.directive"},{"from":"./lib/core/devices/client-input-desktop.directive"},{"from":"./lib/core/common-behaviors/disabled"}]}]

package/esm2015/lib/badge/badge.component.js

@@ -30,7 +30,7 @@ GraniteBadgeComponent.decorators = [
                 },
                 template: '<ng-content></ng-content>',
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);padding:5px;border-radius:5px;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}:host(.granite-badge-pill){border-radius:25px}"]
+                styles: [":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);padding:calc(var(--granite-spacing-m) * .3125);border-radius:.3125rem;-webkit-padding-start:calc(var(--granite-spacing-m) * .625);padding-inline-start:calc(var(--granite-spacing-m) * .625);-webkit-padding-end:calc(var(--granite-spacing-m) * .625);padding-inline-end:calc(var(--granite-spacing-m) * .625)}:host(.granite-badge-pill){border-radius:1.5625rem}"]
             },] }
 ];
 GraniteBadgeComponent.ctorParameters = () => [

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraniteBadgeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"granite-badge","exportAs":"graniteBadge","host":{"class":"granite-badge","[class.granite-badge-pill]":"pill","$quoted$":["[class.granite-badge-pill]"]},"template":"<ng-content></ng-content>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"styles":[":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);padding:5px;border-radius:5px;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}:host(.granite-badge-pill){border-radius:25px}"]}]}],"members":{"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"pill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":38,"character":34}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraniteBadgeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"granite-badge","exportAs":"graniteBadge","host":{"class":"granite-badge","[class.granite-badge-pill]":"pill","$quoted$":["[class.granite-badge-pill]"]},"template":"<ng-content></ng-content>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"styles":[":host{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);padding:calc(var(--granite-spacing-m) * .3125);border-radius:.3125rem;-webkit-padding-start:calc(var(--granite-spacing-m) * .625);padding-inline-start:calc(var(--granite-spacing-m) * .625);-webkit-padding-end:calc(var(--granite-spacing-m) * .625);padding-inline-end:calc(var(--granite-spacing-m) * .625)}:host(.granite-badge-pill){border-radius:1.5625rem}"]}]}],"members":{"backgroundColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"pill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":38,"character":34}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/button/button.component.js

@@ -45,7 +45,7 @@ GraniteButtonComponent.decorators = [
                 template: '<ng-content></ng-content>',
                 inputs: ['disabled'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{height:var(--granite-spacing-xl);border-radius:var(--granite-spacing-xs);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:1px solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:1px solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:1px solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:1px solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:1px solid var(--granite-color-border-soft);pointer-events:none}"]
+                styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]
             },] }
 ];
 GraniteButtonComponent.ctorParameters = () => [
@@ -80,7 +80,7 @@ GraniteAnchorComponent.decorators = [
                 template: '<ng-content></ng-content>',
                 inputs: ['disabled'],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{height:var(--granite-spacing-xl);border-radius:var(--granite-spacing-xs);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:1px solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:1px solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:1px solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:1px solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:1px solid var(--granite-color-border-soft);pointer-events:none}"]
+                styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]
             },] }
 ];
 GraniteAnchorComponent.ctorParameters = () => [

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraniteButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"error","message":"Symbol reference expected","line":38,"character":10},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"button[graniteButton],\n    button[granitePrimaryButton],\n    button[graniteFlatButton]\n  ","host":{"class":"granite-button-base","[class.granite-button-disabled]":"disabled","[attr.disabled]":"disabled || null","$quoted$":["[class.granite-button-disabled]","[attr.disabled]"]},"exportAs":"graniteButton","template":"<ng-content></ng-content>","inputs":["disabled"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":19},"member":"OnPush"},"styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{height:var(--granite-spacing-xl);border-radius:var(--granite-spacing-xs);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:1px solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:1px solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:1px solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:1px solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:1px solid var(--granite-color-border-soft);pointer-events:none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":41,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":27}]}],"ngOnChanges":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_getHostElement":[{"__symbolic":"method"}]}},"GraniteAnchorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"GraniteButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":66,"character":1},"arguments":[{"selector":"a[graniteButton]","host":{"class":"granite-button-base","[attr.tabindex]":"disabled ? -1 : 0","[class.granite-button-disabled]":"disabled","$quoted$":["[attr.tabindex]","[class.granite-button-disabled]"]},"exportAs":"graniteAnchor","template":"<ng-content></ng-content>","inputs":["disabled"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":78,"character":19},"member":"OnPush"},"styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{height:var(--granite-spacing-xl);border-radius:var(--granite-spacing-xs);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:1px solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:1px solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:1px solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:1px solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:1px solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:1px solid var(--granite-color-border-soft);pointer-events:none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":41,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":27}]}],"_anchorClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":90,"character":3},"arguments":["click",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraniteButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"error","message":"Symbol reference expected","line":38,"character":10},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"button[graniteButton],\n    button[granitePrimaryButton],\n    button[graniteFlatButton]\n  ","host":{"class":"granite-button-base","[class.granite-button-disabled]":"disabled","[attr.disabled]":"disabled || null","$quoted$":["[class.granite-button-disabled]","[attr.disabled]"]},"exportAs":"graniteButton","template":"<ng-content></ng-content>","inputs":["disabled"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":19},"member":"OnPush"},"styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":41,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":27}]}],"ngOnChanges":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_getHostElement":[{"__symbolic":"method"}]}},"GraniteAnchorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"GraniteButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":66,"character":1},"arguments":[{"selector":"a[graniteButton]","host":{"class":"granite-button-base","[attr.tabindex]":"disabled ? -1 : 0","[class.granite-button-disabled]":"disabled","$quoted$":["[attr.tabindex]","[class.granite-button-disabled]"]},"exportAs":"graniteAnchor","template":"<ng-content></ng-content>","inputs":["disabled"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":78,"character":19},"member":"OnPush"},"styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body-medium);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){border:.0625rem solid var(--granite-color-focus)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);border:.0625rem solid transparent}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);border:.0625rem solid var(--granite-color-border-soft)}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);border:.0625rem solid transparent}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-hover);color:var(--granite-color-text)}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-selected);color:var(--granite-color-text)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);border:.0625rem solid var(--granite-color-border-soft)}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;border:.0625rem solid var(--granite-color-border-soft);pointer-events:none}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":41,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":42,"character":27}]}],"_anchorClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":90,"character":3},"arguments":["click",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/checkbox/checkbox.component.js

@@ -0,0 +1,89 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, ElementRef, ViewChild, } from '@angular/core';
+export 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:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.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',] }]
+};
+//# sourceMappingURL=checkbox.component.js.map

package/esm2015/lib/checkbox/checkbox.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  Output,\n  OnChanges,\n  SimpleChanges,\n  EventEmitter,\n  ElementRef,\n  ViewChild,\n} from '@angular/core';\nimport { Position } from '../core/types';\n\n@Component({\n  selector: 'granite-checkbox',\n  exportAs: 'graniteCheckbox',\n  host: {\n    class: 'granite-checkbox',\n    '[class.granite-checkbox-checked]': 'checked',\n    '[class.granite-checkbox-disabled]': 'disabled',\n    '[class.granite-checkbox-readonly]': 'readonly',\n    '[class.granite-checkbox-label-before]': '_positionBefore',\n  },\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteCheckboxComponent implements OnChanges {\n  @Input()\n  id: string | null = null;\n\n  @Input()\n  checked: boolean = false;\n\n  @Input()\n  disabled: boolean = false;\n\n  @Input()\n  readonly: boolean = false;\n\n  @Input()\n  labelPosition: Position = 'after';\n\n  @Input('aria-label')\n  ariaLabel: string | null = null;\n\n  @Input('aria-labelledby')\n  ariaLabelledby: string | null = null;\n\n  @Output()\n  readonly valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @Output()\n  readonly checkboxChange: EventEmitter<void> = new EventEmitter<void>();\n\n  @Output()\n  readonly checkboxBlur: EventEmitter<void> = new EventEmitter<void>();\n\n  @ViewChild('input')\n  private _inputElement: ElementRef<HTMLInputElement>;\n\n  _positionBefore: boolean = false;\n  _checkboxDisabled: boolean = false;\n\n  constructor(private _focusMonitor: FocusMonitor) {}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.checked) {\n      this.checked = coerceBooleanProperty(changes.checked.currentValue);\n    }\n\n    if (changes.disabled) {\n      this.disabled = coerceBooleanProperty(changes.disabled.currentValue);\n    }\n\n    if (changes.readonly) {\n      this.readonly = coerceBooleanProperty(changes.readonly.currentValue);\n    }\n\n    if (changes.labelPosition != null) {\n      this._positionBefore =\n        changes.labelPosition.currentValue != null &&\n        changes.labelPosition.currentValue === 'before';\n    }\n\n    if (\n      (changes.disabled || changes.readonly) &&\n      (this.disabled || this.readonly)\n    ) {\n      this._checkboxDisabled = true;\n    }\n  }\n\n  focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {\n    this._focusMonitor.focusVia(this._getInputElement(), origin, options);\n  }\n\n  _onBlur(): void {\n    this.checkboxBlur.emit();\n  }\n\n  _checkboxChange(): void {\n    this.checked = this._getInputElement().checked;\n    this.valueChange.emit(this.checked);\n  }\n\n  _checkboxClick(): void {\n    this.checkboxChange.emit();\n  }\n\n  private _getInputElement(): HTMLInputElement {\n    return this._inputElement.nativeElement;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GraniteCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"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","$quoted$":["[class.granite-checkbox-checked]","[class.granite-checkbox-disabled]","[class.granite-checkbox-readonly]","[class.granite-checkbox-label-before]"]},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":19},"member":"OnPush"},"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","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:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-xs);border-width:0 0 .125rem .125rem}.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}}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"labelPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3},"arguments":["aria-labelledby"]}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":3}}]}],"checkboxChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"checkboxBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"_inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":3},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":66,"character":37}]}],"ngOnChanges":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_onBlur":[{"__symbolic":"method"}],"_checkboxChange":[{"__symbolic":"method"}],"_checkboxClick":[{"__symbolic":"method"}],"_getInputElement":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/checkbox/checkbox.module.js

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { GraniteCheckboxComponent } from './checkbox.component';
+export class GraniteCheckboxModule {
+}
+GraniteCheckboxModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [GraniteCheckboxComponent],
+                exports: [GraniteCheckboxComponent],
+            },] }
+];
+//# sourceMappingURL=checkbox.module.js.map

package/esm2015/lib/checkbox/checkbox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.module.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/checkbox/checkbox.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAMhE,MAAM,OAAO,qBAAqB;;;YAJjC,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,wBAAwB,CAAC;gBACxC,OAAO,EAAE,CAAC,wBAAwB,CAAC;aACpC","sourcesContent":["import { NgModule } from '@angular/core';\nimport { GraniteCheckboxComponent } from './checkbox.component';\n\n@NgModule({\n  declarations: [GraniteCheckboxComponent],\n  exports: [GraniteCheckboxComponent],\n})\nexport class GraniteCheckboxModule {}\n"]}

package/esm2015/lib/checkbox/checkbox.module.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"GraniteCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./checkbox.component","name":"GraniteCheckboxComponent","line":4,"character":17}],"exports":[{"__symbolic":"reference","module":"./checkbox.component","name":"GraniteCheckboxComponent","line":5,"character":12}]}]}]}}}]

package/esm2015/lib/input-field/input-field.component.js

@@ -23,8 +23,8 @@ export class GraniteInputFieldComponent {
         this._empty = false;
         this._passwordFieldIcon = 'view';
         this._passwordField = false;
-        this._passwordToggled = false;
         this._currentCharCount = 0;
+        this._passwordToggled = false;
     }
     ngOnInit() {
         this._validateType();
@@ -116,7 +116,7 @@ GraniteInputFieldComponent.decorators = [
                     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}"]
+                styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.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:14.5rem;min-height:2rem}.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;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.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 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 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:.0625rem;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:1rem;height:1rem;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 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem 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 .25rem .25rem;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 = () => [

package/esm2015/lib/input-field/input-field.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/input-field/input-field.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\n\nconst GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];\n\n@Component({\n  selector: 'granite-input-field',\n  exportAs: 'graniteInputField',\n  templateUrl: './input-field.component.html',\n  styleUrls: ['./input-field.component.scss'],\n  host: {\n    class: 'granite-input-field',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteInputFieldComponent implements OnInit, OnChanges {\n  @Input()\n  id: string | null = null;\n\n  @Input()\n  name: string | null = null;\n\n  @Input()\n  type: string = 'text';\n\n  @Input()\n  value: string | number = '';\n\n  @Input()\n  required: boolean = false;\n\n  @Input()\n  readonly: boolean = false;\n\n  @Input()\n  invalid: boolean = false;\n\n  @Input()\n  disabled: boolean = false;\n\n  @Input()\n  placeholder: string = '';\n\n  @Input()\n  prefixicon: string;\n\n  @Input()\n  maxlength: number = 255;\n\n  @Input()\n  countcharacters: boolean = false;\n\n  @Input('aria-label')\n  ariaLabel: string | null = null;\n\n  @Input('aria-labelledby')\n  ariaLabelledby: string | null = null;\n\n  @Output()\n  valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n  @ViewChild('input')\n  private _inputElement: ElementRef<HTMLInputElement>;\n\n  @ViewChild('textarea')\n  private _textareaElement: ElementRef<HTMLTextAreaElement>;\n\n  _supported: boolean = true;\n  _empty: boolean = false;\n  _passwordFieldIcon: string = 'view';\n  _passwordField: boolean = false;\n  private _passwordToggled: boolean = false;\n  private _currentCharCount = 0;\n\n  constructor(private _focusMonitor: FocusMonitor) {}\n\n  ngOnInit(): void {\n    this._validateType();\n\n    this._passwordField = this.type == 'password';\n\n    this._empty = this.value == null || this.value === '';\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.required) {\n      this.required = coerceBooleanProperty(changes.required.currentValue);\n    }\n\n    if (changes.readonly) {\n      this.readonly = coerceBooleanProperty(changes.readonly.currentValue);\n    }\n\n    if (changes.invalid) {\n      this.invalid = coerceBooleanProperty(changes.invalid.currentValue);\n    }\n\n    if (changes.disabled) {\n      this.disabled = coerceBooleanProperty(changes.disabled.currentValue);\n    }\n\n    if (changes.countcharacters) {\n      this.countcharacters = coerceBooleanProperty(\n        changes.countcharacters.currentValue\n      );\n    }\n\n    if (changes.value) {\n      this._empty = this.value == null || this.value === '';\n    }\n\n    if (changes.type) {\n      this._validateType();\n    }\n  }\n\n  focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {\n    if (this.type === 'text') {\n      this._focusMonitor.focusVia(this._getInputElement(), origin, options);\n    } else if (this.type === 'textarea') {\n      this._focusMonitor.focusVia(this._getTextareaElement(), origin, options);\n    }\n  }\n\n  _togglePassword(): void {\n    if (this._passwordToggled) {\n      this._passwordToggled = false;\n      this.type = 'password';\n      this._passwordFieldIcon = 'view';\n    } else {\n      this._passwordToggled = true;\n      this.type = 'text';\n      this._passwordFieldIcon = 'view-disabled';\n    }\n  }\n\n  _onKeyUp(event: KeyboardEvent): void {\n    const inputEvent = event.target as HTMLInputElement;\n    this._applyCharacterCount(inputEvent.value);\n    this._empty = inputEvent.value == null || inputEvent.value === '';\n    this.valueChange.emit(inputEvent.value);\n  }\n\n  _onInput(event: KeyboardEvent): void {\n    const inputEvent = event.target as HTMLInputElement;\n    this._empty = inputEvent.value == null || inputEvent.value === '';\n    this.valueChange.emit(inputEvent.value);\n  }\n\n  protected _validateType(): void {\n    if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {\n      this._supported = false;\n      throw Error(\n        `Input type \"${this.type}\" isn't supported by graniteInputField.`\n      );\n    }\n  }\n\n  private _applyCharacterCount(inputString: string): void {\n    if (this.countcharacters) {\n      this._currentCharCount = inputString.length;\n\n      if (this._currentCharCount > this.maxlength) {\n        inputString = inputString.slice(0, this.maxlength);\n        this._currentCharCount = this.maxlength;\n      }\n    }\n  }\n\n  private _getInputElement(): HTMLInputElement {\n    return this._inputElement.nativeElement;\n  }\n\n  private _getTextareaElement(): HTMLTextAreaElement {\n    return this._textareaElement.nativeElement;\n  }\n}\n"]}
+{"version":3,"file":"input-field.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/input-field/input-field.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\n\nconst GRANITE_INPUT_INCLUDES = ['text', 'number', 'password', 'textarea'];\n\n@Component({\n  selector: 'granite-input-field',\n  exportAs: 'graniteInputField',\n  templateUrl: './input-field.component.html',\n  styleUrls: ['./input-field.component.scss'],\n  host: {\n    class: 'granite-input-field',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteInputFieldComponent implements OnInit, OnChanges {\n  @Input()\n  id: string | null = null;\n\n  @Input()\n  name: string | null = null;\n\n  @Input()\n  type: string = 'text';\n\n  @Input()\n  value: string | number = '';\n\n  @Input()\n  required: boolean = false;\n\n  @Input()\n  readonly: boolean = false;\n\n  @Input()\n  invalid: boolean = false;\n\n  @Input()\n  disabled: boolean = false;\n\n  @Input()\n  placeholder: string = '';\n\n  @Input()\n  prefixicon: string;\n\n  @Input()\n  maxlength: number = 255;\n\n  @Input()\n  countcharacters: boolean = false;\n\n  @Input('aria-label')\n  ariaLabel: string | null = null;\n\n  @Input('aria-labelledby')\n  ariaLabelledby: string | null = null;\n\n  @Output()\n  readonly valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n  @ViewChild('input')\n  private _inputElement: ElementRef<HTMLInputElement>;\n\n  @ViewChild('textarea')\n  private _textareaElement: ElementRef<HTMLTextAreaElement>;\n\n  _supported: boolean = true;\n  _empty: boolean = false;\n  _passwordFieldIcon: string = 'view';\n  _passwordField: boolean = false;\n  _currentCharCount = 0;\n  private _passwordToggled: boolean = false;\n\n  constructor(private _focusMonitor: FocusMonitor) {}\n\n  ngOnInit(): void {\n    this._validateType();\n\n    this._passwordField = this.type == 'password';\n\n    this._empty = this.value == null || this.value === '';\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.required) {\n      this.required = coerceBooleanProperty(changes.required.currentValue);\n    }\n\n    if (changes.readonly) {\n      this.readonly = coerceBooleanProperty(changes.readonly.currentValue);\n    }\n\n    if (changes.invalid) {\n      this.invalid = coerceBooleanProperty(changes.invalid.currentValue);\n    }\n\n    if (changes.disabled) {\n      this.disabled = coerceBooleanProperty(changes.disabled.currentValue);\n    }\n\n    if (changes.countcharacters) {\n      this.countcharacters = coerceBooleanProperty(\n        changes.countcharacters.currentValue\n      );\n    }\n\n    if (changes.value) {\n      this._empty = this.value == null || this.value === '';\n    }\n\n    if (changes.type) {\n      this._validateType();\n    }\n  }\n\n  focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {\n    if (this.type === 'text') {\n      this._focusMonitor.focusVia(this._getInputElement(), origin, options);\n    } else if (this.type === 'textarea') {\n      this._focusMonitor.focusVia(this._getTextareaElement(), origin, options);\n    }\n  }\n\n  _togglePassword(): void {\n    if (this._passwordToggled) {\n      this._passwordToggled = false;\n      this.type = 'password';\n      this._passwordFieldIcon = 'view';\n    } else {\n      this._passwordToggled = true;\n      this.type = 'text';\n      this._passwordFieldIcon = 'view-disabled';\n    }\n  }\n\n  _onKeyUp(event: KeyboardEvent): void {\n    const inputEvent = event.target as HTMLInputElement;\n    this._applyCharacterCount(inputEvent.value);\n    this._empty = inputEvent.value == null || inputEvent.value === '';\n    this.valueChange.emit(inputEvent.value);\n  }\n\n  _onInput(event: Event): void {\n    const inputEvent = event.target as HTMLInputElement;\n    this._empty = inputEvent.value == null || inputEvent.value === '';\n    this.valueChange.emit(inputEvent.value);\n  }\n\n  protected _validateType(): void {\n    if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {\n      this._supported = false;\n      throw Error(\n        `Input type \"${this.type}\" isn't supported by graniteInputField.`\n      );\n    }\n  }\n\n  private _applyCharacterCount(inputString: string): void {\n    if (this.countcharacters) {\n      this._currentCharCount = inputString.length;\n\n      if (this._currentCharCount > this.maxlength) {\n        inputString = inputString.slice(0, this.maxlength);\n        this._currentCharCount = this.maxlength;\n      }\n    }\n  }\n\n  private _getInputElement(): HTMLInputElement {\n    return this._inputElement.nativeElement;\n  }\n\n  private _getTextareaElement(): HTMLTextAreaElement {\n    return this._textareaElement.nativeElement;\n  }\n}\n"]}

package/esm2015/lib/input-field/input-field.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraniteInputFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"granite-input-field","exportAs":"graniteInputField","host":{"class":"granite-input-field"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":25,"character":19},"member":"OnPush"},"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","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}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"prefixicon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"countcharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["aria-labelledby"]}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"_inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":73,"character":3},"arguments":["input"]}]}],"_textareaElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":3},"arguments":["textarea"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":86,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_togglePassword":[{"__symbolic":"method"}],"_onKeyUp":[{"__symbolic":"method"}],"_onInput":[{"__symbolic":"method"}],"_validateType":[{"__symbolic":"method"}],"_applyCharacterCount":[{"__symbolic":"method"}],"_getInputElement":[{"__symbolic":"method"}],"_getTextareaElement":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraniteInputFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"granite-input-field","exportAs":"graniteInputField","host":{"class":"granite-input-field"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":25,"character":19},"member":"OnPush"},"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","styles":[":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:hover .granite-input-hover-bar{height:.125rem}.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:14.5rem;min-height:2rem}.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;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.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 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 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:.0625rem;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:1rem;height:1rem;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 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem 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 .25rem .25rem;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}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"invalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"prefixicon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"countcharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3},"arguments":["aria-label"]}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["aria-labelledby"]}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"_inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":73,"character":3},"arguments":["input"]}]}],"_textareaElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":3},"arguments":["textarea"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":86,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_togglePassword":[{"__symbolic":"method"}],"_onKeyUp":[{"__symbolic":"method"}],"_onInput":[{"__symbolic":"method"}],"_validateType":[{"__symbolic":"method"}],"_applyCharacterCount":[{"__symbolic":"method"}],"_getInputElement":[{"__symbolic":"method"}],"_getTextareaElement":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/menu/menu-item.component.js

@@ -62,7 +62,7 @@ GraniteMenuItemComponent.decorators = [
                     //#endregion --- Touch device customizations ---
                     '(mouseenter)': '_hovered.next(this)',
                 },
-                styles: [":host{display:block;position:relative;line-height:var(--granite-spacing-xl);height:var(--granite-spacing-xl);padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:var(--granite-border-width-regular) solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:var(--granite-border-width-regular) solid var(--granite-color-border-soft)}:host.granite-device-output-touch{height:var(--granite-spacing-xl);line-height:var(--granite-spacing-xl);font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-spacing-xl);height:var(--granite-spacing-xl);font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
+                styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]
             },] }
 ];
 GraniteMenuItemComponent.ctorParameters = () => [

package/esm2015/lib/menu/menu-item.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GraniteMenuItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"[graniteMenuItem]","template":"<ng-content></ng-content>\n    <ng-container *ngIf=\"_triggersSubmenu\">\n      <granite-icon class=\"caret-left\">caret-left</granite-icon>\n      <granite-icon class=\"caret-right\">caret-right</granite-icon>\n    </ng-container>","exportAs":"graniteMenuItem","host":{"[attr.role]":"role","[class.granite-menu-item]":"true","[class.granite-menu-item-highlighted]":"_highlighted","[class.granite-menu-item-submenu-trigger]":"_triggersSubmenu","[class.granite-device-output-touch]":"_clientOutput?.device === \"touch\"","(mouseenter)":"_hovered.next(this)","$quoted$":["[attr.role]","[class.granite-menu-item]","[class.granite-menu-item-highlighted]","[class.granite-menu-item-submenu-trigger]","[class.granite-device-output-touch]","(mouseenter)"]},"styles":[":host{display:block;position:relative;line-height:var(--granite-spacing-xl);height:var(--granite-spacing-xl);padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:var(--granite-border-width-regular) solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:var(--granite-border-width-regular) solid var(--granite-color-border-soft)}:host.granite-device-output-touch{height:var(--granite-spacing-xl);line-height:var(--granite-spacing-xl);font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:var(--granite-spacing-xl);height:var(--granite-spacing-xl);font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]}]}],"members":{"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":68,"character":5},"arguments":[{"__symbolic":"reference","module":"./menu-panel","name":"GRANITE_MENU_PANEL","line":68,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":69,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":65,"character":25,"arguments":[{"__symbolic":"error","message":"Could not resolve type","line":65,"character":36,"context":{"typeName":"HTMLElement"}}]},{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":66,"character":27},{"__symbolic":"reference","module":"./menu-panel","name":"GraniteMenuPanelInterface","line":70,"character":25}]}],"ngOnDestroy":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_getHostElement":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GraniteMenuItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"[graniteMenuItem]","template":"<ng-content></ng-content>\n    <ng-container *ngIf=\"_triggersSubmenu\">\n      <granite-icon class=\"caret-left\">caret-left</granite-icon>\n      <granite-icon class=\"caret-right\">caret-right</granite-icon>\n    </ng-container>","exportAs":"graniteMenuItem","host":{"[attr.role]":"role","[class.granite-menu-item]":"true","[class.granite-menu-item-highlighted]":"_highlighted","[class.granite-menu-item-submenu-trigger]":"_triggersSubmenu","[class.granite-device-output-touch]":"_clientOutput?.device === \"touch\"","(mouseenter)":"_hovered.next(this)","$quoted$":["[attr.role]","[class.granite-menu-item]","[class.granite-menu-item-highlighted]","[class.granite-menu-item-submenu-trigger]","[class.granite-device-output-touch]","(mouseenter)"]},"styles":[":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:2rem;font-size:var(--granite-font-size-body-small);text-align:center}:host.granite-device-output-touch,:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:2rem;height:2rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}"]}]}],"members":{"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":68,"character":5},"arguments":[{"__symbolic":"reference","module":"./menu-panel","name":"GRANITE_MENU_PANEL","line":68,"character":12}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":69,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":65,"character":25,"arguments":[{"__symbolic":"error","message":"Could not resolve type","line":65,"character":36,"context":{"typeName":"HTMLElement"}}]},{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"FocusMonitor","line":66,"character":27},{"__symbolic":"reference","module":"./menu-panel","name":"GraniteMenuPanelInterface","line":70,"character":25}]}],"ngOnDestroy":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_getHostElement":[{"__symbolic":"method"}]}}}}]