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

package/dist/esm/bds-select.entry.js

@@ -0,0 +1,392 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { i as inheritAttributes } from './attributes-U9yfbs7i.js';
+import { L as Logger } from './Logger-iq2UuV7c.js';
+import { c as createId } from './BaseAttributes-DhSchGPI.js';
+
+/**
+ * Detects whether a slot has assigned content in the host element's light DOM.
+ *
+ * Whitespace-only text nodes and comment nodes are ignored — only element nodes
+ * and non-empty text nodes are considered meaningful slot content.
+ *
+ * @param el - The host element to query.
+ * @param slotName - Named slot to check. Omit to check the default slot.
+ * @returns `true` if the slot has meaningful content, `false` otherwise.
+ */
+/**
+ * Method to return clean text from html element, removing extra spaces and line breaks.
+ * Removing tags and getting only the text content.
+ *
+ * @param el - HTML element to extract text from.
+ * @returns string with the clean text content of the element.
+ */
+function getCleanText(el) {
+    const textContent = el;
+    if (textContent !== null) {
+        return textContent.textContent?.trim() || '';
+    }
+    return '';
+}
+/**
+ * Method to update a property of an HTML element, checking if the element is not null before updating.
+ *
+ * @param el - HTML element to update.
+ * @param prop - Property name to update.
+ * @param value - Value to set for the property.
+ */
+function updateElementProp(el, prop, value) {
+    if (el !== null) {
+        el[prop] = value;
+    }
+}
+/**
+ * Method to update an attribute of an HTML element, checking if the element is not null before updating.
+ * This method is used to update attributes that are not reflected as properties in the DOM, such as ARIA attributes.
+ *
+ * @param el - HTML element to update.
+ * @param attr - Attribute name to update.
+ * @param value - Value to set for the attribute.
+ */
+function updateElementAttr(el, attr, value) {
+    if (el !== null && el !== undefined) {
+        el.setAttribute(attr, value);
+    }
+}
+/**
+ * Method to add an event listener to an HTML element, checking if the element is not null before adding the listener.
+ *
+ * @param el - HTML element to add the event listener to.
+ * @param event - Event name to listen for.
+ * @param handler - Event handler function or object to handle the event.
+ */
+function addElementListener(el, event, handler) {
+    if (el !== null && el !== undefined) {
+        el.addEventListener(event, handler);
+    }
+}
+/**
+ * Method to remove an event listener from an HTML element, checking if the element is not null before removing the listener.
+ *
+ * @param el - HTML element to remove the event listener from.
+ * @param event - Event name to stop listening for.
+ * @param handler - Event handler function or object that was used to handle the event.
+ */
+function removeElementListener(el, event, handler) {
+    if (el !== null && el !== undefined) {
+        el.removeEventListener(event, handler);
+    }
+}
+
+const bdsSelectCss = () => `@charset "UTF-8";bds-select{position:relative;display:-ms-flexbox;display:flex}bds-select .bds-list-menu{--bds-list-menu-max-width:100%}`;
+
+const BdsSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsChange = createEvent(this, "bdsChange");
+        this.valueChange = createEvent(this, "valueChange");
+        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" }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "popoverVisible": [{
+                "watchPopoverVisible": 0
+            }],
+        "value": [{
+                "watchValue": 0
+            }],
+        "valueString": [{
+                "watchValueString": 0
+            }]
+    }; }
+};
+BdsSelect.style = bdsSelectCss();
+
+export { BdsSelect as bds_select };