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

package/esm/list/list/list.d.ts

@@ -5,11 +5,17 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IListComponent extends IBaseComponent {
+    /** @deprecated Use nonInteractive instead. */
     static: boolean;
+    nonInteractive: boolean;
+    disabled: boolean;
     dense: boolean;
     propagateClick: boolean;
     indented: boolean;
     selectedValue: any;
+    twoLine: boolean;
+    threeLine: boolean;
+    wrap: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -17,24 +23,57 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-list>` element.
- *
  * @tag forge-list
+ *
+ * @summary Lists are vertical groupings of related content.
+ *
+ * @csspart root - The component's root container element.
+ *
+ * @slot - The default/unnamed slot for child list items.
+ *
+ * @cssproperty --forge-list-container-color - The background color of the list surface,
+ * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
+ * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ *
+ * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @property {boolean} static - Whether the list has all static items or not.
+ * @property {boolean} nonInteractive - Whether the list has all non-interactive items or not.
+ * @property {boolean} disabled - Whether the list items are disabled or not.
+ * @property {boolean} dense - Whether the list has all dense items or not.
+ * @property {boolean} propagateClick - Whether the list items propagate click events or not.
+ * @property {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @property {unknown | unknown[]} selectedValue - The selected list item value(s).
+ * @property {boolean} twoLine - Whether the list has all two-line items or not.
+ * @property {boolean} threeLine - Whether the list has all three-line items or not.
+ * @property {boolean} wrap - Whether the list has all items that wrap their text or not.
+ *
+ * @attribute {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @attribute {boolean} static - Whether the list has all static items or not.
+ * @attribute {boolean} non-interactive - Whether the list has all non-interactive items or not.
+ * @attribute {boolean} disabled - Whether the list items are disabled or not.
+ * @attribute {boolean} dense - Whether the list has all dense items or not.
+ * @attribute {boolean} propagate-click - Whether the list items propagate click events or not.
+ * @attribute {string} selected-value - The selected list item value(s).
+ * @attribute {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @attribute {boolean} two-line - Whether the list has all two-line items or not.
+ * @attribute {boolean} three-line - Whether the list has all three-line items or not.
+ * @attribute {boolean} wrap - Whether the list has all items that wrap their text or not.
+ * @attribute {boolean} navlist - Controls whether the list is styled a navigation list or not.
  */
 export declare class ListComponent extends BaseComponent implements IListComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets whether the list has all static items or not. */
     static: boolean;
-    /** Gets/sets whether the list has all dense items or not. */
+    nonInteractive: boolean;
+    disabled: boolean;
     dense: boolean;
-    /** Gets/sets whether the list items allow mousedown events through to their underlying list item elements. Default is true. */
     propagateClick: boolean;
-    /** Gets/sets whether the list items within this list are indented. Default is false. */
     indented: boolean;
-    /** Gets/sets the selected list item value(s) */
     selectedValue: any;
+    twoLine: boolean;
+    threeLine: boolean;
+    wrap: boolean;
 }

package/esm/list/list/list.js

@@ -4,27 +4,66 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
 import { BaseComponent } from '../../core/base/base-component';
-import { ListItemComponent } from '../list-item';
 import { ListAdapter } from './list-adapter';
-import { LIST_CONSTANTS } from './list-constants';
 import { ListFoundation } from './list-foundation';
+import { LIST_CONSTANTS } from './list-constants';
 const template = '<template><div class=\"forge-list\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);line-height:1.5rem;padding-top:8px;padding-top:var(--forge-list-padding,8px);padding-bottom:8px;padding-bottom:var(--forge-list-padding,8px);margin:0;list-style-type:none}.forge-list:focus{outline:0}:host{display:block;contain:content}:host([hidden]){display:none}';
+const styles = ':host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:40px;--forge-list-item-margin:4px 8px;--forge-list-item-shape:4px;--forge-list-item-supporting-text-font-size:0.875rem;--forge-list-item-supporting-text-font-weight:500}.forge-list{--_container-color:var(--forge-list-container-color, transparent);--_block-padding:var(--forge-list-block-padding, 8px);--_inline-padding:var(--forge-list-inline-padding, 0);display:block;outline:0;background-color:var(--_container-color);padding:var(--_block-padding) var(--_inline-padding);margin:0;border-radius:inherit;min-width:inherit}';
+import { ListItemComponent } from '../list-item';
 /**
- * The custom element class behind the `<forge-list>` element.
- *
  * @tag forge-list
+ *
+ * @summary Lists are vertical groupings of related content.
+ *
+ * @csspart root - The component's root container element.
+ *
+ * @slot - The default/unnamed slot for child list items.
+ *
+ * @cssproperty --forge-list-container-color - The background color of the list surface,
+ * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
+ * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ *
+ * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @property {boolean} static - Whether the list has all static items or not.
+ * @property {boolean} nonInteractive - Whether the list has all non-interactive items or not.
+ * @property {boolean} disabled - Whether the list items are disabled or not.
+ * @property {boolean} dense - Whether the list has all dense items or not.
+ * @property {boolean} propagateClick - Whether the list items propagate click events or not.
+ * @property {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @property {unknown | unknown[]} selectedValue - The selected list item value(s).
+ * @property {boolean} twoLine - Whether the list has all two-line items or not.
+ * @property {boolean} threeLine - Whether the list has all three-line items or not.
+ * @property {boolean} wrap - Whether the list has all items that wrap their text or not.
+ *
+ * @attribute {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @attribute {boolean} static - Whether the list has all static items or not.
+ * @attribute {boolean} non-interactive - Whether the list has all non-interactive items or not.
+ * @attribute {boolean} disabled - Whether the list items are disabled or not.
+ * @attribute {boolean} dense - Whether the list has all dense items or not.
+ * @attribute {boolean} propagate-click - Whether the list items propagate click events or not.
+ * @attribute {string} selected-value - The selected list item value(s).
+ * @attribute {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @attribute {boolean} two-line - Whether the list has all two-line items or not.
+ * @attribute {boolean} three-line - Whether the list has all three-line items or not.
+ * @attribute {boolean} wrap - Whether the list has all items that wrap their text or not.
+ * @attribute {boolean} navlist - Controls whether the list is styled a navigation list or not.
  */
 let ListComponent = class ListComponent extends BaseComponent {
     static get observedAttributes() {
         return [
+            LIST_CONSTANTS.attributes.ROLE,
             LIST_CONSTANTS.attributes.STATIC,
+            LIST_CONSTANTS.attributes.NON_INTERACTIVE,
+            LIST_CONSTANTS.attributes.DISABLED,
             LIST_CONSTANTS.attributes.DENSE,
-            LIST_CONSTANTS.attributes.SELECTED_VALUE,
             LIST_CONSTANTS.attributes.PROPAGATE_CLICK,
-            LIST_CONSTANTS.attributes.INDENTED
+            LIST_CONSTANTS.attributes.SELECTED_VALUE,
+            LIST_CONSTANTS.attributes.INDENTED,
+            LIST_CONSTANTS.attributes.TWO_LINE,
+            LIST_CONSTANTS.attributes.THREE_LINE,
+            LIST_CONSTANTS.attributes.WRAP
         ];
     }
     constructor() {
@@ -32,13 +71,20 @@ let ListComponent = class ListComponent extends BaseComponent {
         attachShadowTemplate(this, template, styles);
         this._foundation = new ListFoundation(new ListAdapter(this));
     }
-    initializedCallback() {
+    connectedCallback() {
         this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
+            case LIST_CONSTANTS.attributes.ROLE:
+                this._foundation.updateRole();
+                break;
             case LIST_CONSTANTS.attributes.STATIC:
-                this.static = coerceBoolean(newValue);
+            case LIST_CONSTANTS.attributes.NON_INTERACTIVE:
+                this.nonInteractive = coerceBoolean(newValue);
+                break;
+            case LIST_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
                 break;
             case LIST_CONSTANTS.attributes.DENSE:
                 this.dense = coerceBoolean(newValue);
@@ -52,12 +98,27 @@ let ListComponent = class ListComponent extends BaseComponent {
             case LIST_CONSTANTS.attributes.SELECTED_VALUE:
                 this.selectedValue = newValue;
                 break;
+            case LIST_CONSTANTS.attributes.TWO_LINE:
+                this.twoLine = coerceBoolean(newValue);
+                break;
+            case LIST_CONSTANTS.attributes.THREE_LINE:
+                this.threeLine = coerceBoolean(newValue);
+                break;
+            case LIST_CONSTANTS.attributes.WRAP:
+                this.wrap = coerceBoolean(newValue);
+                break;
         }
     }
 };
 __decorate([
     FoundationProperty()
 ], ListComponent.prototype, "static", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "nonInteractive", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
 ], ListComponent.prototype, "dense", void 0);
@@ -70,10 +131,21 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ListComponent.prototype, "selectedValue", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "twoLine", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "threeLine", void 0);
+__decorate([
+    FoundationProperty()
+], ListComponent.prototype, "wrap", void 0);
 ListComponent = __decorate([
     CustomElement({
         name: LIST_CONSTANTS.elementName,
-        dependencies: [ListItemComponent]
+        dependencies: [
+            ListItemComponent
+        ]
     })
 ], ListComponent);
 export { ListComponent };

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

@@ -4,106 +4,47 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { createUserInteractionListener } from '../../core/utils';
 import { IListItemComponent } from './list-item';
-export interface IListItemAdapter extends IBaseAdapter {
-    initializeAccessibility(): void;
-    getListItem(): IListItemComponent;
-    addListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
-    removeListener(type: string, listener: (evt: Event) => void): void;
-    createRipple(): any;
-    setStatic(value: boolean): void;
-    setTwoLine(value: boolean): void;
-    setThreeLine(value: boolean): void;
-    getLineCount(): number;
+export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
+    initialize(): void;
+    setHref(href: string, target: string): void;
+    setHrefTarget(target: string): void;
+    setNonInteractive(value: boolean): void;
+    setDisabled(value: boolean): void;
     setActive(value: boolean): void;
-    setSelected(value: boolean): void;
-    tryToggleCheckboxRadio(value?: boolean): void;
-    setFocus(): void;
-    hasFocus(): boolean;
-    setRole(role: string): void;
-    setDisabled(disabled: boolean): void;
-    setDense(dense: boolean): void;
-    setIndented(indented: boolean): void;
-    setWrap(value: boolean): void;
     trySelect(value: unknown): boolean | null;
-    userInteractionListener(): ReturnType<typeof createUserInteractionListener>;
+    tryToggleSelectionControl(value?: boolean): void;
+    isFocused(): boolean;
+    setFocus(): void;
+    animateStateLayer(): void;
 }
 export declare class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
-    private _listItemElement;
-    private _defaultSlot;
+    private _rootElement;
+    private _focusIndicatorElement;
+    private _stateLayerElement;
     constructor(component: IListItemComponent);
-    private _initialize;
-    initializeAccessibility(): void;
-    getListItem(): IListItemComponent;
-    /**
-     * 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: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
-    /**
-     * 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: string, listener: (evt: Event) => void): void;
-    /**
-     * Creates a ripple instance on the list item.
-     * @returns {ForgeRipple}
-     */
-    createRipple(): any;
-    /**
-     * Toggles the static state of this list item.
-     * @param {boolean} value The static state.
-     */
-    setStatic(value: boolean): void;
-    /**
-     * Sets this list item as a two-line list item.
-     * @param {boolean} value The two-line state.
-     */
-    setTwoLine(value: boolean): void;
-    /**
-     * Sets this list item as a three-line list item.
-     * @param {boolean} value The three-line state.
-     */
-    setThreeLine(value: boolean): void;
-    /**
-     * Determines how many lines the list item is displaying.
-     */
-    getLineCount(): number;
-    /**
-     * Toggles the active class of the list item.
-     * @param {boolean} value The active state.
-     */
+    initialize(): void;
+    setHref(href: string, target: string): void;
+    setHrefTarget(target: string): void;
+    setNonInteractive(value: boolean): void;
+    setDisabled(value: boolean): void;
     setActive(value: boolean): void;
-    /**
-     * Toggles the selected class of the list item.
-     * @param {boolean} value The active state.
-     */
-    setSelected(value: boolean): void;
-    /**
-     * Attemps to toggle a checkbox or radio button within the list item if it can find one.
-     */
-    tryToggleCheckboxRadio(value?: boolean): void;
-    /** Attempts to set focus to this list item. */
-    setFocus(): void;
-    /** Returns whether the component has focus or not. */
-    hasFocus(): boolean;
-    /**
-     * Sets the role on the list item element.
-     * @param role The role.
-     */
-    setRole(role: string): void;
-    setDisabled(disabled: boolean): void;
-    setDense(dense: boolean): void;
-    setIndented(indented: boolean): void;
-    setWrap(value: boolean): void;
     /**
      * 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
+     * @returns Returns whether the list item is selected, or null otherwise.
      */
     trySelect(value: unknown): boolean | null;
-    userInteractionListener(): ReturnType<typeof createUserInteractionListener>;
+    /**
+     * Attempts to toggle a checkbox radio button, or switch within the list item if it can find one.
+     */
+    tryToggleSelectionControl(value?: boolean): void;
+    isFocused(): boolean;
+    setFocus(): void;
+    animateStateLayer(): void;
+    private _createAnchorRootElement;
+    private _createDefaultRootElement;
+    private _getParentList;
+    private _inheritParentListProps;
+    private _setRole;
 }