@uh-design-system/component-library 0.6.0 → 0.7.0

package/dist/collection/components/01-base-components/ds-select/ds-select.js

@@ -0,0 +1,637 @@
+import { h } from "@stencil/core";
+import { idGenerator } from "../../../utils/utils";
+import classNames from "classnames";
+const selectIdGenerator = idGenerator('ds-select');
+export class DsSelect {
+    el;
+    dsId = selectIdGenerator.next().value;
+    dsTitle = 'Default Select';
+    dsPlaceholder = 'Select an option';
+    dsVariant = 'default';
+    dsClearable = true;
+    dsDisabled = false;
+    dsInvalid = false;
+    dsErrorText = '';
+    dsIcon;
+    dsValue = null;
+    dsLoading = false;
+    dsLoadingText = 'Loading options...';
+    dsOptionsError = false;
+    dsOptionsErrorTitle = "We couldn’t load the options";
+    dsOptionsErrorText = "Try again or if the problem persists contact support.";
+    selectedOption = null;
+    isOpen = false;
+    activeIndex = null;
+    inputValidityId = `${this.dsId}-validity`;
+    dsChange;
+    connectedCallback() {
+        this.el.addEventListener('focusout', this.handleFocusOut);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+    }
+    customSelectRef;
+    nativeSelectRef;
+    handleFocusOut = (e) => {
+        const nextFocused = (e && 'relatedTarget' in e) ? e.relatedTarget : null;
+        if (this.isOpen &&
+            (!nextFocused || !this.el.contains(nextFocused))) {
+            this.isOpen = false;
+        }
+    };
+    handleOptionSelect(option) {
+        if (this.dsDisabled)
+            return;
+        this.selectedOption = option.label;
+        this.dsValue = option.dsValue;
+        this.isOpen = false;
+        this.dsChange.emit(option.dsValue);
+    }
+    selectOption(option) {
+        if (!option)
+            return;
+        if (option.dsDisabled)
+            return;
+        const labelEl = option.querySelector('.option-label');
+        let label = '';
+        if (labelEl) {
+            const descEl = labelEl.querySelector('.option-description');
+            if (descEl) {
+                label = labelEl.textContent?.replace(descEl.textContent || '', '').trim() || '';
+            }
+            else {
+                label = labelEl.textContent?.trim() || '';
+            }
+        }
+        else {
+            label = option.textContent?.trim() || '';
+        }
+        this.selectedOption = label;
+        this.dsValue = option.dsValue;
+        const options = this.getAllOptions();
+        const idx = options.findIndex(opt => String(opt.dsValue) === String(option.dsValue));
+        if (idx !== -1) {
+            this.activeIndex = idx;
+        }
+        this.isOpen = false;
+        this.dsChange.emit(option.dsValue);
+        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
+        combobox?.focus();
+    }
+    toggleDropdown() {
+        if (this.dsDisabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => {
+                const options = this.getAllOptions();
+                let focusIndex = 0;
+                if (this.dsValue) {
+                    const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+                    focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
+                }
+                else {
+                    const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+                    focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
+                }
+                this.activeIndex = focusIndex;
+                this.scrollToActiveOption();
+                const optionEls = this.el.querySelectorAll('ds-option');
+                const active = optionEls[this.activeIndex];
+                active?.focus();
+            }, 0);
+        }
+    }
+    handleClearSelection() {
+        if (this.dsDisabled)
+            return;
+        this.selectedOption = null;
+        this.dsValue = null;
+        const options = this.getAllOptions();
+        const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+        this.activeIndex = firstEnabled !== -1 ? firstEnabled : 0;
+        this.isOpen = false;
+        this.dsChange.emit(null);
+        const combobox = this.el.querySelector(`[id="${this.dsId}"]`);
+        combobox?.focus();
+    }
+    handleScroll(event) {
+        const target = event.target;
+        const isScrolledToTop = target.scrollTop === 0;
+        const isScrolledToBottom = Math.ceil(target.scrollTop + target.clientHeight) >= target.scrollHeight;
+        if (isScrolledToTop) {
+            target.classList.remove('scrolled-up');
+        }
+        else {
+            target.classList.add('scrolled-up');
+        }
+        if (isScrolledToBottom) {
+            target.classList.remove('scrolled-down');
+        }
+        else {
+            target.classList.add('scrolled-down');
+        }
+        const groups = target.querySelectorAll('.group');
+        groups.forEach((group) => {
+            const firstOption = group.querySelector('.option');
+            const groupLabel = group.querySelector('.group-label');
+            if (!firstOption || !groupLabel)
+                return;
+            const firstOptionTop = firstOption.getBoundingClientRect().top;
+            const groupLabelBottom = groupLabel.getBoundingClientRect().bottom;
+            const containerTop = target.getBoundingClientRect().top;
+            if (firstOptionTop < groupLabelBottom && containerTop < groupLabelBottom) {
+                groupLabel.classList.add('shadow');
+                firstOption.style.marginTop = `${groupLabelBottom - firstOptionTop}px`;
+            }
+            else {
+                groupLabel.classList.remove('shadow');
+                firstOption.style.marginTop = '';
+            }
+        });
+    }
+    handleKeyDown(event) {
+        if (this.isOpen) {
+            return;
+        }
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'Enter' ||
+            event.key === ' ') {
+            event.preventDefault();
+            this.isOpen = true;
+            const options = this.getAllOptions();
+            let focusIndex = 0;
+            if (this.dsValue) {
+                const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+                focusIndex = selectedIndex !== -1 ? selectedIndex : 0;
+            }
+            else {
+                const firstEnabled = options.findIndex(opt => !opt.dsDisabled);
+                focusIndex = firstEnabled !== -1 ? firstEnabled : 0;
+            }
+            this.activeIndex = focusIndex;
+            this.scrollToActiveOption();
+            setTimeout(() => {
+                const optionsList = this.el.querySelector('.options-list');
+                optionsList?.focus();
+            }, 0);
+        }
+    }
+    scrollToActiveOption() {
+        if (this.activeIndex === null)
+            return;
+        const optionsList = this.el.querySelector('.options-list');
+        const allOptions = optionsList?.querySelectorAll('.option');
+        if (!allOptions || this.activeIndex >= allOptions.length)
+            return;
+        const activeOption = allOptions[this.activeIndex];
+        if (activeOption) {
+            activeOption.focus();
+            activeOption.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    getAllOptions() {
+        return Array.from(this.el.querySelectorAll('ds-option'));
+    }
+    handleStateChange() {
+        this.updateOptionStates();
+    }
+    updateOptionStates() {
+        const options = this.getAllOptions();
+        options.forEach((opt, idx) => {
+            opt.dsActive = idx === this.activeIndex;
+            opt.dsSelected = opt.dsValue === this.dsValue;
+            if (idx === this.activeIndex) {
+                opt.setAttribute('active', '');
+            }
+            else {
+                opt.removeAttribute('active');
+            }
+            if (opt.dsValue === this.dsValue) {
+                opt.setAttribute('selected', '');
+            }
+            else {
+                opt.removeAttribute('selected');
+            }
+        });
+    }
+    renderNativeSelect() {
+        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
+        const selectId = this.dsId || `${this.inputValidityId}-select`;
+        const baseClass = 'native-select-wrapper';
+        return (h("div", null, this.dsTitle && h("label", { class: "select-title", htmlFor: selectId }, this.dsTitle), h("div", { class: classNames(`${baseClass}`, {
+                [`${baseClass}--disabled`]: this.dsDisabled,
+                [`${baseClass}--invalid`]: !!this.dsErrorText,
+            }), onClick: () => {
+                if (!this.dsDisabled) {
+                    const selectElement = this.nativeSelectRef;
+                    if (selectElement) {
+                        selectElement.focus();
+                        selectElement.click();
+                    }
+                }
+            } }, h("div", { class: "selected-text", "aria-hidden": "true" }, this.selectedOption || this.dsPlaceholder || 'Select an option'), h("select", { ref: el => this.nativeSelectRef = el, id: selectId, class: "native-select", disabled: this.dsDisabled, required: !!this.dsErrorText, "aria-describedby": ariaDescribedBy, "aria-controls": `${selectId}-listbox`, "aria-haspopup": "listbox", onInput: (event) => {
+                const target = event.target;
+                this.dsValue = target.value;
+                this.selectedOption = target.selectedOptions[0]?.textContent || '';
+                this.dsChange.emit(target.value);
+            } }, h("option", { value: "", disabled: true, selected: !this.selectedOption }, this.dsPlaceholder || 'Select an option'), h("slot", { name: "native" })), h("ds-icon", { class: "dropdown-icon", dsName: "keyboard_arrow_down" })), !!this.dsErrorText && (h("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    renderCustomSelect() {
+        const noneSelected = !this.selectedOption;
+        const selectId = this.dsId || `${this.inputValidityId}-custom-select`;
+        const labelId = `${selectId}-label`;
+        const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
+        const optionsContainerId = `ds-select-options-${selectId}`;
+        const baseClass = 'custom-select';
+        return (h("div", null, this.dsTitle && (h("div", { class: "select-title-wrapper" }, h("label", { id: labelId, class: "select-title", htmlFor: selectId, onClick: () => {
+                const customSelect = this.customSelectRef;
+                customSelect?.focus();
+                this.toggleDropdown();
+            } }, this.dsTitle))), h("div", { class: "custom-select-wrapper", style: { position: 'relative' } }, h("div", { id: selectId, ref: el => this.customSelectRef = el, class: classNames(`${baseClass}`, {
+                [`${baseClass}--open`]: this.isOpen,
+                [`${baseClass}--none-selected`]: noneSelected,
+                [`${baseClass}--disabled`]: this.dsDisabled,
+                [`${baseClass}--invalid`]: !!this.dsErrorText,
+                [`${baseClass}--has-icon`]: !!this.dsIcon,
+            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${selectId}-option-${this.activeIndex}` : undefined, onClick: () => {
+                if (!this.dsDisabled) {
+                    this.toggleDropdown();
+                }
+            }, onKeyDown: (event) => {
+                if (!this.dsDisabled) {
+                    this.handleKeyDown(event);
+                }
+            } }, h("div", { class: "selected-option" }, this.dsIcon && (h("ds-icon", { class: "placeholder-icon", dsName: this.dsIcon })), this.selectedOption || this.dsPlaceholder || 'Select an option'), this.dsClearable && this.selectedOption && !this.dsDisabled && (h("ds-button", { class: "clear-button", dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: (event) => {
+                event.stopPropagation();
+                this.handleClearSelection();
+            }, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.handleClearSelection();
+                }
+            }, "aria-label": "Clear selection" })), h("ds-icon", { class: "dropdown-icon", dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), h("div", { id: optionsContainerId, class: "options-container", onClick: (e) => {
+                const option = e.target.closest('ds-option');
+                if (option && !option.dsDisabled) {
+                    this.selectOption(option);
+                }
+            } }, h("ds-options", { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, h("slot", null)))), !!this.dsErrorText && (h("ds-input-validity", { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
+    }
+    render() {
+        return (h("div", { key: 'e5635c0348a16fe23dd8f81827f5d6aecdd21baa', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+            ? this.renderNativeSelect()
+            : this.renderCustomSelect()));
+    }
+    static get is() { return "ds-select"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsId": {
+                "type": "string",
+                "attribute": "ds-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The unique ID for the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "selectIdGenerator.next().value as string"
+            },
+            "dsTitle": {
+                "type": "string",
+                "attribute": "ds-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title or label for the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Default Select'"
+            },
+            "dsPlaceholder": {
+                "type": "string",
+                "attribute": "ds-placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text displayed when no option is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Select an option'"
+            },
+            "dsVariant": {
+                "type": "string",
+                "attribute": "ds-variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'native' | 'default'",
+                    "resolved": "\"default\" | \"native\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the variant of the select component. \"native\" uses the browser\u2019s default select, while \"default\" uses a custom implementation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "dsClearable": {
+                "type": "boolean",
+                "attribute": "ds-clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, allows the user to clear the selected option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "dsDisabled": {
+                "type": "boolean",
+                "attribute": "ds-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the select component, preventing user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsInvalid": {
+                "type": "boolean",
+                "attribute": "ds-invalid",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the select component as invalid, typically used for form validation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "attribute": "ds-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message displayed when the select component is invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dsIcon": {
+                "type": "string",
+                "attribute": "ds-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display inside the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsValue": {
+                "type": "string",
+                "attribute": "ds-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the selected option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "dsLoading": {
+                "type": "boolean",
+                "attribute": "ds-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading spinner and text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsLoadingText": {
+                "type": "string",
+                "attribute": "ds-loading-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when loading options.\nThis is only used when `dsLoading` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Loading options...'"
+            },
+            "dsOptionsError": {
+                "type": "boolean",
+                "attribute": "ds-options-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsOptionsErrorTitle": {
+                "type": "string",
+                "attribute": "ds-options-error-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"We couldn\u2019t load the options\""
+            },
+            "dsOptionsErrorText": {
+                "type": "string",
+                "attribute": "ds-options-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Try again or if the problem persists contact support.\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedOption": {},
+            "isOpen": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the selected option changes."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeIndex",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "dsValue",
+                "methodName": "handleStateChange"
+            }];
+    }
+}