import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { live } from 'lit/directives/live.js';
let SearchInput = (() => {
    let _classSuper = LitElement;
    let _placeholder_decorators;
    let _placeholder_initializers = [];
    let _placeholder_extraInitializers = [];
    let _value_decorators;
    let _value_initializers = [];
    let _value_extraInitializers = [];
    return class SearchInput extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _placeholder_decorators = [property({ type: String })];
            _value_decorators = [property({ type: String })];
            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static shadowRootOptions = {
            delegatesFocus: true,
            mode: 'open',
        };
        #placeholder_accessor_storage = __runInitializers(this, _placeholder_initializers, 'Find'
        /**
         * The last value dispatched with the `search` event.
         */
        );
        /**
         * The placeholder text for the search input.
         * @attribute
         */
        get placeholder() { return this.#placeholder_accessor_storage; }
        set placeholder(value) { this.#placeholder_accessor_storage = value; }
        #value_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, void 0));
        /**
         * The last value dispatched with the `search` event.
         */
        get value() { return this.#value_accessor_storage; }
        set value(value) { this.#value_accessor_storage = value; }
        handleKeyDown(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const input = this.shadowRoot?.querySelector('.search-input');
                this.notifySearch(input.value.trim());
            }
            else if (e.key === 'Escape') {
                e.preventDefault();
                this.value = '';
                this.dispatchEvent(new CustomEvent('clear', { bubbles: false, composed: false }));
            }
        }
        /**
         * Notifies the parent component that a search has been initiated.
         * @param input - The search input value.
         */
        notifySearch(input) {
            if (!input || input === this.value) {
                return;
            }
            this.value = input;
            this.dispatchEvent(new CustomEvent('search', {
                bubbles: false,
                composed: false,
                detail: { input },
            }));
        }
        render() {
            const icon = this.value ? 'arrow_back' : 'search';
            return html `
      <ui-focus-ring part="focus-ring" for="search-input"></ui-focus-ring>
      <ui-icon class="search-icon">${icon}</ui-icon>
      <input
        class="search-input body-large"
        id="search-input"
        type="text"
        placeholder="${this.placeholder}"
        autocomplete="off"
        @keydown="${this.handleKeyDown}"
        .value="${live(this.value || '')}"
      />
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _value_extraInitializers);
        }
    };
})();
/**
 * A simple input element for rendering a search input.
 *
 * @fires {CustomEvent} search - Fired when a search is initiated.
 * @fires {CustomEvent} clear - Fired when the search input is cleared.
 */
export default SearchInput;
//# sourceMappingURL=input.js.map