@tylertech/forge 2.0.0

package/esm/checkbox/checkbox-foundation.js

@@ -0,0 +1,175 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { CHECKBOX_CONSTANTS } from './checkbox-constants';
+export class CheckboxFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._dense = false;
+        this._currentCheckState = CHECKBOX_CONSTANTS.strings.TRANSITION_STATE_INIT;
+        this._currentAnimationClass = '';
+        this._animEndLatchTimer = 0;
+        this._enableAnimationEndHandler = false;
+    }
+    disconnect() {
+        this._adapter.unlisten('change', this._handleChange);
+        this._adapter.disconnect();
+        this._adapter.uninstallPropertyChangeHooks();
+        this._adapter.unlisten('animationend', this._handleAnimationEnd);
+    }
+    connect() {
+        this._adapter.initialize();
+        this._currentCheckState = this._determineCheckState();
+        this._setDense(this.dense);
+        this._updateAriaChecked();
+        this._inputAttributeChangedListener = (name, value) => this._handleInputAttributeChange();
+        this._adapter.setInputAttributeObserver((name, value) => this._inputAttributeChangedListener(name, value));
+        this._handleChange = () => this._handleInputChange();
+        this._adapter.listen('change', this._handleChange);
+        this._adapter.installPropertyChangeHooks(() => {
+            this._handleInputChange();
+        });
+        this._handleAnimationEnd = () => this.handleAnimationEnd();
+        this._adapter.listen('animationend', this._handleAnimationEnd, true);
+        this._handleInputChange();
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._setDense(value);
+        }
+    }
+    handleAnimationEnd() {
+        if (!this._enableAnimationEndHandler) {
+            return;
+        }
+        const handler = () => {
+            this._adapter.removeRootClass(this._currentAnimationClass);
+            this._enableAnimationEndHandler = false;
+        };
+        clearTimeout(this._animEndLatchTimer);
+        this._animEndLatchTimer = setTimeout(handler, CHECKBOX_CONSTANTS.numbers.ANIM_END_LATCH_MS);
+    }
+    _setDense(value) {
+        this._adapter.setDense(value);
+    }
+    _determineCheckState() {
+        const { TRANSITION_STATE_INDETERMINATE, TRANSITION_STATE_CHECKED, TRANSITION_STATE_UNCHECKED } = CHECKBOX_CONSTANTS.strings;
+        if (this._adapter.isIndeterminate()) {
+            return TRANSITION_STATE_INDETERMINATE;
+        }
+        return this._adapter.isChecked() ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
+    }
+    _updateAriaChecked() {
+        const { ARIA_CHECKED_INDETERMINATE_VALUE, ARIA_CHECKED_ATTR } = CHECKBOX_CONSTANTS.strings;
+        // Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
+        if (this._adapter.isIndeterminate()) {
+            this._adapter.setNativeAttribute(ARIA_CHECKED_ATTR, ARIA_CHECKED_INDETERMINATE_VALUE);
+            this._adapter.setRootClass(CHECKBOX_CONSTANTS.classes.INDETERMINATE);
+            if (!this._adapter.isChecked()) {
+                this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.CHECKED);
+            }
+        }
+        else {
+            // The on/off state does not need to keep track of aria-checked, since
+            // the screenreader uses the checked property on the checkbox element.
+            this._adapter.removeNativeAttribute(ARIA_CHECKED_ATTR);
+            this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.INDETERMINATE);
+        }
+    }
+    _handleInputChange() {
+        this._handleInputAttributeChange();
+        this._updateCheckboxStateClasses();
+        this._transitionCheckState();
+    }
+    _transitionCheckState() {
+        if (!this._adapter.isAttachedToDOM()) {
+            return;
+        }
+        const oldState = this._currentCheckState;
+        const newState = this._determineCheckState();
+        if (oldState === newState) {
+            return;
+        }
+        this._updateAriaChecked();
+        const { TRANSITION_STATE_UNCHECKED } = CHECKBOX_CONSTANTS.strings;
+        const { SELECTED } = CHECKBOX_CONSTANTS.classes;
+        if (newState === TRANSITION_STATE_UNCHECKED) {
+            this._adapter.removeRootClass(SELECTED);
+        }
+        else {
+            this._adapter.setRootClass(SELECTED);
+        }
+        // Check to ensure that there isn't a previously existing animation class, in case for example
+        // the user interacted with the checkbox before the animation was finished.
+        if (this._currentAnimationClass.length > 0) {
+            clearTimeout(this._animEndLatchTimer);
+            this._adapter.forceLayout();
+            this._adapter.removeRootClass(this._currentAnimationClass);
+        }
+        // Check to ensure that there isn't a previously existing animation class, in case for example
+        // the user interacted with the checkbox before the animation was finished.
+        if (this._currentAnimationClass.length > 0) {
+            clearTimeout(this._animEndLatchTimer);
+            this._adapter.forceLayout();
+            this._adapter.removeRootClass(this._currentAnimationClass);
+        }
+        this._currentAnimationClass = this._getTransitionAnimationClass(oldState, newState);
+        this._currentCheckState = newState;
+        // Check for parentNode so that animations are only run when the element is attached
+        // to the DOM.
+        if (this._adapter.isAttachedToDOM() && this._currentAnimationClass.length > 0) {
+            this._adapter.setRootClass(this._currentAnimationClass);
+            this._enableAnimationEndHandler = true;
+        }
+        this._adapter.forceLayout();
+    }
+    _handleInputAttributeChange() {
+        if (this._adapter.isDisabled()) {
+            this._adapter.setRootClass(CHECKBOX_CONSTANTS.classes.DISABLED);
+            this._adapter.setWrapperClass(CHECKBOX_CONSTANTS.classes.WRAPPER_DISABLED);
+            this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.ENABLED);
+        }
+        else {
+            this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.DISABLED);
+            this._adapter.removeWrapperClass(CHECKBOX_CONSTANTS.classes.WRAPPER_DISABLED);
+            this._adapter.setRootClass(CHECKBOX_CONSTANTS.classes.ENABLED);
+        }
+        this._updateCheckboxStateClasses();
+    }
+    _getTransitionAnimationClass(oldState, newState) {
+        const { TRANSITION_STATE_CHECKED, TRANSITION_STATE_UNCHECKED } = CHECKBOX_CONSTANTS.strings;
+        const { ANIM_UNCHECKED_CHECKED, ANIM_UNCHECKED_INDETERMINATE, ANIM_CHECKED_UNCHECKED, ANIM_CHECKED_INDETERMINATE, ANIM_INDETERMINATE_CHECKED, ANIM_INDETERMINATE_UNCHECKED } = CHECKBOX_CONSTANTS.classes;
+        switch (oldState) {
+            case TRANSITION_STATE_UNCHECKED:
+                return newState === TRANSITION_STATE_CHECKED ? ANIM_UNCHECKED_CHECKED : ANIM_UNCHECKED_INDETERMINATE;
+            case TRANSITION_STATE_CHECKED:
+                return newState === TRANSITION_STATE_UNCHECKED ? ANIM_CHECKED_UNCHECKED : ANIM_CHECKED_INDETERMINATE;
+            default:
+                // TRANSITION_STATE_INDETERMINATE
+                // Handles TRANSITION_STATE_INIT
+                return newState === TRANSITION_STATE_CHECKED ? ANIM_INDETERMINATE_CHECKED : ANIM_INDETERMINATE_UNCHECKED;
+        }
+    }
+    _updateCheckboxStateClasses() {
+        // Since we can't use the ::slotted():checked ~ selector, simulating the same functionality with classes
+        if (this._adapter.isChecked()) {
+            this._adapter.setRootClass(CHECKBOX_CONSTANTS.classes.CHECKED);
+        }
+        else {
+            this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.CHECKED);
+        }
+        if (this._adapter.isIndeterminate()) {
+            this._adapter.setRootClass(CHECKBOX_CONSTANTS.classes.INDETERMINATE);
+            this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.CHECKED);
+        }
+        else {
+            this._adapter.removeRootClass(CHECKBOX_CONSTANTS.classes.INDETERMINATE);
+        }
+    }
+}

