@tylertech/forge 2.0.0

package/esm/list/list-item/list-item-foundation.js

@@ -0,0 +1,305 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { matchesSelectors } from '@tylertech/forge-core';
+import { LIST_ITEM_CONSTANTS } from './list-item-constants';
+/**
+ * The foundation class behind the `<forge-list-item>` component.
+ */
+export class ListItemFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._ripple = true;
+        this._static = false;
+        this._twoLine = false;
+        this._threeLine = false;
+        this._active = false;
+        this._selected = false;
+        this._disabled = false;
+        this._dense = false;
+        this._propagateClick = true;
+        this._indented = false;
+        this._wrap = false;
+        this._clickListener = (evt) => this._onClick(evt);
+        this._mouseDownListener = (evt) => this._onMouseDown(evt);
+        this._keydownListener = (evt) => this._onKeydown(evt);
+    }
+    initialize() {
+        this._adapter.initializeAccessibility();
+        this._setRipple();
+        this._adapter.setStatic(this._static);
+        this._adapter.setDense(this._dense);
+        this._adapter.setDisabled(this._disabled);
+        this._adapter.setIndented(this._indented);
+        this._adapter.setWrap(this._wrap);
+        if (!this._static) {
+            this._adapter.addListener('click', this._clickListener);
+            this._adapter.addListener('mousedown', this._mouseDownListener, { passive: false, capture: true });
+            this._adapter.addListener('keydown', this._keydownListener);
+        }
+        if (this._threeLine) {
+            this._adapter.setThreeLine(this._threeLine);
+        }
+        else if (this.twoLine) {
+            this._adapter.setTwoLine(this._twoLine);
+        }
+        this._adapter.trySelect(this._value);
+    }
+    disconnect() {
+        if (this._rippleInstance) {
+            this._rippleInstance.destroy();
+            this._rippleInstance = undefined;
+        }
+    }
+    _onMouseDown(evt) {
+        if (this._adapter.hasFocus() || !this._propagateClick) {
+            evt.preventDefault();
+        }
+    }
+    _onKeydown(evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+            }
+            this._select(evt.target);
+        }
+    }
+    /**
+     * Handles clicking a list item.
+     * @param evt
+     */
+    _onClick(evt) {
+        this._select(evt.target);
+    }
+    _select(targetElement) {
+        const ignoreElement = targetElement === null || targetElement === void 0 ? void 0 : targetElement.hasAttribute(LIST_ITEM_CONSTANTS.attributes.IGNORE);
+        if (this._static || this._disabled || ignoreElement) {
+            return;
+        }
+        if (!this._adapter.hasFocus() && this._propagateClick) {
+            this.setFocus();
+        }
+        if (this._href) {
+            if (this._target) {
+                window.open(this._href, this._target);
+            }
+            else {
+                document.location.href = this._href;
+            }
+            return;
+        }
+        // If the target was not a checkbox or radio button, attempt to find one and toggle its checked state
+        if (!matchesSelectors(targetElement, LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR)) {
+            this._adapter.tryToggleCheckboxRadio();
+        }
+        const data = {
+            value: this._value,
+            listItem: this._adapter.getListItem()
+        };
+        this._adapter.emitHostEvent(LIST_ITEM_CONSTANTS.events.SELECT, data);
+    }
+    /** Gets/sets whether the list item has a ripple or not. */
+    get ripple() {
+        return this._ripple;
+    }
+    set ripple(value) {
+        if (this._ripple !== value) {
+            // We don't attach ripples to static items
+            if (value && this._static) {
+                return;
+            }
+            this._ripple = value;
+            this._setRipple();
+            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE, String(this._ripple));
+        }
+    }
+    /** Gets/sets whether the static state of this list item. */
+    get static() {
+        return this._static;
+    }
+    set static(value) {
+        if (this._static !== value) {
+            this._static = value;
+            this._adapter.setStatic(this._static);
+            // Ensure we either add or remove the ripple
+            this._setRipple();
+            // Toggle the click listener
+            if (this._static) {
+                this._adapter.removeListener('click', this._clickListener);
+            }
+            else {
+                this._adapter.addListener('click', this._clickListener);
+            }
+            if (this._static) {
+                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC);
+            }
+            else {
+                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC);
+            }
+        }
+    }
+    /** Gets/sets whether the list item displays two lines of text. */
+    get twoLine() {
+        return this._twoLine;
+    }
+    set twoLine(value) {
+        if (this._twoLine !== value) {
+            this._twoLine = value;
+            this._adapter.setTwoLine(this._twoLine);
+            if (this._twoLine) {
+                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE);
+            }
+            else {
+                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE);
+            }
+        }
+    }
+    /** Gets/sets whether the list item displays two lines of text. */
+    get threeLine() {
+        return this._threeLine;
+    }
+    set threeLine(value) {
+        if (this._threeLine !== value) {
+            this._threeLine = value;
+            if (this._threeLine) {
+                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE);
+            }
+            else {
+                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE);
+            }
+            if (this._threeLine) {
+                this._twoLine = false;
+            }
+            this._adapter.setTwoLine(this._twoLine);
+            this._adapter.setThreeLine(this._threeLine);
+        }
+    }
+    /** Gets/sets whether the list item is active or not. */
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        if (this._active !== value) {
+            this._active = value;
+            this._adapter.setActive(this._active);
+            if (this._active) {
+                this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE);
+            }
+            else {
+                this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE);
+            }
+        }
+    }
+    /** Gets/sets whether the list item is selected or not. */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            this._adapter.setSelected(this._selected);
+            this._adapter.tryToggleCheckboxRadio(this._selected);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED, this._selected);
+        }
+    }
+    /** Gets/sets the unique value for this list item. */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this._adapter.trySelect(this._value);
+    }
+    /** Gets/sets the href link that this list item will send the browser to when clicked. */
+    get href() {
+        return this._href;
+    }
+    set href(value) {
+        if (this._href !== value) {
+            this._href = value;
+            if (this._href) {
+                this._adapter.setRole(LIST_ITEM_CONSTANTS.roles.LINK);
+            }
+            else {
+                this._adapter.setRole(LIST_ITEM_CONSTANTS.roles.LIST_ITEM);
+            }
+            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, this._href);
+        }
+    }
+    /** Gets/sets the href link target. */
+    get target() {
+        return this._target;
+    }
+    set target(value) {
+        this._target = value;
+    }
+    /** Gets/sets the disabled state. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._adapter.setDisabled(this._disabled);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    /** Gets/sets the dense state. */
+    get dense() {
+        return this._dense;
+    }
+    set dense(value) {
+        if (this._dense !== value) {
+            this._dense = value;
+            this._adapter.setDense(this._dense);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DENSE, this._dense);
+        }
+    }
+    /** Gets/sets the dense state. */
+    get propagateClick() {
+        return this._propagateClick;
+    }
+    set propagateClick(value) {
+        if (this._propagateClick !== value) {
+            this._propagateClick = value;
+            this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK, '' + !!this._propagateClick);
+        }
+    }
+    get indented() {
+        return this._indented;
+    }
+    set indented(value) {
+        if (this._indented !== value) {
+            this._indented = value;
+            this._adapter.setIndented(this._indented);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.INDENTED, this._indented);
+        }
+    }
+    get wrap() {
+        return this._wrap;
+    }
+    set wrap(value) {
+        if (this._wrap !== value) {
+            this._wrap = value;
+            this._adapter.setWrap(this._wrap);
+            this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP, this._wrap);
+        }
+    }
+    _setRipple() {
+        if (this._ripple && !this._static && !this._rippleInstance) {
+            this._rippleInstance = this._adapter.createRipple();
+        }
+        else if ((!this._ripple || this._static) && this._rippleInstance) {
+            this._rippleInstance.destroy();
+            this._rippleInstance = undefined;
+        }
+    }
+    /**
+     * Sets focus to this list item.
+     */
+    setFocus() {
+        this._adapter.setFocus();
+    }
+}

