import { h } from "@stencil/core";
import debounce from "lodash/debounce";
import { buildClassList, buildDescribedByString, listToObject, hasValueChanged, generateId } from "@boldpenguin/sdk-utility";
import isEqual from "lodash/isEqual";
const selectButtonIdPrefix = 'select-btn-';
const keyboardNavigation = {
    next: ['ArrowRight', 'ArrowDown'],
    previous: ['ArrowLeft', 'ArrowUp'],
    select: ['Enter', ' '],
};
export class BpSdkSelectInput {
    constructor() {
        this.onKeydown = (event) => {
            const key = event.key;
            const isTab = key === 'Tab';
            if ((key !== 'Shift' && key !== 'Meta' && key !== 'Alt' && key !== 'Control' && !isTab) || (isTab && this.showSelectList)) {
                event.preventDefault();
                this.handleKeyEvent(key);
            }
        };
        this.onChange = (event) => {
            event.preventDefault();
            this.updateTextDisplayed(event.target.value);
        };
        this.clickSelectItem = (choiceId) => {
            let ctrlValue = choiceId || this.choice;
            if (this.multiple) {
                ctrlValue = this.getControlValue(choiceId);
            }
            else {
                this.clickSelectButton();
            }
            this.removeActiveAnswer.emit();
            this.choice = this._value = Array.isArray(ctrlValue) ? ctrlValue : [ctrlValue];
            this.updateTextDisplayed(ctrlValue);
        };
        this.delayedClickSelectItem = debounce(this.clickSelectItem, 8);
        this.updateTextDisplayed = debounce((choiceValue) => {
            if (this.multiple && Array.isArray(choiceValue) && choiceValue.length > 0) {
                this.updateMultiSelectText(choiceValue);
            }
            else if (choiceValue && typeof choiceValue === 'string') {
                this.updateSingleSelectText(choiceValue);
            }
            else {
                this.selectText = this.placeholder || '';
            }
        }, 20);
        this.listenToTextFilter = debounce((newValue) => this.handleTextEntry(newValue), 500);
        this.onSubmitButtonClick = ($event) => this.selectFocus($event);
        this.onAutocomplete = (e) => {
            const value = e.target.value;
            const choice = this.choices.find((choice) => choice.value === value);
            this.delayedClickSelectItem(choice.id);
        };
        this.onListBlur = () => {
            this.showSelectList = false;
        };
        this.onChoiceClick = (choice) => (e) => {
            e.stopPropagation();
            e.preventDefault();
            this.delayedClickSelectItem(choice.id);
        };
        this.answerId = undefined;
        this.autoComplete = undefined;
        this.placeholder = '';
        this.useAlias = false;
        this.code = undefined;
        this.choiceId = undefined;
        this.choiceIds = [];
        this.multiple = false;
        this.choices = [];
        this.value = undefined;
        this.labelId = undefined;
        this.errors = undefined;
        this.errorText = undefined;
        this.touched = false;
        this.pristine = true;
        this.isCompleted = false;
        this.isReadOnly = false;
        this.questionId = undefined;
        this.fieldType = undefined;
        this.required = undefined;
        this.label = undefined;
        this.labelledBy = undefined;
        this.helpText = undefined;
        this.answeredBySource = undefined;
        this.choice = [];
        this._value = [];
        this._labelledBy = undefined;
        this.showSelectList = false;
        this.selectText = '';
        this.focusedIndex = 0;
        this.selectButtonId = `${selectButtonIdPrefix}${generateId(8)}`;
        this.accumulateFilter = true;
        this.currentFilterText = '';
        this.useExternal = false;
    }
    onAriaLabelledByChange(labelId) {
        this.updateLabelledBy(labelId, this.labelledBy);
    }
    onLabelledByChange(labelledBy) {
        this.updateLabelledBy(this.labelId, labelledBy);
    }
    updateLabelledBy(aria, ids) {
        const prefix = ids ? `${ids} ` : '';
        this._labelledBy = `${prefix}${aria !== null && aria !== void 0 ? aria : ''}` || undefined;
    }
    onCodeChange(newValue) {
        this.selectButtonId = `${selectButtonIdPrefix}${newValue}`;
    }
    onChoiceIdChange(choice) {
        this.choice = [choice];
        this.updateTextDisplayed(choice);
    }
    onChoiceIdsChange(choiceIds, oldIds) {
        if (isEqual(choiceIds, oldIds)) {
            return;
        }
        this.choice = choiceIds;
        this.updateTextDisplayed(choiceIds);
    }
    onShowSelectListChange(showList) {
        if (showList) {
            this.el.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
            this.updateActiveAnswer.emit(this.answerId);
        }
        else {
            this.removeActiveAnswer.emit();
        }
    }
    resetState() {
        this.showSelectList = false;
        this.accumulateFilter = true;
        this.currentFilterText = '';
    }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-select-input');
        customElements.whenDefined('bp-sdk-external-select-input').then(() => {
            this.useExternal = true;
        });
        this.onChoiceIdChange(this.choiceId);
        this.onChoiceIdsChange(this.choiceIds, []);
        this.onAriaLabelledByChange(this.labelId);
        this.onLabelledByChange(this.labelledBy);
    }
    focusOption(index) {
        this.showSelectList = true;
        this.focusedIndex = this.getSelectableIndex(index);
        setTimeout(() => {
            const optionList = this.el.querySelector('.bp-sdk-select__list');
            const element = optionList.children[this.focusedIndex];
            element.focus();
        }, 0);
    }
    selectFocus(e) {
        e.stopPropagation();
        e.preventDefault();
        if (!this.showSelectList) {
            this.focusElement();
        }
        else {
            this.showSelectList = false;
        }
    }
    focusElement() {
        this.showSelectList = true;
        this.el.dispatchEvent(new FocusEvent('focusin'));
        let focusIndex = 0;
        if (!this.multiple && this.choice.length) {
            const choiceId = this.choice[0];
            focusIndex = this.choices.findIndex((choice) => choice.id === choiceId);
        }
        this.focusOption(focusIndex);
    }
    choiceText(choice) {
        return this.useAlias && choice.alias ? choice.alias : choice.value;
    }
    getControlValue(choiceId) {
        if (this.isChosen(choiceId)) {
            return this.choice.filter((id) => id !== choiceId);
        }
        else {
            return [...this.choice, choiceId];
        }
    }
    clickSelectButton() {
        this.showSelectList = false;
        const selectButton = this.el.querySelector('.bp-sdk-select__button');
        selectButton === null || selectButton === void 0 ? void 0 : selectButton.focus();
    }
    isChosen(choiceId) {
        return (this.choice || []).includes(choiceId);
    }
    handleKeyEvent(keyName) {
        const options = this.getKeyEventOptions(keyName);
        const indexToSelect = this.getIndexToSelect(keyName, options);
        this.mapKeyEventToAction(keyName, indexToSelect, options);
    }
    getKeyEventOptions(keyName) {
        const goToNext = keyboardNavigation.next.includes(keyName);
        const goToPrevious = keyboardNavigation.previous.includes(keyName);
        const addToFilter = !goToNext && !goToPrevious && !!keyName && keyName !== ' ';
        const isOpenOrSelectKey = keyboardNavigation.select.includes(keyName) || (keyName === 'Tab' && this.showSelectList);
        const openSelectList = isOpenOrSelectKey && !this.showSelectList;
        return {
            goToNext,
            goToPrevious,
            shouldMoveIndex: goToPrevious || goToNext,
            addToFilter,
            isOpenOrSelectKey,
            openSelectList,
        };
    }
    getIndexToSelect(keyName, { goToPrevious, shouldMoveIndex, isOpenOrSelectKey }) {
        let indexToSelect;
        if (isOpenOrSelectKey && this.showSelectList) {
            indexToSelect = this.focusedIndex;
        }
        else if (keyName === 'Escape') {
            this.showSelectList = false;
        }
        else if (shouldMoveIndex && !this.showSelectList) {
            indexToSelect = !this.choice ? 0 : this.focusedIndex + (goToPrevious ? -1 : 1);
        }
        return indexToSelect;
    }
    mapKeyEventToAction(keyName, indexToSelect, { openSelectList, shouldMoveIndex, goToPrevious, addToFilter, }) {
        if (openSelectList) {
            this.focusOption(this.focusedIndex);
        }
        else if (typeof indexToSelect === 'number') {
            this.selectOptionByIndex(indexToSelect);
        }
        else if (shouldMoveIndex && this.showSelectList) {
            this.focusOption(this.focusedIndex + (goToPrevious ? -1 : 1));
        }
        else if (addToFilter) {
            this.filterText(keyName);
        }
    }
    selectOptionByIndex(index) {
        const selectableIndex = this.getSelectableIndex(index);
        this.focusedIndex = selectableIndex;
        const choice = this.choices[this.focusedIndex];
        this.delayedClickSelectItem(choice.id);
    }
    updateMultiSelectText(choiceIds) {
        const selectedChoices = this.choices.filter((c) => choiceIds.findIndex((id) => id === c.id) > -1);
        if (selectedChoices.length > 0) {
            this.selectText = selectedChoices.map((c) => (this.useAlias ? c.alias : c.value)).join(', ');
        }
    }
    updateSingleSelectText(choiceValue) {
        const choice = this.choices.find((c) => c.id === choiceValue);
        if (choice) {
            this.selectText = this.useAlias ? choice.alias : choice.value;
        }
    }
    onValueChange(newValue, oldValue) {
        if (hasValueChanged(newValue, oldValue)) {
            this.valueUpdate.emit(newValue);
        }
    }
    filterText(newValue) {
        let result = newValue;
        if (!this.accumulateFilter) {
            this.accumulateFilter = true;
        }
        else {
            result = this.currentFilterText + newValue;
        }
        this.currentFilterText = result;
        this.listenToTextFilter(result);
    }
    handleTextEntry(text) {
        var _a;
        this.accumulateFilter = false;
        const indexToFocus = (_a = (text && this.choices.findIndex((choice) => this.choiceText(choice).toLowerCase().startsWith(text.toLowerCase())))) !== null && _a !== void 0 ? _a : -1;
        const choice = this.choices[indexToFocus];
        if (this.showSelectList) {
            this.focusOption(indexToFocus);
        }
        else if (choice) {
            this.delayedClickSelectItem(choice.id);
        }
    }
    getSelectableIndex(index) {
        const lastIndex = this.choices.length - 1;
        const selectableIndex = index <= 0 ? 0 : index > lastIndex ? lastIndex : index;
        return selectableIndex;
    }
    handleOutsideClick() {
        this.showSelectList = false;
    }
    renderSubmitButton() {
        return (h("button", { type: "button", class: buildClassList('bp-sdk-select__button', {
                'bp-sdk-touched': this.touched,
                'bp-sdk-pristine': this.pristine,
            }), "aria-haspopup": "listbox", disabled: !this.choices.length, "aria-labelledby": this._labelledBy || '' + ' ' + this.selectButtonId, onClick: this.onSubmitButtonClick, id: this.selectButtonId, "aria-label": this.selectText || this.placeholder, "aria-describedby": buildDescribedByString(listToObject(this.errors)) || undefined }, this.selectText || this.placeholder, h("span", { class: "bp-sdk-align-right bp-sdk-select__button-arrow" }, "\u25BE")));
    }
    renderHiddenOptions() {
        return (h("select", { "aria-hidden": true, tabindex: "-1", class: "bp-sdk-hidden", autocomplete: this.autoComplete, multiple: this.multiple, onInput: this.onAutocomplete }, this.choices.map((choice) => (h("option", { onClick: this.onChoiceClick(choice), selected: this.isChosen(choice.id), value: choice.value }, choice.alias)))));
    }
    renderMultiSelectChoices(choice) {
        return (h("label", { htmlFor: `bp-sdk-select__list-${this.answerId}-item__input-${choice.id}`, id: `bp-sdk-select__list-${this.answerId}-item__label-${choice.id}`, class: "bp-sdk-select-list-item-label" }, h("span", { class: "bp-sdk-no-selection" }, this.choiceText(choice)), h("input", { id: `bp-sdk-select__list-${this.answerId}-item__input-${choice.id}`, class: `bp-sdk-select__list-item-content bp-sdk-select__list-item-input bp-sdk-select__list-item-content-${this.code} bp-sdk-select__list-item-input-${this.code}`, type: "checkbox", checked: this.isChosen(choice.id), placeholder: this.choiceText(choice) })));
    }
    renderSingleSelectChoices(choice) {
        return (h("span", { class: `bp-sdk-select__list-item-content bp-sdk-select__list-item-text bp-sdk-select__list-item-content-${this.code} bp-sdk-select__list-item-text-${choice.id}` }, this.choiceText(choice)));
    }
    renderChoice(choice) {
        return [this.multiple && this.renderMultiSelectChoices(choice), !this.multiple && this.renderSingleSelectChoices(choice)];
    }
    renderChoices() {
        return this.choices.map((choice, i) => (h("li", { onClick: this.onChoiceClick(choice), "aria-labelledby": this.labelId, class: buildClassList(`bp-sdk-select__list-item bp-sdk-select__list-item-${choice.id}`, {
                'bp-sdk-select__list-item-selected': this.isChosen(choice.id),
            }), role: "option", "aria-selected": (this.focusedIndex === i).toString(), tabindex: "1" }, this.renderChoice(choice))));
    }
    renderVisibleOptions() {
        return (h("ul", { class: buildClassList('bp-sdk-select__list', {
                'bp-sdk-visually-hidden': !this.showSelectList,
            }), "aria-expanded": this.showSelectList, role: "listbox", "aria-labelledby": this.labelId, tabindex: "-1", onBlur: this.onListBlur }, this.renderChoices()));
    }
    renderOptions() {
        return [this.renderHiddenOptions(), this.renderVisibleOptions()];
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-select-input", { answerId: this.answerId, autoComplete: this.autoComplete, choiceId: this.choiceId, choiceIds: this.choiceIds, choices: this.choices, code: this.code, errorText: this.errorText, errors: this.errors, fieldType: this.fieldType, helpText: this.helpText, answeredBySource: this.answeredBySource, isCompleted: this.isCompleted, isReadOnly: this.isReadOnly, labelId: this.labelId, label: this.label, labelledBy: this.labelledBy, multiple: this.multiple, placeholder: this.placeholder, pristine: this.pristine, questionId: this.questionId, required: this.required, touched: this.touched, useAlias: this.useAlias, value: this.value }));
    }
    renderInternal() {
        var _a;
        let input;
        if (this.isReadOnly) {
            const selectedIds = [this.choiceId, ...(this.choiceIds || [])];
            const selectedChoices = (this.choices || [])
                .filter((choice) => selectedIds.includes(choice.id))
                .map((choice) => this.choiceText(choice))
                .join(', ');
            input = this.renderReadOnlyElement(selectedChoices);
        }
        else {
            input = [this.renderSubmitButton(), this.renderOptions()];
        }
        return (h("div", { class: "bp-sdk-select__container", onKeyDown: this.onKeydown }, h("label", { id: this.labelId, htmlFor: this.selectButtonId, class: "bp-sdk-label bp-sdk-select__label", innerHTML: this.label }), input, this.touched && !this.pristine && ((this.errorText && !this.isCompleted) || !!((_a = this.errors) === null || _a === void 0 ? void 0 : _a.length)) && (h("bp-sdk-errors-container", { answerId: this.answerId, questionId: this.questionId, fieldType: this.fieldType, errors: this.errors, errorText: this.errorText }))));
    }
    renderReadOnlyElement(value) {
        return h("span", { class: "read-only-value" }, value);
    }
    static get is() { return "bp-sdk-select-input"; }
    static get originalStyleUrls() {
        return {
            "$": ["bp-sdk-select-input.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-select-input.css"]
        };
    }
    static get properties() {
        return {
            "answerId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Answer id"
                },
                "attribute": "answer-id",
                "reflect": false
            },
            "autoComplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Autocomplete attribute value for input"
                },
                "attribute": "auto-complete",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder to display"
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "''"
            },
            "useAlias": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Use alias for choices"
                },
                "attribute": "use-alias",
                "reflect": false,
                "defaultValue": "false"
            },
            "code": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Question code"
                },
                "attribute": "code",
                "reflect": false
            },
            "choiceId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Choice id selected. Used for single selection."
                },
                "attribute": "choice_id",
                "reflect": false
            },
            "choiceIds": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Choice ids selected. Used for multiple selection."
                },
                "defaultValue": "[]"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to allow multi-select."
                },
                "attribute": "multiple",
                "reflect": false,
                "defaultValue": "false"
            },
            "choices": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IChoice[]",
                    "resolved": "IChoice[]",
                    "references": {
                        "IChoice": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IChoice"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Choices to display"
                },
                "defaultValue": "[]"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current value"
                },
                "attribute": "value",
                "reflect": false
            },
            "labelId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Aria label id's that describes input for screen readers"
                },
                "attribute": "label-id",
                "reflect": false
            },
            "errors": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error messages"
                }
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error text"
                },
                "attribute": "error_text",
                "reflect": false
            },
            "touched": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is Touched"
                },
                "attribute": "touched",
                "reflect": false,
                "defaultValue": "false"
            },
            "pristine": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is Pristine"
                },
                "attribute": "pristine",
                "reflect": false,
                "defaultValue": "true"
            },
            "isCompleted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is answer in complete state"
                },
                "attribute": "is_completed",
                "reflect": false,
                "defaultValue": "false"
            },
            "isReadOnly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the field will be readonly. It will display only the label and value as plain text."
                },
                "attribute": "is-read-only",
                "reflect": false,
                "defaultValue": "false"
            },
            "questionId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Question Id"
                },
                "attribute": "question_id",
                "reflect": false
            },
            "fieldType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Field type"
                },
                "attribute": "field_type",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is required"
                },
                "attribute": "required",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label to use"
                },
                "attribute": "label",
                "reflect": false
            },
            "labelledBy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Labels that describe group"
                },
                "attribute": "labelled-by",
                "reflect": false
            },
            "helpText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Help text"
                },
                "attribute": "help-text",
                "reflect": false
            },
            "answeredBySource": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifically how the question was answered (ie. \"ACORD 126\")"
                },
                "attribute": "answered-by-source",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "choice": {},
            "_value": {},
            "_labelledBy": {},
            "showSelectList": {},
            "selectText": {},
            "focusedIndex": {},
            "selectButtonId": {},
            "accumulateFilter": {},
            "currentFilterText": {},
            "useExternal": {}
        };
    }
    static get events() {
        return [{
                "method": "valueUpdate",
                "name": "valueUpdate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                }
            }, {
                "method": "removeActiveAnswer",
                "name": "removeActiveAnswer",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "updateActiveAnswer",
                "name": "updateActiveAnswer",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "labelId",
                "methodName": "onAriaLabelledByChange"
            }, {
                "propName": "labelledBy",
                "methodName": "onLabelledByChange"
            }, {
                "propName": "code",
                "methodName": "onCodeChange"
            }, {
                "propName": "choiceId",
                "methodName": "onChoiceIdChange"
            }, {
                "propName": "choiceIds",
                "methodName": "onChoiceIdsChange"
            }, {
                "propName": "showSelectList",
                "methodName": "onShowSelectListChange"
            }, {
                "propName": "_value",
                "methodName": "onValueChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleOutsideClick",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
