import { MDCTextField } from "@material/textfield";
import { h, Host, } from "@stencil/core";
import { handleKeyboardEvent } from "./chip-set-input-helpers";
import translate from "../../global/translations";
import { getHref, getTarget } from "../../util/link-helper";
import { isEqual } from "lodash-es";
import { createRandomString } from "../../util/random-string";
/**
 * :::note
 * **Regarding `click` and `interact` events:**
 *
 * The `interact` event is emitted when a chip is interacted with, and is
 * the recommended way to listen for chip interactions.
 *
 * However, if you need to handle clicks differently depending on which chip
 * was clicked, or whether the click was on a chip or elsewhere, you need to
 * listen to the native `click` event instead.
 *
 * Native `click` events are passed through, and if the click came from
 * a chip, the chip object is available in the event object under
 * `<event object>.Lime.chip`.
 *
 * Example usage:
 * ```ts
 * private handleClick(event: Event) {
 *     if (event && 'Lime' in event && (event.Lime as any).chip) {
 *         if ((event.Lime as { chip: Chip }).chip.href) {
 *             // Chip has href, so let the browser open the link.
 *             return;
 *         }
 *         // handle click on chip without href
 *     } else {
 *         // handle click elsewhere
 *     }
 * }
 * ```
 * :::
 *
 * @exampleComponent limel-example-chip-set-basic
 * @exampleComponent limel-example-chip-set-choice
 * @exampleComponent limel-example-chip-set-filter
 * @exampleComponent limel-example-chip-set-filter-badge
 * @exampleComponent limel-example-chip-set-input
 * @exampleComponent limel-example-chip-set-input-type-with-menu-items
 * @exampleComponent limel-example-chip-set-input-type-text
 * @exampleComponent limel-example-chip-set-input-type-search
 * @exampleComponent limel-example-chip-icon-color
 * @exampleComponent limel-example-chip-set-image
 * @exampleComponent limel-example-chip-set-composite
 */
