@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/bds-list-menu.js

@@ -0,0 +1,400 @@
+import { Host, h } from "@stencil/core";
+import { LIST_MENU_SELECTION_MODE } from "./types/enum";
+import { MENU_ROLES } from "../../../../types/index";
+import { inheritAriaAttributes, validatePropValue } from "../../../../utils/index";
+/**
+ * Container component that manages a list of menu items.
+ * It handles selection logic (single/multiple) and maintains the data state.
+ *
+ * @summary A list menu component that can contain multiple menu items and manage their selection state.
+ * @slot - Default slot for bds-list-menu-item elements.
+ *
+ * @fires bdsChange - Emitted when the selection changes, providing the current selected value(s).
+ * @fires bdsSelect - Emmited when item is selected in menu-role="menu" is clicked
+ * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
+ * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
+ */
+export class BdsListMenu {
+    constructor() {
+        // Object to store inherited aria attributes
+        this.inheritedAttributes = {};
+        /** The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'. */
+        this.selectionMode = LIST_MENU_SELECTION_MODE.SINGLE;
+        /** Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'. */
+        this.menuRole = MENU_ROLES.MENU;
+        /** Determines if the menu items have selectall/deselectall controls */
+        this.selectControls = false;
+        /** State to manage selected values */
+        this.selectedValues = [];
+    }
+    /** Verify props to be valid */
+    checkProps() {
+        validatePropValue(Object.values(MENU_ROLES), MENU_ROLES.MENU, this.el, 'menuRole');
+        validatePropValue(Object.values(LIST_MENU_SELECTION_MODE), LIST_MENU_SELECTION_MODE.SINGLE, this.el, 'selectionMode');
+    }
+    /**
+     * Retrieves the currently selected value(s) programmatically.
+     * @method getSelectedValues
+     * @returns {Promise<string | string[]>} The selected value(s) based on the 'multiple' prop.
+     */
+    async getSelectedValues() {
+        return this.isMultiple ? this.selectedValues : this.selectedValues[0];
+    }
+    /**
+     * Sets the selected values programmatically.
+     * Useful for initializing the menu from an external data source or form reset.
+     * @method setSelectedValues
+     * @param {string | string[]} values - The value or values to be marked as selected.
+     */
+    async setSelectedValues(values) {
+        if (this.isMultiple) {
+            this.selectedValues = Array.isArray(values) ? values : [values];
+        }
+        else {
+            this.selectedValues = values !== null ? [values] : [];
+        }
+        this.updateChildrenState();
+    }
+    /** Handles the click event on a menu item, updating the selection state accordingly. */
+    handleItemClick(event) {
+        const { value, selected } = event.detail;
+        if (this.menuRole === MENU_ROLES.LISTBOX) {
+            if (this.isMultiple) {
+                this.handleMultipleSelection(value, selected);
+            }
+            else {
+                this.handleSingleSelection(value, selected);
+            }
+            this.updateChildrenState(event.target);
+            this.bdsChange.emit(this.isMultiple ? this.selectedValues : this.selectedValues[0] || undefined);
+        }
+        else {
+            const itemClicked = event.target;
+            const indexItem = this.childItems.indexOf(itemClicked);
+            this.bdsSelect.emit({
+                value,
+                index: indexItem,
+                checked: itemClicked.checkable ? itemClicked.selected : false,
+                element: itemClicked,
+            });
+        }
+    }
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    componentWillLoad() {
+        this.checkProps();
+        this.initialSelectedValues();
+        this.updateActiveState();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-multiselectable']),
+        };
+    }
+    /** Get all child menu items */
+    get childItems() {
+        const items = Array.from(this.el.querySelectorAll('bds-list-menu-item'));
+        return items;
+    }
+    /** First clickable element  */
+    get firstEnabledItem() {
+        const items = this.childItems;
+        const firstEnabled = items.find(item => !item.disabled && item.variant !== 'label');
+        return firstEnabled;
+    }
+    get isMultiple() {
+        return this.selectionMode === LIST_MENU_SELECTION_MODE.MULTIPLE;
+    }
+    /** Updates the active state of the menu items based on the current selection. */
+    updateActiveState() {
+        const firstEnabled = this.firstEnabledItem;
+        const items = this.childItems;
+        const hasSelection = items.some(item => item.selected && !item.disabled);
+        if (!hasSelection && firstEnabled !== undefined) {
+            firstEnabled.setAttribute('active-item', '');
+        }
+    }
+    /** Handles selection logic for multiple selection mode. */
+    handleMultipleSelection(value, selected) {
+        this.selectedValues = selected
+            ? [...this.selectedValues, value]
+            : this.selectedValues.filter(v => v !== value);
+    }
+    /** Handles selection logic for single selection mode. */
+    handleSingleSelection(value, selected) {
+        this.selectedValues = selected ? [value] : [];
+    }
+    /** Updates the state of child menu items based on the current selection. */
+    updateChildrenState(item) {
+        const items = this.childItems;
+        items.forEach((item) => {
+            if (item.value !== undefined) {
+                const isSelected = this.selectedValues.includes(item.value);
+                item.selected = isSelected;
+                item.removeAttribute('active-item');
+            }
+        });
+        this.setActiveItem(item);
+    }
+    /** activate item based on interaction */
+    setActiveItem(lastItemInteracted) {
+        let itemToActivate;
+        if (lastItemInteracted !== undefined) {
+            itemToActivate = lastItemInteracted;
+        }
+        else if (this.selectedValues.length > 0) {
+            const selectedValue = this.selectedValues[0];
+            itemToActivate = this.childItems.find(item => item.value === selectedValue);
+        }
+        else {
+            itemToActivate = this.firstEnabledItem;
+        }
+        if (itemToActivate !== undefined) {
+            itemToActivate.setAttribute('active-item', '');
+        }
+    }
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    initialSelectedValues() {
+        const nodes = Array.from(this.el.querySelectorAll('bds-list-menu-item[selected]'));
+        if (nodes.length > 0) {
+            const initialSelected = Array.from(nodes);
+            const values = initialSelected.map(item => {
+                return item.getAttribute('value') || '';
+            });
+            this.selectedValues = this.isMultiple ? values : [values[0]];
+            this.updateChildrenState();
+        }
+    }
+    /** Handles the toggle of select/deselect all controls, updating the selection state accordingly. */
+    handleToggleSelect(selectAll) {
+        const allValues = this.childItems
+            .filter(item => !item.disabled && item.variant !== 'label' && item.value !== undefined)
+            .map(item => item.value);
+        this.selectedValues = selectAll ? allValues : [];
+        this.updateChildrenState();
+        this.bdsChange.emit(this.selectedValues);
+    }
+    /** Renders the select/deselect all controls if applicable based on the props. */
+    renderSelectControls() {
+        if (this.selectControls && this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple) {
+            return (h("div", { class: "bds-list-menu__select-controls" }, h("bds-button", { name: "Select all", variant: "plain", onBdsClick: () => this.handleToggleSelect(true) }, "Select All"), h("bds-button", { name: "Deselect all", variant: "plain", onBdsClick: () => this.handleToggleSelect(false) }, "Deselect All")));
+        }
+        return null;
+    }
+    /** Renders the component with a slot for menu items. */
+    render() {
+        const inheritedAriaAttr = this.inheritedAttributes;
+        return (h(Host, { key: '88d9e41f1116555df02ca6e883b9e50f024c69b9', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, h("slot", { key: '2f1730a1b5c456477d2b86f35b596d11e1b79f5c', name: "banner-content" }), h("div", { key: '58b6944a60ce62a8832e41a853d2621b6fc6deae', class: "bds-list-menu__header" }, h("slot", { key: '1a292f12ca27104fd0496477a051a1ad3bcec83e', name: "header-content" })), this.renderSelectControls(), h("div", { key: '9a21f481ca5a3e6b484c0bcc5501097dfceb61c3', class: "bds-list-menu__content" }, h("slot", { key: '43f684cb30333a5d571b4d05a4c8627703297473' })), h("div", { key: 'dbc3a62e055792283fef80ff4514167d079c355d', class: "bds-list-menu__footer" }, h("slot", { key: '8d504757a49bedf5a5ec150ed16ef5c9e7723ee1', name: "footer-content" }))));
+    }
+    static get is() { return "bds-list-menu"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-list-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-list-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['selectionMode']",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {
+                        "IListMenu": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::IListMenu",
+                            "referenceLocation": "IListMenu"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-mode",
+                "defaultValue": "LIST_MENU_SELECTION_MODE.SINGLE"
+            },
+            "menuRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['menuRole']",
+                    "resolved": "\"listbox\" | \"menu\"",
+                    "references": {
+                        "IListMenu": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::IListMenu",
+                            "referenceLocation": "IListMenu"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-role",
+                "defaultValue": "MENU_ROLES.MENU"
+            },
+            "selectControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['selectControls']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenu": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::IListMenu",
+                            "referenceLocation": "IListMenu"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the menu items have selectall/deselectall controls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-controls",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValues": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes, providing the current selected value(s)."
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsSelect",
+                "name": "bdsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes, providing the current selected value(s)."
+                },
+                "complexType": {
+                    "original": "ListMenuChangeDetail",
+                    "resolved": "ListMenuChangeDetail",
+                    "references": {
+                        "ListMenuChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::ListMenuChangeDetail",
+                            "referenceLocation": "ListMenuChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSelectedValues": {
+                "complexType": {
+                    "signature": "() => Promise<string | string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string | string[]>"
+                },
+                "docs": {
+                    "text": "Retrieves the currently selected value(s) programmatically.",
+                    "tags": [{
+                            "name": "method",
+                            "text": "getSelectedValues"
+                        }, {
+                            "name": "returns",
+                            "text": "The selected value(s) based on the 'multiple' prop."
+                        }]
+                }
+            },
+            "setSelectedValues": {
+                "complexType": {
+                    "signature": "(values: string | string[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "values",
+                            "type": "string | string[]",
+                            "docs": "- The value or values to be marked as selected."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the selected values programmatically.\nUseful for initializing the menu from an external data source or form reset.",
+                    "tags": [{
+                            "name": "method",
+                            "text": "setSelectedValues"
+                        }, {
+                            "name": "param",
+                            "text": "values - The value or values to be marked as selected."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectionMode",
+                "methodName": "checkProps"
+            }, {
+                "propName": "menuRole",
+                "methodName": "checkProps"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bdsSelectItem",
+                "method": "handleItemClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.js

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

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/types/enum.js

@@ -0,0 +1,4 @@
+export const LIST_MENU_SELECTION_MODE = {
+    SINGLE: 'single',
+    MULTIPLE: 'multiple',
+};

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/types/types.js

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

package/dist/collection/components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.css

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+.bds-list-item, .bds-list-item__content {
+  display: flex;
+  align-items: center;
+}
+
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-list-item {
+  width: 100%;
+  vertical-align: middle;
+  position: relative;
+  color: var(--boreal-text-default);
+  font-style: normal;
+  font-family: var(--boreal-typography-font-family-primary);
+  font-weight: var(--boreal-typography-font-weight-regular);
+}
+.bds-list-item__content {
+  justify-content: space-between;
+  flex: 1;
+  vertical-align: middle;
+  gap: var(--boreal-spacing-3xs);
+}
+.bds-list-item__content-left, .bds-list-item__content-right {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+}
+.bds-list-item__content-left__icon, .bds-list-item__content-left__text {
+  display: inline-block;
+  vertical-align: middle;
+  font-style: normal;
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-xs);
+}
+.bds-list-item__content-left__icon:not(:empty) {
+  padding-right: var(--boreal-spacing-3xs);
+}
+.bds-list-item__content [class*=bds-icon-] {
+  font-size: var(--boreal-typography-font-size-md);
+}
+.bds-list-item--button {
+  cursor: pointer;
+  padding: var(--boreal-spacing-1xs) var(--boreal-spacing-s);
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.bds-list-item--button:not(.bds-list-item--disabled):hover:not([selected]) {
+  background-color: var(--boreal-ui-default-lighter);
+  z-index: 1;
+}
+.bds-list-item--button:not(.bds-list-item--disabled):focus, .bds-list-item--button:not(.bds-list-item--disabled):focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  z-index: 1;
+}
+.bds-list-item--button:not(.bds-list-item--disabled):active, .bds-list-item--button:not(.bds-list-item--disabled).bds-list-item--state-active {
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  background-color: var(--boreal-ui-default-lighter);
+  z-index: 1;
+}
+.bds-list-item--selected {
+  background-color: var(--boreal-ui-primary-lighter);
+}
+.bds-list-item--disabled {
+  color: var(--boreal-text-disabled);
+  cursor: not-allowed;
+}
+.bds-list-item--label {
+  cursor: default;
+  padding: var(--boreal-spacing-3xs) 0;
+}
+.bds-list-item--label .bds-typography label {
+  color: var(--boreal-text-default-light);
+}