@tylertech/forge 3.0.0-next.11 → 3.0.0-next.12

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

@@ -3,183 +3,172 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, getShadowElement, removeClass, requireParent, isDeepEqual, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, isDeepEqual, toggleAttribute } from '@tylertech/forge-core';
+import { replaceElement } from '../../core/utils/utils';
 import { BaseAdapter } from '../../core/base/base-adapter';
-import { createUserInteractionListener } from '../../core/utils';
-import { LIST_CONSTANTS } from '../list/list-constants';
+import { FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer';
+import { ListComponentItemRole, LIST_CONSTANTS } from '../list/list-constants';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
-import { ForgeRipple } from '../../ripple';
 export class ListItemAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
-        this._initialize();
-    }
-    _initialize() {
-        this._listItemElement = getShadowElement(this._component, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-        this._defaultSlot = getShadowElement(this._component, LIST_ITEM_CONSTANTS.selectors.DEFAULT_SLOT);
-    }
-    initializeAccessibility() {
+        this._rootElement = getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.ROOT);
+        this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayerElement = getShadowElement(component, STATE_LAYER_CONSTANTS.elementName);
+    }
+    initialize() {
+        // Attempt to inherit state for corresponding properties from our parent list
+        const list = this._getParentList();
+        if (list) {
+            this._inheritParentListProps(list);
+        }
+        this._rootElement.tabIndex = this._component.nonInteractive || this._component.disabled ? -1 : 0;
         if (!this._component.hasAttribute('role')) {
-            this._component.setAttribute('role', 'listitem');
+            this._setRole(list);
         }
     }
