@tylertech/forge 2.7.0 → 2.9.0

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -0,0 +1,173 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean, coerceNumber } from '@tylertech/forge-core';
+import { tylIconDragVerticalVariant } from '@tylertech/tyler-icons/extended';
+import { tylIconDragHandle } from '@tylertech/tyler-icons/standard';
+import { BaseComponent } from '../../core/base/base-component';
+import { SPLIT_VIEW_PANEL_CONSTANTS } from './split-view-panel-constants';
+import { SplitViewPanelFoundation } from './split-view-panel-foundation';
+import { SplitViewPanelAdapter } from './split-view-panel-adapter';
+import { IconComponent, IconRegistry } from '../../icon';
+import { RippleComponent } from '../../ripple';
+const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-ripple id=\"ripple\" part=\"ripple\"></forge-ripple></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view-panel{display:-webkit-box;display:flex;width:100%;height:100%;overflow:hidden;contain:paint size}.forge-split-view-panel__handle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));background-color:#e0e0e0;background-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:0}.forge-split-view-panel__content{-webkit-box-flex:1;flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:8px;min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:8px;width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uz9zuy8;animation-name:uz9zuy8;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uz9zuy8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uz9zuy8{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uz9zuye;animation-name:uz9zuye;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uz9zuye{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uz9zuye{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uz9zuyf;animation-name:uz9zuyf;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uz9zuyf{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes uz9zuyf{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;-webkit-animation-name:uz9zuyr;animation-name:uz9zuyr;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uz9zuyr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes uz9zuyr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:8px;min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:8px;height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uz9zuzr;animation-name:uz9zuzr;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uz9zuzr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uz9zuzr{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uz9zv05;animation-name:uz9zv05;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@-webkit-keyframes uz9zv05{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uz9zv05{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;-webkit-animation-name:uz9zv0c;animation-name:uz9zv0c;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uz9zv0c{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes uz9zv0c{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;-webkit-animation-name:uz9zv0x;animation-name:uz9zv0x;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-direction:reverse}@-webkit-keyframes uz9zv0x{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes uz9zv0x{from{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;-webkit-box-flex:0;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){-webkit-box-flex:1;flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}';
+let SplitViewPanelComponent = class SplitViewPanelComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define([tylIconDragVerticalVariant, tylIconDragHandle]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SplitViewPanelFoundation(new SplitViewPanelAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.RESIZABLE,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.SIZE,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.MIN,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.MAX,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.ACCESSIBLE_LABEL,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.OPEN,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.DISABLED,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.ALLOW_CLOSE,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.AUTO_CLOSE,
+            SPLIT_VIEW_PANEL_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.RESIZABLE:
+                this.resizable = newValue;
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.SIZE:
+                this.size = newValue;
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.MIN:
+                this.min = newValue;
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.MAX:
+                if (newValue) {
+                    this.max = newValue;
+                }
+                else {
+                    this.max = undefined;
+                }
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.ACCESSIBLE_LABEL:
+                this.accessibleLabel = newValue;
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.OPEN:
+                this.open = coerceBoolean(newValue);
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.DISABLED:
+                if (this.hasAttribute(name)) {
+                    this.disabled = coerceBoolean(newValue);
+                }
+                else {
+                    this.disabled = undefined;
+                }
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.ALLOW_CLOSE:
+                if (this.hasAttribute(name)) {
+                    this.allowClose = coerceBoolean(newValue);
+                }
+                else {
+                    this.allowClose = undefined;
+                }
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.AUTO_CLOSE:
+                if (this.hasAttribute(name)) {
+                    this.autoClose = coerceBoolean(newValue);
+                }
+                else {
+                    this.autoClose = undefined;
+                }
+                break;
+            case SPLIT_VIEW_PANEL_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD:
+                if (newValue) {
+                    this.autoCloseThreshold = coerceNumber(newValue);
+                }
+                else {
+                    this.autoCloseThreshold = undefined;
+                }
+                break;
+        }
+    }
+    /**
+     * Gets the size of content along the axis of orientation.
+     * @returns The size of content in pixels.
+     */
+    getContentSize() {
+        return this._foundation.getContentSize();
+    }
+    /**
+     * Gets the amount that the content can shrink along the axis of orientation before reaching its
+     * min size.
+     * @returns The amount that content can shrink in pixels.
+     */
+    getCollapsibleSize() {
+        return this._foundation.getCollapsibleSize();
+    }
+    /**
+     * Sets the size of content along the axis of orientation.
+     * @param size The new size of content in pixels.
+     */
+    setContentSize(size) {
+        this._foundation.setContentSize(size);
+    }
+    /**
+     * Updates the provided characteristics.
+     * @param config An update configuration.
+     */
+    update(config) {
+        this._foundation.update(config);
+    }
+};
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "resizable", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "size", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "min", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "max", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "accessibleLabel", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "allowClose", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "autoClose", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewPanelComponent.prototype, "autoCloseThreshold", void 0);
+SplitViewPanelComponent = __decorate([
+    CustomElement({
+        name: SPLIT_VIEW_PANEL_CONSTANTS.elementName,
+        dependencies: [
+            IconComponent,
+            RippleComponent
+        ]
+    })
+], SplitViewPanelComponent);
+export { SplitViewPanelComponent };

