@nuraly/lumenui 0.1.0

package/dist/src/components/select/select.component.js

@@ -0,0 +1,775 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { styles } from './select.style.js';
+import { map } from 'lit/directives/map.js';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { renderValidationMessage as sharedRenderValidationMessage } from '@nuralyui/common/utils';
+// Import types
+import { SelectType, SelectSize, SelectStatus } from './select.types.js';
+// Import controllers
+import { SelectSelectionController, SelectKeyboardController, SelectDropdownController, SelectFocusController, SelectValidationController, SelectSearchController, SelectEventController } from './controllers/index.js';
+/**
+ * Advanced select component with multiple selection modes, validation, and accessibility features.
+ *
+ * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,
+ * and various display types including default, inline, button, and slot-based configurations.
+ *
+ * @example
+ * ```html
+ * <!-- Basic select -->
+ * <nr-select placeholder="Choose an option">
+ *   <option value="1">Option 1</option>
+ *   <option value="2">Option 2</option>
+ * </nr-select>
+ *
+ * <!-- Multiple selection -->
+ * <nr-select multiple placeholder="Choose multiple options"></nr-select>
+ *
+ * <!-- With validation -->
+ * <nr-select required status="error"></nr-select>
+ *
+ * <!-- Button style -->
+ * <nr-select type="button"></nr-select>
+ *
+ * <!-- With search functionality -->
+ * <nr-select searchable search-placeholder="Search options..."></nr-select>
+ *
+ * <!-- With clear button -->
+ * <nr-select clearable></nr-select>
+ *
+ * <!-- Full width block select -->
+ * <nr-select block></nr-select>
+ * ```
+ *
+ * @fires nr-change - Selection changed
+ * @fires nr-focus - Component focused
+ * @fires nr-blur - Component blurred
+ * @fires nr-dropdown-open - Dropdown opened
+ * @fires nr-dropdown-close - Dropdown closed
+ * @fires nr-validation - Validation state changed
+ *
+ * @slot label - Select label content
+ * @slot helper-text - Helper text below select
+ * @slot trigger - Custom trigger content (slot type only)
+ * @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)
+ * @slot before-options - Content rendered before the options list (e.g., search, filters)
+ * @slot after-options - Content rendered after the options list (e.g., create button, form)
+ *
+ * @cssproperty --select-border-color - Border color
+ * @cssproperty --select-background - Background color
+ * @cssproperty --select-text-color - Text color
+ * @cssproperty --select-focus-color - Focus indicator color
+ * @cssproperty --select-dropdown-shadow - Dropdown shadow
+ * @cssproperty --select-dropdown-max-height - Maximum height of dropdown
+ * @cssproperty --select-no-options-color - No options message text color
+ * @cssproperty --select-no-options-icon-color - No options icon color
+ * @cssproperty --select-no-options-padding - Padding for no options message
+ * @cssproperty --select-no-options-gap - Gap between icon and text
+ * @cssproperty --select-search-border - Search input border
+ * @cssproperty --select-search-background - Search input background
+ * @cssproperty --select-search-padding - Search input padding
+ */
+let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ["nr-input", "nr-icon"];
+        /** Array of options to display in the select dropdown */
+        this.options = [];
+        /** Placeholder text shown when no option is selected */
+        this.placeholder = 'Select an option';
+        /** Disables the select component */
+        this.disabled = false;
+        /** Select display type (default, inline, button, slot) */
+        this.type = SelectType.Default;
+        /** Enables multiple option selection */
+        this.multiple = false;
+        /** Controls dropdown visibility */
+        this.show = false;
+        /** Validation status (default, warning, error, success) */
+        this.status = SelectStatus.Default;
+        /** Select size (small, medium, large) */
+        this.size = SelectSize.Medium;
+        /** Makes the select required for form validation */
+        this.required = false;
+        /** Form field name */
+        this.name = '';
+        /** Current selected value(s) */
+        this.value = '';
+        /** Message to display when no options are available */
+        this.noOptionsMessage = 'No options available';
+        /** Icon to display with the no options message */
+        this.noOptionsIcon = 'info';
+        /** Enable search/filter functionality */
+        this.searchable = false;
+        /** Enable clear button to clear all selections */
+        this.clearable = false;
+        /** Placeholder text for the search input */
+        this.searchPlaceholder = 'Search options...';
+        /** Current search query */
+        this.searchQuery = '';
+        /** Enable custom selected display slot */
+        this.useCustomSelectedDisplay = false;
+        /** Maximum height of the options dropdown */
+        this.maxHeight = '';
+        /** Makes select full width */
+        this.block = false;
+        /** Handles option selection logic */
+        this.selectionController = new SelectSelectionController(this);
+        /** Manages dropdown visibility and positioning */
+        this.dropdownController = new SelectDropdownController(this);
+        /** Handles keyboard navigation */
+        this.keyboardController = new SelectKeyboardController(this, this.selectionController, this.dropdownController);
+        /** Manages focus states */
+        this.focusController = new SelectFocusController(this);
+        /** Handles validation logic */
+        this.validationController = new SelectValidationController(this, this.selectionController);
+        /** Handles search/filter functionality */
+        this.searchController = new SelectSearchController(this);
+        /** Handles all event management */
+        this.eventController = new SelectEventController(this);
+        /**
+         * Handles clicks on the select trigger element
+         */
+        this.handleTriggerClick = (event) => {
+            this.eventController.handleTriggerClick(event);
+        };
+        /**
+         * Handles clicks on individual options
+         */
+        this.handleOptionClick = (event, option) => {
+            this.eventController.handleOptionClick(event, option);
+        };
+        /**
+         * Handles removal of selected tags in multiple selection mode
+         */
+        this.handleTagRemove = (event, option) => {
+            this.eventController.handleTagRemove(event, option);
+        };
+        /**
+         * Handles the clear all selections button
+         */
+        this.handleClearAll = (event) => {
+            this.eventController.handleClearAll(event);
+        };
+        /**
+         * Handles keyboard navigation and interactions
+         */
+        this.handleKeyDown = (event) => {
+            this.eventController.handleKeyDown(event);
+        };
+        /**
+         * Handles focus events
+         */
+        this.handleFocus = () => {
+            this.eventController.handleFocus();
+        };
+        /**
+         * Handles blur events
+         */
+        this.handleBlur = () => {
+            this.eventController.handleBlur();
+        };
+    }
+    /**
+     * Component connected to DOM - initialize base functionality
+     */
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    /**
+     * Component disconnected from DOM - cleanup event listeners
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    /**
+     * Called before update to handle property changes
+     */
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        // If options or value changed, reinitialize selection
+        if ((changedProperties.has('options') || changedProperties.has('value')) &&
+            this.options.length > 0 &&
+            this.value &&
+            (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {
+            // Reset initialization flag to allow reinit
+            this.selectionController._initialized = false;
+            this.selectionController.initializeFromValue();
+        }
+    }
+    /**
+     * First render complete - setup controllers and initialize state
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // Configure dropdown controller with DOM element references
+        if (this.optionsElement && this.wrapper) {
+            this.dropdownController.setElements(this.optionsElement, this.wrapper);
+        }
+        else {
+            // Retry element setup if DOM isn't ready yet
+            setTimeout(() => {
+                if (this.optionsElement && this.wrapper) {
+                    this.dropdownController.setElements(this.optionsElement, this.wrapper);
+                }
+            }, 100);
+        }
+        // Apply default selection if specified
+        if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {
+            this.selectionController.initializeFromValue();
+        }
+    }
+    // === Public API Methods ===
+    /**
+     * Gets the currently selected options
+     * @returns Array of selected options
+     */
+    get selectedOptions() {
+        return this.selectionController.getSelectedOptions();
+    }
+    /**
+     * Gets the first selected option (for single selection mode)
+     * @returns Selected option or undefined if none selected
+     */
+    get selectedOption() {
+        return this.selectionController.getSelectedOption();
+    }
+    /**
+     * Selects an option programmatically
+     * @param option - The option to select
+     */
+    selectOption(option) {
+        this.selectionController.selectOption(option);
+    }
+    /**
+     * Unselects an option programmatically
+     * @param option - The option to unselect
+     */
+    unselectOption(option) {
+        this.selectionController.unselectOption(option);
+    }
+    /**
+     * Toggles an option's selection state
+     * @param option - The option to toggle
+     */
+    toggleOption(option) {
+        this.selectionController.toggleOption(option);
+    }
+    /**
+     * Clears all current selections
+     */
+    clearSelection() {
+        this.selectionController.clearSelection();
+    }
+    /**
+     * Checks if a specific option is currently selected
+     * @param option - The option to check
+     * @returns True if the option is selected
+     */
+    isOptionSelected(option) {
+        return this.selectionController.isOptionSelected(option);
+    }
+    /**
+     * Toggles the dropdown visibility
+     */
+    toggleDropdown() {
+        this.dropdownController.toggle();
+    }
+    /**
+     * Opens the dropdown programmatically
+     */
+    openDropdown() {
+        this.dropdownController.open();
+    }
+    /**
+     * Closes the dropdown programmatically
+     */
+    closeDropdown() {
+        this.dropdownController.close();
+    }
+    /**
+     * Focuses the select component
+     */
+    focus() {
+        this.focusController.focus();
+    }
+    /**
+     * Removes focus from the select component
+     */
+    blur() {
+        this.focusController.blur();
+    }
+    /**
+     * Validates the current selection according to component rules
+     * @returns True if valid, false otherwise
+     */
+    validate() {
+        return this.validationController.validate();
+    }
+    /**
+     * Checks if the current selection is valid without showing validation UI
+     * @returns True if valid, false otherwise
+     */
+    checkValidity() {
+        return this.validationController.checkValidity();
+    }
+    /**
+     * Reports the current validation state and shows validation UI if invalid
+     * @returns True if valid, false otherwise
+     */
+    reportValidity() {
+        return this.validationController.reportValidity();
+    }
+    /**
+     * Sets a custom validation message
+     * @param message - Custom validation message (empty string to clear)
+     */
+    setCustomValidity(message) {
+        this.validationController.setCustomValidity(message);
+    }
+    /**
+     * Gets the current validation status
+     * @returns ValidationStatus object with isValid and message
+     */
+    getValidationStatus() {
+        const isValid = this.validationController.checkValidity();
+        return {
+            isValid,
+            validationMessage: this.validationController.validationMessage || ''
+        };
+    }
+    /**
+     * Gets the current validation message
+     */
+    get validationMessage() {
+        return this.validationController.validationMessage || '';
+    }
+    /**
+     * Clears validation state
+     */
+    clearValidation() {
+        this.validationController.setCustomValidity('');
+        this.status = SelectStatus.Default;
+    }
+    /**
+     * Searches for options with the given query
+     * @param query - Search query string
+     */
+    searchOptions(query) {
+        this.searchController.search(query);
+    }
+    /**
+     * Clears the current search query
+     */
+    clearSearch() {
+        this.searchController.clearSearch();
+    }
+    /**
+     * Gets the filtered options based on current search
+     * @returns Array of filtered options
+     */
+    getSearchFilteredOptions() {
+        return this.searchController.getFilteredOptions(this.options);
+    }
+    /**
+     * Gets the current search query
+     * @returns Current search query string
+     */
+    getCurrentSearchQuery() {
+        return this.searchController.searchQuery;
+    }
+    /**
+     * Gets the currently selected options
+     * @returns Array of selected option objects
+     */
+    getSelectedOptions() {
+        return this.selectedOptions;
+    }
+    /**
+     * Manually trigger setup of global event listeners
+     */
+    setupGlobalEventListeners() {
+        this.eventController.setupEventListeners();
+    }
+    /**
+     * Manually trigger removal of global event listeners
+     */
+    removeGlobalEventListeners() {
+        this.eventController.removeEventListeners();
+    }
+    /**
+     * Filters options based on search query
+     */
+    getFilteredOptions() {
+        return this.searchController.getFilteredOptions(this.options);
+    }
+    ;
+    /**
+     * Sets up global event listeners (called when dropdown opens)
+     */
+    setupEventListeners() {
+        this.eventController.setupEventListeners();
+    }
+    /**
+     * Removes global event listeners (called on disconnect or dropdown close)
+     */
+    removeEventListeners() {
+        this.eventController.removeEventListeners();
+    }
+    /**
+     * Main render method that delegates to specific type renderers
+     */
+    render() {
+        return html `${choose(this.type, [
+            [SelectType.Default, () => this.renderDefault()],
+            [SelectType.Inline, () => this.renderInline()],
+            [SelectType.Button, () => this.renderButton()],
+            [SelectType.Slot, () => this.renderSlot()],
+        ])}`;
+    }
+    /**
+     * Renders the default select appearance with full features
+     */
+    renderDefault() {
+        const selectedOptions = this.selectedOptions;
+        const validationClasses = this.validationController.getValidationClasses();
+        return html `
+      <slot name="label"></slot>
+      <div 
+        class="${classMap(Object.assign({ 'wrapper': true }, validationClasses))}"
+        data-theme="${this.currentTheme}"
+        tabindex="0"
+        role="combobox"
+        aria-expanded="${this.show}"
+        aria-haspopup="listbox"
+        aria-labelledby="select-label"
+
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeyDown}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <div class="select">
+          <div class="select-trigger">
+            ${this.renderSelectedContent(selectedOptions)}
+          </div>
+          
+          <div class="icons-container">
+            ${this.renderStatusIcon()}
+            ${this.renderClearButton(selectedOptions)}
+            <nr-icon 
+              name="chevron-down" 
+              size="${this.size}"
+              class="arrow-icon"
+              aria-hidden="true"
+            ></nr-icon>
+          </div>
+          
+          <div
+            class="options"
+            role="listbox"
+            aria-multiselectable="${this.multiple}"
+            style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}
+            @click=${(e) => e.stopPropagation()}
+          >
+            ${this.searchable ? this.renderSearchInput() : nothing}
+            <slot name="before-options"></slot>
+            ${this.renderSelectOptions()}
+            <slot name="after-options"></slot>
+          </div>
+        </div>
+      </div>
+      
+      ${this.renderValidationMessage()}
+      <slot name="helper-text"></slot>
+    `;
+    }
+    /**
+     * Renders inline select with integrated label and helper text
+     */
+    renderInline() {
+        return html `
+      <slot name="label"></slot>
+      ${this.renderDefault()}
+      <slot name="helper-text"></slot>
+    `;
+    }
+    /**
+     * Renders select as a button-style component
+     */
+    renderButton() {
+        const selectedOptions = this.selectedOptions;
+        return html `
+      <button
+        class="select-button"
+        ?disabled=${this.disabled}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeyDown}
+      >
+        ${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}
+        <nr-icon name="chevron-down" class="arrow-icon"></nr-icon>
+      </button>
+      
+      <div
+        class="options"
+        role="listbox"
+        style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}
+        @click=${(e) => e.stopPropagation()}
+      >
+        ${this.searchable ? this.renderSearchInput() : nothing}
+        <slot name="before-options"></slot>
+        ${this.renderSelectOptions()}
+        <slot name="after-options"></slot>
+      </div>
+    `;
+    }
+    /**
+     * Renders select with custom trigger content via slots
+     */
+    renderSlot() {
+        return html `
+      <slot name="trigger" @click=${this.handleTriggerClick}></slot>
+      <div
+        class="options"
+        role="listbox"
+        style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}
+        @click=${(e) => e.stopPropagation()}
+      >
+        ${this.searchable ? this.renderSearchInput() : nothing}
+        <slot name="before-options"></slot>
+        ${this.renderSelectOptions()}
+        <slot name="after-options"></slot>
+      </div>
+    `;
+    }
+    /**
+     * Renders the selected content in the trigger area
+     */
+    renderSelectedContent(selectedOptions) {
+        if (selectedOptions.length === 0) {
+            return html `<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`;
+        }
+        if (this.multiple) {
+            // Check if custom display slot should be used
+            if (this.useCustomSelectedDisplay) {
+                return html `<slot name="selected-display" .selectedOptions=${selectedOptions}></slot>`;
+            }
+            // Default behavior: render tags
+            return map(selectedOptions, (option) => html `
+        <span class="tag">
+          <span class="tag-label">${option.label}</span>
+          <nr-icon 
+            name="x"
+            size="${this.size}"
+            class="tag-close"
+            @click=${(e) => this.handleTagRemove(e, option)}
+            aria-label="Remove ${option.label}"
+          ></nr-icon>
+        </span>
+      `);
+        }
+        else {
+            return html `${selectedOptions[0].label}`;
+        }
+    }
+    /**
+     * Renders status/validation icons based on current status
+     */
+    renderStatusIcon() {
+        switch (this.status) {
+            case SelectStatus.Warning:
+                return html `<nr-icon name="alert-triangle" size="${this.size}" class="status-icon warning"></nr-icon>`;
+            case SelectStatus.Error:
+                return html `<nr-icon name="alert-circle" size="${this.size}" class="status-icon error"></nr-icon>`;
+            case SelectStatus.Success:
+                return html `<nr-icon name="circle-check" size="${this.size}" class="status-icon success"></nr-icon>`;
+            default:
+                return nothing;
+        }
+    }
+    /**
+     * Renders the clear all selections button when applicable
+     */
+    renderClearButton(selectedOptions) {
+        if (!this.clearable || selectedOptions.length === 0 || this.disabled) {
+            return nothing;
+        }
+        return html `
+      <nr-icon
+        name="x"
+        size="${this.size}"
+        class="clear-icon"
+        @click=${this.handleClearAll}
+        aria-label="Clear selection"
+        tabindex="-1"
+      ></nr-icon>
+    `;
+    }
+    /**
+     * Renders all available options in the dropdown
+     */
+    renderSelectOptions() {
+        const filteredOptions = this.getFilteredOptions();
+        // Show "no options" message when no options are available (original array empty)
+        if (!this.options || this.options.length === 0) {
+            return html `
+        <div class="no-options" role="option" aria-disabled="true">
+          <div class="no-options-content">
+            <nr-icon 
+              name="${this.noOptionsIcon}" 
+              class="no-options-icon"
+              aria-hidden="true">
+            </nr-icon>
+            <span class="no-options-text">${this.noOptionsMessage}</span>
+          </div>
+        </div>
+      `;
+        }
+        // Show "no results" message when search returns no results
+        if (this.searchController.hasNoResults(this.options)) {
+            return this.searchController.renderNoResults();
+        }
+        // Cache the focused option to avoid multiple controller accesses
+        const focusedOption = this.keyboardController.focusedOption;
+        return map(filteredOptions, (option) => {
+            const isSelected = this.isOptionSelected(option);
+            const isFocused = focusedOption && focusedOption.value === option.value;
+            return html `
+        <div
+          class="${classMap({
+                'option': true,
+                'selected': isSelected,
+                'focused': isFocused,
+                'disabled': Boolean(option.disabled)
+            })}"
+          role="option"
+          aria-selected="${isSelected}"
+          aria-disabled="${Boolean(option.disabled)}"
+          data-value="${option.value}"
+          @click=${(e) => this.handleOptionClick(e, option)}
+          style=${styleMap(option.style ? { style: option.style } : {})}
+          title="${option.title || ''}"
+        >
+          <div class="option-content">
+            ${option.icon ? html `<nr-icon name="${option.icon}" size="${this.size}" class="option-icon"></nr-icon>` : nothing}
+            <div class="option-text">
+              ${option.htmlContent ? html `<div>${unsafeHTML(option.htmlContent)}</div>` : option.label}
+              ${option.description ? html `<div class="option-description">${option.description}</div>` : nothing}
+            </div>
+          </div>
+          
+          ${isSelected ? html `<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>` : nothing}
+          
+          ${option.state && option.message ? html `
+            <div class="option-message ${option.state}">
+              <nr-icon name="${option.state === 'error' ? 'alert-circle' : 'alert-triangle'}" size="${this.size}"></nr-icon>
+              <span>${option.message}</span>
+            </div>
+          ` : nothing}
+        </div>
+      `;
+        });
+    }
+    /**
+     * Renders the search input when searchable is enabled
+     */
+    renderSearchInput() {
+        return this.searchController.renderSearchInput();
+    }
+    /**
+     * Renders validation message when present
+     */
+    renderValidationMessage() {
+        return sharedRenderValidationMessage(this.validationController.validationMessage, { statusClass: this.status });
+    }
+};
+HySelectComponent.styles = styles;
+__decorate([
+    property({ type: Array })
+], HySelectComponent.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], HySelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], HySelectComponent.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'multiple' })
+], HySelectComponent.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "show", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], HySelectComponent.prototype, "status", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], HySelectComponent.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], HySelectComponent.prototype, "name", void 0);
+__decorate([
+    property()
+], HySelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'no-options-message' })
+], HySelectComponent.prototype, "noOptionsMessage", void 0);
+__decorate([
+    property({ type: String, attribute: 'no-options-icon' })
+], HySelectComponent.prototype, "noOptionsIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "clearable", void 0);
+__decorate([
+    property({ type: String, attribute: 'search-placeholder' })
+], HySelectComponent.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: String })
+], HySelectComponent.prototype, "searchQuery", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'use-custom-selected-display' })
+], HySelectComponent.prototype, "useCustomSelectedDisplay", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-height' })
+], HySelectComponent.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], HySelectComponent.prototype, "block", void 0);
+__decorate([
+    query('.options')
+], HySelectComponent.prototype, "optionsElement", void 0);
+__decorate([
+    query('.wrapper')
+], HySelectComponent.prototype, "wrapper", void 0);
+__decorate([
+    query('.search-input')
+], HySelectComponent.prototype, "searchInput", void 0);
+HySelectComponent = __decorate([
+    customElement('nr-select')
+], HySelectComponent);
+export { HySelectComponent };
+//# sourceMappingURL=select.component.js.map