import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-1db051ba.js';
import { N as NativeValidationStrategy } from './native-validation-strategy-a4373eb1.js';
import { g as derivedId, f as debounceEvent, o as onBoolValueChanged } from './utils-3aef1637.js';

class DefaultInputController {
    async hasValueChanged(newVal, oldVal) {
        return newVal !== oldVal;
    }
    async innerValue() {
        return;
    }
    async inputFormatter(value) {
        return value;
    }
    async remoteCustomValidator(_valueString) {
        return {};
    }
}

let inputId = 0;
const Input = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.customValidators = [];
        this.controller = new DefaultInputController();
        /**
         * Attributes to be added to the native input such as aria tags
         */
        this.attrs = {};
        /**
         * Indicates whether the value of the control can be automatically completed by the browser. Defaults to `"off"`.
         */
        this.autocomplete = 'off';
        /**
         * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`.
         */
        this.autocorrect = 'off';
        /**
         * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
         */
        this.autofocus = false;
        /**
         * If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
         */
        this.clearable = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `anjChange` event after each keystroke. Default `0`.
         */
        this.debounce = 0;
        /**
         * If true, the user cannot interact with the input. Defaults to `false`.
         */
        this.disabled = false;
        /**
         * The input id
         */
        this.inputId = `anj-input-${inputId++}`;
        /**
         * Id for the label
         */
        this.labelId = derivedId(this.inputId, 'label');
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * If true, the user cannot modify the value. Defaults to `false`.
         */
        this.readonly = false;
        /**
         * If true, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If true, the element will have its spelling and grammar checked. Defaults to `false`.
         */
        this.spellcheck = false;
        /**
         * The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
         */
        this.type = 'text';
        /**
         * The validation strategy to use
         */
        this.validationStrategy = new NativeValidationStrategy();
        this.anjInvalid = createEvent(this, "anjInvalid", 7);
        this.anjInput = createEvent(this, "anjInput", 7);
        this.anjContextChange = createEvent(this, "anjContextChange", 7);
        this.anjChange = createEvent(this, "anjChange", 7);
        this.anjBlur = createEvent(this, "anjBlur", 7);
        this.anjFocus = createEvent(this, "anjFocus", 7);
        this.anjControlDidLoad = createEvent(this, "anjControlDidLoad", 7);
        this.anjControlDidUnload = createEvent(this, "anjControlDidUnload", 7);
    }
    get nativeInput() {
        if (!this._nativeInput) {
            this.nativeInput = this.element.querySelector('input');
        }
        return this._nativeInput;
    }
    set nativeInput(input) {
        this._nativeInput = input;
    }
    onContextChanged() {
        this.anjContextChange.emit(this.context);
    }
    debounceChanged() {
        this.anjChange = debounceEvent(this.anjChange, this.debounce);
    }
    invalidChanged(newVal, oldVal) {
        onBoolValueChanged(newVal, oldVal, this.anjInvalid.emit);
    }
    async valueChanged(newVal, oldVal) {
        const valueChanged = await this.controller.hasValueChanged(newVal, oldVal);
        if (!valueChanged) {
            return;
        }
        const value = this.getValue();
        if (this.nativeInput && this.nativeInput.value !== value) {
            this.nativeInput.value = await this.controller.inputFormatter(this.value);
        }
        await this.setInnerValue();
        this.anjChange.emit({ value, innerValue: this.innerValue });
    }
    async componentDidLoad() {
        this.debounceChanged();
        this.value = await this.controller.inputFormatter(this.value);
        this.setInnerValue();
        this.anjControlDidLoad.emit();
    }
    componentWillRender() {
        this.postfix = this.element.querySelector('[slot="end"]');
    }
    componentDidUnload() {
        this.nativeInput = undefined;
        this.anjControlDidUnload.emit();
    }
    async onControlDidLoad({ target }) {
        this.controller = target;
        return this.registerCustomValidator(this.controller.remoteCustomValidator.bind(this.controller));
    }
    /**
     * Focus the native input
     */
    async setFocus() {
        this.nativeInput.focus();
    }
    /**
     * Blur the native input
     */
    async setBlur() {
        this.nativeInput.blur();
    }
    /**
     * Accepts any function, which given the input value, should return a ValidatorResponse
     */
    async registerCustomValidator(validator) {
        this.customValidators.push(validator);
    }
    /**
     * Checks the native element & custom validity
     */
    async checkValidity() {
        this.nativeInput.checkValidity();
        return this.validationStrategy.onValidChange(this.element, this.nativeInput, this.customValidators);
    }
    getValue() {
        return this.value;
    }
    async setInnerValue() {
        this.innerValue = await this.controller.innerValue() || this.value;
    }
    async onInput(event) {
        const input = event.target;
        if (input) {
            this.value = input.value;
        }
        this.anjInput.emit(event);
        if (this.invalid) {
            return this.validationStrategy.onTouched(this.element);
        }
    }
    async onBlur() {
        this.anjBlur.emit();
        this.value = await this.controller.inputFormatter(this.value);
        return this.validationStrategy.onTouched(this.element);
    }
    onFocus() {
        if (!this.readonly) {
            this.anjFocus.emit();
        }
    }
    onClearValue(event) {
        event.preventDefault();
        this.value = '';
    }
    render() {
        const hasPostFix = !!(this.postfix || this.clearable);
        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: { 'anj-has-postfix': hasPostFix } }, h("slot", { name: "start" }), h("input", Object.assign({}, this.attrs, { "aria-labelledby": this.labelId, id: this.inputId, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, disabled: this.disabled, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellCheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: this.getValue(), ref: ref => this.nativeInput = ref, onInput: (ev) => this.onInput(ev), onBlur: () => this.onBlur(), onFocus: () => this.onFocus(), onInvalid: () => this.validationStrategy.onValidChange(this.element, this.nativeInput, this.customValidators) })), (this.clearable && this.getValue() && !this.readonly && !this.disabled)
            ? h("anj-button-close", { slot: "end", context: "clear", free: true, onMouseDown: ev => this.onClearValue(ev) }) : undefined, h("slot", { name: "end" }), h("slot", null)));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "context": ["onContextChanged"],
        "debounce": ["debounceChanged"],
        "invalid": ["invalidChanged"],
        "value": ["valueChanged"]
    }; }
    static get style() { return ".sc-anj-input-h {\n  display: inline-block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  width: 100%;\n  position: relative;\n}\n.sc-anj-input-h, .sc-anj-input-h::before, .sc-anj-input-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-input-h:focus, .sc-anj-input-h:active, .sc-anj-input-h *.sc-anj-input:focus, .sc-anj-input-h *.sc-anj-input:active {\n  outline: none;\n}\n.sc-anj-input-h input.sc-anj-input, .sc-anj-input-h textarea.sc-anj-input, .sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  display: block;\n  width: 100%;\n  height: calc(1.5em + 0.75rem + 2px);\n  padding: 0.375rem 0.75rem;\n  color: var(--anj-text-dark);\n  background-color: var(--anj-light);\n  background-clip: padding-box;\n  border: 1px solid var(--anj-form-control-border);\n  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n  overflow: visible;\n}\n.sc-anj-input-h input.sc-anj-input::-ms-expand, .sc-anj-input-h textarea.sc-anj-input::-ms-expand, .sc-anj-input-h .anj-select-toggle.sc-anj-input::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.sc-anj-input-h input.sc-anj-input::-webkit-input-placeholder, .sc-anj-input-h textarea.sc-anj-input::-webkit-input-placeholder, .sc-anj-input-h .anj-select-toggle.sc-anj-input::-webkit-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-input-h input.sc-anj-input::-moz-placeholder, .sc-anj-input-h textarea.sc-anj-input::-moz-placeholder, .sc-anj-input-h .anj-select-toggle.sc-anj-input::-moz-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-input-h input.sc-anj-input:-ms-input-placeholder, .sc-anj-input-h textarea.sc-anj-input:-ms-input-placeholder, .sc-anj-input-h .anj-select-toggle.sc-anj-input:-ms-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-input-h input.sc-anj-input::-ms-input-placeholder, .sc-anj-input-h textarea.sc-anj-input::-ms-input-placeholder, .sc-anj-input-h .anj-select-toggle.sc-anj-input::-ms-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-input-h input.sc-anj-input::placeholder, .sc-anj-input-h textarea.sc-anj-input::placeholder, .sc-anj-input-h .anj-select-toggle.sc-anj-input::placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-input-h input.sc-anj-input:disabled, .sc-anj-input-h input[readonly].sc-anj-input, .sc-anj-input-h textarea.sc-anj-input:disabled, .sc-anj-input-h textarea[readonly].sc-anj-input, .sc-anj-input-h .anj-select-toggle.sc-anj-input:disabled, .sc-anj-input-h .anj-select-toggle[readonly].sc-anj-input {\n  background-color: var(--anj-light);\n  opacity: 1;\n}\n.sc-anj-input-h input.sc-anj-input:focus, .sc-anj-input-h textarea.sc-anj-input:focus, .sc-anj-input-h .anj-select-toggle.sc-anj-input:focus {\n  outline: none;\n}\n.sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  padding-right: 2.25rem;\n}\n[readonly].sc-anj-input-h {\n  --anj-form-control-border: var(--anj-border-dark);\n}\n[readonly].sc-anj-input-h input.sc-anj-input, [readonly].sc-anj-input-h textarea.sc-anj-input, [readonly].sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  background-color: var(--anj-background);\n}\n[disabled].sc-anj-input-h input.sc-anj-input, [disabled].sc-anj-input-h textarea.sc-anj-input, [disabled].sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  color: var(--anj-text-muted);\n}\n.sc-anj-input-h td.sc-anj-input-h input.sc-anj-input, td .sc-anj-input-h input.sc-anj-input, .sc-anj-input-h td.sc-anj-input-h textarea.sc-anj-input, td .sc-anj-input-h textarea.sc-anj-input, .sc-anj-input-h td.sc-anj-input-h .anj-select-toggle.sc-anj-input, td .sc-anj-input-h .anj-select-toggle.sc-anj-input, .sc-anj-input-h anj-filter.sc-anj-input-h input.sc-anj-input, anj-filter .sc-anj-input-h input.sc-anj-input, .sc-anj-input-h anj-filter.sc-anj-input-h textarea.sc-anj-input, anj-filter .sc-anj-input-h textarea.sc-anj-input, .sc-anj-input-h anj-filter.sc-anj-input-h .anj-select-toggle.sc-anj-input, anj-filter .sc-anj-input-h .anj-select-toggle.sc-anj-input, .sc-anj-input-h anj-type-ahead[search].sc-anj-input-h input.sc-anj-input, anj-type-ahead[search] .sc-anj-input-h input.sc-anj-input, .sc-anj-input-h anj-type-ahead[search].sc-anj-input-h textarea.sc-anj-input, anj-type-ahead[search] .sc-anj-input-h textarea.sc-anj-input, .sc-anj-input-h anj-type-ahead[search].sc-anj-input-h .anj-select-toggle.sc-anj-input, anj-type-ahead[search] .sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  border-radius: 0;\n  border-left: 0;\n  border-right: 0;\n  border-top: 0;\n}\n.sc-anj-input-h td.sc-anj-input-h input.sc-anj-input, td .sc-anj-input-h input.sc-anj-input, .sc-anj-input-h td.sc-anj-input-h .anj-select-toggle.sc-anj-input, td .sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  background-color: inherit;\n}\n.sc-anj-input-h td.sc-anj-input-h input[type=number].sc-anj-input, td .sc-anj-input-h input[type=number].sc-anj-input, .sc-anj-input-h td.sc-anj-input-h .anj-select-toggle[type=number].sc-anj-input, td .sc-anj-input-h .anj-select-toggle[type=number].sc-anj-input {\n  text-align: right;\n}\n.sc-anj-input-h td.sc-anj-input-h input.sc-anj-input, td .sc-anj-input-h input.sc-anj-input {\n  padding: 0 0 8.5px;\n}\n.sc-anj-input-h td.sc-anj-input-h .anj-select-toggle.sc-anj-input, td .sc-anj-input-h .anj-select-toggle.sc-anj-input {\n  padding-bottom: 0.5rem;\n  padding-left: 0;\n  padding-top: 0;\n}\n.sc-anj-input-h td.sc-anj-input-h .anj-select-toggle.sc-anj-input anj-icon-opener.sc-anj-input, td .sc-anj-input-h .anj-select-toggle.sc-anj-input anj-icon-opener.sc-anj-input {\n  margin-top: -0.25rem;\n}\n.anj-has-postfix.sc-anj-input-h input.sc-anj-input {\n  padding-right: 2.25rem;\n}\n.sc-anj-input-h input.sc-anj-input::-webkit-outer-spin-button, .sc-anj-input-h input.sc-anj-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.sc-anj-input-h input.sc-anj-input {\n  -moz-appearance: textfield;\n  margin: 0;\n}\n\n[readonly].sc-anj-input-s > *, [disabled].sc-anj-input-s > * {\n  display: none;\n}\n\n.sc-anj-input-s > [slot=start], .sc-anj-input-s > [slot=end] {\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n}\n\n.sc-anj-input-s > [slot=end] {\n  right: 0;\n}\n\n.sc-anj-input-s > [slot=start] {\n  left: 0.5rem;\n}\n.sc-anj-input-s > [slot=start] ~ input {\n  padding-left: 2.25rem;\n}\n\nanj-filter.sc-anj-input-h input.sc-anj-input, anj-filter .sc-anj-input-h input.sc-anj-input, anj-type-ahead[search].sc-anj-input-h input.sc-anj-input, anj-type-ahead[search] .sc-anj-input-h input.sc-anj-input {\n  background-color: transparent;\n  padding-left: 2rem;\n}"; }
};

export { Input as anj_input };