package/esm/list/list-item/list-item.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IListItemSelectEventData } from './list-item-constants';
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+export interface IListItemComponent extends IBaseComponent {
+    static: boolean;
+    twoLine: boolean;
+    threeLine: boolean;
+    active: boolean;
+    selected: boolean;
+    value: any;
+    href: string;
+    target: string;
+    ripple: boolean;
+    disabled: boolean;
+    dense: boolean;
+    propagateClick: boolean;
+    indented: boolean;
+    wrap: boolean;
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-list-item': IListItemComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-list-item-select': CustomEvent<IListItemSelectEventData>;
+    }
+}
+/** The custom element class behind the `<forge-list-item>` element. */
+export declare class ListItemComponent extends BaseComponent implements IListItemComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    initializedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private _inheritParentListProps;
+    /** Gets/sets whether the static state of this list item. */
+    static: boolean;
+    /** Gets/sets whether the list item displays two lines of text. */
+    twoLine: boolean;
+    /** Gets/sets whether the list item displays three lines of text. */
+    threeLine: boolean;
+    /** Gets/sets whether the list item is active or not. */
+    active: boolean;
+    /** Gets/sets whether the list item is selected or not. */
+    selected: boolean;
+    /** Gets/sets list item value. */
+    value: any;
+    /** Gets/sets the href link that this list item will send the browser to when clicked. */
+    href: string;
+    /** Gets/sets the href link target. Only pertains when `href` is also used. */
+    target: string;
+    /** Gets/sets whether the list item has a ripple or not. */
+    ripple: boolean;
+    /** Gets/sets whether the list item is disabled or not. */
+    disabled: boolean;
+    /** Gets/sets whether the list item is using dense styles or not. */
+    dense: boolean;
+    /** Gets/sets whether the list item allows mousedown events through to the underlying list item element. Default is true. */
+    propagateClick: boolean;
+    /** Gets/sets whether the list item is indented or not. Default is false. */
+    indented: boolean;
+    /** Gets/sets whether the list item content is wrapped or not. Default is true. */
+    wrap: boolean;
+    /** Sets focus to this list item. */
+    focus(): void;
+}