package/esm/table/table-utils.d.ts

@@ -192,10 +192,10 @@ export declare class TableUtils {
      */
     private static _getCheckboxElement;
     /**
-     * Retrieves the checkbox element from the given table row. Used in select mode only.
+     * Retrieves the select all checkbox element from the given table row. Used in select mode only.
      * @param rowElement
      */
-    private static _tryGetCheckboxElement;
+    private static _tryGetSelectAllCheckboxElement;
     /**
      * Sets the checked state of the select checkbox.
      * @param checkboxElement

package/esm/table/table-utils.js

@@ -482,7 +482,7 @@ export class TableUtils {
     }
     static _attachRowSelectListener(row, clickListener) {
         const checkboxElement = TableUtils._getCheckboxElement(row);
-        checkboxElement.addEventListener('click', clickListener);
+        checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.addEventListener('click', clickListener);
     }
     /**
      * Removes the select listeners from every table row.
@@ -492,9 +492,7 @@ export class TableUtils {
     static _detachRowSelectListeners(tbodyElement, clickListener) {
         Array.from(tbodyElement.rows).forEach(row => {
             const checkboxElement = TableUtils._getCheckboxElement(row);
-            if (checkboxElement) {
-                checkboxElement.removeEventListener('click', clickListener);
-            }
+            checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.removeEventListener('click', clickListener);
         });
     }
     /**
@@ -524,7 +522,7 @@ export class TableUtils {
      */
     static _tryAttachSelectAllTemplateListener(theadElement, listener) {
         const lastTheadRow = theadElement.rows[theadElement.rows.length - 1];
-        const checkboxElement = TableUtils._tryGetCheckboxElement(lastTheadRow);
+        const checkboxElement = TableUtils._tryGetSelectAllCheckboxElement(lastTheadRow);
         if (checkboxElement) {
             checkboxElement.addEventListener('change', listener);
         }
@@ -536,7 +534,7 @@ export class TableUtils {
      */
     static _detachSelectAllListener(theadElement, listener) {
         const lastTheadRow = theadElement.rows[theadElement.rows.length - 1];
-        const checkboxElement = TableUtils._tryGetCheckboxElement(lastTheadRow);
+        const checkboxElement = TableUtils._tryGetSelectAllCheckboxElement(lastTheadRow);
         if (!checkboxElement) {
             return;
         }
@@ -698,14 +696,23 @@ export class TableUtils {
      * @param rowElement
      */
     static _getCheckboxElement(rowElement) {
-        return rowElement.querySelector(TABLE_CONSTANTS.selectors.CHECKBOX_INPUT);
+        const selectCell = rowElement.querySelector(`.${TABLE_CONSTANTS.classes.TABLE_CELL_SELECT}`);
+        if (!selectCell) {
+            return null;
+        }
+        return selectCell.querySelector(TABLE_CONSTANTS.selectors.CHECKBOX_INPUT);
     }
     /**
-     * Retrieves the checkbox element from the given table row. Used in select mode only.
+     * Retrieves the select all checkbox element from the given table row. Used in select mode only.
      * @param rowElement
      */
-    static _tryGetCheckboxElement(rowElement) {
-        return rowElement.querySelector(TABLE_CONSTANTS.selectors.CHECKBOX_INPUT) || rowElement.querySelector(TABLE_CONSTANTS.selectors.SELECT_ALL_TEMPLATE_CHECKBOX_INPUT);
+    static _tryGetSelectAllCheckboxElement(rowElement) {
+        const selectAllCell = rowElement.querySelector(`.${TABLE_CONSTANTS.classes.TABLE_CELL_SELECT}`);
+        if (!selectAllCell) {
+            return null;
+        }
+        return selectAllCell.querySelector(TABLE_CONSTANTS.selectors.CHECKBOX_INPUT) ||
+            selectAllCell.querySelector(TABLE_CONSTANTS.selectors.SELECT_ALL_TEMPLATE_CHECKBOX_INPUT);
     }
     /**
      * Sets the checked state of the select checkbox.
@@ -761,7 +768,10 @@ export class TableUtils {
      */
     static updateSelectedState(rowElement, isSelected) {
         TableUtils._setRowSelectedState(rowElement, isSelected);
-        TableUtils._setSelectedCheckboxState(TableUtils._getCheckboxElement(rowElement), isSelected);
+        const selectCheckbox = TableUtils._getCheckboxElement(rowElement);
+        if (selectCheckbox) {
+            TableUtils._setSelectedCheckboxState(selectCheckbox, isSelected);
+        }
     }
     /**
      * Get a row from the first table body by index.
@@ -779,7 +789,7 @@ export class TableUtils {
             return;
         }
         const lastTheadRow = tableElement.tHead.rows[tableElement.tHead.rows.length - 1];
-        const selectAllCheckboxElement = TableUtils._tryGetCheckboxElement(lastTheadRow);
+        const selectAllCheckboxElement = TableUtils._tryGetSelectAllCheckboxElement(lastTheadRow);
         if (selectAllCheckboxElement) {
             TableUtils._setSelectedCheckboxState(selectAllCheckboxElement, isAllSelected);
             TableUtils._setIndeterminateCheckboxState(selectAllCheckboxElement, !!isIndeterminate);
@@ -808,7 +818,10 @@ export class TableUtils {
                 const existingSelection = findWhere(selectedRows, createPredicate(key, rowData));
                 if (existingSelection) {
                     TableUtils._setRowSelectedState(row, true);
-                    TableUtils._setSelectedCheckboxState(TableUtils._getCheckboxElement(row), true);
+                    const selectCheckbox = TableUtils._getCheckboxElement(row);
+                    if (selectCheckbox) {
+                        TableUtils._setSelectedCheckboxState(selectCheckbox, true);
+                    }
                     selectedRowCount++;
                 }
             });
@@ -826,7 +839,10 @@ export class TableUtils {
         const nonExpandedRows = TableUtils._getNonExpandedRows(tableElement.tBodies[0].rows);
         nonExpandedRows.forEach(row => {
             TableUtils._setRowSelectedState(row, false);
-            TableUtils._setSelectedCheckboxState(TableUtils._getCheckboxElement(row), false);
+            const selectCheckbox = TableUtils._getCheckboxElement(row);
+            if (selectCheckbox) {
+                TableUtils._setSelectedCheckboxState(selectCheckbox, false);
+            }
         });
     }
     /**

package/esm/table/table.js

@@ -7,6 +7,7 @@ import { __decorate } from "tslib";
 import { coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconArrowDownward } from '@tylertech/tyler-icons/standard';
 import { ExpansionPanelComponent } from '../expansion-panel';
+import { CheckboxComponent } from '../checkbox';
 import { TableAdapter } from './table-adapter';
 import { TABLE_CONSTANTS } from './table-constants';
 import { TableFoundation } from './table-foundation';
@@ -285,7 +286,8 @@ TableComponent = __decorate([
         name: TABLE_CONSTANTS.elementName,
         dependencies: [
             ExpansionPanelComponent,
-            IconComponent
+            IconComponent,
+            CheckboxComponent
         ]
     })
 ], TableComponent);

package/esm/text-field/text-field-adapter.d.ts

@@ -12,7 +12,7 @@ export declare class TextFieldAdapter extends FieldAdapter implements ITextField
     protected _inputElements: Array<HTMLInputElement | HTMLTextAreaElement>;
     protected _inputMutationObserverInstances: MutationObserver[];
     constructor(component: ITextFieldComponent);
-    initialize(required: boolean): void;
+    initialize(): void;
     destroy(): void;
     detectTextarea(): void;
     ensureLabelOrder(): void;

package/esm/text-field/text-field-adapter.js

@@ -12,8 +12,8 @@ export class TextFieldAdapter extends FieldAdapter {
         super(component);
         this._inputMutationObserverInstances = [];
     }
-    initialize(required) {
-        super.initialize(required, TEXT_FIELD_CONSTANTS.selectors.ROOT);
+    initialize() {
+        super.initialize(TEXT_FIELD_CONSTANTS.selectors.ROOT);
         this._inputElements = Array.from(this._component.querySelectorAll('input:not([type=checkbox]):not([type=radio]), textarea'));
         if (this._inputElements.length > 1) {
             this._handleMultiInputs();

package/esm/text-field/text-field.js

@@ -10,7 +10,7 @@ import { TextFieldFoundation } from './text-field-foundation';
 import { TEXT_FIELD_CONSTANTS } from './text-field-constants';
 import { FieldComponent } from '../field/field';
 const template = '<template><div class=\"forge-text-field__wrapper\" part=\"root\"><div class=\"forge-text-field forge-field\" part=\"container\"><div class=\"forge-text-field__leading-container\" part=\"leading-container\"><slot name=\"leading\"></slot></div><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><slot></slot><slot name=\"label\"></slot></div><slot name=\"trailing\"></slot><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-text-field-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field ::slotted(label){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field ::slotted(label[dir=rtl]),[dir=rtl] .forge-field ::slotted(label){right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) ::slotted(label){display:none}.forge-field--required ::slotted(label)::after{content:none}.forge-field--required ::slotted(label)::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){font-size:1rem}.forge-field--disabled ::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){top:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) ::slotted(label){left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(label){left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) ::slotted(label){padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded ::slotted(label){padding-right:32px}.forge-field ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field ::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0}.forge-field ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-field ::slotted(input):-webkit-autofill{z-index:auto!important}.forge-field:not(.forge-field--disabled) ::slotted(input){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled ::slotted(input){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){font-size:1rem}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){font-size:.875rem}.forge-field ::slotted(input){padding:0 12px}.forge-field--label ::slotted(input){padding-top:24px}.forge-field--roomy.forge-field--label ::slotted(input){padding-top:29px}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(input){padding-left:32px}.forge-field--leading ::slotted(input){padding-left:0}.forge-field--label ::slotted(input){padding-bottom:3px}.forge-field--roomy.forge-field--label ::slotted(input){padding-bottom:8px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) ::slotted(input){padding-right:32px}.forge-field--addon-end ::slotted(input),.forge-field--trailing ::slotted(input){padding-right:0}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;height:auto}.forge-field~::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field ::slotted([slot=trailing]){align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=trailing]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=trailing]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=trailing]){margin:0 4px}.forge-field ::slotted([slot=trailing]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-text-field{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-text-field-margin-top,0)}.forge-text-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-text-field:not(.forge-text-field--textarea):not(.forge-field--dense):not(.forge-field--roomy){height:3rem;height:var(--forge-text-field-height,3rem)}.forge-text-field:not(.forge-text-field--textarea).forge-field--roomy:not(.forge-field--dense){height:3.5rem;height:var(--forge-text-field-height,3.5rem)}.forge-text-field:not(.forge-text-field--textarea).forge-field--dense:not(.forge-field--roomy){height:1.5rem;height:var(--forge-text-field-height,1.5rem)}.forge-text-field__leading-container{display:-webkit-box;display:flex;align-self:center}.forge-text-field--multi-input ::slotted(input:first-of-type){padding-right:0;max-width:110px;min-width:110px;width:110px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-webkit-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-moz-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type):-ms-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-ms-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted([data-forge-multi-input-separator]){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));border:transparent}.forge-text-field--multi-input.forge-field--label ::slotted([data-forge-multi-input-separator]){margin:20px 0 0 4px}.forge-text-field--multi-input:not(.forge-field--label) ::slotted([data-forge-multi-input-separator]){margin:0 0 0 4px}.forge-text-field.forge-text-field--textarea{height:auto;padding-right:2px;min-height:3rem;min-height:var(--forge-text-field-height,3rem)}.forge-text-field.forge-text-field--textarea ::slotted(textarea){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0;font-size:1rem;margin:28px 0 0;padding:0 12px 8px;overflow:auto;resize:vertical}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-text-field.forge-text-field--textarea ::slotted(textarea):-webkit-autofill{z-index:auto!important}.forge-text-field.forge-text-field--textarea:not(.forge-field--disabled) ::slotted(textarea){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-text-field.forge-text-field--textarea.forge-field--disabled ::slotted(textarea){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}:host{display:block;contain:layout}:host([hidden]){display:none}';
+const styles = '.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-text-field-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field ::slotted(label){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field ::slotted(label[dir=rtl]),[dir=rtl] .forge-field ::slotted(label){right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) ::slotted(label){display:none}.forge-field--required ::slotted(label)::after{content:none}.forge-field--required ::slotted(label)::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){font-size:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){font-size:1rem}.forge-field--disabled ::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label){top:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(label){top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) ::slotted(label){left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(label){left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) ::slotted(label){padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded ::slotted(label){padding-right:32px}.forge-field ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled ::slotted(label.forge-floating-label--float-above){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) ::slotted(label.forge-floating-label--float-above){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above){-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe){-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) ::slotted(label.forge-floating-label--unfloat-above-start-keyframe){-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field ::slotted(input){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0}.forge-field ::slotted(input)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field ::slotted(input):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-field ::slotted(input):-webkit-autofill{z-index:auto!important}.forge-field:not(.forge-field--disabled) ::slotted(input){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled ::slotted(input){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){font-size:1rem;font-size:var(--forge-field-font-size, 1rem)}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){font-size:1rem;font-size:var(--forge-field-font-size, 1rem)}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){font-size:.875rem;font-size:var(--forge-field-font-size, .875rem)}.forge-field ::slotted(input){padding:0 12px}.forge-field--label ::slotted(input){padding-top:24px}.forge-field--roomy.forge-field--label ::slotted(input){padding-top:29px}.forge-field--shape-rounded:not(.forge-field--leading) ::slotted(input){padding-left:32px}.forge-field--leading ::slotted(input){padding-left:0}.forge-field--label ::slotted(input){padding-bottom:3px}.forge-field--roomy.forge-field--label ::slotted(input){padding-bottom:8px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) ::slotted(input){padding-right:32px}.forge-field--addon-end ::slotted(input),.forge-field--trailing ::slotted(input){padding-right:0}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;height:auto}.forge-field~::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field ::slotted([slot=trailing]){align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=trailing]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=trailing]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=trailing]){margin:0 4px}.forge-field ::slotted([slot=trailing]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-text-field{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-text-field-margin-top,0)}.forge-text-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-text-field:not(.forge-text-field--textarea):not(.forge-field--dense):not(.forge-field--roomy){height:3rem;height:var(--forge-text-field-height,3rem)}.forge-text-field:not(.forge-text-field--textarea).forge-field--roomy:not(.forge-field--dense){height:3.5rem;height:var(--forge-text-field-height,3.5rem)}.forge-text-field:not(.forge-text-field--textarea).forge-field--dense:not(.forge-field--roomy){height:1.5rem;height:var(--forge-text-field-height,1.5rem)}.forge-text-field__leading-container{display:-webkit-box;display:flex;align-self:center}.forge-text-field--multi-input ::slotted(input:first-of-type){padding-right:0;max-width:110px;min-width:110px;width:110px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-webkit-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-moz-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type):-ms-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::-ms-input-placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted(input:last-of-type)::placeholder{padding-left:6px}.forge-text-field--multi-input ::slotted([data-forge-multi-input-separator]){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));border:transparent}.forge-text-field--multi-input.forge-field--label ::slotted([data-forge-multi-input-separator]){margin:20px 0 0 4px}.forge-text-field--multi-input:not(.forge-field--label) ::slotted([data-forge-multi-input-separator]){margin:0 0 0 4px}.forge-text-field.forge-text-field--textarea{height:auto;padding-right:2px;min-height:3rem;min-height:var(--forge-text-field-height,3rem)}.forge-text-field.forge-text-field--textarea ::slotted(textarea){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0;font-size:1rem;margin:28px 0 0;padding:0 12px 8px;overflow:auto;resize:vertical}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-webkit-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-moz-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea):-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::-ms-input-placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea)::placeholder{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-text-field.forge-text-field--textarea ::slotted(textarea):invalid{-webkit-box-shadow:none;box-shadow:none}.forge-text-field.forge-text-field--textarea ::slotted(textarea):-webkit-autofill{z-index:auto!important}.forge-text-field.forge-text-field--textarea:not(.forge-field--disabled) ::slotted(textarea){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-text-field.forge-text-field--textarea.forge-field--disabled ::slotted(textarea){color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}:host{display:block;contain:layout}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-text-field>` custom element.
  *

package/esm/time-picker/time-picker-constants.d.ts

@@ -22,6 +22,7 @@ export declare const TIME_PICKER_CONSTANTS: {
         STEP: string;
         ALLOW_INPUT: string;
         SHOW_NOW: string;
+        SHOW_HOUR_OPTIONS: string;
         DISABLED: string;
         POPUP_CLASSES: string;
         ALLOW_DROPDOWN: string;

package/esm/time-picker/time-picker-constants.js

@@ -20,6 +20,7 @@ const attributes = {
     STEP: 'step',
     ALLOW_INPUT: 'allow-input',
     SHOW_NOW: 'show-now',
+    SHOW_HOUR_OPTIONS: 'show-hour-options',
     DISABLED: 'disabled',
     POPUP_CLASSES: 'popup-classes',
     ALLOW_DROPDOWN: 'allow-dropdown'

package/esm/time-picker/time-picker-foundation.d.ts

@@ -21,6 +21,7 @@ export interface ITimePickerFoundation extends ICustomElementFoundation {
     step: number;
     allowInput: boolean;
     showNow: boolean;
+    showHourOptions: boolean;
     customOptions: ITimePickerOption[];
     validationCallback: TimePickerValidationCallback;
     parseCallback: TimePickerParseCallback;
@@ -49,6 +50,7 @@ export declare class TimePickerFoundation implements ITimePickerFoundation {
     private _allowInvalidTime;
     private _popupTarget;
     private _showNow;
+    private _showHourOptions;
     private _customOptions;
     private _validationCallback;
     private _parseCallback;
@@ -130,6 +132,8 @@ export declare class TimePickerFoundation implements ITimePickerFoundation {
     set popupTarget(value: string);
     get showNow(): boolean;
     set showNow(value: boolean);
+    get showHourOptions(): boolean;
+    set showHourOptions(value: boolean);
     get customOptions(): ITimePickerOption[];
     set customOptions(value: ITimePickerOption[]);
     set validationCallback(cb: TimePickerValidationCallback);

package/esm/time-picker/time-picker-foundation.js

@@ -26,6 +26,7 @@ export class TimePickerFoundation {
         this._allowSeconds = false;
         this._allowInvalidTime = false;
         this._showNow = false;
+        this._showHourOptions = true;
         this._customOptions = [];
         this._disabled = false;
         this._popupClasses = [];
@@ -427,35 +428,37 @@ export class TimePickerFoundation {
         return value;
     }
     _openDropdown() {
-        if (!this.allowDropdown) {
+        const options = this._generateTimeOptions();
+        if (!this.allowDropdown || !options.length) {
             return;
         }
         this._formatInputValue();
         this._open = true;
         this._adapter.setHostAttribute(TIME_PICKER_CONSTANTS.attributes.OPEN);
-        const options = this._generateTimeOptions();
         const selectableOptions = options.filter(o => !o.divider && !o.disabled);
         let selectedValues = [];
         let activeStartIndex;
         // Find closest match in list of time options and activate/select it
-        if (this._value !== null) {
-            const optionIndex = this._findClosestOptionIndex(this._value, selectableOptions);
-            if (optionIndex >= 0) {
-                const isExactMatch = selectableOptions[optionIndex].value.time === this._value;
-                if (isExactMatch) {
-                    selectedValues = [selectableOptions[optionIndex].value];
+        if (options.length) {
+            if (this._value !== null) {
+                const optionIndex = this._findClosestOptionIndex(this._value, selectableOptions);
+                if (optionIndex >= 0) {
+                    const isExactMatch = selectableOptions[optionIndex].value.time === this._value;
+                    if (isExactMatch) {
+                        selectedValues = [selectableOptions[optionIndex].value];
+                    }
+                    else {
+                        activeStartIndex = optionIndex;
+                    }
                 }
-                else {
+            }
+            else if (typeof this._startTime === 'number') {
+                const optionIndex = this._findClosestOptionIndex(this._startTime, selectableOptions);
+                if (optionIndex >= 0 && optionIndex < selectableOptions.length) {
                     activeStartIndex = optionIndex;
                 }
             }
         }
-        else if (typeof this._startTime === 'number') {
-            const optionIndex = this._findClosestOptionIndex(this._startTime, selectableOptions);
-            if (optionIndex >= 0 && optionIndex < selectableOptions.length) {
-                activeStartIndex = optionIndex;
-            }
-        }
         const config = {
             id: `forge-time-picker-${this._identifier}`,
             selectedValues,
@@ -504,20 +507,22 @@ export class TimePickerFoundation {
         const minuteStep = this._step;
         const times = [];
         let leadingOptions = [];
-        for (let totalMinutes = minMinutes; totalMinutes <= maxMinutes; totalMinutes += minuteStep) {
-            if (totalMinutes === TIME_PICKER_CONSTANTS.numbers.MAX_DAY_MINUTES) {
-                break;
+        if (this._showHourOptions) {
+            for (let totalMinutes = minMinutes; totalMinutes <= maxMinutes; totalMinutes += minuteStep) {
+                if (totalMinutes === TIME_PICKER_CONSTANTS.numbers.MAX_DAY_MINUTES) {
+                    break;
+                }
+                const millis = minutesToMillis(totalMinutes);
+                const disabled = this._restrictedTimes.includes(millis);
+                const label = millisToTimeString(millis, this._use24HourTime, false) || '';
+                const value = { time: millis };
+                times.push({ label, value, disabled });
+            }
+            // Add divider between AM/PM times
+            const firstPmIndex = times.findIndex(t => t.value.time / 1000 / 60 >= 720);
+            if (firstPmIndex >= 0 && firstPmIndex < times.length - 1) {
+                times.splice(firstPmIndex, 0, { label: '', value: null, divider: true });
             }
-            const millis = minutesToMillis(totalMinutes);
-            const disabled = this._restrictedTimes.includes(millis);
-            const label = millisToTimeString(millis, this._use24HourTime, false) || '';
-            const value = { time: millis };
-            times.push({ label, value, disabled });
-        }
-        // Add divider between AM/PM times
-        const firstPmIndex = times.findIndex(t => t.value.time / 1000 / 60 >= 720);
-        if (firstPmIndex >= 0 && firstPmIndex < times.length - 1) {
-            times.splice(firstPmIndex, 0, { label: '', value: null, divider: true });
         }
         // Check if we need to prepend a "Now" option
         if (this._showNow) {
@@ -534,7 +539,9 @@ export class TimePickerFoundation {
         }
         // Append all leading options
         if (leadingOptions.length) {
-            times.splice(0, 0, { label: '', value: null, divider: true });
+            if (times.length) {
+                times.splice(0, 0, { label: '', value: null, divider: true });
+            }
             leadingOptions.forEach((o, index) => times.splice(index, 0, o));
         }
         return times;
@@ -747,6 +754,14 @@ export class TimePickerFoundation {
             this._showNow = value;
         }
     }
+    get showHourOptions() {
+        return this._showHourOptions;
+    }
+    set showHourOptions(value) {
+        if (this._showHourOptions !== value) {
+            this._showHourOptions = value;
+        }
+    }
     get customOptions() {
         return this._customOptions;
     }