snice 1.14.2 → 2.1.0

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

@@ -1,900 +0,0 @@
-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 'snice';
-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