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

@@ -0,0 +1,482 @@
+import { Host, Mixin, h } from "@stencil/core";
+import { COMPONENT_STATES, MENU_ROLES } from "../../../../types/index";
+import { validatePropValue } from "../../../../utils/helpers/validateProps";
+import { MenuItemBehavior, WithLinks } from "../../../../mixins/index";
+import { LIST_MENU_ITEM_VARIANTS } from "./types/enum";
+import { KEYBOARD } from "../../../../utils/index";
+/**
+ * Component representing an individual item within a list menu for navigations and selection.
+ *
+ * @summary A menu item component that supports different variants, disabled state, and selection state, it also supports link behavior when the href prop is provided.
+ *
+ * @slot - Default slot for the content of the menu item.
+ *
+ * @attr {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+ * @attr {string} name - The name of the list menu item.
+ * @attr {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+ * @attr {boolean} selected - If true, the menu item is styled as selected.
+ * @attr {boolean} activeItem - If true, the menu item is styled as active.
+ * @attr {string} value - The value associated with the menu item, emitted in events when activated.\
+ * @attr {string} href - The URL for the link. If provided, the menu item will behave as a link.
+ * @attr {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+ * @attr {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+ * @attr {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+ *
+ * @property {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+ * @property {string} name - The name of the list menu item.
+ * @property {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+ * @property {boolean} selected - If true, the menu item is styled as selected.
+ * @property {boolean} activeItem - If true, the menu item is styled as active.
+ * @property {string} value - The value associated with the menu item, emitted in events when activated.
+ * @property {string} href - The URL for the link. If provided, the menu item will behave as a link.
+ * @property {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+ * @property {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+ * @property {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+ *
+ * @default 'button' - The default variant for the menu item is 'button', which is a standard clickable item.
+ * @default '' - By default, the name of the menu item is an empty string.
+ * @default false - By default, the menu item is not disabled and is interactive.
+ * @default false - By default, the menu item is not selected.
+ * @default false - By default, the menu item is not active.
+ * @default '' - By default, the value of the menu item is an empty string.
+ * @default '' - By default, the href is an empty string, meaning the menu item will not behave as a link.
+ * @default false - By default, the newTab property is false, meaning links will open in the same tab.
+ * @default false - By default, the downloadable property is false, meaning links will not be treated as download links.
+ * @default '' - By default, the filename is an empty string, meaning no suggested filename for downloads.
+ */
+export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
+    constructor() {
+        /**
+         * Defines the visual style of the list menu item.
+         * - 'button': A standard clickable item.
+         * - 'label': A non-interactive label, typically used for grouping items.
+         */
+        this.variant = LIST_MENU_ITEM_VARIANTS.BUTTON;
+        /** The name of the list menu item */
+        this.name = '';
+        /** Disabled state item */
+        this.disabled = false;
+        /** Selected item state */
+        this.selected = false;
+        /** Value associated with the menu item */
+        this.value = '';
+        /** Checkable state item, if is activated should be visible a checkbox */
+        this.checkable = false;
+        /** Active state item */
+        this.activeItem = false;
+        /** Link behavior props */
+        this.href = '';
+        /** Opens the link in a new tab if true */
+        this.newTab = false;
+        /** Makes the link downloadable if true */
+        this.download = '';
+        /** State to manage click and keyboard interaction states */
+        this.currentState = COMPONENT_STATES.DEFAULT;
+        /** Event to notify when the menu item is clicked */
+        this.handleClick = (e) => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            e.stopPropagation();
+            if (this.isLink) {
+                this.handleLinkClick(e);
+                return;
+            }
+            if (this.checkable && this.parentRole !== MENU_ROLES.LISTBOX)
+                this.selected = !this.selected;
+            this.bdsSelectItem.emit({
+                value: this.value,
+                selected: !this.selected,
+            });
+        };
+        /** Event to handle keydown navigation and trigger click */
+        this.handleKeyDown = (e) => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            this.handleKeyDownLogic(e, () => this.handleClick(e));
+            // If the item is a link, we dont activate this animation
+            if (!this.isLink || this.linkAttributes.download !== undefined) {
+                this.currentState =
+                    e.key === KEYBOARD.Enter || e.key === KEYBOARD.Space ? COMPONENT_STATES.ACTIVE : this.currentState;
+            }
+        };
+        /** Event to handle keyup navigation and reset active state */
+        this.handleKeyUp = () => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            this.currentState = COMPONENT_STATES.DEFAULT;
+        };
+        super();
+    }
+    checkPropsVariant() {
+        validatePropValue(Object.values(LIST_MENU_ITEM_VARIANTS), LIST_MENU_ITEM_VARIANTS.BUTTON, this.el, 'variant');
+    }
+    /** Lifecycle method called before the component is loaded */
+    componentWillLoad() {
+        this.checkPropsVariant();
+    }
+    /** Improve aria resolve for checkable items */
+    get menuItemRoleExtended() {
+        if (!this.checkable)
+            return this.menuItemRole;
+        if (this.parentRole === 'listbox')
+            return 'checkbox';
+        return 'menuitemcheckbox';
+    }
+    /** Checks if the variant is a label */
+    get isLabelVariant() {
+        return this.variant === LIST_MENU_ITEM_VARIANTS.LABEL;
+    }
+    /** Returns the class map for the list menu item */
+    get classMap() {
+        return {
+            'bds-list-item': true,
+            'bds-list-item--disabled': this.disabled,
+            'bds-list-item--selected': this.selected,
+            [`bds-list-item--state-${this.currentState}`]: true,
+            [`bds-list-item--${this.variant}`]: true,
+        };
+    }
+    /** Return the render for the label variant of the list menu item */
+    renderTypeLabel() {
+        return (h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, h("slot", { name: "left-content" }), " ", h("slot", null)));
+    }
+    renderCheckbox() {
+        if (!this.checkable)
+            return null;
+        return (h("bds-checkbox", { checked: this.selected, disabled: this.disabled, name: `checkbox-${this.value}`, tabindex: "-1", style: { pointerEvents: 'none' }, inert: true }));
+    }
+    /** Return the render for the button variant of the list menu item */
+    renderTypeButton() {
+        return (h("div", { class: "bds-list-item__content" }, h("div", { class: "bds-list-item__content-left" }, this.renderCheckbox(), h("span", { class: "bds-list-item__content-left__icon" }, h("slot", { name: "left-content" })), h("span", { class: "bds-list-item__content-left__text" }, h("slot", null))), h("div", { class: "bds-list-item__content-right" }, h("slot", { name: "right-content" }))));
+    }
+    /** Main render */
+    render() {
+        let renderItem = this.renderTypeButton();
+        if (this.isLabelVariant)
+            renderItem = this.renderTypeLabel();
+        const linkAttributes = this.isLink ? { ...this.linkAttributes, tabindex: this.activeItem ? 0 : -1 } : {};
+        return (h(Host, { key: '0882d4cb677f6621518113c48e92d7e94cb71916', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRoleExtended, "aria-selected": !this.checkable ? this.ariaSelected : false, "aria-checked": this.checkable ? this.ariaSelected : undefined, ...linkAttributes, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, renderItem));
+    }
+    static get is() { return "bds-list-menu-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-list-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-list-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['variant']",
+                    "resolved": "\"button\" | \"label\"",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the visual style of the list menu item.\n- 'button': A standard clickable item.\n- 'label': A non-interactive label, typically used for grouping items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "LIST_MENU_ITEM_VARIANTS.BUTTON"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['name']",
+                    "resolved": "string",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the list menu item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "IListMenuItem['selected']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected item state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['value']",
+                    "resolved": "string",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value associated with the menu item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "checkable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['checkable']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkable state item, if is activated should be visible a checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checkable",
+                "defaultValue": "false"
+            },
+            "activeItem": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['activeItem']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active state item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active-item",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['href']",
+                    "resolved": "string",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link behavior props"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "newTab": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['newTab']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opens the link in a new tab if true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "new-tab",
+                "defaultValue": "false"
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IListMenuItem['download']",
+                    "resolved": "string",
+                    "references": {
+                        "IListMenuItem": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItem",
+                            "referenceLocation": "IListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the link downloadable if true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "download",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsSelectItem",
+                "name": "bdsSelectItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event handler for activation"
+                },
+                "complexType": {
+                    "original": "IListMenuItemEvent",
+                    "resolved": "IListMenuItemEvent",
+                    "references": {
+                        "IListMenuItemEvent": {
+                            "location": "import",
+                            "path": "./types/IListMenuItem",
+                            "id": "src/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.ts::IListMenuItemEvent",
+                            "referenceLocation": "IListMenuItemEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "checkPropsVariant"
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,4 @@
+export const LIST_MENU_ITEM_VARIANTS = {
+    LABEL: 'label',
+    BUTTON: 'button',
+};

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

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

package/dist/collection/components/actions/bds-toggle/bds-toggle.css

@@ -0,0 +1,120 @@
+@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
+ **/
+/**
+* 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-toggle {
+  font-family: var(--boreal-typography-font-family-primary);
+  display: inline-block;
+}
+.bds-toggle__container {
+  display: flex;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+  outline: none;
+  width: max-content;
+}
+.bds-toggle__container:focus {
+  outline: none;
+}
+.bds-toggle__container--inverse {
+  flex-direction: row-reverse;
+}
+.bds-toggle:active, .bds-toggle:focus-visible {
+  outline: none;
+}
+.bds-toggle:active .bds-toggle__input:not([disabled]) + .bds-toggle__slider, .bds-toggle:focus-visible .bds-toggle__input:not([disabled]) + .bds-toggle__slider {
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-toggle .bds-toggle__input:active:not([disabled]) + .bds-toggle__slider,
+.bds-toggle .bds-toggle__input:focus-visible:not([disabled]) + .bds-toggle__slider {
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-toggle:hover:not(:active):not([checked]):not([disabled]) .bds-toggle__slider, .bds-toggle:hover:not(:active):focus-within:not([checked]) .bds-toggle__slider {
+  box-shadow: 0 1px 2px 0 var(--boreal-stroke-default-light);
+}
+.bds-toggle__switch {
+  position: relative;
+  display: inline-block;
+  width: var(--boreal-spacing-3xl);
+  height: var(--boreal-spacing-l);
+}
+.bds-toggle__input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.bds-toggle__input:not(:checked) + .bds-toggle__slider {
+  border: 1px solid var(--boreal-stroke-default-light);
+}
+.bds-toggle__input:checked + .bds-toggle__slider {
+  background-color: var(--boreal-ui-primary-base);
+}
+.bds-toggle__input:checked + .bds-toggle__slider::before {
+  -webkit-transform: translateX(var(--boreal-spacing-l));
+  -ms-transform: translateX(var(--boreal-spacing-l));
+  transform: translateX(var(--boreal-spacing-l));
+}
+.bds-toggle__input:disabled + .bds-toggle__slider {
+  background-color: var(--boreal-ui-disabled);
+  cursor: default;
+}
+.bds-toggle__input:disabled + .bds-toggle__slider::before {
+  background-color: var(--boreal-icon-default-light);
+}
+.bds-toggle__input:disabled:checked + .bds-toggle__slider {
+  background-color: var(--boreal-ui-primary-light);
+}
+.bds-toggle__input:disabled:checked + .bds-toggle__slider::before {
+  background-color: var(--boreal-icon-inverse);
+}
+.bds-toggle__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--boreal-ui-base-light);
+  transition: all 0.4s, border-color 0s;
+}
+.bds-toggle__slider::before {
+  position: absolute;
+  content: "";
+  height: var(--boreal-typography-font-size-md);
+  width: var(--boreal-typography-font-size-md);
+  left: var(--boreal-spacing-2xs);
+  background-color: var(--boreal-text-inverse);
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  transition: 0.3s;
+}
+.bds-toggle__slider--round {
+  border-radius: var(--boreal-radius-m);
+}
+.bds-toggle__slider--round::before {
+  border-radius: var(--boreal-radius-full);
+}
+.bds-toggle__label {
+  font-size: var(--boreal-typography-font-size-sm);
+  color: var(--boreal-text-default);
+}
+.bds-toggle__helper-text {
+  display: flex;
+  position: relative;
+  color: var(--boreal-text-default-light);
+  font-size: var(--boreal-typography-font-size-xs);
+  margin-top: var(--boreal-spacing-2xs);
+}