@tylertech/forge 2.0.0

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}chip-field`;
+const classes = {
+    ROOT: 'forge-chip-field'
+};
+const slots = {
+    LABEL: 'label',
+    HELPER_TEXT: 'helper-text',
+    MEMBER: 'member'
+};
+const selectors = {
+    ROOT: `.${classes.ROOT}`,
+    INPUT_CONTAINER: '.forge-field__input-container',
+    INPUT: 'input',
+    LABEL: `[slot=${slots.LABEL}]`,
+    HELPER_TEXT: `[slot=${slots.HELPER_TEXT}]`,
+    MEMBER: `[slot=${slots.MEMBER}]`,
+    LABEL_SLOT: `slot[name=${slots.LABEL}]`,
+    MEMBER_SLOT: `slot[name=${slots.MEMBER}]`
+};
+const events = {
+    MEMBER_ADDED: `${elementName}-member-added`,
+    MEMBER_REMOVED: `${elementName}-member-removed`
+};
+export const CHIP_FIELD_CONSTANTS = {
+    elementName,
+    classes,
+    slots,
+    selectors,
+    events
+};

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IChipFieldAdapter } from './chip-field-adapter';
+import { IFieldFoundation, FieldFoundation } from '../field/field-foundation';
+export interface IChipFieldFoundation extends IFieldFoundation {
+}
+export declare class ChipFieldFoundation extends FieldFoundation implements IChipFieldFoundation {
+    protected _adapter: IChipFieldAdapter;
+    private _memberSlotListener;
+    private _inputContainerMouseDownListener;
+    private _handleRootKeyDown;
+    private _handleKeyDown;
+    constructor(_adapter: IChipFieldAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _onInputContainerMouseDown;
+    protected _onBlur(event: Event): void;
+    private _onRootKeyDown;
+    private _onKeyDown;
+    private _focusNextMember;
+    private _focusPreviousMember;
+    private _memberIsActive;
+    private _getActiveMember;
+    private _addMember;
+    private _removeMember;
+    private _onMemberSlotChanged;
+}

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

@@ -0,0 +1,151 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getActiveElement } from '@tylertech/forge-core';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
+import { FieldFoundation } from '../field/field-foundation';
+export class ChipFieldFoundation extends FieldFoundation {
+    constructor(_adapter) {
+        super(_adapter);
+        this._adapter = _adapter;
+        this._memberSlotListener = () => this._onMemberSlotChanged();
+        this._inputContainerMouseDownListener = evt => this._onInputContainerMouseDown(evt);
+        this._handleRootKeyDown = evt => this._onRootKeyDown(evt);
+        this._handleKeyDown = evt => this._onKeyDown(evt);
+    }
+    initialize() {
+        super.initialize();
+        this._adapter.addMemberSlotListener(this._memberSlotListener);
+        this._adapter.addInputContainerListener('mousedown', this._inputContainerMouseDownListener);
+        this._adapter.addRootListener('keydown', this._handleRootKeyDown);
+        this._adapter.addInputListener('keydown', this._handleKeyDown);
+    }
+    disconnect() {
+        super.disconnect();
+        this._adapter.removeMemberSlotListener(this._memberSlotListener);
+        this._adapter.removeInputContainerListener('mousedown', this._inputContainerMouseDownListener);
+        this._adapter.removeRootListener('keydown', this._handleRootKeyDown);
+        this._adapter.removeInputListener('keydown', this._handleKeyDown);
+    }
+    _onInputContainerMouseDown(evt) {
+        evt.preventDefault();
+        this._adapter.focusInput();
+    }
+    _onBlur(event) {
+        const input = event.target;
+        input.value = '';
+        super._onBlur(event);
+    }
+    _onRootKeyDown(event) {
+        if (this._adapter.inputHasValue()) {
+            return;
+        }
+        switch (event.key) {
+            case 'Right':
+            case 'ArrowRight':
+                this._focusNextMember();
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                this._focusPreviousMember();
+                break;
+            case 'Backspace':
+            case 'Delete':
+            case 'Del':
+                this._removeMember();
+                break;
+            default:
+                break;
+        }
+    }
+    _onKeyDown(event) {
+        const input = event.target;
+        switch (event.key) {
+            case 'Enter':
+                this._addMember(input);
+                break;
+            case 'Esc':
+            case 'Escape':
+            case 'Tab':
+                input.value = '';
+                break;
+            default:
+                break;
+        }
+    }
+    _focusNextMember() {
+        const members = this._adapter.getSlottedMemberElements();
+        if (members.length < 1 || this._adapter.inputHasFocus()) {
+            return;
+        }
+        for (let i = 0; i < members.length; i++) {
+            const member = members.item(i);
+            const nextMember = members.item(i + 1);
+            if (this._memberIsActive(member)) {
+                if (nextMember) {
+                    nextMember.focus();
+                    break;
+                }
+                else {
+                    this._adapter.focusInput();
+                }
+            }
+        }
+    }
+    _focusPreviousMember() {
+        const members = this._adapter.getSlottedMemberElements();
+        if (members.length < 1) {
+            return;
+        }
+        if (this._adapter.inputHasFocus()) {
+            members[members.length - 1].focus();
+            return;
+        }
+        for (let i = 0; i < members.length; i++) {
+            const previousMember = members.item(i - 1);
+            const member = members.item(i);
+            if (this._memberIsActive(member) && previousMember) {
+                previousMember.focus();
+                break;
+            }
+        }
+    }
+    _memberIsActive(ele) {
+        return getActiveElement() === ele || ele.hasAttribute('focused');
+    }
+    _getActiveMember() {
+        const members = this._adapter.getSlottedMemberElements();
+        for (let i = 0; i < members.length; i++) {
+            const member = members.item(i);
+            if (this._memberIsActive(member)) {
+                return member;
+            }
+        }
+        return null;
+    }
+    _addMember(input) {
+        const cleanInputValue = input.value.trim();
+        if (cleanInputValue && cleanInputValue.length > 0) {
+            this._adapter.emitHostEvent(CHIP_FIELD_CONSTANTS.events.MEMBER_ADDED, cleanInputValue);
+        }
+        input.value = '';
+    }
+    _removeMember() {
+        let memberToRemove = this._getActiveMember();
+        if (!memberToRemove) {
+            const members = this._adapter.getSlottedMemberElements();
+            memberToRemove = members.item(members.length - 1);
+        }
+        if (!memberToRemove) {
+            return;
+        }
+        this._focusNextMember();
+        this._adapter.emitHostEvent(CHIP_FIELD_CONSTANTS.events.MEMBER_REMOVED, memberToRemove);
+    }
+    _onMemberSlotChanged() {
+        this.floatLabel(this._adapter.fieldHasValue() || this._adapter.inputHasFocus());
+        this._adapter.getSlottedMemberElements().forEach(x => x.tabIndex = -1);
+    }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ChipFieldFoundation } from './chip-field-foundation';
+import { FieldComponent, IFieldComponent } from '../field/field';
+export interface IChipFieldComponent extends IFieldComponent {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-chip-field': IChipFieldComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-chip-field-member-added': CustomEvent<string>;
+        'forge-chip-field-member-removed': CustomEvent<HTMLElement>;
+    }
+}
+export declare class ChipFieldComponent extends FieldComponent<ChipFieldFoundation> implements IChipFieldComponent {
+    constructor();
+}

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

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
+import { ChipFieldAdapter } from './chip-field-adapter';
+import { ChipFieldFoundation } from './chip-field-foundation';
+import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
+import { ChipComponent } from '../chips';
+import { FieldComponent } from '../field/field';
+const template = '<template><div class=\"forge-chip-field__wrapper\" part=\"root\"><div class=\"forge-chip-field forge-field\" part=\"container\"><slot name=\"leading\"></slot><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><slot name=\"label\"></slot><div class=\"forge-field__input-container\" part=\"input-container\"><slot name=\"member\"></slot><slot></slot></div></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-chip-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([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-chip-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-chip-field-margin-top,0)}.forge-chip-field.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-chip-field .forge-chip-field{display:grid;grid-template-columns:[leading] -webkit-min-content [input] 1fr [trailing] -webkit-min-content [addon-end] -webkit-min-content [end];grid-template-columns:[leading] min-content [input] 1fr [trailing] min-content [addon-end] min-content [end]}.forge-chip-field .forge-chip-field:not(.forge-field--dense):not(.forge-field--roomy){height:auto;min-height:46px;min-height:var(--forge-chip-field-height,46px)}.forge-chip-field .forge-chip-field.forge-field--roomy:not(.forge-field--dense){height:auto;min-height:3.5rem;min-height:var(--forge-chip-field-height,3.5rem)}.forge-chip-field .forge-chip-field.forge-field--dense:not(.forge-field--roomy){height:auto;min-height:1.5rem;min-height:var(--forge-chip-field-height,1.5rem)}.forge-field__label-input-container{grid-column-start:input;grid-column-end:trailing}.forge-field__input-container{-webkit-box-flex:1;flex:1 1 0.0001px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:start;align-items:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box}.forge-field__input-container{padding:2px 12px}.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-top:22px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-field__input-container{padding-left:32px}.forge-field--leading:not(.forge-field--shape-rounded) .forge-field__input-container{padding-left:0}.forge-field--shape-rounded.forge-field--leading .forge-field__input-container{padding-left:0}.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--roomy.forge-field--label .forge-field__input-container{padding-bottom:2px}.forge-field--shape-rounded:not(.forge-field--trailing):not(.forge-field--addon-end) .forge-field__input-container{padding-right:32px}.forge-field--addon-end:not(.forge-field--shape-rounded) .forge-field__input-container,.forge-field--trailing:not(.forge-field--shape-rounded) .forge-field__input-container{padding-right:0}.forge-field--shape-rounded.forge-field--addon-end .forge-field__input-container,.forge-field--shape-rounded.forge-field--trailing .forge-field__input-container{padding-right:0}.forge-field ::slotted([slot=member]){display:block}.forge-field--disabled ::slotted([slot=member]){--mdc-theme-primary:rgba(0, 0, 0, 0.38);--mdc-theme-primary:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));cursor:not-allowed;pointer-events:none}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 8px 2px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=member]){margin:6px 12px 6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){margin:2px 6px 2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-height:20px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=member]){--forge-chip-height:16px}.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){-webkit-box-flex:1;flex:1 1 0.0001px;min-width:40px;display:block;align-self:flex-start;padding:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){margin:4px 0}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){margin:6px 0}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){margin:2px 0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field--roomy:not(.forge-field--dense) ::slotted(input){height:1.25rem;line-height:1.25rem}.forge-field--dense:not(.forge-field--roomy) ::slotted(input){height:1rem;line-height:1rem}.forge-field ::slotted([slot=leading]){grid-column-start:leading;grid-column-end:input;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=leading]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=leading]){padding-top:0;padding-bottom:0}.forge-field ::slotted([slot=trailing]){grid-column-start:trailing;grid-column-end:addon-end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=trailing]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){margin-top:0;margin-bottom:0}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=trailing]){padding-top:0;padding-bottom:0}.forge-field--addon-end .forge-field__addon-end-container{grid-column-start:addon-end;grid-column-end:end;display:-webkit-box;display:flex;-webkit-box-align:start;align-items:flex-start;align-self:flex-start}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:5px;margin-bottom:5px}.forge-field--roomy:not(.forge-field--dense) ::slotted([slot=addon-end]){margin-top:10px;margin-bottom:10px}.forge-field--dense:not(.forge-field--roomy) ::slotted([slot=addon-end]){margin-top:0;margin-bottom:0}.forge-field ::slotted(forge-icon-button){display:-webkit-inline-box!important;display:inline-flex!important}:host{display:block;contain:layout}:host([hidden]){display:none}';
+let ChipFieldComponent = class ChipFieldComponent extends FieldComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ChipFieldFoundation(new ChipFieldAdapter(this));
+    }
+};
+ChipFieldComponent = __decorate([
+    CustomElement({
+        name: CHIP_FIELD_CONSTANTS.elementName,
+        dependencies: [ChipComponent]
+    })
+], ChipFieldComponent);
+export { ChipFieldComponent };

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

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

package/esm/chip-field/index.js

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

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

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { IChipComponent } from './chip';
+import { IChipState } from './chip-constants';
+import { ForgeRipple } from '../../ripple';
+export interface IChipAdapter extends IBaseAdapter {
+    addButtonListener(type: string, listener: (evt: Event) => void): void;
+    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    initializeRipple(): ForgeRipple;
+    clearTypeClass(): void;
+    addRootClass(className: string): void;
+    removeRootClass(name: string): void;
+    setCheckmarkVisibility(isVisible: boolean): void;
+    setSelected(value: boolean): void;
+    setDisabled(value: boolean): void;
+    setDense(value: boolean): void;
+    setDeleteButtonVisibility(isVisible: boolean, listener: (evt: KeyboardEvent) => void): void;
+    setLeadingSlotVisibility(isVisible: boolean): void;
+    getChipSetState(): IChipState | null;
+    setFocus(): void;
+    setEmulatedFocus(value: boolean): void;
+}
+export declare class ChipAdapter extends BaseAdapter<IChipComponent> implements IChipAdapter {
+    private _buttonElement;
+    private _deleteButton;
+    private _deleteButtonTouchTarget;
+    private _leadingSlotElement;
+    private _checkmarkElement;
+    constructor(component: IChipComponent);
+    addButtonListener(type: string, listener: (evt: Event) => void): void;
+    removeButtonListener(type: string, listener: (evt: Event) => void): void;
+    initializeRipple(): ForgeRipple;
+    clearTypeClass(): void;
+    addRootClass(className: string): void;
+    removeRootClass(name: string): void;
+    setCheckmarkVisibility(isVisible: boolean): void;
+    setSelected(value: boolean): void;
+    setDisabled(value: boolean): void;
+    setDense(value: boolean): void;
+    setDeleteButtonVisibility(isVisible: boolean, listener: (evt: KeyboardEvent) => void): void;
+    setLeadingSlotVisibility(isVisible: boolean): void;
+    getChipSetState(): IChipState | null;
+    private _createDeleteButton;
+    private _createDeleteButtonTouchTarget;
+    setFocus(): void;
+    setEmulatedFocus(value: boolean): void;
+}

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

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, getShadowElement, removeClass, removeElement, walkUpUntil, elementFromHTML, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { CHIP_SET_CONSTANTS } from '../chip-set/chip-set-constants';
+import { CHIP_CONSTANTS } from './chip-constants';
+import { ICON_CONSTANTS } from '../../icon';
+import { ForgeRipple } from '../../ripple';
+const checkmarkTemplate = '<div class=\"forge-chip__checkmark\" aria-hidden=\"true\"><svg class=\"forge-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\"><path class=\"forge-chip__checkmark-path\" fill=\"none\" stroke=\"black\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/></svg></div>';
+export class ChipAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._buttonElement = getShadowElement(this._component, CHIP_CONSTANTS.selectors.BUTTON);
+        this._leadingSlotElement = getShadowElement(this._component, 'slot[name=leading]');
+    }
+    addButtonListener(type, listener) {
+        this._buttonElement.addEventListener(type, listener);
+    }
+    removeButtonListener(type, listener) {
+        this._buttonElement.removeEventListener(type, listener);
+    }
+    initializeRipple() {
+        return new ForgeRipple(this._buttonElement);
+    }
+    clearTypeClass() {
+        removeClass([CHIP_CONSTANTS.classes.ACTION, CHIP_CONSTANTS.classes.CHOICE, CHIP_CONSTANTS.classes.FILTER, CHIP_CONSTANTS.classes.INPUT], this._buttonElement);
+    }
+    addRootClass(className) {
+        this._buttonElement.classList.add(className);
+    }
+    removeRootClass(name) {
+        this._buttonElement.classList.remove(name);
+    }
+    setCheckmarkVisibility(isVisible) {
+        if (isVisible) {
+            if (!this._checkmarkElement) {
+                this._checkmarkElement = elementFromHTML(checkmarkTemplate);
+            }
+            this._buttonElement.insertBefore(this._checkmarkElement, this._buttonElement.firstChild);
+        }
+        else if (this._checkmarkElement && this._checkmarkElement.isConnected) {
+            removeElement(this._checkmarkElement);
+        }
+    }
+    setSelected(value) {
+        toggleClass(this._buttonElement, value, CHIP_CONSTANTS.classes.SELECTED);
+    }
+    setDisabled(value) {
+        this._buttonElement.disabled = value;
+    }
+    setDense(value) {
+        toggleClass(this._buttonElement, value, CHIP_CONSTANTS.classes.DENSE);
+    }
+    setDeleteButtonVisibility(isVisible, listener) {
+        if (isVisible) {
+            if (!this._deleteButton) {
+                this._deleteButton = this._createDeleteButton(listener);
+            }
+            if (!this._deleteButtonTouchTarget) {
+                this._deleteButtonTouchTarget = this._createDeleteButtonTouchTarget(listener);
+            }
+            this._deleteButton.appendChild(this._deleteButtonTouchTarget);
+            this._buttonElement.appendChild(this._deleteButton);
+        }
+        else {
+            if (this._deleteButtonTouchTarget) {
+                removeElement(this._deleteButtonTouchTarget);
+            }
+            if (this._deleteButton) {
+                removeElement(this._deleteButton);
+            }
+        }
+    }
+    setLeadingSlotVisibility(isVisible) {
+        toggleClass(this._leadingSlotElement, !isVisible, CHIP_CONSTANTS.classes.LEADING_HIDDEN);
+    }
+    getChipSetState() {
+        let state = null;
+        const chipSet = walkUpUntil(this._component, node => node && node.nodeName === CHIP_SET_CONSTANTS.elementName.toUpperCase());
+        if (chipSet) {
+            state = {
+                type: chipSet.type,
+                disabled: chipSet.disabled,
+                dense: chipSet.dense
+            };
+        }
+        return state;
+    }
+    _createDeleteButton(listener) {
+        const el = document.createElement(ICON_CONSTANTS.elementName);
+        el.name = 'cancel';
+        el.tabIndex = 0;
+        el.setAttribute('aria-label', 'Delete');
+        el.setAttribute('role', 'button');
+        addClass([CHIP_CONSTANTS.classes.DELETE_BUTTON], el);
+        el.addEventListener('keydown', listener);
+        return el;
+    }
+    _createDeleteButtonTouchTarget(listener) {
+        const el = document.createElement('div');
+        addClass(CHIP_CONSTANTS.classes.DELETE_BUTTON_TOUCH_TARGET, el);
+        el.addEventListener('keydown', listener);
+        el.addEventListener('click', listener);
+        return el;
+    }
+    setFocus() {
+        this._buttonElement.focus();
+    }
+    setEmulatedFocus(value) {
+        this._buttonElement.classList.toggle('mdc-ripple-upgraded--background-focused', value);
+    }
+}

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const CHIP_CONSTANTS: {
+    elementName: "forge-chip";
+    attributes: {
+        TYPE: string;
+        SELECTED: string;
+        VALUE: string;
+        DISABLED: string;
+        INVALID: string;
+        DENSE: string;
+        EMULATE_FOCUS: string;
+    };
+    classes: {
+        ACTION: string;
+        CHOICE: string;
+        FILTER: string;
+        INPUT: string;
+        FIELD: string;
+        INVALID: string;
+        SELECTED: string;
+        DELETE_BUTTON: string;
+        DELETE_BUTTON_TOUCH_TARGET: string;
+        DENSE: string;
+        LEADING_HIDDEN: string;
+    };
+    selectors: {
+        BUTTON: string;
+    };
+    events: {
+        DELETE: string;
+        SELECT: string;
+    };
+    defaults: {
+        TYPE: string;
+    };
+};
+export declare type ChipType = 'choice' | 'filter' | 'action' | 'input' | 'field';
+export interface IChipSelectEventData<T = any> {
+    value: T;
+    selected: boolean;
+}
+export interface IChipDeleteEventData<T = any> {
+    value: T;
+}
+export interface IChipState {
+    type: ChipType;
+    disabled: boolean;
+    dense: boolean;
+}

package/esm/chips/chip/chip-constants.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}chip`;
+const attributes = {
+    TYPE: 'type',
+    SELECTED: 'selected',
+    VALUE: 'value',
+    DISABLED: 'disabled',
+    INVALID: 'invalid',
+    DENSE: 'dense',
+    EMULATE_FOCUS: 'emulate-focus'
+};
+const classes = {
+    ACTION: 'forge-chip--action',
+    CHOICE: 'forge-chip--choice',
+    FILTER: 'forge-chip--filter',
+    INPUT: 'forge-chip--input',
+    FIELD: 'forge-chip--field',
+    INVALID: 'forge-chip--invalid',
+    SELECTED: 'forge-chip--selected',
+    DELETE_BUTTON: 'forge-chip__delete-button',
+    DELETE_BUTTON_TOUCH_TARGET: 'forge-chip__delete-button__touch-target',
+    DENSE: 'forge-chip--dense',
+    LEADING_HIDDEN: 'forge-chip__leading--hidden'
+};
+const selectors = {
+    BUTTON: 'button.forge-chip'
+};
+const events = {
+    DELETE: `${elementName}-delete`,
+    SELECT: `${elementName}-select`
+};
+const defaults = {
+    TYPE: 'action'
+};
+export const CHIP_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    selectors,
+    events,
+    defaults
+};