@tylertech/forge 2.0.0

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IChipAdapter } from './chip-adapter';
+import { ChipType } from './chip-constants';
+export interface IChipFoundation extends ICustomElementFoundation {
+    type: ChipType;
+    selected: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    value: string;
+    dense: boolean;
+    emulateFocus: boolean;
+    setFocus(): void;
+}
+export declare class ChipFoundation implements IChipFoundation {
+    private _adapter;
+    private _type;
+    private _selected;
+    private _disabled;
+    private _invalid;
+    private _value;
+    private _dense;
+    private _emulateFocus;
+    private _isInitialized;
+    private _rippleInstance;
+    private _clickListener;
+    private _keydownListener;
+    private _deleteKeydownListener;
+    private _buttonFocusListener;
+    private _buttonBlurListener;
+    constructor(_adapter: IChipAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _destroyRipple;
+    private _applyState;
+    private _onClick;
+    private _onKeydown;
+    private _onDeleteKeydown;
+    private _onButtonFocus;
+    private _onButtonBlur;
+    private _handleDeleteInteraction;
+    private _handleSelectInteraction;
+    private _emitSelectEvent;
+    private _emitDeleteEvent;
+    private _applyType;
+    private _applySelected;
+    private _applyDisabled;
+    private _applyDense;
+    private _applyEmulateFocus;
+    get type(): ChipType;
+    set type(value: ChipType);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(val: boolean);
+    get value(): any;
+    set value(value: any);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get emulateFocus(): boolean;
+    set emulateFocus(value: boolean);
+    setFocus(): void;
+}

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

@@ -0,0 +1,264 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { CHIP_CONSTANTS } from './chip-constants';
+export class ChipFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._type = CHIP_CONSTANTS.defaults.TYPE;
+        this._selected = false;
+        this._disabled = false;
+        this._invalid = false;
+        this._value = null;
+        this._dense = false;
+        this._emulateFocus = false;
+        this._isInitialized = false;
+        this._clickListener = evt => this._onClick(evt);
+        this._keydownListener = evt => this._onKeydown(evt);
+        this._deleteKeydownListener = evt => this._onDeleteKeydown(evt);
+        this._buttonFocusListener = evt => this._onButtonFocus(evt);
+        this._buttonBlurListener = evt => this._onButtonBlur(evt);
+    }
+    initialize() {
+        this._rippleInstance = this._adapter.initializeRipple();
+        this._adapter.addButtonListener('click', this._clickListener);
+        this._adapter.addButtonListener('focus', this._buttonFocusListener);
+        this._adapter.addButtonListener('blur', this._buttonBlurListener);
+        this._applyState();
+        this._isInitialized = true;
+    }
+    disconnect() {
+        this._destroyRipple();
+        this._adapter.removeButtonListener('keydown', this._keydownListener);
+        this._adapter.removeButtonListener('click', this._clickListener);
+        this._adapter.removeButtonListener('focus', this._buttonFocusListener);
+        this._adapter.removeButtonListener('blur', this._buttonBlurListener);
+        this._isInitialized = false;
+    }
+    _destroyRipple() {
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+            this._rippleInstance = undefined;
+        }
+    }
+    _applyState() {
+        // Attempt to inherit state from the parent chip-set component
+        // Note: this should only inherit properties that need to be the same across the chips within a set
+        const chipSetState = this._adapter.getChipSetState();
+        if (chipSetState) {
+            this._type = chipSetState.type;
+            this._disabled = chipSetState.disabled;
+            this._dense = chipSetState.dense;
+        }
+        // Ensure that only non-action chips can be selected
+        if (this._type === 'action') {
+            this._selected = false;
+        }
+        this._applyDisabled();
+        this._applyType();
+        this._applySelected();
+        this._applyDense();
+        this._applyEmulateFocus();
+    }
+    _onClick(evt) {
+        const target = evt.target;
+        const isDeleteButton = target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON) || target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON_TOUCH_TARGET);
+        if (isDeleteButton) {
+            this._handleDeleteInteraction(evt);
+        }
+        else {
+            this._handleSelectInteraction();
+        }
+    }
+    _onKeydown(evt) {
+        if (this._type === 'input') {
+            const isDeleteKey = evt.key === 'Delete' || evt.key === 'Backspace';
+            if (isDeleteKey) {
+                this._emitDeleteEvent();
+            }
+        }
+    }
+    _onDeleteKeydown(evt) {
+        if (evt.key === 'Enter') {
+            this._handleDeleteInteraction(evt);
+        }
+    }
+    _onButtonFocus(evt) {
+        this._adapter.setHostAttribute('focused');
+    }
+    _onButtonBlur(evt) {
+        this._adapter.removeHostAttribute('focused');
+    }
+    _handleDeleteInteraction(evt) {
+        // The delete event can only be fired when the `input` or `field` type is used
+        const target = evt.target;
+        const isDeleteButton = target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON) || target.classList.contains(CHIP_CONSTANTS.classes.DELETE_BUTTON_TOUCH_TARGET);
+        if (isDeleteButton) {
+            evt.stopPropagation();
+            this._emitDeleteEvent();
+        }
+    }
+    _handleSelectInteraction() {
+        const wasDefaultPrevented = this._emitSelectEvent();
+        const isSelectableType = ['filter', 'choice', 'input'].includes(this._type);
+        // We only toggle the selected state for certain types (and if default wasn't prevented on the event)
+        if (!wasDefaultPrevented && isSelectableType) {
+            this._selected = !this._selected;
+            this._applySelected();
+        }
+    }
+    _emitSelectEvent() {
+        const selectEventData = {
+            selected: !this._selected,
+            value: this._value
+        };
+        return !this._adapter.emitHostEvent(CHIP_CONSTANTS.events.SELECT, selectEventData, true, true);
+    }
+    _emitDeleteEvent() {
+        const deleteEventData = { value: this._value };
+        this._adapter.emitHostEvent(CHIP_CONSTANTS.events.DELETE, deleteEventData, true, true);
+    }
+    _applyType() {
+        this._adapter.clearTypeClass();
+        this._adapter.removeButtonListener('keydown', this._keydownListener);
+        switch (this._type) {
+            case 'action':
+                this._adapter.addRootClass(CHIP_CONSTANTS.classes.ACTION);
+                break;
+            case 'choice':
+                this._adapter.addRootClass(CHIP_CONSTANTS.classes.CHOICE);
+                break;
+            case 'filter':
+                this._adapter.addRootClass(CHIP_CONSTANTS.classes.FILTER);
+                break;
+            case 'input':
+                this._adapter.addRootClass(CHIP_CONSTANTS.classes.INPUT);
+                this._adapter.addButtonListener('keydown', this._keydownListener);
+                break;
+            case 'field':
+                this._adapter.addRootClass(CHIP_CONSTANTS.classes.FIELD);
+                this._adapter.addButtonListener('keydown', this._keydownListener);
+                break;
+        }
+        this._adapter.setCheckmarkVisibility(this._type === 'filter');
+        const showDeleteButton = this._type === 'input' || this._type === 'field';
+        this._adapter.setDeleteButtonVisibility(showDeleteButton, this._deleteKeydownListener);
+        this._adapter.setLeadingSlotVisibility(!this._selected);
+        this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.TYPE, this._type);
+    }
+    _applySelected() {
+        this._adapter.setSelected(this._selected);
+        // If using the filter type, we need to hide the leading slot to ensure that
+        // the checkmark shows in place of any leading elements
+        if (this._type === 'filter') {
+            this._adapter.setLeadingSlotVisibility(!this._selected);
+        }
+        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.SELECTED, this._selected);
+    }
+    _applyDisabled() {
+        this._adapter.setDisabled(this._disabled);
+        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DISABLED, this._disabled);
+    }
+    _applyDense() {
+        this._adapter.setDense(this._dense);
+        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.DISABLED, this._disabled);
+    }
+    _applyEmulateFocus() {
+        this._adapter.toggleHostAttribute(CHIP_CONSTANTS.attributes.EMULATE_FOCUS, this._emulateFocus);
+        this._adapter.setEmulatedFocus(this._emulateFocus);
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        if (this._type !== value) {
+            this._type = value;
+            if (this._isInitialized) {
+                const isValidType = ['action', 'choice', 'filter', 'input', 'field'].includes(this._type);
+                if (!isValidType) {
+                    this._type = 'action';
+                }
+                if (this._type === 'action') {
+                    this._selected = false;
+                    this._applySelected();
+                }
+                this._applyType();
+            }
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            if (this._isInitialized) {
+                if (this._type === 'action') {
+                    this._selected = false;
+                }
+                this._applySelected();
+            }
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            if (this._isInitialized) {
+                this._applyDisabled();
+            }
+        }
+    }
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(val) {
+        if (this._invalid === val) {
+            return;
+        }
+        this._invalid = val;
+        if (val) {
+            this._adapter.setHostAttribute(CHIP_CONSTANTS.attributes.INVALID, '');
+            this._adapter.addRootClass(CHIP_CONSTANTS.classes.INVALID);
+        }
+        else {
+            this._adapter.removeHostAttribute(CHIP_CONSTANTS.attributes.INVALID);
+            this._adapter.removeRootClass(CHIP_CONSTANTS.classes.INVALID);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            if (this._isInitialized) {
+                this._applyDense();
+            }
+        }
+    }
+    get emulateFocus() {
+        return this._emulateFocus;
+    }
+    set emulateFocus(value) {
+        if (this._emulateFocus !== value) {
+            this._emulateFocus = value;
+            if (this._isInitialized) {
+                this._applyEmulateFocus();
+            }
+        }
+    }
+    setFocus() {
+        this._adapter.setFocus();
+    }
+}

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

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { ChipType, IChipDeleteEventData, IChipSelectEventData } from './chip-constants';
+export interface IChipComponent extends IBaseComponent {
+    type: ChipType;
+    selected: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    value: string;
+    dense: boolean;
+    emulateFocus: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-chip': IChipComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-chip-delete': CustomEvent<IChipDeleteEventData>;
+        'forge-chip-select': CustomEvent<IChipSelectEventData>;
+    }
+}
+/**
+ * The custom element class behind the `<forge-chip>` component.
+ */
+export declare class ChipComponent extends BaseComponent implements IChipComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Gets/sets the chip type. */
+    type: ChipType;
+    /** Gets/sets the selected state of the chip. */
+    selected: boolean;
+    /** Gets/sets the disabled state of the chip. */
+    disabled: boolean;
+    /** Gets/sets the invalid state of the chip. */
+    invalid: boolean;
+    /** Gets/sets the chip value. */
+    value: string;
+    /** Gets/sets the dense state of the chip. */
+    dense: boolean;
+    emulateFocus: boolean;
+    focus(): void;
+}

