@telesign/boreal-web-components 0.1.0-alpha.4 → 0.1.0-alpha.6

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

@@ -1,4 +1,7 @@
 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.
@@ -6,36 +9,42 @@ import { Host, h } from "@stencil/core";
  * @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.
  *
- * @attr {boolean} multiple - If true, allows multiple items to be selected. Default is false (single selection).
- * @attr {string} menuRole - Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
- *
- * @property {boolean} multiple - If true, allows multiple items to be selected. Default is false (single selection).
- * @property {string} menuRole - Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
- *
- * @event bdsChange - Emitted when the selection changes, providing the current selected value(s).
+ * @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.
- *
- * @default false - By default, the menu does not allow multiple selections (single selection mode).
- * @default 'menu' - The default ARIA role for the menu is 'menu'.
- *
  */
 export class BdsListMenu {
     constructor() {
-        /** If true, allows multiple items to be selected. Default is false (single selection). */
-        this.multiple = false;
+        // 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';
+        this.menuRole = MENU_ROLES.MENU;
+        /** Determines if the menu items have selectall/deselectall controls */
+        this.selectControls = false;
+        /** is empty state item */
+        this.empty = false;
+        /** Prop to show in all items a checkbox */
+        this.checkable = false;
+        /** Prop to show empty text */
+        this.emptyText = 'No options available';
         /** 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.multiple ? this.selectedValues : this.selectedValues[0];
+        return this.isMultiple ? this.selectedValues : this.selectedValues[0];
     }
     /**
      * Sets the selected values programmatically.
@@ -44,7 +53,7 @@ export class BdsListMenu {
      * @param {string | string[]} values - The value or values to be marked as selected.
      */
     async setSelectedValues(values) {
-        if (this.multiple) {
+        if (this.isMultiple) {
             this.selectedValues = Array.isArray(values) ? values : [values];
         }
         else {
@@ -52,27 +61,45 @@ export class BdsListMenu {
         }
         this.updateChildrenState();
     }
+    /** Retrieves all child menu items. */
+    getAllItems() {
+        return Promise.resolve(this.childItems);
+    }
     /** Handles the click event on a menu item, updating the selection state accordingly. */
     handleItemClick(event) {
         const { value, selected } = event.detail;
-        if (this.menuRole === 'listbox') {
-            if (this.multiple) {
+        if (this.menuRole === MENU_ROLES.LISTBOX) {
+            if (this.isMultiple) {
                 this.handleMultipleSelection(value, selected);
             }
             else {
                 this.handleSingleSelection(value, selected);
             }
-            this.bdsChange.emit(this.multiple ? this.selectedValues : this.selectedValues[0] || undefined);
-            this.updateChildrenState();
+            this.updateChildrenState(event.target);
+            this.bdsChange.emit(this.isMultiple ? this.selectedValues : this.selectedValues[0] || undefined);
         }
         else {
-            this.bdsClicked.emit(event.target);
+            const itemClicked = event.target;
+            const indexItem = this.childItems.indexOf(itemClicked);
+            if (itemClicked.checkable)
+                itemClicked.selected = !itemClicked.selected;
+            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.setDefaultProps();
+        this.checkProps();
         this.initialSelectedValues();
         this.updateActiveState();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-multiselectable']),
+        };
     }
     /** Get all child menu items */
     get childItems() {
@@ -85,6 +112,20 @@ export class BdsListMenu {
         const firstEnabled = items.find(item => !item.disabled && item.variant !== 'label');
         return firstEnabled;
     }
+    /** Checks if the menu is in multiple selection mode */
+    get isMultiple() {
+        return this.selectionMode === LIST_MENU_SELECTION_MODE.MULTIPLE;
+    }
+    /** Send default props to items */
+    setDefaultProps() {
+        if (this.isMultiple && this.checkable) {
+            this.childItems.forEach(item => {
+                if (!item.checkable) {
+                    item.setAttribute('checkable', 'true');
+                }
+            });
+        }
+    }
     /** Updates the active state of the menu items based on the current selection. */
     updateActiveState() {
         const firstEnabled = this.firstEnabledItem;
@@ -105,20 +146,33 @@ export class BdsListMenu {
         this.selectedValues = selected ? [value] : [];
     }
     /** Updates the state of child menu items based on the current selection. */
-    updateChildrenState() {
+    updateChildrenState(item) {
         const items = this.childItems;
         items.forEach((item) => {
-            if (item.value !== undefined) {
+            if (item.value !== undefined && item.variant !== 'label') {
                 const isSelected = this.selectedValues.includes(item.value);
                 item.selected = isSelected;
-                if (isSelected)
-                    item.setAttribute('active-item', '');
-                else
-                    item.removeAttribute('active-item');
+                item.removeAttribute('active-item');
             }
         });
-        if (this.selectedValues.length === 0)
-            this.updateActiveState();
+        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() {
@@ -128,13 +182,37 @@ export class BdsListMenu {
             const values = initialSelected.map(item => {
                 return item.getAttribute('value') || '';
             });
-            this.selectedValues = this.multiple ? values : [values[0]];
+            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 empty state message if the 'empty' prop is true. */
+    renderEmptyState() {
+        if (this.empty || this.childItems.length === 0) {
+            return (h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, this.emptyText));
+        }
+        return null;
+    }
     /** Renders the component with a slot for menu items. */
     render() {
-        return (h(Host, { key: '30f57283c4f8ee82833217c0281f0df6e6126d26', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.multiple ? 'true' : 'false' }, h("slot", { key: '3d39f6022a967a57b6d95d889ad5aadd5ba7aa96' })));
+        const inheritedAriaAttr = this.inheritedAttributes;
+        return (h(Host, { key: '658fa1497aa51cd6cb8ee40a4c5306e9ef444d14', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, h("slot", { key: '7275e500cb30c352e22730963635cbfbd77d691e', name: "banner-content" }), h("div", { key: '68e1b663db8b96dc9c2aaa1d1b778e81304299ed', class: "bds-list-menu__header" }, h("slot", { key: 'cb96ac82f30b4b974312a40a7861b4bfee12382b', name: "header-content" })), this.renderSelectControls(), h("div", { key: '0e7d4b74f955eab4999e12ace25b00b521dbaa40', class: "bds-list-menu__content" }, h("slot", { key: '78402e3166d97b1d25369db7341958c1834cc30a' }), this.renderEmptyState()), h("div", { key: 'cf413da08c650accfaf7ca1cc3cbd5b246b4d977', class: "bds-list-menu__footer" }, h("slot", { key: '9636560c612bdee8f201d0b8b9a594ec32e0e44c', name: "footer-content" }))));
     }
     static get is() { return "bds-list-menu"; }
     static get originalStyleUrls() {
@@ -149,33 +227,47 @@ export class BdsListMenu {
     }
     static get properties() {
         return {
-            "multiple": {
-                "type": "boolean",
+            "selectionMode": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "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": "If true, allows multiple items to be selected. Default is false (single selection)."
+                    "text": "The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "multiple",
-                "defaultValue": "false"
+                "attribute": "selection-mode",
+                "defaultValue": "LIST_MENU_SELECTION_MODE.SINGLE"
             },
             "menuRole": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'menu' | 'listbox'",
+                    "original": "IListMenu['menuRole']",
                     "resolved": "\"listbox\" | \"menu\"",
-                    "references": {}
+                    "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,
@@ -185,9 +277,117 @@ export class BdsListMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "menu-role",
-                "defaultValue": "'menu'"
+                "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"
+            },
+            "empty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['empty']",
+                    "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": "is empty state item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "empty",
+                "defaultValue": "false"
+            },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['checkable']",
+                    "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": "Prop to show in all items a checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenu['emptyText']",
+                    "resolved": "string",
+                    "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": "Prop to show empty text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'No options available'"
             }
         };
     }
@@ -213,8 +413,8 @@ export class BdsListMenu {
                     "references": {}
                 }
             }, {
-                "method": "bdsClicked",
-                "name": "bdsClicked",
+                "method": "bdsSelect",
+                "name": "bdsSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -223,12 +423,14 @@ export class BdsListMenu {
                     "text": "Emitted when the selection changes, providing the current selected value(s)."
                 },
                 "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
+                    "original": "ListMenuChangeDetail",
+                    "resolved": "ListMenuChangeDetail",
                     "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
+                        "ListMenuChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IListMenu",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu/types/IListMenu.ts::ListMenuChangeDetail",
+                            "referenceLocation": "ListMenuChangeDetail"
                         }
                     }
                 }
@@ -285,13 +487,43 @@ export class BdsListMenu {
                             "text": "values - The value or values to be marked as selected."
                         }]
                 }
+            },
+            "getAllItems": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLBdsListMenuItemElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLBdsListMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLBdsListMenuItemElement"
+                        }
+                    },
+                    "return": "Promise<HTMLBdsListMenuItemElement[]>"
+                },
+                "docs": {
+                    "text": "Retrieves all child menu items.",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectionMode",
+                "methodName": "checkProps"
+            }, {
+                "propName": "menuRole",
+                "methodName": "checkProps"
+            }];
+    }
     static get listeners() {
         return [{
-                "name": "bdsSelect",
+                "name": "bdsSelectItem",
                 "method": "handleItemClick",
                 "target": undefined,
                 "capture": false,

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-item/bds-list-menu-item.css

@@ -10,7 +10,7 @@
 /**
  * TODO: Refactor to use styleguidelines this work as first draft
  **/
-.bds-list-item, .bds-list-item__content, .bds-list-item__content--left, .bds-list-item__content--right {
+.bds-list-item, .bds-list-item__content {
   display: flex;
   align-items: center;
 }
@@ -20,40 +20,59 @@
 * These are used across multiple components to ensure consistency in interaction feedback.
 */
 .bds-list-item {
-  font-family: var(--boreal-typography-font-family-primary);
-  align-self: stretch;
-  color: var(--boreal-text-default);
   width: 100%;
-  font-size: var(--boreal-typography-font-size-sm);
+  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);
-  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-list-item[hidden] {
+  display: none;
 }
 .bds-list-item__content {
   justify-content: space-between;
-  width: 100%;
+  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-2xs) var(--boreal-spacing-s);
+  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);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  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);
+  box-shadow: var(--boreal-depth-box-shadow-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;
+  box-shadow: var(--boreal-depth-box-shadow-active);
   background-color: var(--boreal-ui-default-lighter);
+  z-index: 1;
 }
 .bds-list-item--selected {
   background-color: var(--boreal-ui-primary-lighter);