export class ChipSet {
    constructor() {
        /**
         * List of chips for the set
         */
        this.value = [];
        /**
         * True if the chip set should be disabled
         */
        this.disabled = false;
        /**
         * For chip-sets of type `input`, set to `true` to disable adding and
         * removing chips, but allow interaction with existing chips in the set.
         * For any other types, setting either `readonly` or `disabled` disables
         * the chip-set.
         */
        this.readonly = false;
        /**
         * Set to `true` to indicate that the current value of the input field is
         * invalid.
         */
        this.invalid = false;
        /**
         * For chip-sets of type `input`. Value to use for the `type` attribute on the
         * input field inside the chip-set.
         */
        this.inputType = 'text';
        /**
         * True if the control requires a value
         */
        this.required = false;
        /**
         * Whether the input field should be emptied when the chip-set loses focus.
         */
        this.emptyInputOnBlur = true;
        /**
         * Whether the "Clear all" buttons should be shown
         */
        this.clearAllButton = true;
        /**
         * For chip-sets of type `input`. When the value is null, no leading icon is used.
         * Leading icon to show to the far left in the text field
         */
        this.leadingIcon = null;
        /**
         * For chip-set of type `input`. Sets delimiters between chips.
         */
        this.delimiter = null;
        /**
         * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.
         * Read more about the `autocomplete` attribute
         * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
         */
        this.autocomplete = 'off';
        /**
         * Defines the language for translations.
         * Will translate the translatable strings on the components. For example, the clear all chips label.
         */
        this.language = 'en';
        this.editMode = false;
        this.textValue = '';
        this.blurred = false;
        this.inputChipIndexSelected = null;
        this.handleKeyDown = handleKeyboardEvent;
        this.renderContent = (value) => {
            if (this.type === 'input') {
                return this.renderInputChips();
            }
            return value.map(this.renderChip);
        };
        this.getValue = () => {
            return this.value.map((chip) => (Object.assign(Object.assign({}, chip), (this.type && {
                selected: this.selectedChipIds.includes(chip.id),
            }))));
        };
        this.floatLabelAbove = () => {
            if (this.value.length > 0 ||
                this.editMode ||
                this.readonly ||
                this.textValue) {
                return true;
            }
        };
        this.hasHelperText = () => {
            return this.helperText !== null && this.helperText !== undefined;
        };
        this.renderHelperLine = () => {
            const maxItems = this.maxItems === 1 ? undefined : this.maxItems;
            if (!maxItems && !this.hasHelperText()) {
                return;
            }
            return (h("limel-helper-line", { length: this.value.length, maxLength: maxItems, helperText: this.helperText, invalid: this.isInvalid() }));
        };
        this.catchInputChipClicks = (chip) => (event) => {
            /*
             * We need to add the `chip` to the event object so that the consumer
             * can get the chip object when the chip is clicked.
             * This is necessary for the consumer to be able to handle the click
             * event itself, based on which chip was clicked, or whether the click
             * was on a chip or elsewhere. The reason the consumer can't just look
             * at the event target is that that information is hidden by the
             * shadow DOM.
             *
             * See documentation for the `interact` event for more information.
             */
            event.Lime = { chip: chip };
            if (this.isSelectableChip(chip)) {
                this.updateSelectedChipIds(chip);
                this.change.emit(chip);
            }
            this.emitInteraction(chip);
        };
        this.handleRemoveChip = (event) => {
            this.removeChip(event.detail);
        };
        this.removeChip = (identifier) => {
            const newValue = this.value.filter((chip) => {
                return chip.id !== identifier;
            });
            this.change.emit(newValue);
        };
        this.clearAllChipsLabel = () => {
            return translate.get('chip-set.clear-all', this.language);
        };
        this.labelId = createRandomString();
        this.renderChip = this.renderChip.bind(this);
        this.renderInputChip = this.renderInputChip.bind(this);
        this.isFull = this.isFull.bind(this);
        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);
        this.handleInputBlur = this.handleInputBlur.bind(this);
        this.handleTextInput = this.handleTextInput.bind(this);
        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.inputHidden = this.inputHidden.bind(this);
        this.handleDeleteAllIconClick =
            this.handleDeleteAllIconClick.bind(this);
        this.renderDelimiter = this.renderDelimiter.bind(this);
    }
    connectedCallback() {
        this.initialize();
    }
    initialize() {
        if (this.value.length > 0) {
            this.selectedChipIds = this.value
                .filter((chip) => chip.selected)
                .map((chip) => chip.id);
        }
    }
    /**
     * Used to find out whether the chip-set is in edit mode.
     *
     * @returns `true` if the chip-set is in edit mode, `false` otherwise.
     */
    async getEditMode() {
        return this.editMode;
    }
    /**
     * Used to set focus to the chip-set input field.
     *
     * @param emptyInput - if `true`, any text in the input is discarded
     * @returns does not return anything, but methods have to be async
     */
    async setFocus(emptyInput = false) {
        if (this.disabled || this.readonly) {
            return;
        }
        this.editMode = true;
        if (emptyInput) {
            this.textValue = '';
        }
        this.host.shadowRoot.querySelector('input').focus();
        this.startEdit.emit();
    }
    /**
     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
     * consumer control when the input is emptied.
     *
     * @returns does not return anything, but methods have to be async
     */
    async emptyInput() {
        this.syncEmptyInput();
    }
    componentDidLoad() {
        this.triggerIconColorWarning(this.value);
        if (this.type === 'input') {
            this.mdcTextField = new MDCTextField(this.host.shadowRoot.querySelector('.mdc-text-field'));
        }
    }
    componentDidUpdate() {
        const input = this.host.shadowRoot.querySelector('input');
        if (input && this.editMode) {
            input.focus();
        }
    }
    disconnectedCallback() {
        if (this.mdcTextField) {
            this.mdcTextField.destroy();
        }
    }
    render() {
        var _a;
        const classes = {
            'mdc-chip-set': true,
            'mdc-text-field--with-trailing-icon': true,
            disabled: this.disabled || this.readonly,
        };
        if (this.type) {
            classes[`mdc-chip-set--${this.type}`] = true;
        }
        if (this.type === 'input') {
            Object.assign(classes, {
                'mdc-text-field': true,
                'mdc-text-field--outlined': true,
                'mdc-chip-set--input': true,
                'lime-text-field--readonly': this.readonly,
                'has-chips': this.value.length > 0,
                'has-leading-icon': this.leadingIcon !== null,
                'has-clear-all-button': this.clearAllButton,
            });
        }
        const value = this.getValue();
        return (h(Host, { key: 'cc38b12787a887fa3cf6d54412d460fffdc10d37' }, h("limel-notched-outline", { key: '363ee1953a0880a987acbaeb75ad7682c03c26ec', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: 'c05be9685e36d5283791bf30aceb937f8da0c0a0', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
    }
    getContentProps() {
        if (this.type === 'input') {
            return {
                onClick: this.handleTextFieldFocus,
            };
        }
        return {
            role: 'grid',
        };
    }
    handleChangeChips(newValue, oldValue) {
        if (isEqual(newValue, oldValue)) {
            return;
        }
        this.syncEmptyInput();
        this.initialize();
    }
    renderInputChips() {
        return [
            this.value.map(this.renderInputChip),
            h("input", { tabIndex: this.disabled || this.readonly ? -1 : 0, type: this.inputType, id: this.labelId, disabled: this.readonly || this.disabled, class: {
                    'mdc-text-field__input': true,
                    hidden: this.inputHidden(),
                }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput,
                // Some browsers emit a change event on input elements, we need to stop
                // that event from propagating since we are emitting our own change event
                onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull(), autocomplete: this.autocomplete }),
            this.renderLeadingIcon(),
            this.renderClearAllChipsButton(),
        ];
    }
    isFull() {
        return !!this.maxItems && this.value.length >= this.maxItems;
    }
    isInvalid() {
        var _a;
        if (this.readonly) {
            // A readonly field can never be invalid.
            return false;
        }
        if (this.invalid) {
            return true;
        }
        if (!this.required) {
            return false;
        }
        if (!this.blurred) {
            return false;
        }
        return !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length);
    }
    inputFieldOnChange(event) {
        event.stopPropagation();
    }
    /**
     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
     */
    handleTextFieldFocus() {
        if (this.disabled || this.readonly) {
            return;
        }
        if (this.editMode) {
            return;
        }
        this.editMode = true;
        this.startEdit.emit();
    }
    /**
     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
     * additional space when the user it not typing anything
     */
    handleInputBlur() {
        if (this.emptyInputOnBlur) {
            this.syncEmptyInput();
        }
        this.editMode = false;
        this.blurred = true;
        this.inputChipIndexSelected = null;
        // This timeout is needed in order to let a new element receive focus
        setTimeout(() => {
            this.stopEdit.emit();
        }, 0);
    }
    syncEmptyInput() {
        this.textValue = '';
    }
    inputHidden() {
        var _a;
        if (this.editMode) {
            return this.isFull();
        }
        // If there are chips in the picker, hide the input to avoid the input
        // being placed on a new line and adding ugly space beneath the chips.
        // If there are no chips, show the input, or the picker will look weird.
        return !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length);
    }
    handleTextInput(event) {
        var _a;
        event.stopPropagation();
        this.inputChipIndexSelected = null;
        this.textValue = event.target.value;
        this.input.emit((_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim());
    }
    emitInteraction(chip) {
        this.interact.emit(chip);
    }
    renderChip(chip) {
        const chipType = this.type === 'filter' ? 'filter' : 'default';
        const chipProps = this.getChipProps(chip, chipType);
        return h("limel-chip", Object.assign({}, chipProps));
    }
    renderInputChip(chip, index, chips) {
        const chipProps = this.getChipProps(chip, 'default');
        const isLastChip = index === chips.length - 1;
        return [
            h("limel-chip", Object.assign({ key: chip.id, class: {
                    'can-be-removed': this.inputChipIndexSelected === index,
                } }, chipProps)),
            !(isLastChip && this.inputHidden()) && this.renderDelimiter(),
        ];
    }
    getChipProps(chip, chipType) {
        const removable = this.type === 'input' && chip.removable && !this.readonly;
        const readonly = this.readonly && this.type !== 'input';
        return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, image: chip.image, badge: chip.badge, selected: chip.selected, disabled: this.disabled, loading: chip.loading, readonly: readonly, type: chipType, removable: removable, menuItems: chip.menuItems, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
            link: {
                href: getHref(chip.href),
                target: getTarget(chip.href),
            },
        }));
    }
    isSelectableChip(chip) {
        return this.type !== 'input' && 'selected' in chip;
    }
    updateSelectedChipIds(chip) {
        chip.selected = !chip.selected;
        const id = chip.id;
        if (this.type === 'choice') {
            this.updateChoiceTypeSelectedIds(id);
        }
        else {
            this.updateFilterTypeSelectedIds(id);
        }
    }
    updateChoiceTypeSelectedIds(id) {
        this.selectedChipIds = this.isChipSelected(id) ? [] : [id];
    }
    isChipSelected(id) {
        return this.selectedChipIds.includes(id);
    }
    updateFilterTypeSelectedIds(id) {
        if (this.isChipSelected(id)) {
            this.removeChipIdFromSelectedChipIds(id);
        }
        else {
            this.addChipIdToSelectedChipIds(id);
        }
    }
    removeChipIdFromSelectedChipIds(id) {
        this.selectedChipIds = this.selectedChipIds.filter((chipId) => chipId !== id);
    }
    addChipIdToSelectedChipIds(id) {
        this.selectedChipIds = [...this.selectedChipIds, id];
    }
    renderLeadingIcon() {
        if (!this.leadingIcon) {
            return;
        }
        return (h("i", { class: "mdc-text-field__icon search-icon" }, h("limel-icon", { name: this.leadingIcon })));
    }
    renderClearAllChipsButton() {
        if (this.disabled || this.readonly || !this.clearAllButton) {
            return;
        }
        return (h("a", { href: "", onClick: this.handleDeleteAllIconClick, class: "mdc-text-field__icon clear-all-button", tabindex: "0", role: "button", title: this.clearAllChipsLabel(), "aria-label": this.clearAllChipsLabel() }));
    }
    handleDeleteAllIconClick(event) {
        event.preventDefault();
        this.change.emit([]);
    }
    renderDelimiter() {
        if (!this.delimiter) {
            return;
        }
        return h("div", { class: "delimiter" }, this.delimiter);
    }
    triggerIconColorWarning(value) {
        for (const chip of value) {
            if (chip.icon &&
                (chip.iconFillColor ||
                    chip.iconBackgroundColor ||
                    chip.iconTitle)) {
                console.warn("The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.");
            }
        }
    }
    static get is() { return "limel-chip-set"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["chip-set.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chip-set.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Chip[]",
                    "resolved": "Chip<any>[]",
                    "references": {
                        "Chip": {
                            "location": "import",
                            "path": "../chip-set/chip.types",
                            "id": "src/components/chip-set/chip.types.ts::Chip",
                            "referenceLocation": "Chip"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "List of chips for the set"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'choice' | 'filter' | 'input'",
                    "resolved": "\"choice\" | \"filter\" | \"input\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Type of chip set\n\n- `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n- `filter` renders a set of selectable chips where all are selectable.\n- `input` renders a set of chips that can be used in conjunction with an input field\n\nIf no type is set, a basic set of chips without additional functionality will be rendered"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "type"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label for the chip-set"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Optional helper text to display below the chipset.\nWhen type is `input`, the helper text is displayed below the\ninput field when it has focus.\nWhen type is not `input`, the helper text is always displayed\nif the device is touch screen; otherwise it is shown when chip-set\nis hovered or focused using keyboard navigation."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "helper-text"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True if the chip set should be disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "For chip-sets of type `input`, set to `true` to disable adding and\nremoving chips, but allow interaction with existing chips in the set.\nFor any other types, setting either `readonly` or `disabled` disables\nthe chip-set."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "inputType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'search' | 'text'",
                    "resolved": "\"search\" | \"text\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "For chip-sets of type `input`. Value to use for the `type` attribute on the\ninput field inside the chip-set."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "input-type",
                "defaultValue": "'text'"
            },
            "maxItems": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "For chip-sets of type `input`. Limits the maximum number of chips.\nWhen the value is `0` or not set, no limit is applied."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "max-items"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "True if the control requires a value"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required",
                "defaultValue": "false"
            },
            "searchLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Search label to display when type is `input` and component is in search mode"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "search-label"
            },
            "emptyInputOnBlur": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the input field should be emptied when the chip-set loses focus."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "empty-input-on-blur",
                "defaultValue": "true"
            },
            "clearAllButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the \"Clear all\" buttons should be shown"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "clear-all-button",
                "defaultValue": "true"
            },
            "leadingIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "For chip-sets of type `input`. When the value is null, no leading icon is used.\nLeading icon to show to the far left in the text field"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "leading-icon",
                "defaultValue": "null"
            },
            "delimiter": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "For chip-set of type `input`. Sets delimiters between chips."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "delimiter",
                "defaultValue": "null"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\nRead more about the `autocomplete` attribute\n[here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "autocomplete",
                "defaultValue": "'off'"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the language for translations.\nWill translate the translatable strings on the components. For example, the clear all chips label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "'en'"
            }
        };
    }
    static get states() {
        return {
            "editMode": {},
            "textValue": {},
            "blurred": {},
            "inputChipIndexSelected": {},
            "selectedChipIds": {}
        };
    }
    static get events() {
        return [{
                "method": "interact",
                "name": "interact",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when a chip is interacted with"
                },
                "complexType": {
                    "original": "Chip",
                    "resolved": "Chip<any>",
                    "references": {
                        "Chip": {
                            "location": "import",
                            "path": "../chip-set/chip.types",
                            "id": "src/components/chip-set/chip.types.ts::Chip",
                            "referenceLocation": "Chip"
                        }
                    }
                }
            }, {
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when a chip is selected/deselected"
                },
                "complexType": {
                    "original": "Chip | Chip[]",
                    "resolved": "Chip<any> | Chip<any>[]",
                    "references": {
                        "Chip": {
                            "location": "import",
                            "path": "../chip-set/chip.types",
                            "id": "src/components/chip-set/chip.types.ts::Chip",
                            "referenceLocation": "Chip"
                        }
                    }
                }
            }, {
                "method": "startEdit",
                "name": "startEdit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when an input chip set has received focus and editing in the text field has started"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "stopEdit",
                "name": "stopEdit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when an input chip set has lost focus and editing in the text field has ended"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "input",
                "name": "input",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Dispatched when the input is changed for type `input`"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "getEditMode": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Used to find out whether the chip-set is in edit mode.",
                    "tags": [{
                            "name": "returns",
                            "text": "`true` if the chip-set is in edit mode, `false` otherwise."
                        }]
                }
            },
            "setFocus": {
                "complexType": {
                    "signature": "(emptyInput?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "emptyInput",
                            "type": "boolean",
                            "docs": "- if `true`, any text in the input is discarded"
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Used to set focus to the chip-set input field.",
                    "tags": [{
                            "name": "param",
                            "text": "emptyInput - if `true`, any text in the input is discarded"
                        }, {
                            "name": "returns",
                            "text": "does not return anything, but methods have to be async"
                        }]
                }
            },
            "emptyInput": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\nconsumer control when the input is emptied.",
                    "tags": [{
                            "name": "returns",
                            "text": "does not return anything, but methods have to be async"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "handleChangeChips"
            }];
    }
}
