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

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

@@ -0,0 +1,301 @@
+import { Host, h } from "@stencil/core";
+/**
+ * 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.
+ *
+ * @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).
+ * @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;
+        /** Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'. */
+        this.menuRole = 'menu';
+        /** State to manage selected values */
+        this.selectedValues = [];
+    }
+    /**
+     * 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];
+    }
+    /**
+     * 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.multiple) {
+            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 === 'listbox') {
+            if (this.multiple) {
+                this.handleMultipleSelection(value, selected);
+            }
+            else {
+                this.handleSingleSelection(value, selected);
+            }
+            this.bdsChange.emit(this.multiple ? this.selectedValues : this.selectedValues[0] || undefined);
+            this.updateChildrenState();
+        }
+        else {
+            this.bdsClicked.emit(event.target);
+        }
+    }
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    componentWillLoad() {
+        this.initialSelectedValues();
+        this.updateActiveState();
+    }
+    /** 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;
+    }
+    /** 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() {
+        const items = this.childItems;
+        items.forEach((item) => {
+            if (item.value !== undefined) {
+                const isSelected = this.selectedValues.includes(item.value);
+                item.selected = isSelected;
+                if (isSelected)
+                    item.setAttribute('active-item', '');
+                else
+                    item.removeAttribute('active-item');
+            }
+        });
+        if (this.selectedValues.length === 0)
+            this.updateActiveState();
+    }
+    /** 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.multiple ? values : [values[0]];
+            this.updateChildrenState();
+        }
+    }
+    /** 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' })));
+    }
+    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 {
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, allows multiple items to be selected. Default is false (single selection)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "menuRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'menu' | 'listbox'",
+                    "resolved": "\"listbox\" | \"menu\"",
+                    "references": {}
+                },
+                "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'"
+            }
+        };
+    }
+    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": "bdsClicked",
+                "name": "bdsClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes, providing the current selected value(s)."
+                },
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }];
+    }
+    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 listeners() {
+        return [{
+                "name": "bdsSelect",
+                "method": "handleItemClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,71 @@
+@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, .bds-list-item__content--left, .bds-list-item__content--right {
+  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 {
+  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);
+  font-style: normal;
+  font-weight: var(--boreal-typography-font-weight-regular);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-list-item__content {
+  justify-content: space-between;
+  width: 100%;
+  gap: 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);
+  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);
+}
+.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);
+}
+.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);
+}