-    getListItem() {
-        return this._component;
-    }
-    /**
-     * Adds an event listener to the `<forge-list-item>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    addListener(type, listener, options) {
-        this._listItemElement.addEventListener(type, listener, options);
-    }
-    /**
-     * Removes an event listener from the `<forge-list-item>` host element.
-     * @param {string} type The event type.
-     * @param {Function} listener The event callback.
-     */
-    removeListener(type, listener) {
-        this._listItemElement.removeEventListener(type, listener);
-    }
-    /**
-     * Creates a ripple instance on the list item.
-     * @returns {ForgeRipple}
-     */
-    createRipple() {
-        return new ForgeRipple(this._listItemElement);
-    }
-    /**
-     * Toggles the static state of this list item.
-     * @param {boolean} value The static state.
-     */
-    setStatic(value) {
-        if (value) {
-            this._listItemElement.tabIndex = -1;
-            addClass(LIST_ITEM_CONSTANTS.classes.STATIC, this._listItemElement);
+    setHref(href, target) {
+        if (href) {
+            if (this._rootElement.tagName !== 'A') {
+                const anchor = this._createAnchorRootElement(target);
+                this._rootElement = replaceElement(this._rootElement, anchor);
+            }
+            this._rootElement.href = href;
         }
-        else {
-            this._listItemElement.tabIndex = 0;
-            removeClass(LIST_ITEM_CONSTANTS.classes.STATIC, this._listItemElement);
+        else if (this._rootElement.tagName === 'A') {
+            const defaultEl = this._createDefaultRootElement();
+            this._rootElement = replaceElement(this._rootElement, defaultEl);
         }
     }
-    /**
-     * Sets this list item as a two-line list item.
-     * @param {boolean} value The two-line state.
-     */
-    setTwoLine(value) {
-        if (value) {
-            addClass(LIST_ITEM_CONSTANTS.classes.TWO_LINE, this._listItemElement);
-        }
-        else {
-            removeClass(LIST_ITEM_CONSTANTS.classes.TWO_LINE, this._listItemElement);
+    setHrefTarget(target) {
+        if (this._rootElement.tagName === 'A') {
+            this._rootElement.target = target;
         }
     }
-    /**
-     * Sets this list item as a three-line list item.
-     * @param {boolean} value The three-line state.
-     */
-    setThreeLine(value) {
+    setNonInteractive(value) {
+        this._rootElement.tabIndex = value ? -1 : 0;
         if (value) {
-            addClass(LIST_ITEM_CONSTANTS.classes.THREE_LINE, this._listItemElement);
+            this._focusIndicatorElement.remove();
+            this._stateLayerElement.remove();
         }
         else {
-            removeClass(LIST_ITEM_CONSTANTS.classes.THREE_LINE, this._listItemElement);
+            this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
         }
     }
-    /**
-     * Determines how many lines the list item is displaying.
-     */
-    getLineCount() {
-        return this._defaultSlot.assignedNodes().filter(e => e.nodeType === Node.ELEMENT_NODE).length; // assignedElements does not exist in the polyfilled version so filtering nodes instead
-    }
-    /**
-     * Toggles the active class of the list item.
-     * @param {boolean} value The active state.
-     */
-    setActive(value) {
+    setDisabled(value) {
+        this._rootElement.tabIndex = value ? -1 : 0;
+        toggleAttribute(this._component, value, 'aria-disabled', 'true');
         if (value) {
-            addClass(LIST_ITEM_CONSTANTS.classes.ACTIVE, this._listItemElement);
+            this._focusIndicatorElement.remove();
+            this._stateLayerElement.remove();
         }
         else {
-            removeClass(LIST_ITEM_CONSTANTS.classes.ACTIVE, this._listItemElement);
+            this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
         }
     }
+    setActive(value) {
+        this._focusIndicatorElement.active = value;
+    }
     /**
-     * Toggles the selected class of the list item.
-     * @param {boolean} value The active state.
+     * Attempts to set the selected state of the list item element and it's visual indicators
+     * @param value The value to compare to the parent list element's selected value
+     * @returns Returns whether the list item is selected, or null otherwise.
      */
-    setSelected(value) {
-        if (value) {
-            addClass(LIST_ITEM_CONSTANTS.classes.SELECTED, this._listItemElement);
-            // We are treating selected and activated as the same state, and mdc-states hooks right into --activated
-            // addClass(LIST_ITEM_CONSTANTS.classes.ACTIVATED, this._listItemElement);
-        }
-        else {
-            removeClass(LIST_ITEM_CONSTANTS.classes.SELECTED, this._listItemElement);
-            // removeClass(LIST_ITEM_CONSTANTS.classes.ACTIVATED, this._listItemElement);
+    trySelect(value) {
+        const list = this._getParentList();
+        if ((list === null || list === void 0 ? void 0 : list.selectedValue) === undefined) {
+            return null;
         }
+        const listValues = Array.isArray(list.selectedValue) ? list.selectedValue : [list.selectedValue];
+        const isSelected = listValues.some(v => isDeepEqual(v, value));
+        this.tryToggleSelectionControl(isSelected);
+        return isSelected;
     }
     /**
-     * Attemps to toggle a checkbox or radio button within the list item if it can find one.
+     * Attempts to toggle a checkbox radio button, or switch within the list item if it can find one.
      */
-    tryToggleCheckboxRadio(value) {
+    tryToggleSelectionControl(value) {
         const checkable = this._component.querySelector(LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR);
         if (checkable) {
             const force = typeof value === 'boolean';
             const currentState = checkable.checked;
             // Check if we are just toggling or forcing to a specific checked state
             checkable.checked = force ? value : !checkable.checked;
+            // TODO: This seems weird... Should we be dispatching events on slotted elements when changes are made programmatically?
             if (!force || currentState !== value) {
                 checkable.dispatchEvent(new Event('change', { bubbles: true }));
             }
         }
+        else {
+            // Special case handling for the Forge switch element since it doesn't have a checked property
+            const switchEl = this._component.querySelector(LIST_ITEM_CONSTANTS.selectors.SWITCH_SELECTOR);
+            if (!switchEl) {
+                return;
+            }
+            const force = typeof value === 'boolean';
+            const currentState = switchEl.on;
+            // Check if we are just toggling or forcing to a specific checked state
+            switchEl.on = force ? value : !switchEl.on;
+            // TODO: This seems weird... Should we be dispatching events on slotted elements when changes are made programmatically?
+            if (!force || currentState !== value) {
+                switchEl.dispatchEvent(new CustomEvent('forge-switch-change', { bubbles: true, detail: switchEl.on }));
+            }
+        }
     }
-    /** Attempts to set focus to this list item. */
-    setFocus() {
-        this._listItemElement.focus();
-    }
-    /** Returns whether the component has focus or not. */
-    hasFocus() {
-        var _a;
-        return document.activeElement === this._component || !!((_a = this._component.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement);
-    }
-    /**
-     * Sets the role on the list item element.
-     * @param role The role.
-     */
-    setRole(role) {
-        this._listItemElement.setAttribute('role', role);
-    }
-    setDisabled(disabled) {
-        toggleClass(this._listItemElement, disabled, LIST_ITEM_CONSTANTS.classes.DISABLED);
-    }
-    setDense(dense) {
-        toggleClass(this._listItemElement, dense, LIST_ITEM_CONSTANTS.classes.DENSE);
-    }
-    setIndented(indented) {
-        toggleClass(this._listItemElement, indented, LIST_ITEM_CONSTANTS.classes.INDENTED);
-    }
-    setWrap(value) {
-        toggleClass(this._listItemElement, value, LIST_ITEM_CONSTANTS.classes.WRAP);
+    isFocused() {
+        return this._component.matches(':focus');
     }
-    /**
-     * Attempts to set the selected state of the list item element and it's visual indicators
-     * @param value The value to compare to the parent list element's selected value
-     * @returns Returns whether the list item is selected or not
-     */
-    trySelect(value) {
-        const list = requireParent(this._component, LIST_CONSTANTS.elementName);
-        if (!list || list.selectedValue === undefined) {
-            return null;
+    setFocus() {
+        this._rootElement.focus({ preventScroll: true });
+    }
+    animateStateLayer() {
+        this._stateLayerElement.playAnimation();
+    }
+    _createAnchorRootElement(target) {
+        const a = document.createElement('a');
+        a.classList.add(LIST_ITEM_CONSTANTS.classes.ROOT);
+        a.setAttribute('part', 'root');
+        a.target = target;
+        return a;
+    }
+    _createDefaultRootElement() {
+        const div = document.createElement('div');
+        div.classList.add(LIST_ITEM_CONSTANTS.classes.ROOT);
+        div.setAttribute('part', 'root');
+        div.tabIndex = this._component.nonInteractive || this._component.disabled ? -1 : 0;
+        return div;
+    }
+    _getParentList() {
+        return this._component.closest(LIST_CONSTANTS.elementName);
+    }
+    _inheritParentListProps(list) {
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.NON_INTERACTIVE) || list.hasAttribute(LIST_CONSTANTS.attributes.STATIC)) {
+            this._component.nonInteractive = true;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.DISABLED)) {
+            this._component.disabled = true;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.DENSE)) {
+            this._component.dense = true;
+        }
+        if (list.getAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK) === 'false') {
+            this._component.propagateClick = false;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)) {
+            this._component.indented = true;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.TWO_LINE)) {
+            this._component.twoLine = true;
+        }
+        if (list.hasAttribute(LIST_CONSTANTS.attributes.THREE_LINE)) {
+            this._component.threeLine = true;
         }
-        const listValues = list.selectedValue instanceof Array ? list.selectedValue : [list.selectedValue];
-        const isSelected = listValues.some(v => isDeepEqual(v, value));
-        this.setSelected(isSelected);
-        this.tryToggleCheckboxRadio(isSelected);
-        return isSelected;
     }
-    userInteractionListener() {
-        return createUserInteractionListener(this._listItemElement);
+    _setRole(list) {
+        var _a;
+        const listRole = list === null || list === void 0 ? void 0 : list.getAttribute('role');
+        const role = (_a = ListComponentItemRole[listRole]) !== null && _a !== void 0 ? _a : 'listitem';
+        this._component.setAttribute('role', role);
     }
 }

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

@@ -5,53 +5,53 @@
  */
 import { IListItemComponent } from './list-item';
 export declare const LIST_ITEM_CONSTANTS: {
-    elementName: "forge-list-item";
-    attributes: {
-        STATIC: string;
-        TWO_LINE: string;
-        THREE_LINE: string;
-        ACTIVE: string;
-        SELECTED: string;
-        VALUE: string;
+    elementName: string;
+    observedAttributes: {
         HREF: string;
         TARGET: string;
-        RIPPLE: string;
+        STATIC: string;
+        NON_INTERACTIVE: string;
         DISABLED: string;
+        SELECTED: string;
+        ACTIVE: string;
+        VALUE: string;
         DENSE: string;
         PROPAGATE_CLICK: string;
         INDENTED: string;
+        TWO_LINE: string;
+        THREE_LINE: string;
         WRAP: string;
-        DRAWER_CONTEXT: string;
-        IGNORE: string;
     };
-    classes: {
-        LIST_ITEM: string;
+    attributes: {
+        HREF: string;
+        TARGET: string;
         STATIC: string;
-        TEXT: string;
-        TWO_LINE: string;
-        THREE_LINE: string;
-        ACTIVE: string;
-        ACTIVATED: string;
-        SELECTED: string;
+        NON_INTERACTIVE: string;
         DISABLED: string;
+        SELECTED: string;
+        ACTIVE: string;
+        VALUE: string;
         DENSE: string;
+        PROPAGATE_CLICK: string;
         INDENTED: string;
+        TWO_LINE: string;
+        THREE_LINE: string;
         WRAP: string;
     };
+    classes: {
+        ROOT: string;
+    };
     selectors: {
-        LIST_ITEM: string;
-        DEFAULT_SLOT: string;
+        ROOT: string;
         CHECKBOX_RADIO_SELECTOR: string;
+        SWITCH_SELECTOR: string;
+        IGNORE: string;
     };
     events: {
         SELECT: string;
     };
-    roles: {
-        LINK: string;
-        LIST_ITEM: string;
-    };
 };
-export interface IListItemSelectEventData {
-    value: any;
+export interface IListItemSelectEventData<T = unknown> {
+    value: T;
     listItem: IListItemComponent;
 }

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

@@ -5,55 +5,40 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}list-item`;
-const attributes = {
-    STATIC: 'static',
-    TWO_LINE: 'two-line',
-    THREE_LINE: 'three-line',
-    ACTIVE: 'active',
-    SELECTED: 'selected',
-    VALUE: 'value',
+const observedAttributes = {
     HREF: 'href',
     TARGET: 'target',
-    RIPPLE: 'ripple',
+    STATIC: 'static',
+    NON_INTERACTIVE: 'non-interactive',
     DISABLED: 'disabled',
+    SELECTED: 'selected',
+    ACTIVE: 'active',
+    VALUE: 'value',
     DENSE: 'dense',
     PROPAGATE_CLICK: 'propagate-click',
     INDENTED: 'indented',
-    WRAP: 'wrap',
-    DRAWER_CONTEXT: 'forge-drawer-context',
-    IGNORE: 'forge-ignore'
+    TWO_LINE: 'two-line',
+    THREE_LINE: 'three-line',
+    WRAP: 'wrap'
 };
+const attributes = Object.assign({}, observedAttributes);
 const classes = {
-    LIST_ITEM: 'forge-list-item',
-    STATIC: 'forge-list-item--static',
-    TEXT: 'forge-list-item__text',
-    TWO_LINE: 'forge-list-item--two-line',
-    THREE_LINE: 'forge-list-item--three-line',
-    ACTIVE: 'forge-list-item--active',
-    ACTIVATED: 'forge-list-item--activated',
-    SELECTED: 'forge-list-item--selected',
-    DISABLED: 'forge-list-item--disabled',
-    DENSE: 'forge-list-item--dense',
-    INDENTED: 'forge-list-item--indented',
-    WRAP: 'forge-list-item--wrap'
+    ROOT: 'forge-list-item'
 };
 const selectors = {
-    LIST_ITEM: `.${classes.LIST_ITEM}`,
-    DEFAULT_SLOT: `.${classes.TEXT} > slot`,
-    CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])'
+    ROOT: `.${classes.ROOT}`,
+    CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])',
+    SWITCH_SELECTOR: 'forge-switch:not([disabled]):not([forge-ignore])',
+    IGNORE: '[forge-ignore],[data-forge-ignore]'
 };
 const events = {
     SELECT: `${elementName}-select`
 };
-const roles = {
-    LINK: 'link',
-    LIST_ITEM: 'listitem'
-};
 export const LIST_ITEM_CONSTANTS = {
     elementName,
+    observedAttributes,
     attributes,
     classes,
     selectors,
-    events,
-    roles
+    events
 };

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

@@ -6,98 +6,74 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IListItemAdapter } from './list-item-adapter';
 export interface IListItemFoundation extends ICustomElementFoundation {
-    static: boolean;
-    twoLine: boolean;
-    threeLine: boolean;
-    active: boolean;
-    selected: boolean;
-    value: any;
     href: string;
     target: string;
-    ripple: boolean;
+    static: boolean;
+    nonInteractive: boolean;
     disabled: boolean;
+    selected: boolean;
+    active: boolean;
+    value: unknown;
     dense: boolean;
+    propagateClick: boolean;
+    indented: boolean;
+    twoLine: boolean;
+    threeLine: boolean;
     wrap: boolean;
     setFocus(): void;
 }
-/**
- * The foundation class behind the `<forge-list-item>` component.
- */
 export declare class ListItemFoundation implements IListItemFoundation {
     private _adapter;
-    private _ripple;
-    private _rippleInstance;
-    private _static;
-    private _twoLine;
-    private _threeLine;
-    private _active;
-    private _selected;
-    private _value;
     private _href;
     private _target;
+    private _nonInteractive;
     private _disabled;
+    private _selected;
+    private _active;
+    private _value;
     private _dense;
     private _propagateClick;
     private _indented;
+    private _twoLine;
+    private _threeLine;
     private _wrap;
     private _clickListener;
-    private _mouseDownListener;
+    private _pointerDownListener;
     private _keydownListener;
-    private _destroyUserInteractionListener;
     constructor(_adapter: IListItemAdapter);
     initialize(): void;
     disconnect(): void;
-    private _onMouseDown;
+    setFocus(): void;
+    private _onPointerDown;
     private _onKeydown;
-    /**
-     * Handles clicking a list item.
-     * @param evt
-     */
     private _onClick;
     private _select;
-    /** Gets/sets whether the list item has a ripple or not. */
-    get ripple(): boolean;
-    set ripple(value: boolean);
-    /** Gets/sets whether the static state of this list item. */
-    get static(): boolean;
-    set static(value: boolean);
-    /** Gets/sets whether the list item displays two lines of text. */
-    get twoLine(): boolean;
-    set twoLine(value: boolean);
-    /** Gets/sets whether the list item displays two lines of text. */
-    get threeLine(): boolean;
-    set threeLine(value: boolean);
-    /** Gets/sets whether the list item is active or not. */
-    get active(): boolean;
-    set active(value: boolean);
-    /** Gets/sets whether the list item is selected or not. */
-    get selected(): boolean;
-    set selected(value: boolean);
-    /** Gets/sets the unique value for this list item. */
-    get value(): any;
-    set value(value: any);
-    /** Gets/sets the href link that this list item will send the browser to when clicked. */
     get href(): string;
     set href(value: string);
-    /** Gets/sets the href link target. */
     get target(): string;
     set target(value: string);
-    /** Gets/sets the disabled state. */
+    get static(): boolean;
+    set static(value: boolean);
+    get nonInteractive(): boolean;
+    set nonInteractive(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    /** Gets/sets the dense state. */
+    get selected(): boolean;
+    set selected(value: boolean);
+    get active(): boolean;
+    set active(value: boolean);
+    get value(): unknown;
+    set value(value: unknown);
     get dense(): boolean;
     set dense(value: boolean);
-    /** Gets/sets the dense state. */
     get propagateClick(): boolean;
     set propagateClick(value: boolean);
     get indented(): boolean;
     set indented(value: boolean);
+    get twoLine(): boolean;
+    set twoLine(value: boolean);
+    get threeLine(): boolean;
+    set threeLine(value: boolean);
     get wrap(): boolean;
     set wrap(value: boolean);
-    private _setRipple;
-    /**
-     * Sets focus to this list item.
-     */
-    setFocus(): void;
 }