package/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface ICheckboxComponent extends IBaseComponent {
+    dense: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-checkbox': ICheckboxComponent;
+    }
+}
+/**
+ * The custom element class behind the `<forge-checkbox>` element.
+ */
+export declare class CheckboxComponent extends BaseComponent implements ICheckboxComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): Promise<void>;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
+    /** Gets or sets whether or not the checkbox is dense */
+    dense: boolean;
+    private _ensureInputElement;
+}

package/esm/checkbox/checkbox.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { CHECKBOX_CONSTANTS } from './checkbox-constants';
+import { CheckboxFoundation } from './checkbox-foundation';
+import { CheckboxAdapter } from './checkbox-adapter';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><div class=\"forge-checkbox-wrapper forge-form-field\" part=\"root\"><div class=\"mdc-checkbox\" part=\"container\"><slot name=\"input\"></slot><div class=\"mdc-checkbox__background\" part=\"background\"><svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\" part=\"checkmark-svg\"><path class=\"mdc-checkbox__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" part=\"checkmark-path\"></path></svg><div class=\"mdc-checkbox__mixedmark\" part=\"mixedmark\"></div></div><div class=\"mdc-checkbox__ripple\" part=\"ripple-container\"></div></div><slot name=\"label\"></slot></div></template>';
+const styles = '.mdc-checkbox{padding:calc((40px - 18px)/ 2);padding:calc((var(--mdc-checkbox-ripple-size,40px) - 18px)/ 2);margin:calc((40px - 40px)/ 2);margin:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2)}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-checkbox.mdc-ripple-surface--hover .mdc-checkbox__ripple::before,.mdc-checkbox:hover .mdc-checkbox__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before,.mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-checkbox:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-checkbox:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-checkbox.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::after,.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::before{background-color:#3d5afe;background-color:var(--forge-theme-tertiary,#3d5afe)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple::before,.mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before,.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::after,.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::before{background-color:#3d5afe;background-color:var(--forge-theme-tertiary,#3d5afe)}.mdc-checkbox .mdc-checkbox__background{top:calc((40px - 18px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,40px) - 18px)/ 2);left:calc((40px - 18px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,40px) - 18px)/ 2)}.mdc-checkbox ::slotted(input[type=checkbox]){top:calc((40px - 40px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2);right:calc((40px - 40px)/ 2);right:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2);left:calc((40px - 40px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,40px) - var(--mdc-checkbox-ripple-size,40px))/ 2);width:40px;width:var(--mdc-checkbox-ripple-size,40px);height:40px;height:var(--mdc-checkbox-ripple-size,40px)}.mdc-checkbox.forge-checkbox--enabled:not(.forge-checkbox--checked):not(.forge-checkbox--indeterminate) .mdc-checkbox__background{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}.mdc-checkbox.forge-checkbox--enabled.forge-checkbox--checked .mdc-checkbox__background,.mdc-checkbox.forge-checkbox--enabled.forge-checkbox--indeterminate .mdc-checkbox__background{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}@-webkit-keyframes mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE{0%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}50%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}}@keyframes mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE{0%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}50%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}}@-webkit-keyframes mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE{0%,80%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}100%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}}@keyframes mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE{0%,80%{border-color:#3d5afe;border-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe));background-color:#3d5afe;background-color:var(--mdc-checkbox-checked-color,var(--forge-theme-tertiary,#3d5afe))}100%{border-color:#000;border-color:var(--mdc-theme-text-secondary-on-background,#000);background-color:transparent}}.mdc-checkbox.mdc-checkbox--anim-unchecked-checked.forge-checkbox--enabled .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate.forge-checkbox--enabled .mdc-checkbox__background{-webkit-animation-name:mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE;animation-name:mdc-checkbox-fade-in-background-FF000000FF3D5AFE00000000FF3D5AFE}.mdc-checkbox.mdc-checkbox--anim-checked-unchecked.forge-checkbox--enabled .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked.forge-checkbox--enabled .mdc-checkbox__background{-webkit-animation-name:mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE;animation-name:mdc-checkbox-fade-out-background-FF000000FF3D5AFE00000000FF3D5AFE}.mdc-checkbox.mdc-checkbox--disabled:not(.forge-checkbox--checked):not(.forge-checkbox--indeterminate) .mdc-checkbox__background{border-color:#000;border-color:var(--forge-theme-form-field-icon-disabled-on-background,#000);background-color:transparent}.mdc-checkbox.mdc-checkbox--disabled.forge-checkbox--checked .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--disabled.forge-checkbox--indeterminate .mdc-checkbox__background{border-color:transparent;background-color:#000;background-color:var(--forge-theme-form-field-icon-disabled-on-background,#000)}.mdc-checkbox.forge-checkbox--enabled .mdc-checkbox__background .mdc-checkbox__checkmark{color:rgba(255,255,255,.87);color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87))}.mdc-checkbox.forge-checkbox--enabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:rgba(255,255,255,.87);border-color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87))}.mdc-checkbox.mdc-checkbox--disabled .mdc-checkbox__background .mdc-checkbox__checkmark{color:rgba(255,255,255,.87);color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87))}.mdc-checkbox.mdc-checkbox--disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:rgba(255,255,255,.87);border-color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87))}@-webkit-keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1)}100%{stroke-dashoffset:0}}@keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1)}100%{stroke-dashoffset:0}}@-webkit-keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{-webkit-transform:scaleX(0);transform:scaleX(0)}68.2%{-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1)}100%{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{-webkit-transform:scaleX(0);transform:scaleX(0)}68.2%{-webkit-animation-timing-function:cubic-bezier(0,0,0,1);animation-timing-function:cubic-bezier(0,0,0,1)}100%{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes mdc-checkbox-checked-unchecked-checkmark-path{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,1,1);animation-timing-function:cubic-bezier(0.4,0,1,1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes mdc-checkbox-checked-unchecked-checkmark-path{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,1,1);animation-timing-function:cubic-bezier(0.4,0,1,1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@-webkit-keyframes mdc-checkbox-checked-indeterminate-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes mdc-checkbox-checked-indeterminate-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0,0,0.2,1);animation-timing-function:cubic-bezier(0,0,0.2,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@-webkit-keyframes mdc-checkbox-indeterminate-checked-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:1}}@keyframes mdc-checkbox-indeterminate-checked-checkmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:1}}@-webkit-keyframes mdc-checkbox-checked-indeterminate-mixedmark{from{-webkit-animation-timing-function:mdc-animation-deceleration-curve-timing-function;animation-timing-function:mdc-animation-deceleration-curve-timing-function;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes mdc-checkbox-checked-indeterminate-mixedmark{from{-webkit-animation-timing-function:mdc-animation-deceleration-curve-timing-function;animation-timing-function:mdc-animation-deceleration-curve-timing-function;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@-webkit-keyframes mdc-checkbox-indeterminate-checked-mixedmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(315deg);transform:rotate(315deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-checked-mixedmark{from{-webkit-animation-timing-function:cubic-bezier(0.14,0,0,1);animation-timing-function:cubic-bezier(0.14,0,0,1);-webkit-transform:rotate(0);transform:rotate(0);opacity:1}to{-webkit-transform:rotate(315deg);transform:rotate(315deg);opacity:0}}@-webkit-keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}100%,32.8%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0}}@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}100%,32.8%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0}}.mdc-checkbox{display:inline-block;position:relative;-webkit-box-flex:0;flex:0 0 18px;-webkit-box-sizing:content-box;box-sizing:content-box;width:18px;height:18px;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom}.mdc-checkbox--disabled{cursor:default;pointer-events:none}.mdc-checkbox__background{display:-webkit-inline-box;display:inline-flex;position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:18px;height:18px;border:2px solid currentColor;border-radius:2px;background-color:transparent;pointer-events:none;will-change:background-color,border-color;-webkit-transition:background-color 90ms 0s cubic-bezier(.4, 0, .6, 1),border-color 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:background-color 90ms 0s cubic-bezier(.4, 0, .6, 1),border-color 90ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-checkbox__checkmark{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;-webkit-transition:opacity 180ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 180ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-checkbox--upgraded .mdc-checkbox__checkmark{opacity:1}.mdc-checkbox__checkmark-path{-webkit-transition:stroke-dashoffset 180ms 0s cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 180ms 0s cubic-bezier(.4, 0, .6, 1);stroke:currentColor;stroke-width:3.12px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-checkbox__mixedmark{width:100%;height:0;-webkit-transform:scaleX(0) rotate(0);transform:scaleX(0) rotate(0);border-width:1px;border-style:solid;opacity:0;-webkit-transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1)}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background{-webkit-animation-duration:180ms;animation-duration:180ms;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path{-webkit-animation:mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;animation:mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path{-webkit-animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark{-webkit-animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark{-webkit-animation:mdc-checkbox-indeterminate-checked-checkmark .5s linear 0s;animation:mdc-checkbox-indeterminate-checked-checkmark .5s linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-indeterminate-checked-mixedmark .5s linear 0s;animation:mdc-checkbox-indeterminate-checked-mixedmark .5s linear 0s;-webkit-transition:none;transition:none}.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark{-webkit-animation:mdc-checkbox-indeterminate-unchecked-mixedmark .3s linear 0s;animation:mdc-checkbox-indeterminate-unchecked-mixedmark .3s linear 0s;-webkit-transition:none;transition:none}.forge-checkbox--checked .mdc-checkbox__background,.forge-checkbox--indeterminate .mdc-checkbox__background{-webkit-transition:border-color 90ms 0s cubic-bezier(0, 0, .2, 1),background-color 90ms 0s cubic-bezier(0, 0, .2, 1);transition:border-color 90ms 0s cubic-bezier(0, 0, .2, 1),background-color 90ms 0s cubic-bezier(0, 0, .2, 1)}.forge-checkbox--checked .mdc-checkbox__background .mdc-checkbox__checkmark-path,.forge-checkbox--indeterminate .mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke-dashoffset:0}::slotted(input[type=checkbox]){position:absolute;margin:0;padding:0;opacity:0;cursor:inherit}.forge-checkbox--disabled ::slotted(input[type=checkbox]){cursor:default;pointer-events:none}.forge-checkbox--checked .mdc-checkbox__background .mdc-checkbox__checkmark{-webkit-transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 180ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 180ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),transform 180ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 180ms 0s cubic-bezier(0, 0, .2, 1),transform 180ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 180ms 0s cubic-bezier(0, 0, .2, 1);opacity:1}.forge-checkbox--checked .mdc-checkbox__background .mdc-checkbox__mixedmark{-webkit-transform:scaleX(1) rotate(-45deg);transform:scaleX(1) rotate(-45deg)}.forge-checkbox--indeterminate .mdc-checkbox__background .mdc-checkbox__checkmark{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0;-webkit-transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1);transition:opacity 90ms 0s cubic-bezier(.4, 0, .6, 1),transform 90ms 0s cubic-bezier(.4, 0, .6, 1),-webkit-transform 90ms 0s cubic-bezier(.4, 0, .6, 1)}.forge-checkbox--indeterminate .mdc-checkbox__background .mdc-checkbox__mixedmark{-webkit-transform:scaleX(1) rotate(0);transform:scaleX(1) rotate(0);opacity:1}.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark{-webkit-transition:none;transition:none}@-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-checkbox{--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}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-checkbox .mdc-checkbox__ripple::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-checkbox .mdc-checkbox__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple::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-checkbox.mdc-ripple-upgraded--foreground-deactivation .mdc-checkbox__ripple::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-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after,.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::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-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox{z-index:0}.mdc-checkbox .mdc-checkbox__ripple::after,.mdc-checkbox .mdc-checkbox__ripple::before{z-index:-1;z-index:var(--mdc-ripple-z-index,-1)}.mdc-checkbox__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.forge-checkbox--dense{padding:calc((28px - 18px)/ 2);padding:calc((var(--mdc-checkbox-ripple-size,28px) - 18px)/ 2);margin:calc((28px - 28px)/ 2);margin:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2)}.forge-checkbox--dense .mdc-checkbox__background{top:calc((28px - 18px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,28px) - 18px)/ 2);left:calc((28px - 18px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,28px) - 18px)/ 2)}.forge-checkbox--dense ::slotted(input[type=checkbox]){top:calc((28px - 28px)/ 2);top:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2);right:calc((28px - 28px)/ 2);right:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2);left:calc((28px - 28px)/ 2);left:calc((var(--mdc-checkbox-ripple-size,28px) - var(--mdc-checkbox-ripple-size,28px))/ 2);width:28px;width:var(--mdc-checkbox-ripple-size,28px);height:28px;height:var(--mdc-checkbox-ripple-size,28px)}.forge-checkbox-wrapper--disabled{cursor:not-allowed}.forge-checkbox-wrapper--disabled ::slotted(label){cursor:not-allowed}.mdc-checkbox--disabled+::slotted(label){color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;vertical-align:middle}.forge-form-field ::slotted([slot=label]){-webkit-box-ordinal-group:1;order:0;margin-right:auto;padding-left:4px}.forge-form-field forge-switch~::slotted([slot=label]){padding-left:8px}.forge-form-field--align-end ::slotted([slot=label]){-webkit-box-ordinal-group:0;order:-1;margin-left:auto;padding-right:4px}:host{display:inline-block}:host([hidden]){display:none}';
+/**
+ * The custom element class behind the `<forge-checkbox>` element.
+ */
+let CheckboxComponent = class CheckboxComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new CheckboxFoundation(new CheckboxAdapter(this));
+    }
+    static get observedAttributes() {
+        return [CHECKBOX_CONSTANTS.attributes.DENSE];
+    }
+    async connectedCallback() {
+        await this._ensureInputElement();
+        this._foundation.connect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case CHECKBOX_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    async _ensureInputElement() {
+        // Not using core function ensureChild because it was not selecting the input properly
+        return new Promise(resolve => {
+            const element = this.querySelector('input');
+            if (element) {
+                resolve(element);
+            }
+            const observer = new MutationObserver(changes => {
+                const hasAddedNodes = changes.reduce((prev, curr) => prev + curr.addedNodes.length, 0) > 0;
+                if (hasAddedNodes) {
+                    const foundElement = this.querySelector('input');
+                    if (foundElement) {
+                        observer.disconnect();
+                        resolve(foundElement);
+                    }
+                }
+            });
+            observer.observe(this, { childList: true, subtree: true });
+        });
+    }
+};
+__decorate([
+    FoundationProperty()
+], CheckboxComponent.prototype, "dense", void 0);
+CheckboxComponent = __decorate([
+    CustomElement({
+        name: CHECKBOX_CONSTANTS.elementName
+    })
+], CheckboxComponent);
+export { CheckboxComponent };

