// #region Imports
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 { Themeable } from '../../../../Controls/Behaviors/Themeable';
import { DomServiceLocator } from '../../../../Dom/Dom';
import { Emit } from '../../../../Events/Decorators/EmitDecorator';
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Busyable } from '../../../Behaviors/Busyable';
import { Clearable } from '../../../Behaviors/Clearable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Invalidable } from '../../../Behaviors/Invalidable';
import { Slottable } from '../../../Behaviors/Slottable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { KeyboardController } from '../../../Controllers/KeyboardController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Key } from '../../../Types/Key';
import { KeyName } from '../../../Types/Key';
import { SearchTriggerMode } from '../../../Types/SearchTriggerMode';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { InputBaseElement } from '../Abstracts/InputBase';
import { searchBoxElementTemplate } from './SearchBoxElementTemplate';
import { searchBoxElementJoyStyle } from './Themes/SearchBoxElement.Joy';
import { searchBoxElementRetroStyle } from './Themes/SearchBoxElement.Retro';
import { searchBoxElementCosmopolitanStyle } from './Themes/SearchBoxElement.Cosmopolitan';
import { TextAlignment } from '../../../Types/TextAlignment';
// #endregion
/**
 * Search Box - A user interface component for entering search queries.
 *
 * @description
 * The Search Box component is designed to allow users to input search queries. It is commonly used in applications
 * that require search functionality, such as e-commerce websites, search engines, or content management systems.
 * Search Boxes typically include features like suggestions, auto-completion, and the ability to execute search queries.
 *
 * @name Search Box
 * @element mosaik-searchbox
 * @category Forms
 *
 * @slot prefix - The prefix slot.
 * @slot suffix - The suffix slot.
 *
 * @csspart prefix
 * @csspart input
 * @csspart suffix
 * @csspart inner
 * @csspart clear
 * @csspart search
 * @csspart focusRing
 * @csspart progressRing
 *
 * @fires searched - Fired when the element is searched.
 *
 * @keyhandle Backspace - Clears the value.
 * @keyhandle Escape - Clears the value.
 * @keyhandle Enter - Searches the value.
 *
 * @public
 */
