'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7a477838.js');
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
const formInputSearchVariation_enum = require('./form-input-search-variation.enum-e0e025b1.js');
const formInputType_enum = require('./form-input-type.enum-9c8ee12a.js');
const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js');
const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
require('./detectClosest.util-85b3507b.js');

const formInputSearchCss = ".sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}";
const DigiFormInputSearchStyle0 = formInputSearchCss;

const FormInputSearch = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.afOnFocusOutside = index.createEvent(this, "afOnFocusOutside", 7);
        this.afOnFocusInside = index.createEvent(this, "afOnFocusInside", 7);
        this.afOnClickOutside = index.createEvent(this, "afOnClickOutside", 7);
        this.afOnClickInside = index.createEvent(this, "afOnClickInside", 7);
        this.afOnChange = index.createEvent(this, "afOnChange", 7);
        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
        this.afOnKeyup = index.createEvent(this, "afOnKeyup", 7);
        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
        this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
        this.afOnInput = index.createEvent(this, "afOnInput", 7);
        this.afOnClick = index.createEvent(this, "afOnClick", 7);
        this.afOnSubmitSearch = index.createEvent(this, "afOnSubmitSearch", 7);
        this.afOnReady = index.createEvent(this, "afOnReady", 3);
        this.afLabel = undefined;
        this.afLabelDescription = undefined;
        this.afType = formInputType_enum.FormInputType.SEARCH;
        this.afButtonVariation = formInputType_enum.FormInputButtonVariation.PRIMARY;
        this.afName = undefined;
        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-input-search');
        this.value = undefined;
        this.afValue = undefined;
        this.afAutocomplete = undefined;
        this.afAriaAutocomplete = undefined;
        this.afAriaActivedescendant = undefined;
        this.afAriaLabelledby = undefined;
        this.afAriaDescribedby = undefined;
        this.afVariation = formInputSearchVariation_enum.FormInputSearchVariation.MEDIUM;
        this.afHideButton = undefined;
        this.afButtonType = formInputSearchVariation_enum.ButtonType.SUBMIT;
        this.afButtonText = undefined;
        this.afButtonAriaLabel = undefined;
        this.afButtonAriaLabelledby = undefined;
        this.afAutofocus = undefined;
    }
    onValueChanged(value) {
        this.afValue = value;
    }
    onAfValueChanged(value) {
        this.value = value;
    }
    /**
     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
     * @en Returns a reference to the input element. Handy for setting focus programmatically.
     */
    async afMGetFormControlElement() {
        const formControlElement = await this._input.afMGetFormControlElement();
        return formControlElement;
    }
    blurHandler(e) {
        this.afOnBlur.emit(e);
    }
    changeHandler(e) {
        const element = e.target;
        this.afValue = this.value = element.value;
        this.afOnChange.emit(e);
    }
    focusHandler(e) {
        e.stopPropagation();
        this.afOnFocus.emit(e);
    }
    focusoutHandler(e) {
        this.afOnFocusout.emit(e);
    }
    keyupHandler(e) {
        this.afOnKeyup.emit(e);
        if (e.detail.key === 'Enter') {
            this.afOnSubmitSearch.emit(this.afValue);
        }
    }
    inputHandler(e) {
        this.afOnInput.emit(e);
    }
    clickHandler(e) {
        e.stopPropagation();
        this.afOnClick.emit(e);
        this.afOnSubmitSearch.emit(this.afValue);
    }
    clickOutsideListener(e) {
        const target = e.target;
        const selector = `[data-af-identifier="${this.afId}"]`;
        if (detectClickOutside_util.detectClickOutside(target, selector)) {
            this.afOnClickOutside.emit(e);
        }
        else {
            this.afOnClickInside.emit(e);
        }
    }
    focusOutsideListener(e) {
        const target = e.target;
        const selector = `[data-af-identifier="${this.afId}"]`;
        if (detectFocusOutside_util.detectFocusOutside(target, selector)) {
            this.afOnFocusOutside.emit(e);
        }
        else {
            this.afOnFocusInside.emit(e);
        }
    }
    componentWillLoad() {
        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    get cssModifiers() {
        return {
            'digi-form-input-search--small': this.afVariation === formInputSearchVariation_enum.FormInputSearchVariation.SMALL,
            'digi-form-input-search--medium': this.afVariation === formInputSearchVariation_enum.FormInputSearchVariation.MEDIUM,
            'digi-form-input-search--large': this.afVariation === formInputSearchVariation_enum.FormInputSearchVariation.LARGE
        };
    }
    render() {
        return (index.h("div", { key: '7ecbb4390771cc1e95dba43ca55f3d015580c8d5', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, index.h("digi-form-input", { key: 'f09541e380357c6058e79848ffd99a95060e950e', class: {
                'digi-form-input-search__input': true,
                'digi-form-input-search__input--no-button': this.afHideButton
            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (index.h("digi-button", { key: '42d7bbb08288ed5a482500b7dfaae220e64c24a9', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, index.h("digi-icon-search", { key: '4147f2f43df7c82a074d464d38851a13e2b11b8f', slot: "icon" }), this.afButtonText)))));
    }
    get hostElement() { return index.getElement(this); }
    static get watchers() { return {
        "value": ["onValueChanged"],
        "afValue": ["onAfValueChanged"]
    }; }
};
FormInputSearch.style = DigiFormInputSearchStyle0;

exports.digi_form_input_search = FormInputSearch;