package/esm/checkbox/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './checkbox-constants';
+export * from './checkbox-adapter';
+export * from './checkbox-foundation';
+export * from './checkbox';
+export * from './checkbox-component-delegate';
+export declare function defineCheckboxComponent(): void;

package/esm/checkbox/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { CheckboxComponent } from './checkbox';
+export * from './checkbox-constants';
+export * from './checkbox-adapter';
+export * from './checkbox-foundation';
+export * from './checkbox';
+export * from './checkbox-component-delegate';
+export function defineCheckboxComponent() {
+    defineCustomElement(CheckboxComponent);
+}

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IChipFieldComponent } from './chip-field';
+import { FieldAdapter, IFieldAdapter } from '../field/field-adapter';
+export interface IChipFieldAdapter extends IFieldAdapter {
+    addRootListener(type: string, callback: (event: Event) => void): void;
+    removeRootListener(type: string, callback: (event: Event) => void): void;
+    addMemberSlotListener(listener: (evt: Event) => void): void;
+    removeMemberSlotListener(listener: (evt: Event) => void): void;
+    addInputContainerListener(type: string, callback: (event: Event) => void): void;
+    removeInputContainerListener(type: string, callback: (event: Event) => void): void;
+    getSlottedMemberElements(): NodeListOf<HTMLElement>;
+    focusInput(): void;
+}
+export declare class ChipFieldAdapter extends FieldAdapter implements IChipFieldAdapter {
+    protected _memberSlot: HTMLSlotElement;
+    protected _inputContainerElement: HTMLElement;
+    constructor(component: IChipFieldComponent);
+    initialize(required: boolean): void;
+    addRootListener(type: string, callback: (event: Event) => void): void;
+    removeRootListener(type: string, callback: (event: Event) => void): void;
+    addMemberSlotListener(listener: (evt: Event) => void): void;
+    removeMemberSlotListener(listener: (evt: Event) => void): void;
+    addInputContainerListener(type: string, callback: (event: Event) => void): void;
+    removeInputContainerListener(type: string, callback: (event: Event) => void): void;
+    fieldHasValue(): boolean;
+    focusInput(): void;
+    getSlottedMemberElements(): NodeListOf<HTMLElement>;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
+import { FieldAdapter } from '../field/field-adapter';
+export class ChipFieldAdapter extends FieldAdapter {
+    constructor(component) {
+        super(component);
+    }
+    initialize(required) {
+        super.initialize(required, CHIP_FIELD_CONSTANTS.selectors.ROOT);
+        this._memberSlot = getShadowElement(this._component, CHIP_FIELD_CONSTANTS.selectors.MEMBER_SLOT);
+        this._inputContainerElement = getShadowElement(this._component, CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER);
+    }
+    addRootListener(type, callback) {
+        this._rootElement.addEventListener(type, callback);
+    }
+    removeRootListener(type, callback) {
+        this._rootElement.removeEventListener(type, callback);
+    }
+    addMemberSlotListener(listener) {
+        this._memberSlot.addEventListener('slotchange', listener);
+    }
+    removeMemberSlotListener(listener) {
+        if (this._memberSlot) {
+            this._memberSlot.removeEventListener('slotchange', listener);
+        }
+    }
+    addInputContainerListener(type, callback) {
+        this._inputContainerElement.addEventListener(type, callback);
+    }
+    removeInputContainerListener(type, callback) {
+        this._inputContainerElement.removeEventListener(type, callback);
+    }
+    fieldHasValue() {
+        const aMemberExists = !!this._component.querySelector(CHIP_FIELD_CONSTANTS.selectors.MEMBER);
+        return aMemberExists || super.inputHasValue();
+    }
+    focusInput() {
+        if (!this._inputElement) {
+            return;
+        }
+        this._inputElement.focus();
+    }
+    getSlottedMemberElements() {
+        return this._component.querySelectorAll(CHIP_FIELD_CONSTANTS.selectors.MEMBER);
+    }
+}

package/esm/chip-field/chip-field-component-delegate.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
+import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
+import { IChipFieldComponent } from './chip-field';
+export declare type ChipFieldComponentDelegateProps = Partial<IChipFieldComponent>;
+export interface IChipFieldComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
+    id?: string;
+    label?: string;
+    type?: string;
+    value?: string;
+    helperText?: string;
+    placeholder?: string;
+    leadingElement?: HTMLElement;
+    trailingElement?: HTMLElement;
+}
+export interface IChipFieldComponentDelegateConfig extends IBaseComponentDelegateConfig<IChipFieldComponent, IChipFieldComponentDelegateOptions> {
+}
+export declare class ChipFieldComponentDelegate extends FormFieldComponentDelegate<IChipFieldComponent, IChipFieldComponentDelegateOptions> {
+    private _inputElement;
+    private _labelElement;
+    private _helperTextElement;
+    constructor(config?: IChipFieldComponentDelegateConfig);
+    protected _build(): IChipFieldComponent;
+    protected _configure(): void;
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get inputElement(): HTMLInputElement;
+    get labelElement(): HTMLLabelElement | undefined;
+    onChange(listener: (value: string) => void): void;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+    setLabel(text: string | null): void;
+    setHelperText(text: string | null): void;
+    floatLabel(value: boolean): void;
+    private _createLabel;
+    private _buildInputElement;
+}

