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

package/dist/collection/components/forms/bds-select/bds-select.js

@@ -0,0 +1,431 @@
+import { Host, h } from "@stencil/core";
+import { createId, inheritAttributes, addElementListener, getCleanText, updateElementAttr, updateElementProp, removeElementListener, } from "../../../utils/index";
+import { Logger } from "../../../services/logger/Logger";
+/**
+ * Component representing a select dropdown, allowing users to choose an option from a list.
+ * It consists of a text field that triggers the dropdown and a list menu that contains the options.
+ * The component supports both single selection and searchable functionality.
+ *
+ * @slot field - The text field element that triggers the select dropdown. It should be a `bds-text-field` component.
+ * @slot list - The list menu element that contains the options for the select dropdown. It should be a `bds-list-menu` component.
+ */
+export class BdsSelect {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.hostForm = null;
+        /** The value of the select component. */
+        this.value = '';
+        /** Prop to define if its searchable. It allows to write and filter the options */
+        this.searchable = false;
+        /** Name to assign in form */
+        this.name = '';
+        /** The string representation of the value. */
+        this.valueString = '';
+        /** state to manage popover visibility */
+        this.popoverVisible = false;
+        /** State for id components for aria controls */
+        this.listId = `bds-select-list-${createId()}`;
+        /** Flag to suppress focus-triggered open when focus originated from a mousedown inside the component */
+        this._preventFocusOpen = false;
+        /** Listens for changes in the list menu. */
+        this.listenListMenu = (event) => {
+            event.stopPropagation();
+            if (this.bdsList !== null) {
+                const eventDetail = event.detail;
+                this._preventFocusOpen = true;
+                this.setValue(eventDetail || '');
+                void this.bdsPopover?.closePopover();
+            }
+        };
+        /** Listen clear input */
+        this.listenClearInput = () => {
+            this.setValue('');
+            this.valueString = '';
+            this.resetChildren();
+        };
+        /** Listens for changes in the text field. When is clear and input is empty, resets the child elements. */
+        this.listenField = (event) => {
+            event.stopPropagation();
+            const inputValue = event.target.value;
+            if (inputValue === '') {
+                this.resetChildren();
+                return;
+            }
+            if (!this.popoverVisible) {
+                void this.bdsPopover?.openPopover();
+            }
+            this.searcherElement(inputValue);
+        };
+        /** Listen blur input to reset on leave */
+        this.listenBlurInput = (event) => {
+            const relatedTarget = event.relatedTarget;
+            if (relatedTarget && this.el.contains(relatedTarget)) {
+                return;
+            }
+            this.resetValueField();
+            this.resetChildren();
+        };
+        /** Intercepts Tab while the popover is open and moves focus to the selected item, or first available item */
+        this.listenKeydown = (event) => {
+            const keyEvent = event;
+            if (keyEvent.key !== 'Tab' || !this.popoverVisible || this.searchable)
+                return;
+            event.preventDefault();
+            const selectedItem = this.value !== '' ? this.bdsList?.querySelector(`bds-list-menu-item[value="${this.value}"]`) : null;
+            const target = selectedItem ??
+                this.bdsList?.querySelector('bds-list-menu-item:not([disabled]):not([hidden]):not([variant="label"])');
+            target?.focus();
+        };
+        /** Sets the flag that suppresses focus-open when focus was caused by a mousedown inside the component */
+        this.listenMouseDown = () => {
+            this._preventFocusOpen = true;
+        };
+        /** Opens the popover when the searchable input receives focus from keyboard (Tab), not from click */
+        this.listenFocusInput = () => {
+            if (this._preventFocusOpen) {
+                this._preventFocusOpen = false;
+                return;
+            }
+            void this.bdsPopover?.openPopover();
+        };
+        /** Prevents bds-text-field's own valueChange from bubbling up — bds-select emits its own */
+        this.stopFieldValueChange = (event) => {
+            event.stopPropagation();
+        };
+        /** Resets component state when the parent form is reset */
+        this.listenFormReset = () => {
+            this.value = '';
+            this.valueString = '';
+            this.bdsList?.setSelectedValues('').catch(() => {
+                new Logger().warn('bds-select', 'No options available to reset the value');
+            });
+        };
+    }
+    /** Watch popover visible */
+    watchPopoverVisible(newValue) {
+        updateElementAttr(this.bdsInput, 'aria-expanded', newValue.toString());
+        updateElementAttr(this.el, 'aria-expanded', newValue.toString());
+    }
+    /** Watch value */
+    watchValue() {
+        this.loadValue();
+    }
+    /** Watch valueString */
+    watchValueString(newValue) {
+        updateElementAttr(this.bdsField, 'value', newValue);
+    }
+    /** Lifecycle method called before the component is loaded */
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this.el, ['role']),
+        };
+    }
+    /** Lifecycle method called after the component has loaded. */
+    componentDidLoad() {
+        this.hostForm = this.el.closest('form');
+        addElementListener(this.hostForm, 'reset', this.listenFormReset);
+        this.assignListeners();
+        this.loadDefaultProps();
+        this.loadValue();
+    }
+    /** Lifecycle method called when the component is disconnected from the DOM */
+    disconnectedCallback() {
+        removeElementListener(this.hostForm, 'reset', this.listenFormReset);
+        this.removeListeners();
+    }
+    /** Get for the list menu element in runtime */
+    get bdsList() {
+        if (this.el !== null) {
+            return this.el.querySelector('bds-list-menu');
+        }
+        return null;
+    }
+    /** Get for the text field element in runtime */
+    get bdsField() {
+        if (this.el !== null) {
+            return this.el.querySelector('bds-text-field');
+        }
+        return null;
+    }
+    /** Get for the input element inside the text field in runtime */
+    get bdsInput() {
+        if (this.bdsField !== null) {
+            return this.bdsField.querySelector('input');
+        }
+        return null;
+    }
+    /** Get for the popover element in runtime */
+    get bdsPopover() {
+        if (this.el !== null) {
+            return this.el.querySelector('bds-popover');
+        }
+        return null;
+    }
+    /** Assigns event listeners to the relevant elements. */
+    assignListeners() {
+        addElementListener(this.bdsList, 'bdsChange', this.listenListMenu);
+        addElementListener(this.bdsField, 'bdsClear', this.listenClearInput);
+        addElementListener(this.bdsField, 'bdsInput', this.listenField);
+        addElementListener(this.bdsField, 'valueChange', this.stopFieldValueChange);
+        addElementListener(this.bdsInput, 'blur', this.listenBlurInput);
+        addElementListener(this.bdsInput, 'keydown', this.listenKeydown);
+        if (this.searchable) {
+            addElementListener(this.bdsInput, 'focus', this.listenFocusInput);
+            addElementListener(this.el, 'mousedown', this.listenMouseDown);
+        }
+        this.listenPopOver();
+    }
+    /** Removes event listeners from the relevant elements. */
+    removeListeners() {
+        removeElementListener(this.bdsList, 'bdsChange', this.listenListMenu);
+        removeElementListener(this.bdsField, 'bdsClear', this.listenClearInput);
+        removeElementListener(this.bdsField, 'bdsInput', this.listenField);
+        removeElementListener(this.bdsField, 'valueChange', this.stopFieldValueChange);
+        removeElementListener(this.bdsInput, 'blur', this.listenBlurInput);
+        removeElementListener(this.bdsInput, 'keydown', this.listenKeydown);
+        removeElementListener(this.bdsInput, 'focus', this.listenFocusInput);
+        removeElementListener(this.el, 'mousedown', this.listenMouseDown);
+    }
+    /** Loads the default properties for the select component. */
+    loadDefaultProps() {
+        this.loadDefaultTextFieldProps();
+        this.loadDefaultListMenuProps();
+    }
+    /** load default props for textfield */
+    loadDefaultTextFieldProps() {
+        updateElementProp(this.bdsField, 'clearable', true);
+        updateElementProp(this.bdsField, 'selectable', !this.searchable);
+        updateElementProp(this.bdsField, 'iconRight', 'bds-icon-chevron-down');
+        updateElementAttr(this.bdsInput, 'role', 'combobox');
+        updateElementAttr(this.bdsInput, 'aria-haspopup', 'listbox');
+        updateElementAttr(this.bdsInput, 'aria-expanded', 'false');
+        updateElementAttr(this.bdsInput, 'aria-autocomplete', !this.searchable ? 'none' : 'list');
+        updateElementAttr(this.bdsInput, 'aria-controls', this.listId);
+    }
+    /** load default props to list menu */
+    loadDefaultListMenuProps() {
+        updateElementAttr(this.bdsList, 'menu-role', 'listbox');
+        updateElementAttr(this.bdsList, 'id', this.listId);
+    }
+    /** set value emitting event */
+    setValue(value) {
+        this.value = value;
+        this.bdsChange.emit(value);
+        this.valueChange.emit(value);
+    }
+    /** Listens for changes in the popover visibility and updates the state accordingly. */
+    listenPopOver() {
+        const popoverSettings = {
+            hideArrow: true,
+            onAfterShow: () => {
+                this.popoverVisible = true;
+                return true;
+            },
+            onAfterHide: () => {
+                this.popoverVisible = false;
+                this.resetValueField();
+                this.resetChildren();
+                return true;
+            },
+        };
+        updateElementProp(this.bdsPopover, 'floatingOptions', popoverSettings);
+    }
+    /** Resets the value field */
+    resetValueField() {
+        if (this.value === '') {
+            this.bdsField?.setAttribute('value', '');
+        }
+        else if (this.valueString !== '') {
+            this.bdsField?.setAttribute('value', this.valueString);
+        }
+    }
+    /** Searches for elements in the list menu based on the input text. */
+    searcherElement(text) {
+        const inputValue = text.toLowerCase();
+        this.bdsList?.querySelectorAll('bds-list-menu-item').forEach(option => {
+            const value = option.getAttribute('value') || '';
+            const textElement = option.querySelector('.bds-list-item__content-left__text');
+            const optionText = textElement !== null ? getCleanText(textElement) : '';
+            const isVisible = optionText.toLowerCase().includes(inputValue) || value.toLowerCase().includes(inputValue);
+            updateElementProp(option, 'hidden', !isVisible);
+            updateElementAttr(option, 'tabindex', isVisible ? '0' : '-1');
+            if (isVisible)
+                this.showParentLabel(option);
+        });
+        const visibleOptions = this.bdsList?.querySelectorAll('bds-list-menu-item:not([hidden])');
+        updateElementProp(this.bdsList, 'empty', visibleOptions?.length === 0);
+    }
+    /** Shows the parent label of a given item. */
+    showParentLabel(item) {
+        let previous = item.previousElementSibling;
+        while (previous !== null) {
+            if (previous.variant === 'label') {
+                updateElementProp(previous, 'hidden', false);
+                break;
+            }
+            previous = previous.previousElementSibling;
+        }
+    }
+    /** Resets the children elements of the list menu, making them all visible. */
+    resetChildren() {
+        this.bdsList?.querySelectorAll('bds-list-menu-item').forEach(option => {
+            updateElementProp(option, 'hidden', false);
+        });
+    }
+    /** Load value */
+    loadValue() {
+        const value = this.value;
+        if (value === '' || this.bdsList === null || this.bdsField === null) {
+            this.valueString = '';
+            this.bdsList?.setSelectedValues('').catch(() => {
+                new Logger().warn('bds-select', 'No options available to select the value');
+            });
+            return;
+        }
+        const option = this.bdsList.querySelector(`bds-list-menu-item[value="${value}"]`);
+        if (option === null)
+            return;
+        const optionText = option.querySelector('.bds-list-item__content-left__text');
+        const text = getCleanText(optionText);
+        this.bdsList
+            .setSelectedValues(value)
+            .then(() => {
+            this.valueString = text;
+            option.scrollIntoView({ block: 'nearest' });
+        })
+            .catch(() => {
+            new Logger().warn('bds-select', 'Failed to set selected value');
+        });
+    }
+    /** Main Render */
+    render() {
+        return (h(Host, { key: '03665a810a8bccc7613bb617624253edf36ba543', role: "none", ...this.inheritedAttributes }, h("slot", { key: 'dd6e528ceaf121f372ce82cc1682a676d6a5a64a', name: "field" }), h("input", { key: '4ff9a9348bac3c0a838950357523fd379e44d497', type: "hidden", value: this.value, name: this.name }), h("bds-popover", { key: '4f03fb1eb766c29ccaf26cf6450b8346d3681dc7', width: "full" }, h("slot", { key: '80e28f34ed9369a1a8f3f687dbbda40aa246e3fb', name: "list" }))));
+    }
+    static get is() { return "bds-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "searchable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prop to define if its searchable. It allows to write and filter the options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchable",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name to assign in form"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "valueString": {},
+            "popoverVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection change the value"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit value Change for vue implementation"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "popoverVisible",
+                "methodName": "watchPopoverVisible"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "valueString",
+                "methodName": "watchValueString"
+            }];
+    }
+}

