snice 1.13.2 → 1.13.4

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

@@ -0,0 +1,900 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { element, property, query, queryAll, on, watch, dispatch, ready, dispose } from '../../src/index';
+import css from './snice-select.css?inline';
+import './snice-option';
+let SniceSelect = class SniceSelect extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.required = false;
+        this.invalid = false;
+        this.readonly = false;
+        this.multiple = false;
+        this.searchable = false;
+        this.clearable = false;
+        this.open = false;
+        this.size = 'medium';
+        this.name = '';
+        this.value = '';
+        this.label = '';
+        this.placeholder = 'Select an option';
+        this.maxHeight = '200px';
+        // Options will be read from child snice-option elements
+        this.options = [];
+        this.filteredOptions = [];
+        this.selectedValues = new Set();
+        this.focusedIndex = -1;
+    }
+    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');
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], SniceSelect.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'max-height' }),
+    __metadata("design:type", Object)
+], SniceSelect.prototype, "maxHeight", void 0);
+__decorate([
+    query('.select-trigger'),
+    __metadata("design:type", HTMLButtonElement)
+], SniceSelect.prototype, "trigger", void 0);
+__decorate([
+    query('.select-dropdown'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "dropdown", void 0);
+__decorate([
+    query('.select-value'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "valueDisplay", void 0);
+__decorate([
+    query('.select-label'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "labelElement", void 0);
+__decorate([
+    query('.select-search-input'),
+    __metadata("design:type", HTMLInputElement)
+], SniceSelect.prototype, "searchInput", void 0);
+__decorate([
+    query('.select-options'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "optionsList", void 0);
+__decorate([
+    query('.select-native'),
+    __metadata("design:type", HTMLSelectElement)
+], SniceSelect.prototype, "nativeSelect", void 0);
+__decorate([
+    query('.select-clear'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "clearButton", void 0);
+__decorate([
+    query('.select-arrow'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "arrow", void 0);
+__decorate([
+    query('.select-search'),
+    __metadata("design:type", HTMLElement)
+], SniceSelect.prototype, "searchContainer", void 0);
+__decorate([
+    queryAll('.select-option'),
+    __metadata("design:type", Array)
+], SniceSelect.prototype, "optionElements", void 0);
+__decorate([
+    ready(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "init", null);
+__decorate([
+    dispose(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "cleanup", null);
+__decorate([
+    on(['keydown:Enter', 'keydown:Space', 'keydown:ArrowDown', 'keydown:ArrowUp'], '.select-trigger'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleTriggerOpen", null);
+__decorate([
+    on('keydown:Escape', '.select-search-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleSearchEscape", null);
+__decorate([
+    on('keydown:ArrowDown', '.select-search-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleSearchArrowDown", null);
+__decorate([
+    on('keydown:ArrowUp', '.select-search-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleSearchArrowUp", null);
+__decorate([
+    on('keydown:Enter', '.select-search-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleSearchEnter", null);
+__decorate([
+    on('click', '.select-trigger'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleTriggerClick", null);
+__decorate([
+    on('click', '.select-clear', { preventDefault: true, stopPropagation: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleClearClick", null);
+__decorate([
+    on('click', '.select-tag-remove'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleTagRemove", null);
+__decorate([
+    on('click', '.select-options'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleOptionsClick", null);
+__decorate([
+    on('input', '.select-search-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleSearchInput", null);
+__decorate([
+    watch('value'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleValueChange", null);
+__decorate([
+    watch('disabled'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('readonly'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleReadonlyChange", null);
+__decorate([
+    watch('invalid'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleInvalidChange", null);
+__decorate([
+    watch('open'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleOpenChange", null);
+__decorate([
+    watch('label'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleLabelChange", null);
+__decorate([
+    watch('placeholder'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handlePlaceholderChange", null);
+__decorate([
+    watch('required'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleRequiredChange", null);
+__decorate([
+    watch('multiple'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleMultipleChange", null);
+__decorate([
+    watch('name'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleNameChange", null);
+__decorate([
+    watch('clearable'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleClearableChange", null);
+__decorate([
+    watch('searchable'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "handleSearchableChange", null);
+__decorate([
+    dispatch('@snice/select-change', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "dispatchChangeEvent", null);
+__decorate([
+    dispatch('@snice/select-open', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "dispatchOpenEvent", null);
+__decorate([
+    dispatch('@snice/select-close', { bubbles: true, composed: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SniceSelect.prototype, "dispatchCloseEvent", null);
+SniceSelect = __decorate([
+    element('snice-select')
+], SniceSelect);
+export { SniceSelect };
+//# sourceMappingURL=snice-select.js.map