import { __decorate } from "tslib";
import { attr } from '@ni/fast-element';
import { DesignSystem, TextField as FoundationTextField } from '@ni/fast-foundation';
import { styles } from './styles';
import { template } from './template';
import { FvSearchInputAppearance } from './types';
/**
 * A compact search input with a built-in clear affordance.
 */
export class FvSearchInput extends FoundationTextField {
    constructor() {
        super(...arguments);
        this.appearance = FvSearchInputAppearance.outline;
    }
    /** @internal */
    handleChange() {
        this.value = this.control.value;
        super.handleChange();
    }
    /**
     * @internal
     * Clears the current value, restores focus to the text input, and
     * dispatches a synthetic `input` event on the host so consumers
     * observe the same immediate value-update contract as typing.
     * The inner <input> value is updated on the next FAST render cycle
     * via the `:value` template binding.
     */
    clear() {
        if (this.value === '') {
            return true;
        }
        this.value = '';
        this.control.focus();
        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
        return true;
    }
}
__decorate([
    attr
], FvSearchInput.prototype, "appearance", void 0);
const okFvSearchInput = FvSearchInput.compose({
    baseName: 'fv-search-input',
    baseClass: FoundationTextField,
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true
    }
});
DesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());
export const fvSearchInputTag = 'ok-fv-search-input';
//# sourceMappingURL=index.js.map