package/dist/collection/components/forms/bds-slider/bds-slider.css

@@ -0,0 +1,213 @@
+@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-slider {
+  display: block;
+  width: 100%;
+  --handle-size: 16px;
+}
+.bds-slider--range .bds-slider__input {
+  pointer-events: none;
+}
+.bds-slider--tooltip {
+  margin-top: var(--boreal-spacing-xl);
+}
+.bds-slider--tooltip.bds-slider--label {
+  margin-top: var(--boreal-spacing-ml);
+}
+.bds-slider--disabled .bds-slider__tooltip {
+  display: none;
+}
+.bds-slider--disabled .bds-slider__wrapper {
+  cursor: auto;
+}
+.bds-slider--disabled .bds-slider__connect {
+  background: var(--boreal-ui-primary-light);
+}
+.bds-slider__label {
+  margin-bottom: var(--boreal-spacing-3xs);
+}
+.bds-slider__wrapper {
+  position: relative;
+  width: 100%;
+  height: var(--handle-size);
+  overflow: visible;
+  cursor: pointer;
+}
+.bds-slider__track-base {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: var(--boreal-spacing-2xs);
+  transform: translateY(-50%);
+  background: var(--boreal-base-light);
+  border-radius: var(--boreal-radius-full);
+  pointer-events: none;
+  z-index: 1;
+}
+.bds-slider__connect {
+  position: absolute;
+  top: 50%;
+  height: 4px;
+  transform: translateY(-50%);
+  background: var(--boreal-ui-primary-base);
+  border-radius: var(--boreal-radius-full);
+  pointer-events: none;
+  z-index: 2;
+}
+.bds-slider__input {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: var(--handle-size);
+  transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  pointer-events: none;
+  z-index: 5;
+}
+.bds-slider__input::-webkit-slider-runnable-track {
+  height: var(--handle-size);
+  background: transparent;
+  border: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.bds-slider__input::-webkit-slider-thumb {
+  width: var(--handle-size);
+  height: var(--handle-size);
+  margin-top: 0;
+  border-radius: var(--boreal-radius-full);
+  background: var(--boreal-ui-inverse);
+  border: var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+  cursor: grab;
+  pointer-events: auto;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.bds-slider__input::-moz-range-track {
+  height: var(--handle-size);
+  background: transparent;
+  border: none;
+}
+.bds-slider__input::-moz-range-thumb {
+  width: var(--handle-size);
+  height: var(--handle-size);
+  border-radius: var(--boreal-radius-full);
+  background: var(--boreal-ui-inverse);
+  border: var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+  cursor: grab;
+  pointer-events: auto;
+}
+.bds-slider__input:focus-visible::-webkit-slider-thumb, .bds-slider__input:active::-webkit-slider-thumb {
+  box-shadow: var(--boreal-depth-box-shadow-active);
+}
+.bds-slider__input:focus-visible::-webkit-slider-thumb .bds-slider__tooltip--active, .bds-slider__input:active::-webkit-slider-thumb .bds-slider__tooltip--active {
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+}
+.bds-slider__input:focus-visible::-moz-range-thumb, .bds-slider__input:active::-moz-range-thumb {
+  box-shadow: var(--boreal-depth-box-shadow-active);
+}
+.bds-slider__input:focus-visible::-moz-range-thumb .bds-slider__tooltip--active, .bds-slider__input:active::-moz-range-thumb .bds-slider__tooltip--active {
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+}
+.bds-slider__input:active::-webkit-slider-thumb {
+  cursor: grabbing;
+}
+.bds-slider__input:active::-moz-range-thumb {
+  cursor: grabbing;
+}
+.bds-slider__input:disabled {
+  pointer-events: none;
+}
+.bds-slider__input:disabled.bds-slider__connect {
+  background: var(--boreal-ui-disabled);
+}
+.bds-slider__input:disabled::-webkit-slider-thumb {
+  background: var(--boreal-ui-disabled);
+  border-color: var(--boreal-base-light);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.bds-slider__input:disabled::-moz-range-thumb {
+  background: var(--boreal-ui-disabled);
+  border-color: var(--boreal-base-light);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.bds-slider__pips {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: var(--boreal-spacing-2xs);
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 3;
+}
+.bds-slider__pip {
+  position: absolute;
+  top: 0;
+  width: var(--boreal-spacing-3xs);
+  height: 100%;
+  background: var(--boreal-ui-inverse);
+  transform: translateX(-50%);
+}
+.bds-slider__limits {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--boreal-spacing-3xs);
+}
+.bds-slider__tooltip {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%);
+  color: var(--boreal-text-default);
+  background: var(--boreal-ui-inverse);
+  border-radius: var(--boreal-radius-xs);
+  padding: var(--boreal-spacing-2xs) var(--boreal-spacing-2xs);
+  font-size: var(--boreal-typography-font-size-xs);
+  font-family: var(--boreal-typography-font-family-primary);
+  white-space: nowrap;
+  cursor: auto;
+  pointer-events: fill;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--boreal-layout-ml);
+  height: var(--boreal-layout-ml);
+}
+.bds-slider__tooltip--active {
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+}
+.bds-slider__tooltip--never {
+  opacity: 0;
+}
+.bds-slider__tooltip--focus {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.bds-slider__tooltip--focus.bds-slider__tooltip--visible {
+  opacity: 1;
+}