@sekiui/elements 0.0.49 → 0.0.51

package/dist/collection/components/select/seki-select.js

@@ -0,0 +1,865 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Content containing seki-select-trigger and seki-select-content
+ */
+export class SekiSelect {
+    constructor() {
+        /** Enable multi-select mode */
+        this.multiple = false;
+        /** Placeholder text shown when no selection */
+        this.placeholder = 'Select an option';
+        /** Disable all interactions */
+        this.disabled = false;
+        /** Mark as required for form validation */
+        this.required = false;
+        /** Initial dropdown open state (uncontrolled mode) */
+        this.defaultOpen = false;
+        /** Maximum visible pills in multi-select mode */
+        this.maxVisiblePills = 3;
+        /** Preferred dropdown placement */
+        this.placement = 'bottom';
+        /** Maximum dropdown height */
+        this.maxHeight = '12.5rem';
+        // ===========================
+        // State
+        // ===========================
+        this.internalValue = '';
+        this.isOpen = false;
+        this.focusedOptionValue = null;
+        this.registeredOptions = [];
+        this.hasBeenActivated = false;
+        this.searchBuffer = '';
+        this.searchActive = false;
+        this.contentId = `select-content-${Math.random().toString(36).substr(2, 9)}`;
+        this.triggerId = `select-trigger-${Math.random().toString(36).substr(2, 9)}`;
+        this.searchTimeoutId = null;
+        this.searchDebounce = 500;
+        this.handleClickOutside = (event) => {
+            // Only close if dropdown is open
+            if (!this.isOpen) {
+                return;
+            }
+            // Check if click is outside the select component
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.handleOpenChange(false);
+            }
+        };
+        // ===========================
+        // Internal Handlers
+        // ===========================
+        this.handleValueChange = (newValue) => {
+            this.internalValue = newValue;
+            // Update controlled prop if it exists
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            // Emit change event
+            const selectedOptions = this.getSelectedOptions();
+            if (this.multiple && Array.isArray(newValue)) {
+                this.sekiChange.emit({
+                    value: newValue,
+                    options: selectedOptions,
+                });
+            }
+            else {
+                this.sekiChange.emit({
+                    value: newValue,
+                    option: selectedOptions[0],
+                });
+            }
+            // Close dropdown in single-select mode
+            if (!this.multiple) {
+                this.handleOpenChange(false);
+            }
+        };
+        this.handleOpenChange = (open) => {
+            this.isOpen = open;
+            // Update controlled prop if it exists
+            if (this.open !== undefined) {
+                this.open = open;
+            }
+            // Mark as activated when opened
+            if (open) {
+                this.hasBeenActivated = true;
+            }
+            // Emit event
+            this.sekiOpenChange.emit({ open });
+            // Validate on close if required
+            if (!open && this.required && this.hasBeenActivated) {
+                this.validateRequired();
+            }
+        };
+        this.handleOptionFocus = (value) => {
+            this.focusedOptionValue = value;
+        };
+        this.handleOptionSelect = (value) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.internalValue) ? this.internalValue : [];
+                if (currentValue.includes(value)) {
+                    // Deselect
+                    this.handleValueChange(currentValue.filter(v => v !== value));
+                }
+                else {
+                    // Select
+                    this.handleValueChange([...currentValue, value]);
+                }
+            }
+            else {
+                this.handleValueChange(value);
+            }
+        };
+        this.isValueSelected = (value) => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                return this.internalValue.includes(value);
+            }
+            return this.internalValue === value;
+        };
+        this.getSelectedOptions = () => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                return this.registeredOptions.filter(opt => this.internalValue.includes(opt.value));
+            }
+            return this.registeredOptions.filter(opt => opt.value === this.internalValue);
+        };
+        this.registerOption = (option) => {
+            this.registeredOptions = [...this.registeredOptions, option];
+        };
+        this.unregisterOption = (value) => {
+            this.registeredOptions = this.registeredOptions.filter(opt => opt.value !== value);
+        };
+        this.validateRequired = () => {
+            const isValid = this.multiple
+                ? Array.isArray(this.internalValue) && this.internalValue.length > 0
+                : Boolean(this.internalValue);
+            this.sekiValidate.emit({
+                valid: isValid,
+                errorMessage: isValid ? undefined : 'This field is required',
+            });
+        };
+        this.handleValidate = (valid, errorMessage) => {
+            this.sekiValidate.emit({ valid, errorMessage });
+        };
+    }
+    // ===========================
+    // Lifecycle
+    // ===========================
+    componentWillLoad() {
+        // Initialize internal state
+        if (this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+        else if (this.defaultValue !== undefined) {
+            this.internalValue = this.defaultValue;
+        }
+        else {
+            this.internalValue = this.multiple ? [] : '';
+        }
+        if (this.open !== undefined) {
+            this.isOpen = this.open;
+        }
+        else if (this.defaultOpen) {
+            this.isOpen = this.defaultOpen;
+        }
+        // Expose context on the element for child components
+        this.el.selectContext = this.selectContext;
+    }
+    componentDidLoad() {
+        // Expose context on the element for child components
+        this.el.selectContext = this.selectContext;
+        // Add click-outside listener
+        this.clickOutsideListener = this.handleClickOutside.bind(this);
+        document.addEventListener('click', this.clickOutsideListener, true);
+    }
+    componentDidRender() {
+        // Update context reference after each render
+        this.el.selectContext = this.selectContext;
+    }
+    disconnectedCallback() {
+        // Clean up click-outside listener
+        if (this.clickOutsideListener) {
+            document.removeEventListener('click', this.clickOutsideListener, true);
+        }
+    }
+    handleValuePropChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+        this.updateContextOnElement();
+    }
+    handleOpenPropChange(newOpen) {
+        if (newOpen !== undefined) {
+            this.isOpen = newOpen;
+        }
+        this.updateContextOnElement();
+    }
+    handleIsOpenChange() {
+        this.updateContextOnElement();
+    }
+    handleInternalValueChange() {
+        this.updateContextOnElement();
+    }
+    updateContextOnElement() {
+        this.el.selectContext = this.selectContext;
+    }
+    // ===========================
+    // Methods
+    // ===========================
+    /** Programmatically open the dropdown */
+    async openDropdown() {
+        this.handleOpenChange(true);
+    }
+    /** Programmatically close the dropdown */
+    async closeDropdown() {
+        this.handleOpenChange(false);
+    }
+    /** Focus the trigger element */
+    async focusTrigger() {
+        // Implementation will focus the trigger
+    }
+    /** Clear all selections */
+    async clearSelection() {
+        this.handleValueChange(this.multiple ? [] : '');
+    }
+    /** Handle keyboard navigation (arrow keys, typeahead, etc.) */
+    async handleKeyboard(event) {
+        if (!this.isOpen) {
+            if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.handleOpenChange(true);
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextOption();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPreviousOption();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.focusedOptionValue !== null) {
+                    this.handleOptionSelect(this.focusedOptionValue);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.handleOpenChange(false);
+                break;
+            case ' ':
+                // Typeahead search
+                event.preventDefault();
+                this.addToSearchBuffer(' ');
+                break;
+            default:
+                // Single character typeahead
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    event.preventDefault();
+                    this.addToSearchBuffer(event.key);
+                }
+                break;
+        }
+    }
+    focusNextOption() {
+        if (this.registeredOptions.length === 0)
+            return;
+        let nextIndex = 0;
+        if (this.focusedOptionValue !== null) {
+            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
+            nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, this.registeredOptions.length - 1) : 0;
+        }
+        const nextOption = this.registeredOptions[nextIndex];
+        if (nextOption && !nextOption.disabled) {
+            this.handleOptionFocus(nextOption.value);
+        }
+    }
+    focusPreviousOption() {
+        if (this.registeredOptions.length === 0)
+            return;
+        let prevIndex = this.registeredOptions.length - 1;
+        if (this.focusedOptionValue !== null) {
+            const currentIndex = this.registeredOptions.findIndex(opt => opt.value === this.focusedOptionValue);
+            prevIndex = currentIndex > 0 ? currentIndex - 1 : this.registeredOptions.length - 1;
+        }
+        const prevOption = this.registeredOptions[prevIndex];
+        if (prevOption && !prevOption.disabled) {
+            this.handleOptionFocus(prevOption.value);
+        }
+    }
+    addToSearchBuffer(char) {
+        this.searchBuffer += char;
+        this.searchActive = true;
+        // Clear existing timeout
+        if (this.searchTimeoutId !== null) {
+            clearTimeout(this.searchTimeoutId);
+        }
+        // Find first option matching the buffer
+        const matchingOption = this.registeredOptions.find(opt => !opt.disabled && opt.label.toLowerCase().startsWith(this.searchBuffer.toLowerCase()));
+        if (matchingOption) {
+            this.handleOptionFocus(matchingOption.value);
+        }
+        // Reset buffer after debounce
+        this.searchTimeoutId = window.setTimeout(() => {
+            this.searchBuffer = '';
+            this.searchActive = false;
+        }, this.searchDebounce);
+    }
+    // Context to provide to children
+    get selectContext() {
+        return {
+            value: this.internalValue,
+            multiple: this.multiple,
+            open: this.isOpen,
+            disabled: this.disabled,
+            required: this.required,
+            focusedOptionValue: this.focusedOptionValue,
+            contentId: this.contentId,
+            triggerId: this.triggerId,
+            ariaLabel: this.ariaLabel,
+            ariaLabelledby: this.ariaLabelledby,
+            ariaDescribedby: this.ariaDescribedby,
+            onValueChange: this.handleValueChange,
+            onOpenChange: this.handleOpenChange,
+            onOptionFocus: this.handleOptionFocus,
+            onOptionSelect: this.handleOptionSelect,
+            isValueSelected: this.isValueSelected,
+            getSelectedOptions: this.getSelectedOptions,
+            registerOption: this.registerOption,
+            unregisterOption: this.unregisterOption,
+        };
+    }
+    // ===========================
+    // Render
+    // ===========================
+    render() {
+        return (h(Host, { key: '7b85ab6beecb3d69f522a2362e47905afb4c2cfa' }, h("slot", { key: 'dd239306507d718a70dd508c00e871914eecacec' }), this.name && this.renderHiddenNativeElement()));
+    }
+    renderHiddenNativeElement() {
+        if (this.multiple) {
+            return (h("select", { class: "select-native", name: this.name, multiple: true, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1 }, Array.isArray(this.internalValue) &&
+                this.internalValue.map(val => (h("option", { value: val, selected: true }, val)))));
+        }
+        else {
+            return (h("input", { type: "hidden", class: "select-native", name: this.name, value: this.internalValue, required: this.required, disabled: this.disabled }));
+        }
+    }
+    static get is() { return "seki-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | number | string | undefined",
+                    "references": {
+                        "SelectValue": {
+                            "location": "import",
+                            "path": "../../utils/select",
+                            "id": "src/utils/select/index.ts::SelectValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected value (controlled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectValue",
+                    "resolved": "(string | number)[] | number | string | undefined",
+                    "references": {
+                        "SelectValue": {
+                            "location": "import",
+                            "path": "../../utils/select",
+                            "id": "src/utils/select/index.ts::SelectValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial selected value (uncontrolled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable multi-select mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when no selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select an option'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable all interactions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark as required for form validation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Control dropdown open state (controlled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial dropdown open state (uncontrolled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "maxVisiblePills": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum visible pills in multi-select mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible-pills",
+                "defaultValue": "3"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element that labels this select"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
+            "ariaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element that describes this select"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-describedby"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "SelectPlacement": {
+                            "location": "import",
+                            "path": "../../utils/select",
+                            "id": "src/utils/select/index.ts::SelectPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred dropdown placement"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum dropdown height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "'12.5rem'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "isOpen": {},
+            "focusedOptionValue": {},
+            "registeredOptions": {},
+            "hasBeenActivated": {},
+            "searchBuffer": {},
+            "searchActive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiChange",
+                "name": "sekiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selected value changes"
+                },
+                "complexType": {
+                    "original": "SelectChangeEventDetail",
+                    "resolved": "SelectChangeEventDetail",
+                    "references": {
+                        "SelectChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/select",
+                            "id": "src/utils/select/index.ts::SelectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiOpenChange",
+                "name": "sekiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when dropdown open state changes"
+                },
+                "complexType": {
+                    "original": "SelectOpenChangeEventDetail",
+                    "resolved": "SelectOpenChangeEventDetail",
+                    "references": {
+                        "SelectOpenChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/select",
+                            "id": "src/utils/select/index.ts::SelectOpenChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiValidate",
+                "name": "sekiValidate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when validation state changes"
+                },
+                "complexType": {
+                    "original": "SelectValidateEventDetail",
+                    "resolved": "SelectValidateEventDetail",
+                    "references": {
+                        "SelectValidateEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/select",
+                            "id": "src/utils/select/index.ts::SelectValidateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically open the dropdown",
+                    "tags": []
+                }
+            },
+            "closeDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the dropdown",
+                    "tags": []
+                }
+            },
+            "focusTrigger": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the trigger element",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all selections",
+                    "tags": []
+                }
+            },
+            "handleKeyboard": {
+                "complexType": {
+                    "signature": "(event: KeyboardEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "event",
+                            "type": "KeyboardEvent",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Handle keyboard navigation (arrow keys, typeahead, etc.)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValuePropChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "handleIsOpenChange"
+            }, {
+                "propName": "internalValue",
+                "methodName": "handleInternalValueChange"
+            }];
+    }
+}