@momentum-design/components 0.104.17 → 0.105.0

package/dist/components/listbox/index.d.ts

@@ -0,0 +1,7 @@
+import ListBox from './listbox.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-listbox']: ListBox;
+    }
+}
+export default ListBox;

package/dist/components/listbox/index.js

@@ -0,0 +1,4 @@
+import ListBox from './listbox.component';
+import { TAG_NAME } from './listbox.constants';
+ListBox.register(TAG_NAME);
+export default ListBox;

package/dist/components/listbox/listbox.component.d.ts

@@ -0,0 +1,94 @@
+import { CSSResult, PropertyValues } from 'lit';
+import type Option from '../option';
+import { Component } from '../../models';
+declare const ListBox_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
+/**
+ * listbox component presents a list of options and allows a user to select one of them.
+ *
+ * Notes:
+ * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.
+ * - this component has name and value attributes and also emits change event,
+ *   but it is not a form control (yet).
+ *
+ * @dependency mdc-list
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-option
+ * @dependency mdc-optgroup
+ *
+ * @tagname mdc-listbox
+ *
+ * @cssproperty --mdc-listbox-max-height - max height of the listbox
+ *
+ * @slot default - This is a default/unnamed slot, where options and optgroups are placed
+ *
+ * @csspart container - The container of the listbox
+ *
+ * @event change - (React: onChange) This event is emitted when the selected item changed
+ */
+declare class ListBox extends ListBox_base {
+    /**
+     * According to WCAG this is the expected behavior for listbox
+     * https://www.w3.org/WAI/ARIA/apg/practices/listbox
+     * @internal
+     */
+    protected loop: boolean;
+    /**
+     * The name attribute is used to identify the listbox
+     */
+    name?: undefined | string;
+    /**
+     * The value attribute is used to represent the last selected option's value in the listbox.
+     */
+    value?: undefined | string;
+    /** @internal */
+    selectedOption?: Option | null;
+    /** @internal */
+    private itemsStore;
+    constructor();
+    connectedCallback(): void;
+    /** @internal */
+    private handleModifiedEvent;
+    /**
+     * If nothing is selected anymore, clear the value
+     * @internal
+     */
+    private handleNoSelection;
+    /** @internal */
+    private handleDestroyEvent;
+    /** @internal */
+    protected get navItems(): HTMLElement[];
+    /** @internal */
+    private isValidItem;
+    /** @internal */
+    private handleClick;
+    /** @internal */
+    private getFirstSelectedOption;
+    /**
+     * Handles the updated lifecycle event.
+     *
+     * @param changedProperties - The properties that have changed since the last update.
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * When an option is selected, this method updates local and options' DOM state and fires the change event.
+     *
+     * @param option - The option element in DOM which gets selected.
+     * @param fireEvent - A boolean flag to indicate whether to fire the change event or not.
+     * @param updateOptions - Whether update the other options or not
+     */
+    private setSelectedOption;
+    /**
+     * Update all options selection state in the DDM.
+     *
+     * @param selectedOption - The option which gets selected
+     */
+    private updateSelectedInChildOptions;
+    /**
+     * Dispatch change event when an option is selected.
+     */
+    private fireEvents;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default ListBox;

package/dist/components/listbox/listbox.component.js

@@ -0,0 +1,198 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import List from '../list';
+import { TAG_NAME as OPTION_TAGNAME } from '../option/option.constants';
+import { ROLE } from '../../utils/roles';
+import { CaptureDestroyEventForChildElement } from '../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement';
+import { ListNavigationMixin } from '../../utils/mixins/ListNavigationMixin';
+import { Component } from '../../models';
+import { ElementStore } from '../../utils/controllers/ElementStore';
+import styles from './listbox.styles';
+/**
+ * listbox component presents a list of options and allows a user to select one of them.
+ *
+ * Notes:
+ * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.
+ * - this component has name and value attributes and also emits change event,
+ *   but it is not a form control (yet).
+ *
+ * @dependency mdc-list
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-option
+ * @dependency mdc-optgroup
+ *
+ * @tagname mdc-listbox
+ *
+ * @cssproperty --mdc-listbox-max-height - max height of the listbox
+ *
+ * @slot default - This is a default/unnamed slot, where options and optgroups are placed
+ *
+ * @csspart container - The container of the listbox
+ *
+ * @event change - (React: onChange) This event is emitted when the selected item changed
+ */
+class ListBox extends ListNavigationMixin(CaptureDestroyEventForChildElement(Component)) {
+    constructor() {
+        super();
+        /**
+         * According to WCAG this is the expected behavior for listbox
+         * https://www.w3.org/WAI/ARIA/apg/practices/listbox
+         * @internal
+         */
+        this.loop = false;
+        /**
+         * The name attribute is used to identify the listbox
+         */
+        this.name = undefined;
+        /**
+         * The value attribute is used to represent the last selected option's value in the listbox.
+         */
+        this.value = undefined;
+        /** @internal */
+        this.itemsStore = new ElementStore(this, {
+            isValidItem: this.isValidItem,
+        });
+        /** @internal */
+        this.handleDestroyEvent = () => {
+            this.handleNoSelection();
+        };
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('modified', this.handleModifiedEvent);
+        this.addEventListener('destroyed', this.handleDestroyEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.LISTBOX;
+    }
+    /** @internal */
+    handleModifiedEvent(event) {
+        const item = event.target;
+        switch (event.detail.change) {
+            case 'enabled':
+                this.itemsStore.add(item);
+                break;
+            case 'disabled':
+                this.itemsStore.delete(item);
+                break;
+            case 'selected':
+                // When selection changed on the option
+                this.setSelectedOption(item, false, false);
+                break;
+            case 'unselected':
+                this.handleNoSelection();
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * If nothing is selected anymore, clear the value
+     * @internal
+     */
+    handleNoSelection() {
+        const selectedOption = this.getFirstSelectedOption();
+        if (!selectedOption) {
+            this.selectedOption = undefined;
+            this.value = undefined;
+        }
+    }
+    /** @internal */
+    get navItems() {
+        return this.itemsStore.items;
+    }
+    /** @internal */
+    isValidItem(item) {
+        return item.matches(`${OPTION_TAGNAME}:not([disabled])`);
+    }
+    /** @internal */
+    handleClick(event) {
+        const target = event.target;
+        if (this.isValidItem(target)) {
+            this.setSelectedOption(target);
+        }
+    }
+    /** @internal */
+    getFirstSelectedOption() {
+        return this.itemsStore.items.find(el => el.matches('[selected]'));
+    }
+    /**
+     * Handles the updated lifecycle event.
+     *
+     * @param changedProperties - The properties that have changed since the last update.
+     */
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            const newSelectedOption = this.itemsStore.items.find(option => option.value === this.value);
+            if (newSelectedOption) {
+                this.setSelectedOption(newSelectedOption, false);
+            }
+            else {
+                this.setSelectedOption(null, false);
+            }
+        }
+    }
+    /**
+     * When an option is selected, this method updates local and options' DOM state and fires the change event.
+     *
+     * @param option - The option element in DOM which gets selected.
+     * @param fireEvent - A boolean flag to indicate whether to fire the change event or not.
+     * @param updateOptions - Whether update the other options or not
+     */
+    setSelectedOption(option, fireEvent = true, updateOptions = true) {
+        if ((option === null || option === void 0 ? void 0 : option.disabled) || (option === null || option === void 0 ? void 0 : option.softDisabled))
+            return;
+        if (updateOptions) {
+            this.updateSelectedInChildOptions(option);
+        }
+        // set the selected option in the component state
+        this.selectedOption = option;
+        this.value = option === null || option === void 0 ? void 0 : option.value;
+        if (fireEvent) {
+            this.fireEvents();
+        }
+    }
+    /**
+     * Update all options selection state in the DDM.
+     *
+     * @param selectedOption - The option which gets selected
+     */
+    updateSelectedInChildOptions(selectedOption) {
+        this.itemsStore.items.forEach(option => option.removeAttribute('selected'));
+        selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toggleAttribute('selected', true);
+    }
+    /**
+     * Dispatch change event when an option is selected.
+     */
+    fireEvents() {
+        if (this.selectedOption) {
+            this.dispatchEvent(new Event('change', { composed: true, bubbles: true }));
+        }
+    }
+    render() {
+        return html `<slot part="container"></slot>`;
+    }
+}
+ListBox.styles = [...List.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ListBox.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ListBox.prototype, "value", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ListBox.prototype, "selectedOption", void 0);
+export default ListBox;

package/dist/components/listbox/listbox.constants.d.ts

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-listbox";
+export { TAG_NAME };

package/dist/components/listbox/listbox.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('listbox');
+export { TAG_NAME };

package/dist/components/listbox/listbox.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/listbox/listbox.styles.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-listbox-max-height: auto;
+
+    height: inherit;
+    width: inherit;
+
+    overflow-y: scroll;
+    max-height: var(--mdc-listbox-max-height);
+
+    /* prevent focus ring clipping */
+    padding: 0.25rem;
+  }
+
+  ::slotted(mdc-option) {
+    width: 100%;
+  }
+`;
+export default [styles];

package/dist/components/listbox/listbox.types.d.ts

@@ -0,0 +1,7 @@
+import { OverrideEventTarget } from '../../utils/types';
+import type ListBox from './listbox.component';
+export type ListBoxChangeEvent = OverrideEventTarget<Event, ListBox>;
+interface Events {
+    onChangeEvent: ListBoxChangeEvent;
+}
+export type { Events };

package/dist/components/listbox/listbox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/listitem/listitem.component.d.ts

@@ -3,7 +3,7 @@ import { Component } from '../../models';
 import type { PopoverPlacement } from '../popover/popover.types';
 import type { TextType } from '../text/text.types';
 import { ListItemVariants } from './listitem.types';
-declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
+declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Component;
 /**
  * mdc-listitem component is used to display a label with different types of controls.
  * There can be three types of controls, a radio button, a checkbox on the
@@ -117,7 +117,6 @@ declare class ListItem extends ListItem_base {
     tooltipPlacement: PopoverPlacement;
     constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
      * Fires the click event when the enter or space key is pressed down.
      * This behavior is similar to a button click and key interaction.

package/dist/components/listitem/listitem.component.js

@@ -16,6 +16,7 @@ import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
+import { LifeCycleMixin } from '../../utils/mixins/lifecycle/LifeCycleMixin';
 import { DEFAULTS } from './listitem.constants';
 import styles from './listitem.styles';
 import { generateListItemId, generateTooltipId } from './listitem.utils';
@@ -75,7 +76,7 @@ import { ListItemEventManager } from './listitem.events';
  * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)
  * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)
  */
-class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
+class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
     constructor() {
         super();
         /**
@@ -101,11 +102,6 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         this.role = this.role || ROLE.LISTITEM;
         // Add a unique id to the listitem if it does not have one.
         this.id = this.id || generateListItemId();
-        ListItemEventManager.onCreatedListItem(this);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        ListItemEventManager.onDestroyedListItem(this);
     }
     /**
      * Fires the click event when the enter or space key is pressed down.
@@ -206,10 +202,12 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach(element => {
             if (disabled) {
                 element.setAttribute('disabled', '');
+                this.dispatchModifiedEvent('disabled');
                 ListItemEventManager.onDisableListItem(this);
             }
             else {
                 element.removeAttribute('disabled');
+                this.dispatchModifiedEvent('enabled');
                 ListItemEventManager.onEnableListItem(this);
             }
         });

package/dist/components/option/option.component.js

@@ -68,6 +68,7 @@ class Option extends FormInternalsMixin(ListItem) {
         super.update(changedProperties);
         if (changedProperties.has('selected')) {
             this.setAttribute('aria-selected', `${this.selected}`);
+            this.dispatchModifiedEvent(this.selected ? 'selected' : 'unselected');
         }
     }
     render() {