let SearchBoxElement = class SearchBoxElement extends Themeable(Slottable(Clearable(Disableable(Invalidable(Valueable(Variantable(Busyable(Appearanceable(InputBaseElement))))))))) {
    // #region Fields
    _keyboardController;
    _searched;
    _value;
    _readonly;
    _required;
    _autofocus;
    _name;
    _pattern;
    _placeholder;
    _autocomplete;
    _mode;
    _delay;
    _delayTimeoutId;
    _textAlign;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._value = '';
        this._readonly = false;
        this._required = false;
        this._autofocus = false;
        this._name = '';
        this._pattern = '';
        this._placeholder = '';
        this._autocomplete = false;
        this._mode = SearchTriggerMode.Input;
        this._delay = 0;
        this._delayTimeoutId = null;
        this._textAlign = TextAlignment.Left;
        this._searched = new HTMLElementEventEmitter(this, 'searched');
        this._keyboardController = new KeyboardController(this);
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-searchbox';
    }
    /**
     * Gets or sets the `value` property.
     *
     * @public
     * @override
     */
    get value() {
        return this._value;
    }
    set value(value) {
        if (this._value !== value) {
            this._value = value;
            this.requestUpdate('value');
        }
    }
    /**
     * Gets or sets the `readonly` property.
     *
     * @public
     * @attr
     */
    get readonly() {
        return this._readonly;
    }
    set readonly(value) {
        if (this._readonly !== value) {
            this._readonly = value;
            this.requestUpdate('readonly');
        }
    }
    /**
     * Gets or sets the `required` property.
     *
     * @public
     * @attr
     */
    get required() {
        return this._required;
    }
    set required(value) {
        if (this._required !== value) {
            this._required = value;
            this.requestUpdate('required');
        }
    }
    /**
     * Gets or sets the `autofocus` property.
     *
     * @public
     * @override
     */
    get autofocus() {
        return this._autofocus;
    }
    set autofocus(value) {
        if (this._autofocus !== value) {
            this._autofocus = value;
            this.requestUpdate('autofocus');
        }
    }
    /**
     * Gets or sets the `name` property.
     *
     * @public
     * @attr
     */
    get name() {
        return this._name;
    }
    set name(value) {
        if (this._name !== value) {
            this._name = value;
            this.requestUpdate('name');
        }
    }
    /**
     * Gets or sets the `pattern` property.
     *
     * @public
     * @attr
     */
    get pattern() {
        return this._pattern;
    }
    set pattern(value) {
        if (this._pattern !== value) {
            this._pattern = value;
            this.requestUpdate('pattern');
        }
    }
    /**
     * Gets or sets the `placeholder` property.
     *
     * @public
     * @attr
     */
    get placeholder() {
        return this._placeholder;
    }
    set placeholder(value) {
        if (this._placeholder !== value) {
            this._placeholder = value;
            this.requestUpdate('placeholder');
        }
    }
    /**
     * Gets or sets the `autocomplete` property.
     *
     * @public
     * @attr
     */
    get autocomplete() {
        return this._autocomplete;
    }
    set autocomplete(value) {
        if (this._autocomplete !== value) {
            this._autocomplete = value;
            this.requestUpdate('autocomplete');
        }
    }
    /**
     * Gets or sets the `mode` property.
     *
     * @public
     * @attr
     */
    get mode() {
        return this._mode;
    }
    set mode(value) {
        if (this._mode !== value) {
            this._mode = value;
            this.requestUpdate('mode');
        }
    }
    /**
     * Gets or sets the `delay` property.
     *
     * @public
     * @attr
     */
    get delay() {
        return this._delay;
    }
    set delay(value) {
        if (this._delay !== value) {
            this._delay = value;
            this.requestUpdate('delay');
        }
    }
    /**
     * Determines the text alignment of the component.
     *
     * @public
     * @attr
     */
    get textAlign() {
        return this._textAlign;
    }
    set textAlign(value) {
        if (this._textAlign !== value) {
            this._textAlign = value;
            this.requestUpdate('textAlign');
        }
    }
    /**
     * Determines whether the element has a prefix or not.
     * The Prefix is a slot that is displayed before the input.
     *
     * @private
     * @readonly
     * @attr
     */
    get hasPrefix() {
        return this.hasSlotContent('prefix');
    }
    /**
     * Determines whether the element has a suffix or not.
     * The Suffix is a slot that is displayed after the input.
     *
     * @private
     * @readonly
     * @attr
     */
    get hasSuffix() {
        return this.hasSlotContent('suffix');
    }
    /**
     * Called when <ACTION>.
     * Provides reference to `{@link IEventDetail}` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get searched() {
        return this._searched;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        this.on('paste', (e) => {
            this.value = e.clipboardData?.getData('text/plain') ?? '';
        });
        this._keyboardController
            .add([Key.Backspace], () => {
            // if (this._mode === 'instant') {
            //     this.value = '';
            // } else {
            //     this.value = this.value.slice(0, -1);
            // }
        })
            .add([Key.Escape], () => {
            this.clear();
        });
    }
    /**
    * @public
    * @override
    */
    focus() {
        if (this.shadowRoot) {
            DomServiceLocator.current.findDescendant(this.shadowRoot, 'input')?.focus();
        }
    }
    /**
     * @public
     * @override
     */
    blur() {
        if (this.shadowRoot) {
            DomServiceLocator.current.findDescendant(this.shadowRoot, 'input')?.blur();
        }
    }
    /**
     * Resets the value, all kinds of validation and errors.
     *
     * @public
     * @override
     */
    reset() {
        super.reset();
        this.clear();
        this.invalid = false;
    }
    /**
     * @public
     */
    search() {
        if (this._mode === SearchTriggerMode.Input) {
            this.onSearched(this.value);
        }
        else {
            if (this._delayTimeoutId !== null) {
                clearTimeout(this._delayTimeoutId);
            }
            this._delayTimeoutId = window.setTimeout(() => {
                this._delayTimeoutId = null;
                this.onSearched(this.value);
            }, this._delay);
        }
    }
    /**
     * Clears the value of the element but not the validation.
     *
     * @public
     * @override
     */
    clear(force) {
        const isCleared = super.clear(force);
        if (isCleared) {
            this.emit('input', {
                bubbles: true,
                composed: true
            });
            this.emit('change', {
                bubbles: true,
                composed: true
            });
        }
        return isCleared;
    }
    /**
     * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`.
     *
     * @public
     * @override
     */
    checkValidity() {
        return this.shadowRoot
            ? this.getTemplatePart('input').checkValidity()
            : false;
    }
    /**
     * @template
     * @protected
     */
    onChange(event) {
        this.value = event.target.value;
        this.emit('change', { detail: this.value });
        if (this._mode === SearchTriggerMode.Input) {
            this.onSearched(this.value);
        }
        else if (this._mode === SearchTriggerMode.Delay) {
            if (this._delayTimeoutId !== null) {
                clearTimeout(this._delayTimeoutId);
            }
            this._delayTimeoutId = window.setTimeout(() => {
                this._delayTimeoutId = null;
                this.onSearched(this.value);
            }, this._delay);
        }
    }
    /**
     * @template
     * @protected
     * @override
     */
    onInput(event) {
        super.onInput(event);
        this.value = event.target.value;
        this.emit('input', { detail: this.value });
        if (this._mode === SearchTriggerMode.Input) {
            this.onSearched(this.value);
        }
        else if (this._mode === SearchTriggerMode.Delay) {
            if (this._delayTimeoutId !== null) {
                clearTimeout(this._delayTimeoutId);
            }
            this._delayTimeoutId = window.setTimeout(() => {
                this._delayTimeoutId = null;
                this.onSearched(this.value);
            }, this._delay);
        }
    }
    /**
     * @template
     * @protected
     * @override
     */
    onFocus(event) {
        super.onFocus(event);
        this.emit('focus', { detail: event });
    }
    /**
     * @template
     * @protected
     * @override
     */
    onBlur(event) {
        super.onBlur(event);
        this.emit('blur', { detail: event });
    }
    /**
     * @template
     * @protected
     */
    onKeyUp(event) {
        if (this._mode === SearchTriggerMode.Enter && event.key === KeyName.Enter) {
            this.onSearched(this.value);
        }
    }
    /**
     * Emits the {@link searched} event.
     *
     * @protected
     */
    onSearched(args) {
        this._searched.emit(args);
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SearchBoxElement.prototype, "value", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SearchBoxElement.prototype, "readonly", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SearchBoxElement.prototype, "required", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SearchBoxElement.prototype, "autofocus", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SearchBoxElement.prototype, "name", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SearchBoxElement.prototype, "pattern", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SearchBoxElement.prototype, "placeholder", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], SearchBoxElement.prototype, "autocomplete", null);
__decorate([
    Attribute({ type: SearchTriggerMode }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SearchBoxElement.prototype, "mode", null);
__decorate([
    Attribute({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], SearchBoxElement.prototype, "delay", null);
__decorate([
    Attribute({ type: TextAlignment }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], SearchBoxElement.prototype, "textAlign", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], SearchBoxElement.prototype, "hasPrefix", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], SearchBoxElement.prototype, "hasSuffix", null);
__decorate([
    Emit({ eventName: 'searched' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], SearchBoxElement.prototype, "searched", null);
SearchBoxElement = __decorate([
    Component({
        selector: 'mosaik-searchbox',
        template: searchBoxElementTemplate,
        themes: {
            joy: searchBoxElementJoyStyle,
            retro: searchBoxElementRetroStyle,
            cosmopolitan: searchBoxElementCosmopolitanStyle
        },
        host: {
            tabIndex: '0'
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            FocusRingElement,
            ButtonElement
        ]
    }),
    __metadata("design:paramtypes", [])
], SearchBoxElement);
export { SearchBoxElement };
//# sourceMappingURL=SearchBoxElement.js.map