snice 2.1.5 → 2.2.0

package/dist/components/select/snice-select.js

@@ -0,0 +1,864 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, queryAll, ready, dispose, on, watch, dispatch } from 'snice';
+import './snice-option.js';
+
+var css = '';
+
+let SniceSelect = (() => {
+    let _classDecorators = [element('snice-select')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _multiple_decorators;
+    let _multiple_initializers = [];
+    let _multiple_extraInitializers = [];
+    let _searchable_decorators;
+    let _searchable_initializers = [];
+    let _searchable_extraInitializers = [];
+    let _clearable_decorators;
+    let _clearable_initializers = [];
+    let _clearable_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _maxHeight_decorators;
+    let _maxHeight_initializers = [];
+    let _maxHeight_extraInitializers = [];
+    let _trigger_decorators;
+    let _trigger_initializers = [];
+    let _trigger_extraInitializers = [];
+    let _dropdown_decorators;
+    let _dropdown_initializers = [];
+    let _dropdown_extraInitializers = [];
+    let _valueDisplay_decorators;
+    let _valueDisplay_initializers = [];
+    let _valueDisplay_extraInitializers = [];
+    let _labelElement_decorators;
+    let _labelElement_initializers = [];
+    let _labelElement_extraInitializers = [];
+    let _searchInput_decorators;
+    let _searchInput_initializers = [];
+    let _searchInput_extraInitializers = [];
+    let _optionsList_decorators;
+    let _optionsList_initializers = [];
+    let _optionsList_extraInitializers = [];
+    let _nativeSelect_decorators;
+    let _nativeSelect_initializers = [];
+    let _nativeSelect_extraInitializers = [];
+    let _clearButton_decorators;
+    let _clearButton_initializers = [];
+    let _clearButton_extraInitializers = [];
+    let _arrow_decorators;
+    let _arrow_initializers = [];
+    let _arrow_extraInitializers = [];
+    let _searchContainer_decorators;
+    let _searchContainer_initializers = [];
+    let _searchContainer_extraInitializers = [];
+    let _optionElements_decorators;
+    let _optionElements_initializers = [];
+    let _optionElements_extraInitializers = [];
+    let _init_decorators;
+    let _cleanup_decorators;
+    let _handleTriggerOpen_decorators;
+    let _handleSearchEscape_decorators;
+    let _handleSearchArrowDown_decorators;
+    let _handleSearchArrowUp_decorators;
+    let _handleSearchEnter_decorators;
+    let _handleTriggerClick_decorators;
+    let _handleClearClick_decorators;
+    let _handleTagRemove_decorators;
+    let _handleOptionsClick_decorators;
+    let _handleSearchInput_decorators;
+    let _handleValueChange_decorators;
+    let _handleDisabledChange_decorators;
+    let _handleReadonlyChange_decorators;
+    let _handleInvalidChange_decorators;
+    let _handleOpenChange_decorators;
+    let _handleLabelChange_decorators;
+    let _handlePlaceholderChange_decorators;
+    let _handleRequiredChange_decorators;
+    let _handleMultipleChange_decorators;
+    let _handleNameChange_decorators;
+    let _handleClearableChange_decorators;
+    let _handleSearchableChange_decorators;
+    let _dispatchChangeEvent_decorators;
+    let _dispatchOpenEvent_decorators;
+    let _dispatchCloseEvent_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.disabled = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _disabled_initializers, false));
+            this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
+            this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+            this.readonly = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+            this.multiple = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+            this.searchable = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _searchable_initializers, false));
+            this.clearable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _clearable_initializers, false));
+            this.open = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _open_initializers, false));
+            this.size = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.name = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _name_initializers, ''));
+            this.value = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''));
+            this.label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, ''));
+            this.placeholder = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _placeholder_initializers, 'Select an option'));
+            this.maxHeight = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _maxHeight_initializers, '200px'));
+            // Options will be read from child snice-option elements
+            this.options = (__runInitializers(this, _maxHeight_extraInitializers), []);
+            this.trigger = __runInitializers(this, _trigger_initializers, void 0);
+            this.dropdown = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _dropdown_initializers, void 0));
+            this.valueDisplay = (__runInitializers(this, _dropdown_extraInitializers), __runInitializers(this, _valueDisplay_initializers, void 0));
+            this.labelElement = (__runInitializers(this, _valueDisplay_extraInitializers), __runInitializers(this, _labelElement_initializers, void 0));
+            this.searchInput = (__runInitializers(this, _labelElement_extraInitializers), __runInitializers(this, _searchInput_initializers, void 0));
+            this.optionsList = (__runInitializers(this, _searchInput_extraInitializers), __runInitializers(this, _optionsList_initializers, void 0));
+            this.nativeSelect = (__runInitializers(this, _optionsList_extraInitializers), __runInitializers(this, _nativeSelect_initializers, void 0));
+            this.clearButton = (__runInitializers(this, _nativeSelect_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
+            this.arrow = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _arrow_initializers, void 0));
+            this.searchContainer = (__runInitializers(this, _arrow_extraInitializers), __runInitializers(this, _searchContainer_initializers, void 0));
+            this.optionElements = (__runInitializers(this, _searchContainer_extraInitializers), __runInitializers(this, _optionElements_initializers, void 0));
+            this.filteredOptions = (__runInitializers(this, _optionElements_extraInitializers), []);
+            this.selectedValues = new Set();
+            this.focusedIndex = -1;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _required_decorators = [property({ type: Boolean, reflect: true })];
+            _invalid_decorators = [property({ type: Boolean, reflect: true })];
+            _readonly_decorators = [property({ type: Boolean, reflect: true })];
+            _multiple_decorators = [property({ type: Boolean, reflect: true })];
+            _searchable_decorators = [property({ type: Boolean, reflect: true })];
+            _clearable_decorators = [property({ type: Boolean, reflect: true })];
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _size_decorators = [property({ reflect: true })];
+            _name_decorators = [property({ reflect: true })];
+            _value_decorators = [property({ reflect: true })];
+            _label_decorators = [property({ reflect: true })];
+            _placeholder_decorators = [property({ reflect: true })];
+            _maxHeight_decorators = [property({ reflect: true, attribute: 'max-height' })];
+            _trigger_decorators = [query('.select-trigger')];
+            _dropdown_decorators = [query('.select-dropdown')];
+            _valueDisplay_decorators = [query('.select-value')];
+            _labelElement_decorators = [query('.select-label')];
+            _searchInput_decorators = [query('.select-search-input')];
+            _optionsList_decorators = [query('.select-options')];
+            _nativeSelect_decorators = [query('.select-native')];
+            _clearButton_decorators = [query('.select-clear')];
+            _arrow_decorators = [query('.select-arrow')];
+            _searchContainer_decorators = [query('.select-search')];
+            _optionElements_decorators = [queryAll('.select-option')];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _handleTriggerOpen_decorators = [on(['keydown:Enter', 'keydown:Space', 'keydown:ArrowDown', 'keydown:ArrowUp'], '.select-trigger')];
+            _handleSearchEscape_decorators = [on('keydown:Escape', '.select-search-input')];
+            _handleSearchArrowDown_decorators = [on('keydown:ArrowDown', '.select-search-input')];
+            _handleSearchArrowUp_decorators = [on('keydown:ArrowUp', '.select-search-input')];
+            _handleSearchEnter_decorators = [on('keydown:Enter', '.select-search-input')];
+            _handleTriggerClick_decorators = [on('click', '.select-trigger')];
+            _handleClearClick_decorators = [on('click', '.select-clear', { preventDefault: true, stopPropagation: true })];
+            _handleTagRemove_decorators = [on('click', '.select-tag-remove')];
+            _handleOptionsClick_decorators = [on('click', '.select-options')];
+            _handleSearchInput_decorators = [on('input', '.select-search-input')];
+            _handleValueChange_decorators = [watch('value')];
+            _handleDisabledChange_decorators = [watch('disabled')];
+            _handleReadonlyChange_decorators = [watch('readonly')];
+            _handleInvalidChange_decorators = [watch('invalid')];
+            _handleOpenChange_decorators = [watch('open')];
+            _handleLabelChange_decorators = [watch('label')];
+            _handlePlaceholderChange_decorators = [watch('placeholder')];
+            _handleRequiredChange_decorators = [watch('required')];
+            _handleMultipleChange_decorators = [watch('multiple')];
+            _handleNameChange_decorators = [watch('name')];
+            _handleClearableChange_decorators = [watch('clearable')];
+            _handleSearchableChange_decorators = [watch('searchable')];
+            _dispatchChangeEvent_decorators = [dispatch('@snice/select-change', { bubbles: true, composed: true })];
+            _dispatchOpenEvent_decorators = [dispatch('@snice/select-open', { bubbles: true, composed: true })];
+            _dispatchCloseEvent_decorators = [dispatch('@snice/select-close', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleTriggerOpen_decorators, { kind: "method", name: "handleTriggerOpen", static: false, private: false, access: { has: obj => "handleTriggerOpen" in obj, get: obj => obj.handleTriggerOpen }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchEscape_decorators, { kind: "method", name: "handleSearchEscape", static: false, private: false, access: { has: obj => "handleSearchEscape" in obj, get: obj => obj.handleSearchEscape }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchArrowDown_decorators, { kind: "method", name: "handleSearchArrowDown", static: false, private: false, access: { has: obj => "handleSearchArrowDown" in obj, get: obj => obj.handleSearchArrowDown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchArrowUp_decorators, { kind: "method", name: "handleSearchArrowUp", static: false, private: false, access: { has: obj => "handleSearchArrowUp" in obj, get: obj => obj.handleSearchArrowUp }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchEnter_decorators, { kind: "method", name: "handleSearchEnter", static: false, private: false, access: { has: obj => "handleSearchEnter" in obj, get: obj => obj.handleSearchEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleTriggerClick_decorators, { kind: "method", name: "handleTriggerClick", static: false, private: false, access: { has: obj => "handleTriggerClick" in obj, get: obj => obj.handleTriggerClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleClearClick_decorators, { kind: "method", name: "handleClearClick", static: false, private: false, access: { has: obj => "handleClearClick" in obj, get: obj => obj.handleClearClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleTagRemove_decorators, { kind: "method", name: "handleTagRemove", static: false, private: false, access: { has: obj => "handleTagRemove" in obj, get: obj => obj.handleTagRemove }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleOptionsClick_decorators, { kind: "method", name: "handleOptionsClick", static: false, private: false, access: { has: obj => "handleOptionsClick" in obj, get: obj => obj.handleOptionsClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchInput_decorators, { kind: "method", name: "handleSearchInput", static: false, private: false, access: { has: obj => "handleSearchInput" in obj, get: obj => obj.handleSearchInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleValueChange_decorators, { kind: "method", name: "handleValueChange", static: false, private: false, access: { has: obj => "handleValueChange" in obj, get: obj => obj.handleValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleReadonlyChange_decorators, { kind: "method", name: "handleReadonlyChange", static: false, private: false, access: { has: obj => "handleReadonlyChange" in obj, get: obj => obj.handleReadonlyChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleInvalidChange_decorators, { kind: "method", name: "handleInvalidChange", static: false, private: false, access: { has: obj => "handleInvalidChange" in obj, get: obj => obj.handleInvalidChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleOpenChange_decorators, { kind: "method", name: "handleOpenChange", static: false, private: false, access: { has: obj => "handleOpenChange" in obj, get: obj => obj.handleOpenChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleLabelChange_decorators, { kind: "method", name: "handleLabelChange", static: false, private: false, access: { has: obj => "handleLabelChange" in obj, get: obj => obj.handleLabelChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handlePlaceholderChange_decorators, { kind: "method", name: "handlePlaceholderChange", static: false, private: false, access: { has: obj => "handlePlaceholderChange" in obj, get: obj => obj.handlePlaceholderChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleRequiredChange_decorators, { kind: "method", name: "handleRequiredChange", static: false, private: false, access: { has: obj => "handleRequiredChange" in obj, get: obj => obj.handleRequiredChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleMultipleChange_decorators, { kind: "method", name: "handleMultipleChange", static: false, private: false, access: { has: obj => "handleMultipleChange" in obj, get: obj => obj.handleMultipleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleNameChange_decorators, { kind: "method", name: "handleNameChange", static: false, private: false, access: { has: obj => "handleNameChange" in obj, get: obj => obj.handleNameChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleClearableChange_decorators, { kind: "method", name: "handleClearableChange", static: false, private: false, access: { has: obj => "handleClearableChange" in obj, get: obj => obj.handleClearableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleSearchableChange_decorators, { kind: "method", name: "handleSearchableChange", static: false, private: false, access: { has: obj => "handleSearchableChange" in obj, get: obj => obj.handleSearchableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchOpenEvent_decorators, { kind: "method", name: "dispatchOpenEvent", static: false, private: false, access: { has: obj => "dispatchOpenEvent" in obj, get: obj => obj.dispatchOpenEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchCloseEvent_decorators, { kind: "method", name: "dispatchCloseEvent", static: false, private: false, access: { has: obj => "dispatchCloseEvent" in obj, get: obj => obj.dispatchCloseEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _invalid_decorators, { kind: "field", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _multiple_decorators, { kind: "field", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+            __esDecorate(null, null, _searchable_decorators, { kind: "field", name: "searchable", static: false, private: false, access: { has: obj => "searchable" in obj, get: obj => obj.searchable, set: (obj, value) => { obj.searchable = value; } }, metadata: _metadata }, _searchable_initializers, _searchable_extraInitializers);
+            __esDecorate(null, null, _clearable_decorators, { kind: "field", name: "clearable", static: false, private: false, access: { has: obj => "clearable" in obj, get: obj => obj.clearable, set: (obj, value) => { obj.clearable = value; } }, metadata: _metadata }, _clearable_initializers, _clearable_extraInitializers);
+            __esDecorate(null, null, _open_decorators, { kind: "field", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _maxHeight_decorators, { kind: "field", name: "maxHeight", static: false, private: false, access: { has: obj => "maxHeight" in obj, get: obj => obj.maxHeight, set: (obj, value) => { obj.maxHeight = value; } }, metadata: _metadata }, _maxHeight_initializers, _maxHeight_extraInitializers);
+            __esDecorate(null, null, _trigger_decorators, { kind: "field", name: "trigger", static: false, private: false, access: { has: obj => "trigger" in obj, get: obj => obj.trigger, set: (obj, value) => { obj.trigger = value; } }, metadata: _metadata }, _trigger_initializers, _trigger_extraInitializers);
+            __esDecorate(null, null, _dropdown_decorators, { kind: "field", name: "dropdown", static: false, private: false, access: { has: obj => "dropdown" in obj, get: obj => obj.dropdown, set: (obj, value) => { obj.dropdown = value; } }, metadata: _metadata }, _dropdown_initializers, _dropdown_extraInitializers);
+            __esDecorate(null, null, _valueDisplay_decorators, { kind: "field", name: "valueDisplay", static: false, private: false, access: { has: obj => "valueDisplay" in obj, get: obj => obj.valueDisplay, set: (obj, value) => { obj.valueDisplay = value; } }, metadata: _metadata }, _valueDisplay_initializers, _valueDisplay_extraInitializers);
+            __esDecorate(null, null, _labelElement_decorators, { kind: "field", name: "labelElement", static: false, private: false, access: { has: obj => "labelElement" in obj, get: obj => obj.labelElement, set: (obj, value) => { obj.labelElement = value; } }, metadata: _metadata }, _labelElement_initializers, _labelElement_extraInitializers);
+            __esDecorate(null, null, _searchInput_decorators, { kind: "field", name: "searchInput", static: false, private: false, access: { has: obj => "searchInput" in obj, get: obj => obj.searchInput, set: (obj, value) => { obj.searchInput = value; } }, metadata: _metadata }, _searchInput_initializers, _searchInput_extraInitializers);
+            __esDecorate(null, null, _optionsList_decorators, { kind: "field", name: "optionsList", static: false, private: false, access: { has: obj => "optionsList" in obj, get: obj => obj.optionsList, set: (obj, value) => { obj.optionsList = value; } }, metadata: _metadata }, _optionsList_initializers, _optionsList_extraInitializers);
+            __esDecorate(null, null, _nativeSelect_decorators, { kind: "field", name: "nativeSelect", static: false, private: false, access: { has: obj => "nativeSelect" in obj, get: obj => obj.nativeSelect, set: (obj, value) => { obj.nativeSelect = value; } }, metadata: _metadata }, _nativeSelect_initializers, _nativeSelect_extraInitializers);
+            __esDecorate(null, null, _clearButton_decorators, { kind: "field", name: "clearButton", static: false, private: false, access: { has: obj => "clearButton" in obj, get: obj => obj.clearButton, set: (obj, value) => { obj.clearButton = value; } }, metadata: _metadata }, _clearButton_initializers, _clearButton_extraInitializers);
+            __esDecorate(null, null, _arrow_decorators, { kind: "field", name: "arrow", static: false, private: false, access: { has: obj => "arrow" in obj, get: obj => obj.arrow, set: (obj, value) => { obj.arrow = value; } }, metadata: _metadata }, _arrow_initializers, _arrow_extraInitializers);
+            __esDecorate(null, null, _searchContainer_decorators, { kind: "field", name: "searchContainer", static: false, private: false, access: { has: obj => "searchContainer" in obj, get: obj => obj.searchContainer, set: (obj, value) => { obj.searchContainer = value; } }, metadata: _metadata }, _searchContainer_initializers, _searchContainer_extraInitializers);
+            __esDecorate(null, null, _optionElements_decorators, { kind: "field", name: "optionElements", static: false, private: false, access: { has: obj => "optionElements" in obj, get: obj => obj.optionElements, set: (obj, value) => { obj.optionElements = value; } }, metadata: _metadata }, _optionElements_initializers, _optionElements_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            // Initial render - options will be populated in @ready()
+            return /*html*/ `
+      <div class="select-wrapper">
+        <label class="select-label select-label--${this.size} ${this.required ? 'select-label--required' : ''}" part="label" ${!this.label ? 'hidden' : ''}>
+          ${this.label}
+        </label>
+        
+        <button
+          type="button"
+          class="select-trigger select-trigger--${this.size}"
+          aria-haspopup="listbox"
+          aria-expanded="false"
+          aria-label="${this.label || 'Select'}"
+          part="trigger">
+          
+          <div class="select-value" part="value">
+            <span class="select-placeholder">${this.placeholder}</span>
+          </div>
+          
+          <span class="select-icons">
+            <span class="select-clear" aria-label="Clear selection" style="display: none;">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
+              </svg>
+            </span>
+            <span class="select-arrow">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+                <path d="M6 9L1 4h10L6 9z"/>
+              </svg>
+            </span>
+          </span>
+        </button>
+        
+        <div class="select-dropdown" 
+             role="listbox" 
+             aria-label="${this.label || 'Options'}"
+             part="dropdown">
+          
+          <div class="select-search" part="search" ${!this.searchable ? 'hidden' : ''}>
+            <input
+              type="text"
+              class="select-search-input"
+              placeholder="Search..."
+              aria-label="Search options"
+              part="search-input" />
+          </div>
+          
+          <div class="select-options" part="options">
+            <!-- Options will be rendered in @ready() -->
+          </div>
+        </div>
+        
+        <!-- Hidden native select for form submission -->
+        <select
+          class="select-native"
+          name="${this.name || ''}"
+          tabindex="-1"
+          aria-hidden="true">
+          <!-- Options will be added in @ready() -->
+        </select>
+      </div>
+    `;
+        }
+        renderOptions() {
+            const options = this.searchable ? this.filteredOptions : this.options;
+            if (options.length === 0) {
+                return /*html*/ `
+        <div class="select-no-options">
+          <span class="select-no-options-text" data-search="true" ${!this.searchable || this.filteredOptions.length > 0 ? 'hidden' : ''}>No matches found</span>
+          <span class="select-no-options-text" data-search="false" ${this.searchable && this.filteredOptions.length === 0 ? 'hidden' : ''}>No options available</span>
+        </div>
+      `;
+            }
+            return options.map((opt, index) => {
+                const isSelected = this.multiple ?
+                    this.selectedValues.has(opt.value) :
+                    opt.value === this.value;
+                return /*html*/ `
+        <div class="select-option 
+          ${isSelected ? 'select-option--selected' : ''}
+          ${opt.disabled ? 'select-option--disabled' : ''}
+          ${index === this.focusedIndex ? 'select-option--focused' : ''}
+          ${opt.icon ? 'select-option--has-icon' : ''}"
+          data-value="${opt.value}"
+          role="option"
+          aria-selected="${isSelected}"
+          aria-disabled="${opt.disabled}"
+          part="option">
+          <span class="select-option-check" ${!this.multiple ? 'hidden' : ''}>
+            <span class="select-option-check-mark" ${!isSelected ? 'hidden' : ''}>✓</span>
+          </span>
+          <img class="select-option-icon" src="${opt.icon || ''}" alt="" ${!opt.icon ? 'hidden' : ''} />
+          <span class="select-option-label">${opt.label}</span>
+        </div>
+      `;
+            }).join('');
+        }
+        css() {
+            return css;
+        }
+        init() {
+            // Read options from child snice-option elements
+            this.readOptionsFromChildren();
+            // Initialize selected values
+            if (this.multiple && this.value) {
+                this.selectedValues = new Set(this.value.split(',').map(v => v.trim()));
+            }
+            // Initialize filtered options
+            this.filteredOptions = [...this.options];
+            // Set initial imperative state
+            this.updateTriggerState();
+            this.updateDropdownState();
+            this.updateNativeSelectAttributes();
+            // Now that we have options, update everything
+            this.updateDropdownContent();
+            this.updateNativeSelect();
+            this.updateValueDisplay();
+            this.updateClearButton();
+            // Watch for changes to child options
+            this.observeChildren();
+            // Setup global event listeners
+            this.setupGlobalListeners();
+        }
+        cleanup() {
+            this.removeGlobalListeners();
+            this.childObserver?.disconnect();
+        }
+        setupGlobalListeners() {
+            // Create bound handlers
+            this.outsideClickHandler = (e) => {
+                if (!this.contains(e.target) && this.open) {
+                    this.closeDropdown();
+                }
+            };
+            this.globalKeyHandler = (e) => {
+                if (!this.open)
+                    return;
+                switch (e.key) {
+                    case 'Escape':
+                        this.closeDropdown();
+                        this.trigger?.focus();
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.focusNextOption();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.focusPreviousOption();
+                        break;
+                    case 'Enter':
+                    case ' ':
+                        e.preventDefault();
+                        if (this.focusedIndex >= 0) {
+                            const options = this.searchable ? this.filteredOptions : this.options;
+                            const option = options[this.focusedIndex];
+                            if (option && !option.disabled) {
+                                this.handleOptionSelect(option);
+                            }
+                        }
+                        break;
+                }
+            };
+            // Add listeners
+            document.addEventListener('click', this.outsideClickHandler);
+            document.addEventListener('keydown', this.globalKeyHandler);
+        }
+        removeGlobalListeners() {
+            if (this.outsideClickHandler) {
+                document.removeEventListener('click', this.outsideClickHandler);
+            }
+            if (this.globalKeyHandler) {
+                document.removeEventListener('keydown', this.globalKeyHandler);
+            }
+        }
+        // Manual observation of light DOM children (snice-option elements)
+        observeChildren() {
+            const observer = new MutationObserver((mutations) => {
+                this.handleChildrenChange(mutations);
+            });
+            // Observe the host element (this) for changes to its light DOM children
+            observer.observe(this, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['value', 'label', 'disabled', 'selected']
+            });
+            // Store for cleanup
+            this.childObserver = observer;
+        }
+        handleChildrenChange(mutations) {
+            // Check if any of the mutations are relevant (snice-option elements or their attributes)
+            const relevant = mutations.some(m => {
+                if (m.type === 'childList')
+                    return true;
+                if (m.type === 'attributes' && ['value', 'label', 'disabled', 'selected'].includes(m.attributeName)) {
+                    return m.target.nodeName === 'SNICE-OPTION';
+                }
+                return false;
+            });
+            if (relevant) {
+                this.readOptionsFromChildren();
+                this.filteredOptions = [...this.options];
+                this.updateNativeSelect();
+                this.updateValueDisplay();
+                this.updateClearButton();
+                this.updateDropdownContent();
+            }
+        }
+        readOptionsFromChildren() {
+            // Get all snice-option children from light DOM
+            const optionElements = Array.from(this.querySelectorAll('snice-option'));
+            this.options = optionElements.map(opt => {
+                const sniceOption = opt;
+                // Use the optionData getter if available, otherwise construct from properties
+                if (sniceOption.optionData) {
+                    return sniceOption.optionData;
+                }
+                return {
+                    value: opt.getAttribute('value') || '',
+                    label: opt.getAttribute('label') || opt.textContent?.trim() || '',
+                    disabled: opt.hasAttribute('disabled'),
+                    selected: opt.hasAttribute('selected')
+                };
+            });
+        }
+        handleTriggerOpen(e) {
+            e.preventDefault();
+            if (!this.open) {
+                this.openDropdown();
+            }
+        }
+        handleSearchEscape() {
+            this.closeDropdown();
+            this.trigger?.focus();
+        }
+        handleSearchArrowDown(e) {
+            e.preventDefault();
+            this.focusNextOption();
+        }
+        handleSearchArrowUp(e) {
+            e.preventDefault();
+            this.focusPreviousOption();
+        }
+        handleSearchEnter(e) {
+            e.preventDefault();
+            if (this.focusedIndex >= 0) {
+                const options = this.searchable ? this.filteredOptions : this.options;
+                const option = options[this.focusedIndex];
+                if (option && !option.disabled) {
+                    this.handleOptionSelect(option);
+                }
+            }
+        }
+        focusNextOption() {
+            const options = this.searchable ? this.filteredOptions : this.options;
+            const enabledOptions = options.filter(opt => !opt.disabled);
+            if (enabledOptions.length === 0)
+                return;
+            this.focusedIndex++;
+            if (this.focusedIndex >= options.length) {
+                this.focusedIndex = 0;
+            }
+            while (options[this.focusedIndex]?.disabled) {
+                this.focusedIndex++;
+                if (this.focusedIndex >= options.length) {
+                    this.focusedIndex = 0;
+                }
+            }
+            this.updateOptionFocus();
+        }
+        focusPreviousOption() {
+            const options = this.searchable ? this.filteredOptions : this.options;
+            const enabledOptions = options.filter(opt => !opt.disabled);
+            if (enabledOptions.length === 0)
+                return;
+            this.focusedIndex--;
+            if (this.focusedIndex < 0) {
+                this.focusedIndex = options.length - 1;
+            }
+            while (options[this.focusedIndex]?.disabled) {
+                this.focusedIndex--;
+                if (this.focusedIndex < 0) {
+                    this.focusedIndex = options.length - 1;
+                }
+            }
+            this.updateOptionFocus();
+        }
+        updateOptionFocus() {
+            if (this.optionElements) {
+                this.optionElements.forEach((el, index) => {
+                    el.classList.toggle('select-option--focused', index === this.focusedIndex);
+                });
+            }
+        }
+        handleTriggerClick(e) {
+            e.stopPropagation();
+            // Don't toggle if clicking on the clear button or tag remove buttons
+            const target = e.target;
+            if (target.closest('.select-clear') || target.closest('.select-tag-remove')) {
+                return;
+            }
+            if (!this.disabled && !this.readonly) {
+                this.toggleDropdown();
+            }
+        }
+        handleClearClick(_e) {
+            this.clear();
+        }
+        handleTagRemove(e) {
+            e.stopPropagation();
+            const target = e.target;
+            const value = target.getAttribute('data-value');
+            if (value && this.multiple) {
+                this.selectedValues.delete(value);
+                this.value = Array.from(this.selectedValues).join(',');
+                this.updateNativeSelect();
+                this.updateValueDisplay();
+                this.updateClearButton();
+                this.dispatchChangeEvent();
+            }
+        }
+        handleOptionsClick(e) {
+            e.stopPropagation();
+            const target = e.target;
+            const optionEl = target.closest('.select-option');
+            if (!optionEl)
+                return;
+            const value = optionEl.getAttribute('data-value');
+            if (!value)
+                return;
+            const option = this.options.find(opt => opt.value === value);
+            if (option && !option.disabled) {
+                this.handleOptionSelect(option);
+            }
+        }
+        handleSearchInput(e) {
+            const target = e.target;
+            const searchTerm = target.value.toLowerCase();
+            if (searchTerm) {
+                this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(searchTerm));
+            }
+            else {
+                this.filteredOptions = [...this.options];
+            }
+            this.focusedIndex = -1;
+            this.updateDropdownContent();
+        }
+        handleOptionSelect(option) {
+            if (this.multiple) {
+                if (this.selectedValues.has(option.value)) {
+                    this.selectedValues.delete(option.value);
+                }
+                else {
+                    this.selectedValues.add(option.value);
+                }
+                this.value = Array.from(this.selectedValues).join(',');
+                this.updateDropdownContent();
+            }
+            else {
+                this.value = option.value;
+                this.closeDropdown();
+            }
+            this.updateNativeSelect();
+            this.updateValueDisplay();
+            this.updateClearButton();
+            this.dispatchChangeEvent(option);
+        }
+        handleValueChange() {
+            if (this.multiple) {
+                this.selectedValues = new Set(this.value ? this.value.split(',').map(v => v.trim()) : []);
+            }
+            this.updateNativeSelect();
+            this.updateValueDisplay();
+            this.updateClearButton();
+        }
+        handleDisabledChange() {
+            this.updateTriggerState();
+            this.updateNativeSelectAttributes();
+            this.updateClearButton();
+            if (this.disabled && this.open) {
+                this.closeDropdown();
+            }
+        }
+        handleReadonlyChange() {
+            this.updateTriggerState();
+            this.updateClearButton();
+        }
+        handleInvalidChange() {
+            this.updateTriggerState();
+        }
+        // Remove the @watch('options') since options are now read from children
+        handleOpenChange() {
+            this.updateDropdownState();
+            this.updateTriggerState();
+            if (this.open && this.searchable && this.searchInput) {
+                setTimeout(() => this.searchInput?.focus(), 100);
+            }
+            if (!this.open) {
+                this.focusedIndex = -1;
+                if (this.searchInput) {
+                    this.searchInput.value = '';
+                    this.filteredOptions = [...this.options];
+                    this.updateDropdownContent();
+                }
+            }
+        }
+        handleLabelChange() {
+            if (this.labelElement) {
+                this.labelElement.textContent = this.label;
+                if (this.label) {
+                    this.labelElement.removeAttribute('hidden');
+                }
+                else {
+                    this.labelElement.setAttribute('hidden', '');
+                }
+            }
+        }
+        handlePlaceholderChange() {
+            this.updateValueDisplay();
+        }
+        handleRequiredChange() {
+            if (this.labelElement) {
+                this.labelElement.classList.toggle('select-label--required', this.required);
+            }
+            this.updateNativeSelectAttributes();
+        }
+        handleMultipleChange() {
+            this.updateNativeSelectAttributes();
+        }
+        handleNameChange() {
+            this.updateNativeSelectAttributes();
+        }
+        handleClearableChange() {
+            this.updateClearButton();
+        }
+        handleSearchableChange() {
+            if (this.searchContainer) {
+                if (this.searchable) {
+                    this.searchContainer.removeAttribute('hidden');
+                }
+                else {
+                    this.searchContainer.setAttribute('hidden', '');
+                }
+            }
+        }
+        updateValueDisplay() {
+            if (!this.valueDisplay)
+                return;
+            const selectedOptions = this.options.filter(opt => this.multiple ? this.selectedValues.has(opt.value) : opt.value === this.value);
+            if (this.multiple && selectedOptions.length > 0) {
+                this.valueDisplay.innerHTML = /*html*/ `
+        <div class="select-value--multiple">
+          ${selectedOptions.map(opt => /*html*/ `
+            <span class="select-tag">
+              <img class="select-tag-icon" src="${opt.icon || ''}" alt="" ${!opt.icon ? 'hidden' : ''} />
+              ${opt.label}
+              <span class="select-tag-remove" data-value="${opt.value}" aria-label="Remove ${opt.label}" ${this.disabled || this.readonly ? 'hidden' : ''}>×</span>
+            </span>
+          `).join('')}
+        </div>
+      `;
+            }
+            else if (selectedOptions.length > 0) {
+                const selected = selectedOptions[0];
+                this.valueDisplay.innerHTML = /*html*/ `
+        <div class="select-value--single">
+          <img class="select-value-icon" src="${selected.icon || ''}" alt="" ${!selected.icon ? 'hidden' : ''} />
+          <span>${selected.label}</span>
+        </div>
+      `;
+            }
+            else {
+                this.valueDisplay.innerHTML = /*html*/ `<span class="select-placeholder">${this.placeholder}</span>`;
+            }
+        }
+        updateClearButton() {
+            if (!this.clearButton)
+                return;
+            const selectedOptions = this.options.filter(opt => this.multiple ? this.selectedValues.has(opt.value) : opt.value === this.value);
+            const shouldShow = this.clearable && selectedOptions.length > 0 && !this.disabled && !this.readonly;
+            this.clearButton.style.display = shouldShow ? '' : 'none';
+        }
+        updateDropdownContent() {
+            if (!this.optionsList)
+                return;
+            this.optionsList.innerHTML = this.renderOptions();
+        }
+        updateNativeSelect() {
+            if (!this.nativeSelect)
+                return;
+            // Clear and rebuild options
+            this.nativeSelect.innerHTML = '';
+            this.options.forEach(opt => {
+                const option = document.createElement('option');
+                option.value = opt.value;
+                option.textContent = opt.label;
+                option.selected = this.multiple ?
+                    this.selectedValues.has(opt.value) :
+                    opt.value === this.value;
+                this.nativeSelect.appendChild(option);
+            });
+        }
+        dispatchChangeEvent(option) {
+            return {
+                value: this.multiple ? Array.from(this.selectedValues) : this.value,
+                option,
+                select: this
+            };
+        }
+        dispatchOpenEvent() {
+            return { select: this };
+        }
+        dispatchCloseEvent() {
+            return { select: this };
+        }
+        // Public API
+        focus() {
+            this.trigger?.focus();
+        }
+        blur() {
+            this.trigger?.blur();
+            if (this.open) {
+                this.closeDropdown();
+            }
+        }
+        clear() {
+            if (this.multiple) {
+                this.selectedValues.clear();
+                this.value = '';
+            }
+            else {
+                this.value = '';
+            }
+            this.updateNativeSelect();
+            this.updateValueDisplay();
+            this.updateClearButton();
+            this.dispatchChangeEvent();
+        }
+        openDropdown() {
+            if (!this.open && !this.disabled && !this.readonly) {
+                this.open = true;
+                this.dispatchOpenEvent();
+            }
+        }
+        closeDropdown() {
+            if (this.open) {
+                this.open = false;
+                this.dispatchCloseEvent();
+            }
+        }
+        toggleDropdown() {
+            if (this.open) {
+                this.closeDropdown();
+            }
+            else {
+                this.openDropdown();
+            }
+        }
+        selectOption(value) {
+            const option = this.options.find(opt => opt.value === value);
+            if (option && !option.disabled) {
+                this.handleOptionSelect(option);
+            }
+        }
+        updateTriggerState() {
+            if (!this.trigger)
+                return;
+            this.trigger.classList.toggle('select-trigger--open', this.open);
+            this.trigger.classList.toggle('select-trigger--disabled', this.disabled);
+            this.trigger.classList.toggle('select-trigger--readonly', this.readonly);
+            this.trigger.classList.toggle('select-trigger--invalid', this.invalid);
+            this.trigger.setAttribute('aria-expanded', String(this.open));
+            this.trigger.disabled = this.disabled;
+        }
+        updateDropdownState() {
+            if (!this.dropdown)
+                return;
+            this.dropdown.classList.toggle('select-dropdown--open', this.open);
+            if (this.arrow) {
+                this.arrow.classList.toggle('select-arrow--open', this.open);
+            }
+        }
+        updateNativeSelectAttributes() {
+            if (!this.nativeSelect)
+                return;
+            this.nativeSelect.disabled = this.disabled;
+            this.nativeSelect.required = this.required;
+            this.nativeSelect.multiple = this.multiple;
+            if (this.name) {
+                this.nativeSelect.name = this.name;
+            }
+            else {
+                this.nativeSelect.removeAttribute('name');
+            }
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceSelect };
+//# sourceMappingURL=snice-select.js.map