package/esm/list/list-item/list-item.js

@@ -0,0 +1,168 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, requireParent, elementParents, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { ListItemAdapter } from './list-item-adapter';
+import { ListItemFoundation } from './list-item-foundation';
+import { LIST_ITEM_CONSTANTS } from './list-item-constants';
+import { LIST_CONSTANTS } from '../list/list-constants';
+import { BaseComponent } from '../../core/base/base-component';
+const defaultTemplate = '<template><div class=\"forge-list-item\" tabindex=\"0\" part=\"root\"><slot name=\"leading\"></slot><slot name=\"avatar\"></slot><div class=\"forge-list-item__text\" part=\"text-container\"><slot></slot><slot name=\"title\"></slot><slot name=\"subtitle\"></slot><slot name=\"tertiary-title\"></slot><slot></slot></div><slot name=\"trailing\"></slot></div></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-list-item{min-height:auto;min-height:var(--forge-list-item-min-height,auto);max-height:auto;max-height:var(--forge-list-item-max-height,auto);height:48px;height:var(--forge-list-item-height,48px);padding:0 16px;padding:var(--forge-list-item-padding,0 16px);margin-left:0;margin-left:var(--forge-list-item-indent,0);-webkit-box-align:center;align-items:center;-webkit-box-align:var(--forge-list-item-align-items,center);align-items:var(--forge-list-item-align-items,center);position:relative;display:-webkit-box;display:flex;-webkit-box-pack:start;justify-content:flex-start;overflow:hidden}.forge-list-item:focus{outline:0}.forge-list-item ::slotted([slot=leading]),.forge-list-item ::slotted([slot=trailing]){font-size:1.5rem}.forge-list-item ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:0;margin-left:var(--forge-list-item-leading-margin-left,0);margin-right:32px;margin-right:var(--forge-list-item-leading-margin-right,32px);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor}.forge-list-item ::slotted([slot=trailing]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-list-item ::slotted([slot=avatar]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:0;margin-left:var(--forge-list-item-leading-margin-left,0);margin-right:32px;margin-right:var(--forge-list-item-leading-margin-right,32px);display:-webkit-inline-box;display:inline-flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;fill:currentColor;margin-left:0;margin-right:16px;min-width:40px;min-height:40px;border-radius:50%;display:inline-flex;background-color:rgba(0,0,0,.54);background-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));color:#fff;color:var(--mdc-theme-on-primary,#fff)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item{--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}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::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-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.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-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.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-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.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-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-surface--hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded--background-focused::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated.mdc-ripple-surface--hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity, .16)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated.mdc-ripple-upgraded--background-focused::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected.mdc-ripple-surface--hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected.mdc-ripple-upgraded--background-focused::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before{opacity:.28}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before{opacity:.12}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation):hover::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation):hover::before{opacity:.16}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::after,.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:focus:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation)::before{background-color:#000;background-color:var(--mdc-theme-on-surface,#000)}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:focus.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation)::before{opacity:.24}.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item--active:focus.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation):hover::before{opacity:.28}.forge-list-item--wrap .forge-list-item__text{text-overflow:clip;white-space:normal}.forge-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}.forge-list-item ::slotted([slot=title]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.forge-list-item ::slotted([slot=subtitle]),.forge-list-item ::slotted([slot=tertiary-title]){-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);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));display:block}.forge-list-item ::slotted([slot=subtitle])::before,.forge-list-item ::slotted([slot=tertiary-title])::before{display:inline-block;width:0;height:20;content:\"\";vertical-align:0}.forge-list-item--two-line{height:72px;height:var(--forge-list-item-height,72px)}.forge-list-item--three-line{height:88px;height:var(--forge-list-item-height,88px)}.forge-list-item--dense{height:32px;height:var(--forge-list-item-height,32px)}.forge-list-item--dense ::slotted([slot=leading]),.forge-list-item--dense ::slotted([slot=trailing]){font-size:1.25rem}.forge-list-item--dense ::slotted([slot=leading]){margin-right:12px;margin-right:var(--forge-list-item-leading-margin-right,12px)}.forge-list-item--dense ::slotted(.forge-list-item__title){-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)}.forge-list-item--indented{margin-left:56px;margin-left:var(--forge-list-item-indent,56px)}.forge-list-item--active.forge-list-item--activated:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before,.forge-list-item--active.forge-list-item--selected:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item::before{opacity:.2}.forge-list-item--active.forge-list-item--activated:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:hover::before,.forge-list-item--active.forge-list-item--selected:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item:hover::before{opacity:.24}.forge-list-item--activated,.forge-list-item--selected{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-list-item--activated .forge-list-item__text .forge-list-item__subtitle,.forge-list-item--activated .forge-list-item__text ::slotted(.forge-list-item__subtitle),.forge-list-item--selected .forge-list-item__text .forge-list-item__subtitle,.forge-list-item--selected .forge-list-item__text ::slotted(.forge-list-item__subtitle){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);opacity:.87}.forge-list-item--activated .forge-list-item__text .forge-list-item__tertiary-title,.forge-list-item--activated .forge-list-item__text ::slotted(.forge-list-item__tertiary-title),.forge-list-item--selected .forge-list-item__text .forge-list-item__tertiary-title,.forge-list-item--selected .forge-list-item__text ::slotted(.forge-list-item__tertiary-title){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5);opacity:.87}.forge-list-item--activated ::slotted([slot=leading]),.forge-list-item--activated ::slotted([slot=trailing]),.forge-list-item--selected ::slotted([slot=leading]),.forge-list-item--selected ::slotted([slot=trailing]){color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-list-item--activated ::slotted([slot=avatar].forge-list-item__avatar-icon),.forge-list-item--selected ::slotted([slot=avatar].forge-list-item__avatar-icon){background-color:rgba(0,0,0,.12);background-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12));color:#000;color:var(--mdc-theme-on-surface,#000)}.forge-list-item--disabled{cursor:not-allowed;cursor:var(--forge-list-item-cursor,not-allowed);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-list-item--disabled ::slotted([slot=leading]),.forge-list-item--disabled ::slotted([slot=trailing]){cursor:not-allowed;cursor:var(--forge-list-item-cursor,not-allowed);color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-list-item[role=link]{cursor:pointer}:host{display:block;contain:content}:host([hidden]){display:none}:host([forge-drawer-context=true]) .forge-list-item{margin:8px;margin:var(--forge-list-item-margin,8px);padding:0 8px;padding:var(--forge-list-item-padding,0 8px);border-radius:4px;border-radius:var(--forge-list-item-border-radius,4px);cursor:pointer;cursor:var(--forge-list-item-cursor,pointer);font-size:.875rem;font-weight:500;height:40px}:host([forge-drawer-context=true]) .forge-list-item--static{cursor:initial}:host([forge-drawer-context=true]) .forge-list-item--indented{margin-left:64px;margin-left:var(--forge-list-item-indent,64px)}:host([forge-drawer-context=true]) .forge-list-item--two-line{height:64px}:host([forge-drawer-context=true]) .forge-list-item--three-line{height:80px}:host([forge-drawer-context=true]) .forge-list-item:first-child{margin-top:4px;margin-bottom:4px}:host([forge-drawer-context=true]) .forge-list-item--dense{height:32px;height:var(--forge-list-item-height,32px)}:host([forge-drawer-context=true]) .forge-list-item--dense ::slotted([slot=leading]),:host([forge-drawer-context=true]) .forge-list-item--dense ::slotted([slot=trailing]){font-size:1.25rem}:host([forge-drawer-context=true]) .forge-list-item--dense .forge-list-item__text{-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)}:host([forge-drawer-context=true]) .forge-list-item--disabled{cursor:not-allowed;cursor:var(--forge-list-item-cursor,not-allowed)}:host([dense]){-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)}';
+/** The custom element class behind the `<forge-list-item>` element. */
+let ListItemComponent = class ListItemComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, defaultTemplate, styles);
+        this._foundation = new ListItemFoundation(new ListItemAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            LIST_ITEM_CONSTANTS.attributes.STATIC,
+            LIST_ITEM_CONSTANTS.attributes.TWO_LINE,
+            LIST_ITEM_CONSTANTS.attributes.THREE_LINE,
+            LIST_ITEM_CONSTANTS.attributes.ACTIVE,
+            LIST_ITEM_CONSTANTS.attributes.SELECTED,
+            LIST_ITEM_CONSTANTS.attributes.VALUE,
+            LIST_ITEM_CONSTANTS.attributes.HREF,
+            LIST_ITEM_CONSTANTS.attributes.TARGET,
+            LIST_ITEM_CONSTANTS.attributes.RIPPLE,
+            LIST_ITEM_CONSTANTS.attributes.DISABLED,
+            LIST_ITEM_CONSTANTS.attributes.DENSE,
+            LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK,
+            LIST_ITEM_CONSTANTS.attributes.INDENTED,
+            LIST_ITEM_CONSTANTS.attributes.WRAP
+        ];
+    }
+    initializedCallback() {
+        // To simulate the :host-context() selector for Firefox until they implement it, we need to determine if the
+        // list item is within a drawer for auto-styling the list item when included within a drawer. Check to see if
+        // any of the parents of this element are a drawer.
+        if (!this.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT) && elementParents(this).some(el => ['forge-drawer', 'forge-modal-drawer', 'forge-mini-drawer'].includes(el.tagName.toLowerCase()))) {
+            this.setAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT, 'true');
+        }
+        const list = requireParent(this, LIST_CONSTANTS.elementName);
+        if (list) {
+            this._inheritParentListProps(list);
+        }
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case LIST_ITEM_CONSTANTS.attributes.STATIC:
+                this.static = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.TWO_LINE:
+                this.twoLine = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.THREE_LINE:
+                this.threeLine = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.ACTIVE:
+                this.active = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.SELECTED:
+                this.selected = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.HREF:
+                this.href = newValue;
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.TARGET:
+                this.target = newValue;
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.RIPPLE:
+                this.ripple = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK:
+                this.propagateClick = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.INDENTED:
+                this.indented = coerceBoolean(newValue);
+                break;
+            case LIST_ITEM_CONSTANTS.attributes.WRAP:
+                this.wrap = coerceBoolean(newValue);
+                break;
+        }
+    }
+    _inheritParentListProps(list) {
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.STATIC)) {
+            this.static = true;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.DENSE)) {
+            this.dense = true;
+        }
+        if (list.getAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK) === 'false') {
+            this.propagateClick = false;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)) {
+            this.indented = true;
+        }
+    }
+    /** Sets focus to this list item. */
+    focus() {
+        this._foundation.setFocus();
+    }
+};
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "static", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "twoLine", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "threeLine", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "active", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "href", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "ripple", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "propagateClick", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "indented", void 0);
+__decorate([
+    FoundationProperty()
+], ListItemComponent.prototype, "wrap", void 0);
+ListItemComponent = __decorate([
+    CustomElement({
+        name: LIST_ITEM_CONSTANTS.elementName
+    })
+], ListItemComponent);
+export { ListItemComponent };