package/esm/chips/chip/chip.js

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconCancel } from '@tylertech/tyler-icons/standard';
+import { BaseComponent } from '../../core/base/base-component';
+import { IconComponent, IconRegistry } from '../../icon';
+import { ChipAdapter } from './chip-adapter';
+import { CHIP_CONSTANTS } from './chip-constants';
+import { ChipFoundation } from './chip-foundation';
+const template = '<template><button class=\"forge-chip\" part=\"button\"><slot name=\"leading\" class=\"forge-chip__leading\"></slot><div class=\"forge-chip__content\" part=\"content\"><slot></slot></div><slot name=\"trailing\"></slot></button></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-chip{--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;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size, .875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, .0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:64px;border:none;outline:0;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:0 0;border-radius:4px;border-radius:var(--mdc-shape-small,4px);height:36px;text-transform:none;box-sizing:border-box;overflow:hidden;border-style:solid;-webkit-transition:border 280ms cubic-bezier(.4, 0, .2, 1);transition:border 280ms cubic-bezier(.4, 0, .2, 1);font-family:Roboto,sans-serif;font-family:var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));font-size:.875rem;font-size:var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, .875rem));letter-spacing:.0892857143em;letter-spacing:var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, .0892857143em));font-weight:500;font-weight:var(--mdc-outlined-button-label-text-weight,var(--mdc-typography-button-font-weight,500));text-transform:uppercase;text-transform:var(--mdc-outlined-button-label-text-transform,var(--mdc-typography-button-text-transform,uppercase));height:36px;height:var(--mdc-outlined-button-container-height,36px);border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px));padding:0 15px 0 15px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px);padding:0 15px 0 15px;border-width:1px;border-radius:16px;width:auto;width:var(--forge-chip-width,auto);height:36px;height:var(--forge-chip-height,36px);box-sizing:border-box;-webkit-transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1);transition:background-color 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-chip::after,.forge-chip::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-chip::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)}.forge-chip::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-chip.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-chip.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-chip.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-chip.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-chip.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-chip::after,.forge-chip::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-chip.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-chip::after,.forge-chip::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-chip.mdc-ripple-surface--hover::before,.forge-chip:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused::before,.forge-chip:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.forge-chip::-moz-focus-inner{padding:0;border:0}.forge-chip:active{outline:0}.forge-chip:hover{cursor:pointer}.forge-chip:disabled{cursor:default;pointer-events:none}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.forge-chip:not(:disabled){background-color:transparent}.forge-chip:not(:disabled){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-chip .mdc-button__ripple{border-style:solid;border-color:transparent}.forge-chip:not(:disabled){color:#3f51b5;color:var(--mdc-outlined-button-label-text-color,var(--mdc-theme-primary,#3f51b5))}.forge-chip:disabled{color:rgba(0,0,0,.38);color:var(--mdc-outlined-button-disabled-label-text-color,rgba(0,0,0,.38))}.forge-chip .mdc-button__icon{font-size:1.125rem;font-size:var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);width:1.125rem;width:var(--mdc-outlined-button-with-icon-icon-size,1.125rem);height:1.125rem;height:var(--mdc-outlined-button-with-icon-icon-size,1.125rem)}.forge-chip .mdc-button__ripple::after,.forge-chip .mdc-button__ripple::before{background-color:#3f51b5;background-color:var(--mdc-outlined-button-hover-state-layer-color,var(--mdc-theme-primary,#3f51b5))}.forge-chip.mdc-ripple-surface--hover .mdc-button__ripple::before,.forge-chip:hover .mdc-button__ripple::before{opacity:.04;opacity:var(--mdc-outlined-button-hover-state-layer-opacity, .04)}.forge-chip.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,.forge-chip:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-focus-state-layer-opacity, .12)}.forge-chip:not(.mdc-ripple-upgraded) .mdc-button__ripple::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, .12)}.forge-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12)}.forge-chip .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-outlined-button-container-shape,var(--mdc-shape-small,4px))}.forge-chip:not(:disabled){border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-outline-color,rgba(0,0,0,.12))}.forge-chip:disabled{border-color:rgba(0,0,0,.12);border-color:var(--mdc-outlined-button-disabled-outline-color,rgba(0,0,0,.12))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px;border-width:var(--mdc-outlined-button-outline-width,1px)}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);left:calc(-1 * var(--mdc-outlined-button-outline-width,1px));width:calc(100% + 2 * 1px);width:calc(100% + 2 * var(--mdc-outlined-button-outline-width,1px))}.forge-chip.mdc-button--icon-trailing{padding:0 11px 0 15px}.forge-chip.mdc-button--icon-leading{padding:0 15px 0 11px}.forge-chip .mdc-button__ripple{top:-1px;left:-1px;bottom:-1px;right:-1px;border-width:1px}.forge-chip .mdc-button__touch{left:calc(-1 * 1px);width:calc(100% + 2 * 1px)}.forge-chip:not(:disabled){border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-chip .mdc-evolution-chip__ripple{border-radius:16px}.forge-chip .mdc-evolution-chip__action--primary:before{border-radius:16px}.forge-chip .mdc-evolution-chip__icon--primary{border-radius:16px}.forge-chip:disabled{border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-chip:disabled .forge-chip__delete-button{opacity:.54}.forge-chip__leading--hidden{display:none}.forge-chip__content{-webkit-box-flex:1;flex-grow:1}.forge-chip ::slotted([slot=leading]){margin-left:-6px;margin-right:4px}.forge-chip ::slotted(forge-avatar[slot]){--forge-avatar-size:24px}.forge-chip ::slotted([slot=trailing]){margin-left:4px;margin-right:-8px}.forge-chip__checkmark{height:24px}.forge-chip__checkmark-svg{width:0;height:24px;-webkit-transition:width 150ms cubic-bezier(.4, 0, .2, 1);transition:width 150ms cubic-bezier(.4, 0, .2, 1)}.forge-chip__checkmark-path{stroke:#ffffff;stroke:var(--mdc-theme-on-primary,#ffffff);-webkit-transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 0 cubic-bezier(.4, 0, .6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:4px;margin-right:-8px;-webkit-transition:color 150ms linear;transition:color 150ms linear;outline:0;line-height:inherit;position:relative;border-radius:50%}.forge-chip__delete-button:focus,.forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip__delete-button:active{opacity:.75}.forge-chip__delete-button__touch-target{position:absolute;top:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}.forge-chip--choice.forge-chip--selected:not(:disabled),.forge-chip--filter.forge-chip--selected:not(:disabled),.forge-chip--input.forge-chip--selected:not(:disabled){background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:rgba(255,255,255,.87);color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87))}.forge-chip--choice.forge-chip--selected:not(:disabled)::after,.forge-chip--choice.forge-chip--selected:not(:disabled)::before,.forge-chip--filter.forge-chip--selected:not(:disabled)::after,.forge-chip--filter.forge-chip--selected:not(:disabled)::before,.forge-chip--input.forge-chip--selected:not(:disabled)::after,.forge-chip--input.forge-chip--selected:not(:disabled)::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected:not(:disabled).mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected:not(:disabled):hover::before,.forge-chip--filter.forge-chip--selected:not(:disabled).mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected:not(:disabled):hover::before,.forge-chip--input.forge-chip--selected:not(:disabled).mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected:not(:disabled):hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected:not(:disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected:not(:disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected:not(:disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected:not(:disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected:not(:disabled).mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected:not(:disabled).mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected:not(:disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected:disabled,.forge-chip--filter.forge-chip--selected:disabled,.forge-chip--input.forge-chip--selected:disabled{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);color:rgba(255,255,255,.87);color:var(--mdc-theme-text-primary-on-dark,rgba(255,255,255,.87));opacity:.37}.forge-chip--choice.forge-chip--selected:disabled::after,.forge-chip--choice.forge-chip--selected:disabled::before,.forge-chip--filter.forge-chip--selected:disabled::after,.forge-chip--filter.forge-chip--selected:disabled::before,.forge-chip--input.forge-chip--selected:disabled::after,.forge-chip--input.forge-chip--selected:disabled::before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.forge-chip--choice.forge-chip--selected:disabled.mdc-ripple-surface--hover::before,.forge-chip--choice.forge-chip--selected:disabled:hover::before,.forge-chip--filter.forge-chip--selected:disabled.mdc-ripple-surface--hover::before,.forge-chip--filter.forge-chip--selected:disabled:hover::before,.forge-chip--input.forge-chip--selected:disabled.mdc-ripple-surface--hover::before,.forge-chip--input.forge-chip--selected:disabled:hover::before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity, .08)}.forge-chip--choice.forge-chip--selected:disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--choice.forge-chip--selected:disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--filter.forge-chip--selected:disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--filter.forge-chip--selected:disabled:not(.mdc-ripple-upgraded):focus::before,.forge-chip--input.forge-chip--selected:disabled.mdc-ripple-upgraded--background-focused::before,.forge-chip--input.forge-chip--selected:disabled:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-chip--choice.forge-chip--selected:disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--filter.forge-chip--selected:disabled:not(.mdc-ripple-upgraded)::after,.forge-chip--input.forge-chip--selected:disabled:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--choice.forge-chip--selected:disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--filter.forge-chip--selected:disabled:not(.mdc-ripple-upgraded):active::after,.forge-chip--input.forge-chip--selected:disabled:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-chip--choice.forge-chip--selected:disabled.mdc-ripple-upgraded,.forge-chip--filter.forge-chip--selected:disabled.mdc-ripple-upgraded,.forge-chip--input.forge-chip--selected:disabled.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-chip--choice.forge-chip--selected ::slotted([slot=leading]),.forge-chip--filter.forge-chip--selected ::slotted([slot=leading]),.forge-chip--input.forge-chip--selected ::slotted([slot=leading]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--filter.forge-chip--selected ::slotted([slot=trailing]),.forge-chip--input.forge-chip--selected ::slotted([slot=trailing]){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected .forge-chip__delete-button,.forge-chip--filter.forge-chip--selected .forge-chip__delete-button,.forge-chip--input.forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark{margin-left:-6px;margin-right:4px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-svg{width:24px}.forge-chip--choice.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--filter.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path,.forge-chip--input.forge-chip--selected.forge-chip--filter .forge-chip__checkmark-path{-webkit-transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);transition:stroke-dashoffset 150ms 50ms cubic-bezier(.4, 0, .6, 1);stroke-dashoffset:0}.forge-chip--field .forge-chip__delete-button{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-chip--field .forge-chip__delete-button:focus,.forge-chip--field .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field.forge-chip--invalid:not(:disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--field.forge-chip--invalid:not(:disabled) .forge-chip__delete-button:focus,.forge-chip--field.forge-chip--invalid:not(:disabled) .forge-chip__delete-button:hover{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-chip--field:disabled .forge-chip__delete-button{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-chip--dense{height:28px;height:var(--forge-chip-height,28px)}.forge-chip--dense.forge-chip--field{height:20px;height:var(--forge-chip-height,20px);padding:0;margin:0;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-chip--dense.forge-chip--field ::slotted([slot=leading]){margin:0 0 0 2px;font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__content{font-size:12px;padding:0 8px}.forge-chip--dense.forge-chip--field ::slotted([slot=trailing]){font-size:18px!important}.forge-chip--dense.forge-chip--field .forge-chip__delete-button{margin:0 2px 0 0;font-size:18px}.forge-chip--invalid:not(:disabled){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(:disabled)::after,.forge-chip--invalid:not(:disabled)::before{background-color:#b00020;background-color:var(--mdc-ripple-color,var(--mdc-theme-error,#b00020))}.forge-chip--invalid:not(:disabled).mdc-ripple-surface--hover::before,.forge-chip--invalid:not(:disabled):hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-chip--invalid:not(:disabled).mdc-ripple-upgraded--background-focused::before,.forge-chip--invalid:not(:disabled):not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-chip--invalid:not(:disabled):not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-chip--invalid:not(:disabled):not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-chip--invalid:not(:disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-chip--invalid:not(:disabled):not(:disabled){border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(:disabled) .forge-chip__delete-button{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(:disabled).forge-chip--selected{background-color:#b00020;background-color:var(--mdc-theme-error,#b00020)}.forge-chip--invalid:not(:disabled).forge-chip--selected .forge-chip__delete-button{color:#fff;color:var(--mdc-theme-on-primary,#fff)}:host{display:inline-block}:host([hidden]){display:none}:host([theme=error]){--mdc-theme-primary:var(--mdc-theme-error)}';
+/**
+ * The custom element class behind the `<forge-chip>` component.
+ */
+let ChipComponent = class ChipComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define(tylIconCancel);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ChipFoundation(new ChipAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            CHIP_CONSTANTS.attributes.TYPE,
+            CHIP_CONSTANTS.attributes.SELECTED,
+            CHIP_CONSTANTS.attributes.DISABLED,
+            CHIP_CONSTANTS.attributes.VALUE,
+            CHIP_CONSTANTS.attributes.DENSE,
+            CHIP_CONSTANTS.attributes.INVALID,
+            CHIP_CONSTANTS.attributes.EMULATE_FOCUS
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case CHIP_CONSTANTS.attributes.TYPE:
+                this.type = newValue;
+                break;
+            case CHIP_CONSTANTS.attributes.SELECTED:
+                this.selected = coerceBoolean(newValue);
+                break;
+            case CHIP_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case CHIP_CONSTANTS.attributes.INVALID:
+                this.invalid = coerceBoolean(newValue);
+                break;
+            case CHIP_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case CHIP_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+            case CHIP_CONSTANTS.attributes.EMULATE_FOCUS:
+                this.emulateFocus = coerceBoolean(newValue);
+        }
+    }
+    focus() {
+        this._foundation.setFocus();
+    }
+};
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "type", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "invalid", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], ChipComponent.prototype, "emulateFocus", void 0);
+ChipComponent = __decorate([
+    CustomElement({
+        name: CHIP_CONSTANTS.elementName,
+        dependencies: [IconComponent]
+    })
+], ChipComponent);
+export { ChipComponent };