package/esm/chip-field/chip-field-component-delegate.js

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
+export class ChipFieldComponentDelegate extends FormFieldComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    _build() {
+        var _a, _b;
+        const chipField = document.createElement(CHIP_FIELD_CONSTANTS.elementName);
+        this._inputElement = this._buildInputElement(chipField);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.leadingElement) {
+            this._config.options.leadingElement.slot = 'leading';
+            chipField.appendChild(this._config.options.leadingElement);
+        }
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.trailingElement) {
+            this._config.options.trailingElement.slot = 'trailing';
+            chipField.appendChild(this._config.options.trailingElement);
+        }
+        chipField.appendChild(this._inputElement);
+        return chipField;
+    }
+    _configure() {
+        var _a, _b;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.helperText) {
+            this.setHelperText(this._config.options.helperText);
+        }
+        if (typeof ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.label) === 'string') {
+            this._createLabel(this._config.options.label);
+        }
+    }
+    get value() {
+        return this._inputElement.value;
+    }
+    set value(value) {
+        this._inputElement.value = value;
+    }
+    get disabled() {
+        return this._inputElement.disabled;
+    }
+    set disabled(value) {
+        this._inputElement.disabled = value;
+    }
+    get invalid() {
+        return this._element.invalid || false;
+    }
+    set invalid(value) {
+        this._element.invalid = value;
+    }
+    get inputElement() {
+        return this._inputElement;
+    }
+    get labelElement() {
+        return this._labelElement;
+    }
+    onChange(listener) {
+        this._inputElement.addEventListener('input', evt => listener(evt.target.value));
+    }
+    onFocus(listener) {
+        this._inputElement.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        this._inputElement.addEventListener('blur', evt => listener(evt));
+    }
+    setLabel(text) {
+        if (text) {
+            if (this._labelElement) {
+                this._labelElement.textContent = text;
+            }
+            else {
+                this._createLabel(text);
+            }
+        }
+        else if (this._labelElement) {
+            this._element.removeChild(this._labelElement);
+            this._labelElement = undefined;
+        }
+    }
+    setHelperText(text) {
+        if (text) {
+            if (!this._helperTextElement) {
+                this._helperTextElement = document.createElement('span');
+                this._helperTextElement.slot = 'helper-text';
+                this._element.appendChild(this._helperTextElement);
+            }
+            this._helperTextElement.textContent = text;
+        }
+        else if (this._helperTextElement) {
+            this._element.removeChild(this._helperTextElement);
+            this._helperTextElement = undefined;
+        }
+    }
+    floatLabel(value) {
+        this._element.floatLabel(value);
+    }
+    _createLabel(text) {
+        var _a;
+        this._labelElement = document.createElement('label');
+        this._labelElement.textContent = text;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.id) {
+            this._labelElement.setAttribute('for', this._config.options.id);
+        }
+        this._element.appendChild(this._labelElement);
+    }
+    _buildInputElement(chipField) {
+        var _a, _b, _c, _d, _e;
+        const inputElement = document.createElement('input');
+        inputElement.type = ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.type) || 'text';
+        if (((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.value) !== undefined) {
+            inputElement.value = this._config.options.value;
+        }
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.id) {
+            inputElement.id = this._config.options.id;
+        }
+        if (typeof ((_d = this._config.options) === null || _d === void 0 ? void 0 : _d.placeholder) === 'string') {
+            inputElement.placeholder = (_e = this._config.options) === null || _e === void 0 ? void 0 : _e.placeholder;
+        }
+        chipField.appendChild(inputElement);
+        return inputElement;
+    }
+}

package/esm/chip-field/chip-field-constants.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const CHIP_FIELD_CONSTANTS: {
+    elementName: "forge-chip-field";
+    classes: {
+        ROOT: string;
+    };
+    slots: {
+        LABEL: string;
+        HELPER_TEXT: string;
+        MEMBER: string;
+    };
+    selectors: {
+        ROOT: string;
+        INPUT_CONTAINER: string;
+        INPUT: string;
+        LABEL: string;
+        HELPER_TEXT: string;
+        MEMBER: string;
+        LABEL_SLOT: string;
+        MEMBER_SLOT: string;
+    };
+    events: {
+        MEMBER_ADDED: string;
+        MEMBER_REMOVED: string;
+    };
+};
+export { FieldDensityType as ChipFieldDensityType, FieldFloatLabelType as ChipFieldFloatLabelType, FieldShapeType as ChipFieldShapeType } from '../field/field-constants';