package/esm/list-dropdown/cascading-list-dropdown-aware-foundation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IListDropdownAwareFoundation, ListDropdownAwareFoundation } from './list-dropdown-aware-foundation';
+export interface ICascadingListDropdownAwareFoundation extends IListDropdownAwareFoundation {
+}
+export interface ICascadingListDropdownAwareFoundationConfiguration {
+    popupTimeout: number;
+    targetTimeout: number;
+}
+export declare abstract class CascadingListDropdownAwareFoundation<T> extends ListDropdownAwareFoundation implements ICascadingListDropdownAwareFoundation {
+    private _config;
+    protected _open: boolean;
+    protected _options: T[];
+    protected _childOpen: boolean;
+    protected _popupHasMouse: boolean;
+    protected _mouseCoords: {
+        x: number;
+        y: number;
+    };
+    protected _activeMouseLeaveTimeout: number;
+    protected _targetMouseEnterListener: (evt: MouseEvent) => void;
+    protected _targetMouseLeaveListener: (evt: MouseEvent) => void;
+    protected _childPopupMouseEnterListener: (evt: MouseEvent) => void;
+    protected _childPopupMouseLeaveListener: (evt: MouseEvent) => void;
+    protected _documentMouseMoveListener: (evt: MouseEvent) => void;
+    protected abstract _attachCascadingListeners(): void;
+    protected abstract _detachCascadingListeners(): void;
+    protected abstract _onCascadingOptionSelected(data: any): void;
+    protected abstract _onCascadingChildOpen(index: number): void;
+    protected abstract _onCascadingChildClose(): void;
+    protected abstract _closeDropdown(): void;
+    protected abstract _openDropdown(): void;
+    protected abstract _isOwnElement(element: Element): boolean;
+    constructor(_config: ICascadingListDropdownAwareFoundationConfiguration);
+    private _onChildPopupMouseEnter;
+    private _onChildPopupMouseLeave;
+    private _onTargetMouseEnter;
+    private _onTargetMouseLeave;
+    protected _clearMouseLeaveTimeout(): void;
+}