package/esm/chips/chip/index.d.ts

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

package/esm/chips/chip/index.js

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

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { ChipType } from '../chip/chip-constants';
+import { IChipSetComponent } from './chip-set';
+export interface IChipSetAdapter extends IBaseAdapter {
+    setVertical(value: boolean): void;
+    setType(value: ChipType): void;
+    setDense(value: boolean): void;
+    setDisabled(value: boolean): void;
+}
+export declare class ChipSetAdapter extends BaseAdapter<IChipSetComponent> implements IChipSetAdapter {
+    private _rootElement;
+    constructor(component: IChipSetComponent);
+    setVertical(value: boolean): void;
+    setType(value: ChipType): void;
+    setDense(value: boolean): void;
+    setDisabled(value: boolean): void;
+    private _getChips;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { CHIP_CONSTANTS } from '../chip/chip-constants';
+import { CHIP_SET_CONSTANTS } from './chip-set-constants';
+export class ChipSetAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(this._component, CHIP_SET_CONSTANTS.selectors.ROOT);
+    }
+    setVertical(value) {
+        toggleClass(this._rootElement, value, CHIP_SET_CONSTANTS.classes.VERTICAL);
+    }
+    setType(value) {
+        const chips = this._getChips();
+        chips.forEach(c => c.type = value);
+    }
+    setDense(value) {
+        const chips = this._getChips();
+        chips.forEach(c => c.dense = value);
+    }
+    setDisabled(value) {
+        const chips = this._getChips();
+        chips.forEach(c => c.disabled = value);
+    }
+    _getChips() {
+        return Array.from(this._component.querySelectorAll(CHIP_CONSTANTS.elementName));
+    }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const CHIP_SET_CONSTANTS: {
+    elementName: "forge-chip-set";
+    attributes: {
+        VERTICAL: string;
+        TYPE: string;
+        DENSE: string;
+        DISABLED: string;
+    };
+    classes: {
+        ROOT: string;
+        VERTICAL: string;
+    };
+    selectors: {
+        ROOT: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}chip-set`;
+const attributes = {
+    VERTICAL: 'vertical',
+    TYPE: 'type',
+    DENSE: 'dense',
+    DISABLED: 'disabled'
+};
+const classes = {
+    ROOT: 'forge-chip-set',
+    VERTICAL: 'forge-chip-set--vertical'
+};
+const selectors = {
+    ROOT: `.${classes.ROOT}`
+};
+export const CHIP_SET_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    selectors
+};