@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/combobox/ComboBox.ts

@@ -0,0 +1,1093 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/help-text/HelpText";
+import "@/components/icon/Icon";
+import { Key } from "@/constants";
+import { FocusMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { debounce, findHighlight } from "@/utils/helpers";
+import reset from "@/wc_scss/reset.scss";
+import { html, internalProperty, LitElement, property, PropertyValues, query, queryAll } from "lit-element";
+import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { repeat } from "lit-html/directives/repeat";
+import { styleMap } from "lit-html/directives/style-map";
+import styles from "./scss/module.scss";
+
+export namespace ComboBox {
+  type OptionMember = { [key: string]: string };
+  type SelectedEvent = {
+    value?: string | OptionMember;
+    selected: (string | OptionMember)[];
+  };
+
+  @customElementWithCheck("md-combobox")
+  export class ELEMENT extends FocusMixin(LitElement) {
+    private _focusedIndex = -1;
+
+    @property({ type: String }) label = "Options";
+    @property({ type: Array }) options: (string | OptionMember)[] = [];
+    @property({ type: Array, attribute: "custom-options" }) customOptions = [];
+    @property({ type: String }) placeholder = "";
+    @property({ type: Boolean, attribute: "is-multi" }) isMulti = false;
+    @property({ type: Boolean, reflect: true }) disabled = false;
+    @property({ type: Boolean, reflect: true }) ordered = false;
+    @property({ type: Boolean, reflect: true }) expanded = false;
+    @property({ type: Boolean, reflect: true }) compact = false;
+    @property({ type: Boolean, attribute: "no-clear-icon" }) noClearIcon = false;
+    @property({ type: Boolean, attribute: "select-when-in-focus" }) selectWhenInFocus = false;
+    @property({ type: Array }) selectedOptions: (string | OptionMember)[] = [];
+    @property({ type: Number, attribute: "visible-option", reflect: true }) visibleOptions = 8;
+    @property({ type: String, attribute: "option-id", reflect: true }) optionId = "";
+    @property({ type: String, attribute: "option-value", reflect: true }) optionValue = "";
+    @property({ type: Boolean, attribute: "with-custom-content" }) isCustomContent = false;
+    @property({ type: Boolean, reflect: true }) searchable = false;
+    @property({ type: String }) shape = "none";
+    @property({ type: Array }) value: (string | OptionMember)[] = [];
+    @property({ type: String, attribute: "input-value", reflect: true }) inputValue = "";
+    @property({ type: Boolean, attribute: "allow-custom-value", reflect: true }) allowCustomValue = false;
+    @property({ type: Boolean, reflect: true }) autofocus = false;
+    @property({ type: String, attribute: "no-results-i18n" }) resultsTextLocalization = "No Results";
+    @property({ type: String, attribute: "no-options-i18n" }) optionsTextLocalization = "No Options";
+    @property({ type: Boolean, reflect: true, attribute: "search-trim-space" }) trimSpace = false;
+    @property({ type: Boolean, reflect: true }) invalid = false;
+    @property({ type: String, reflect: true, attribute: "invalid-text-i18n" }) invalidText = "";
+
+    @property({ type: String, attribute: "aria-label" }) ariaLabel = "Combobox Input";
+    @property({ type: String, attribute: "clear-aria-label" }) clearAriaLabel = "Clear";
+    @property({ type: String, attribute: "arrow-aria-label" }) arrowAriaLabel = "Expand";
+
+    @property({ type: String, attribute: "all-i18n" }) allTextLocalization = "All";
+    @property({ type: String, attribute: "select-all-i18n" }) selectAllTextLocalization = "Select All";
+    @property({ type: String, attribute: "selected-all-i18n" }) selectedTextLocalization = "Selected";
+
+    @property({ type: Boolean, attribute: "allow-select-all", reflect: true }) allowSelectAll = false;
+    @property({ type: Boolean, attribute: "show-custom-error", reflect: true }) showCustomError = false;
+    @property({ type: Boolean, attribute: "show-selected-count", reflect: true }) showSelectedCount = false;
+
+    @property({ type: Number, attribute: false })
+    @internalProperty()
+    private isSelectAllChecked = false;
+    get focusedIndex() {
+      return this._focusedIndex;
+    }
+    set focusedIndex(index: number) {
+      const oldIndex = this._focusedIndex;
+      if (this.lists) {
+        const oldFocusedOption = this.lists[oldIndex];
+        if (oldFocusedOption) {
+          oldFocusedOption.toggleAttribute("focused", false);
+        }
+        const newFocusedOption = this.lists[index];
+        if (newFocusedOption) {
+          newFocusedOption.toggleAttribute("focused", true);
+        }
+      }
+      this._focusedIndex = index;
+      this.requestUpdate("focusedIndex", oldIndex);
+    }
+
+    private multiSelectedIndex = -1;
+    private multiSelected: number[] = [];
+    private customContent: Element[] = [];
+
+    @query(".group") group?: HTMLDivElement;
+    @query(".md-combobox-listbox") input?: HTMLInputElement;
+    @query(".md-combobox-button") button?: HTMLButtonElement;
+    @query("ul[role='listbox'") listBox?: HTMLUListElement;
+
+    @queryAll("li[role='option']") lists?: HTMLLIElement[];
+    @queryAll(".md-combobox-selected-item") selected?: HTMLDivElement[];
+
+    protected firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+      this.setAttribute("tabindex", "0");
+      if (this.isCustomContent) {
+        this.optionId = "id";
+        this.optionValue = "value";
+        this.setOptionCustomContent();
+      }
+      this.setInitialValue();
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("expanded")) {
+        if (this.expanded) {
+          this.resizeListbox();
+        }
+      }
+      if (changedProperties.has("focusedIndex")) {
+        if (this.focusedIndex >= 0) {
+          this.scrollToOption();
+        }
+      }
+      if (changedProperties.has("value")) {
+        if (this.selectedOptions.length === 0) {
+          this.setInitialValue();
+        }
+      }
+      if (changedProperties.has("customOptions")) {
+        if (this.isCustomContent) {
+          this.setOptionCustomContent();
+          this.resizeListbox();
+        }
+      }
+    }
+
+    protected handleFocusIn(event: Event) {
+      if (!this.disabled) {
+        requestAnimationFrame(() => {
+          this.input!.focus();
+        });
+
+        if (this.selectWhenInFocus) {
+          this.input!.select();
+        }
+        super.handleFocusIn && super.handleFocusIn(event);
+      }
+      this.dispatchEvent(
+        new CustomEvent("combobox-focus-in", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+
+    protected handleFocusOut(event: Event) {
+      super.handleFocusOut && super.handleFocusOut(event);
+      this.dispatchEvent(
+        new CustomEvent("combobox-focus-out", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+
+    private findFilteredOption(option: string | OptionMember) {
+      if (this.isOptionObject(option)) {
+        return (this.filteredOptions as OptionMember[]).findIndex(
+          filteredOption =>
+            this.getOptionId(filteredOption) === this.getOptionId(option) &&
+            this.getOptionValue(filteredOption) === this.getOptionValue(option)
+        );
+      }
+      return this.filteredOptions.indexOf(option);
+    }
+
+    private setInitialValue() {
+      if (this.value.length) {
+        if (this.isMulti) {
+          this.value.forEach(v => {
+            const selectedIndex = this.findFilteredOption(v);
+            if (selectedIndex !== -1) {
+              this.setSelectedOption(v);
+            }
+          });
+        } else {
+          const option = this.value[0];
+          const selectedIndex = this.findFilteredOption(option);
+          if (selectedIndex !== -1) {
+            this.setSelectedOption(option);
+            this.setInputValue(this.getOptionValue(option));
+            this.focusedIndex = selectedIndex;
+          }
+        }
+      }
+    }
+
+    private isOptionObject(option: string | OptionMember) {
+      return typeof option === "object" && option !== null;
+    }
+
+    private setOptionCustomContent() {
+      this.customContent = [...this.querySelectorAll(`[slot]`)];
+      if (this.customContent && this.customContent.length) {
+        this.options = this.customContent.map(content => {
+          const customValue = content.getAttribute("aria-label");
+          const displayCustomValue = content.getAttribute("display-value");
+          if (customValue && displayCustomValue) {
+            return { [this.optionId]: customValue, [this.optionValue]: displayCustomValue };
+          }
+        }) as OptionMember[];
+      } else {
+        this.options = [];
+      }
+    }
+
+    private getOptionValue(option: string | OptionMember) {
+      return this.isOptionObject(option) ? (option as OptionMember)[this.optionValue] : (option as string);
+    }
+
+    private getOptionId(option: string | OptionMember) {
+      return this.isOptionObject(option) ? (option as OptionMember)[this.optionId] : (option as string);
+    }
+
+    private getFocusedItem(focusedIndex: number) {
+      if (focusedIndex >= 0) {
+        return this.filteredOptions[focusedIndex];
+      }
+    }
+
+    private setupEvents() {
+      document.addEventListener("click", this.handleOutsideClick);
+      this.addEventListener("remove-all-selected", this.removeAllSelected);
+      this.addEventListener("selected-changed", this.selectedChange as EventListener);
+    }
+
+    private teardownEvents() {
+      document.removeEventListener("click", this.handleOutsideClick);
+      this.removeEventListener("remove-all-selected", this.removeAllSelected);
+      this.removeEventListener("selected-changed", this.selectedChange as EventListener);
+    }
+
+    private setVisualListbox(value: boolean) {
+      this.expanded = value;
+    }
+
+    private findSelectedOption(option: string | OptionMember) {
+      if (this.optionId && option) {
+        return this.selectedOptions.findIndex(
+          selectedOption =>
+            selectedOption &&
+            (selectedOption as OptionMember)[this.optionId] === (option as OptionMember)[this.optionId]
+        );
+      } else {
+        return this.selectedOptions.indexOf(option);
+      }
+    }
+
+    private findOptionIndex(event: MouseEvent) {
+      const eventPath = event.composedPath();
+      return [...this.lists!].findIndex(listOption => eventPath.includes(listOption));
+    }
+
+    private setSelectedOption(option: string | OptionMember) {
+      if (!this.isMulti) {
+        this.selectedOptions = [];
+      }
+      const selectedIndex = this.findSelectedOption(option);
+      if (selectedIndex !== -1) {
+        const removedOption = this.selectedOptions[selectedIndex];
+        this.selectedOptions.splice(selectedIndex, 1);
+        this.notifySelectedChange({
+          value: removedOption,
+          selected: this.selectedOptions
+        });
+      } else {
+        this.selectedOptions.push(option);
+        this.notifySelectedChange({
+          value: option,
+          selected: this.selectedOptions
+        });
+      }
+      if (this.isMulti && this.allowSelectAll) {
+        this.isSelectAllChecked = this.isSelectAllSelected();
+      }
+      this.requestUpdate();
+    }
+
+    private notifySelectedChange = debounce((detail: SelectedEvent) => {
+      this.dispatchEvent(
+        new CustomEvent<SelectedEvent>("change-selected", {
+          composed: true,
+          bubbles: true,
+          detail
+        })
+      );
+    }, 250);
+
+    private filterOptions(value: string): (string | OptionMember)[] {
+      return value && value.length
+        ? this.options.filter((option: string | OptionMember) =>
+            (this.isCustomContent ? this.getOptionId(option) : this.getOptionValue(option))
+              .toLowerCase()
+              .includes(value.toLowerCase())
+          )
+        : this.options;
+    }
+
+    private resizeListbox() {
+      this.updateOnNextFrame(() => {
+        if (this.lists) {
+          const height = [...this.lists]
+            .slice(0, this.visibleOptions)
+            .reduce((accumulator, option) => accumulator + option.offsetHeight, 0);
+
+          if (this.listBox) {
+            this.listBox.style.maxHeight = `${height}px`;
+          }
+        }
+        if (this.showCustomError) {
+          const errorContent = this.listBox?.querySelector("[slot]");
+          if (this.listBox && errorContent) {
+            this.listBox.style.height = `${errorContent.clientHeight}px`;
+            this.listBox.style.maxHeight = `${errorContent.clientHeight}px`;
+          }
+        }
+      });
+    }
+
+    private setInputValue(value = "") {
+      this.input!.value = value;
+    }
+
+    private updateOnNextFrame(cb: FrameRequestCallback) {
+      requestAnimationFrame(cb);
+    }
+
+    private unCheckedAllOptions() {
+      if (this.isMulti) {
+        this.lists!.forEach((list, index) => this.unCheckedOption(index));
+        this.isSelectAllChecked = false;
+      }
+    }
+
+    private unCheckedOption(index: number) {
+      if (this.isMulti) {
+        this.lists![index].setAttribute("aria-checked", "false");
+        this.notifySelectedChange({
+          value: this.filteredOptions[index],
+          selected: this.selectedOptions
+        });
+      }
+    }
+
+    private checkAllOptions() {
+      if (this.isMulti) {
+        this.lists!.forEach((list, index) => this.checkOption(index));
+      }
+    }
+
+    private checkOption(index: number) {
+      if (this.isMulti) {
+        this.lists![index].setAttribute("aria-checked", "true");
+        this.notifySelectedChange({
+          value: this.filteredOptions[index],
+          selected: this.selectedOptions
+        });
+      }
+    }
+
+    private isSelectAllSelected() {
+      return this.selectedOptions.length === this.options.length;
+    }
+
+    private setFocusOnHost(force: boolean) {
+      if (this.setFocus) {
+        this.setFocus(force);
+      }
+    }
+
+    private isOptionFocused(optionIndex: number) {
+      return this.focusedIndex === optionIndex;
+    }
+
+    private getAriaState(optionIndex: number) {
+      return this.isOptionFocused(optionIndex);
+    }
+
+    private scrollToOption() {
+      let distance = 0;
+      const { top, bottom } = this.listBox!.getBoundingClientRect();
+      const option = this.lists![this.focusedIndex];
+      const nextOption = (this.lists![this.focusedIndex + 1] || option).getBoundingClientRect();
+      const prevOption = (this.lists![this.focusedIndex - 1] || option).getBoundingClientRect();
+
+      if (nextOption.bottom > bottom) {
+        distance = nextOption.bottom - bottom + 2;
+      } else if (prevOption.top < top) {
+        distance = prevOption.top - top - 2;
+      }
+      this.updateOnNextFrame(() => {
+        this.listBox!.scrollTop += distance;
+      });
+    }
+
+    private getCustomContentName(option: string | OptionMember) {
+      const index = this.options.indexOf(option);
+      if (index !== -1) {
+        return this.customContent[index].slot;
+      }
+    }
+
+    private setInputSelectionRange(start: number, end: number) {
+      this.input!.setSelectionRange(start, end);
+    }
+
+    private isOptionChecked(option: string | OptionMember) {
+      if (this.findSelectedOption(option) !== -1) {
+        return "true";
+      }
+      return "false";
+    }
+
+    private getInputSelection() {
+      return this.input!.selectionStart;
+    }
+
+    private canMultiSelect() {
+      const inputSelection = this.getInputSelection();
+      return inputSelection === 0 && this.selectedOptions.length !== 0 && this.isMulti;
+    }
+
+    private removeMultiTag() {
+      if (this.selected) {
+        this.multiSelected.forEach(index => {
+          const selected = this.selected![index];
+          if (selected && selected.hasAttribute("selected")) {
+            this.removeSelected(this.selectedOptions[index]);
+          }
+        });
+      }
+    }
+
+    private unselectedAllMultiTag() {
+      if (this.selected) {
+        this.selected.forEach(selected => selected.removeAttribute("selected"));
+      }
+      this.multiSelectedIndex = -1;
+    }
+
+    private findLastMultiSelected() {
+      return this.selected![this.multiSelectedIndex];
+    }
+
+    private toggleMultiSelectedTag(selected: HTMLElement | undefined, force: boolean) {
+      if (selected) {
+        selected.toggleAttribute("selected", force);
+      }
+    }
+
+    private selectMultiTag(isShiftKey: boolean) {
+      if (this.canMultiSelect()) {
+        if (!isShiftKey) {
+          this.multiSelected = [];
+          const oldSelected = this.findLastMultiSelected();
+          this.toggleMultiSelectedTag(oldSelected, false);
+        }
+        if (this.multiSelectedIndex <= 0) {
+          this.multiSelectedIndex = this.selectedOptions.length - 1;
+        } else {
+          this.multiSelectedIndex--;
+        }
+        this.multiSelected.push(this.multiSelectedIndex);
+        const newSelected = this.findLastMultiSelected();
+        this.toggleMultiSelectedTag(newSelected, true);
+      }
+    }
+
+    async handleListClick(event: MouseEvent) {
+      this.dispatchEvent(
+        new CustomEvent("selected-changed", {
+          detail: {
+            event
+          }
+        })
+      );
+      await this.updateComplete;
+
+      if (this.isMulti) {
+        this.setVisualListbox(true);
+      } else {
+        this.setVisualListbox(false);
+      }
+
+      this.updateOnNextFrame(() => {
+        this.input!.focus();
+      });
+    }
+
+    async handleSelectAll() {
+      if (this.selectedOptions.length === 0 || this.isSelectAllSelected()) {
+        this.isSelectAllChecked = !this.isSelectAllChecked;
+        if (this.isSelectAllChecked) {
+          this.selectedOptions = [...this.options];
+          this.checkAllOptions();
+        } else {
+          this.selectedOptions = [];
+          this.unCheckedAllOptions();
+        }
+
+        await this.updateComplete;
+        this.setVisualListbox(true);
+        this.notifySelectedChange({
+          selected: this.selectedOptions
+        });
+      }
+    }
+
+    handleInputKeyUp(event: KeyboardEvent) {
+      switch (event.code) {
+        case Key.Escape: {
+          return;
+        }
+        case Key.Backspace:
+          {
+            this.setFocusOnHost(true);
+            this.setVisualListbox(true);
+            this.resizeListbox();
+            this.removeMultiTag();
+          }
+          break;
+        case Key.ArrowLeft:
+          {
+            if (this.isMulti) {
+              if (event.shiftKey) {
+                this.selectMultiTag(true);
+              } else {
+                this.selectMultiTag(false);
+              }
+            }
+          }
+          break;
+        default: {
+          if (this.isMulti) {
+            this.unselectedAllMultiTag();
+          }
+          break;
+        }
+      }
+    }
+
+    private notifyInputValueChanged = debounce((value: string) => {
+      this.dispatchEvent(
+        new CustomEvent("combobox-input", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            value
+          }
+        })
+      );
+    }, 250);
+
+    handleInput(event: Event) {
+      const inputValue = (event.target as HTMLInputElement).value;
+      this.inputValue = inputValue;
+      this.notifyInputValueChanged(inputValue);
+    }
+
+    private removeAllSelected() {
+      this.focusedIndex = -1;
+      this.selectedOptions = [];
+      this.inputValue = "";
+      this.setInputValue();
+      this.setVisualListbox(false);
+      this.unCheckedAllOptions();
+      this.updateOnNextFrame(() => {
+        this.input!.focus();
+      });
+      this.notifySelectedChange({
+        selected: this.selectedOptions
+      });
+    }
+
+    private removeSelected(option: string | OptionMember) {
+      const index = this.findSelectedOption(option);
+      const checkedOptionIndex = this.filteredOptions.indexOf(option);
+
+      if (checkedOptionIndex !== -1) {
+        this.unCheckedOption(checkedOptionIndex);
+      }
+      if (index !== -1) {
+        this.selectedOptions.splice(index, 1);
+        this.requestUpdate();
+      }
+      this.updateOnNextFrame(() => {
+        this.input!.focus();
+      });
+    }
+
+    private selectedChange(event: CustomEvent<{ event: MouseEvent }>) {
+      const { event: clickEvent } = event.detail;
+      let optionIndex = this.findOptionIndex(clickEvent);
+      if (optionIndex !== -1) {
+        this.focusedIndex = optionIndex;
+        if (this.isMulti && this.allowSelectAll) {
+          optionIndex = optionIndex - 1;
+        }
+        const option = this.getFocusedItem(optionIndex);
+        if (option) {
+          this.setSelectedOption(option);
+          if (!this.isMulti) {
+            this.setInputValue(this.getOptionValue(option));
+          } else if (this.isMulti && this.allowSelectAll) {
+            this.isSelectAllChecked = this.isSelectAllSelected();
+          }
+        }
+      }
+    }
+
+    private shouldChangeButton() {
+      return (
+        (this.input && this.input.value.length > 0 && !this.noClearIcon) ||
+        (this.isMulti && this.selectedOptions.length && !this.noClearIcon)
+      );
+    }
+
+    private setCustomValue() {
+      if (!this.optionId && !this.optionValue) {
+        this.options = [...this.options, this.inputValue];
+
+        this.setSelectedOption(this.inputValue);
+
+        if (!this.isMulti) {
+          this.updateOnNextFrame(() => {
+            this.focusedIndex = this.filteredOptions.length - 1;
+            const option = this.getFocusedItem(this.focusedIndex);
+            if (option) {
+              this.setInputValue(this.getOptionValue(option));
+            }
+          });
+        }
+
+        this.dispatchEvent(
+          new CustomEvent("custom-value-add", {
+            composed: true,
+            bubbles: true,
+            detail: {
+              value: this.inputValue
+            }
+          })
+        );
+      }
+      this.inputValue = "";
+    }
+
+    handleInputKeyDown(event: KeyboardEvent) {
+      switch (event.code) {
+        case Key.Backspace:
+          {
+            this.focusedIndex = -1;
+          }
+          break;
+        case Key.Tab:
+        case Key.Enter:
+          {
+            this.setFocusOnHost(true);
+            this.setVisualListbox(false);
+            this.updateOnNextFrame(() => {
+              const option = this.getFocusedItem(!this.allowSelectAll ? this.focusedIndex : this.focusedIndex - 1);
+              if (this.allowCustomValue && this.input && this.input.value.length) {
+                const isOptionAlreadyExist = this.findFilteredOption(this.inputValue) === -1;
+                if (isOptionAlreadyExist) {
+                  this.setCustomValue();
+                  return;
+                }
+              }
+              if (option) {
+                this.setSelectedOption(option);
+                if (!this.showSelectedCount) {
+                  this.setInputValue(this.getOptionValue(option));
+                }
+              }
+              if (this.isMulti && this.allowSelectAll && this.focusedIndex === 0) {
+                this.handleSelectAll();
+              }
+            });
+          }
+          break;
+        case Key.ArrowDown:
+          {
+            this.setFocusOnHost(false);
+            if (!this.expanded) {
+              this.setVisualListbox(true);
+            }
+            this.updateOnNextFrame(() => {
+              if (
+                this.focusedIndex === -1 ||
+                (!this.allowSelectAll && this.focusedIndex >= this.filteredOptions.length - 1) ||
+                (this.allowSelectAll && this.focusedIndex >= this.filteredOptions.length)
+              ) {
+                this.focusedIndex = 0;
+              } else {
+                this.focusedIndex++;
+              }
+              const option = this.getFocusedItem(this.focusedIndex);
+              if (!this.showSelectedCount && option) {
+                this.setInputValue(this.getOptionValue(option));
+              }
+            });
+          }
+          break;
+        case Key.ArrowUp:
+          {
+            this.setFocusOnHost(false);
+            if (!this.expanded) {
+              this.setVisualListbox(true);
+            }
+            this.updateOnNextFrame(() => {
+              if (this.focusedIndex <= 0) {
+                this.focusedIndex = !this.allowSelectAll
+                  ? this.filteredOptions.length - 1
+                  : this.filteredOptions.length;
+              } else {
+                this.focusedIndex--;
+              }
+              const option = this.getFocusedItem(this.focusedIndex);
+              if (option && !this.showSelectedCount) {
+                this.setInputValue(this.getOptionValue(option));
+              }
+            });
+          }
+          break;
+        case Key.Escape:
+          {
+            this.setFocusOnHost(true);
+            if (this.expanded) {
+              event.stopPropagation();
+              this.setVisualListbox(false);
+            } else {
+              this.setInputValue();
+              this.focusedIndex = -1;
+              this.removeAllSelected();
+            }
+          }
+          break;
+        case Key.Home:
+          {
+            this.setInputSelectionRange(0, 0);
+          }
+          break;
+        case Key.End:
+          {
+            const { length } = this.inputValue;
+            this.setInputSelectionRange(length, length);
+          }
+          break;
+        case Key.Space: {
+          if (this.isMulti) {
+            event.preventDefault();
+            const option = this.getFocusedItem(!this.allowSelectAll ? this.focusedIndex : this.focusedIndex - 1);
+            if (option) {
+              this.setSelectedOption(option);
+              if (!this.showSelectedCount) this.setInputValue();
+            }
+            if (this.focusedIndex === 0 && this.allowSelectAll) {
+              this.handleSelectAll();
+            }
+          }
+          break;
+        }
+        default: {
+          this.setVisualListbox(true);
+          break;
+        }
+      }
+    }
+
+    toggleVisualListBox() {
+      if (this.expanded) {
+        this.setVisualListbox(false);
+      } else {
+        this.setVisualListbox(true);
+      }
+      this.input!.focus();
+    }
+
+    handleRemoveAll(event: MouseEvent) {
+      event.stopPropagation();
+      this.dispatchEvent(new CustomEvent("remove-all-selected"));
+    }
+
+    handleOutsideClick = (event: MouseEvent) => {
+      let insideInputClick = false;
+      const path = event.composedPath();
+      if (path.length) {
+        insideInputClick = !!path.find(element => element === this);
+        if (!insideInputClick) {
+          this.setVisualListbox(false);
+          this.unselectedAllMultiTag();
+        }
+      }
+    };
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.setupEvents();
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.teardownEvents();
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    get listItemOptionMap() {
+      return {
+        "md-combobox-multiselect": this.isMulti
+      };
+    }
+
+    get filteredOptions() {
+      return this.filterOptions(this.trimSpace ? this.inputValue.replace(/\s+/g, "") : this.inputValue);
+    }
+
+    get comboBoxTemplateClassMap() {
+      return {
+        [`md-combobox--${this.shape}`]: !!this.shape,
+        "md-combobox-searchable": this.searchable
+      };
+    }
+
+    searchIconTemplate() {
+      return html`
+        <md-icon name="icon-search_16" @click=${this.toggleVisualListBox}></md-icon>
+      `;
+    }
+
+    selectedOptionTemplate(selectedOption: string | OptionMember) {
+      return html`
+        <div class="md-combobox-selected-item">
+          <span>${this.getOptionValue(selectedOption)}</span>
+          <md-icon class="remove-item" name="cancel_8" @click=${() => this.removeSelected(selectedOption)}></md-icon>
+        </div>
+      `;
+    }
+
+    clearButtonTemplate() {
+      return html`
+        <button
+          type="button"
+          class="md-combobox-button clear"
+          aria-label=${this.clearAriaLabel}
+          aria-expanded=${this.expanded}
+          aria-controls="md-combobox-listbox"
+          tabindex="-1"
+          ?disabled=${this.disabled}
+          @click=${this.handleRemoveAll}
+        >
+          <span> <md-icon class="md-input__icon-clear" name="clear-active_12"></md-icon></span>
+        </button>
+      `;
+    }
+
+    arrowButtonTemplate() {
+      return html`
+        <button
+          type="button"
+          class="md-combobox-button arrow-down"
+          aria-label=${this.arrowAriaLabel}
+          aria-expanded=${this.expanded}
+          aria-controls="md-combobox-listbox"
+          tabindex="-1"
+          ?disabled=${this.disabled}
+          @click=${this.toggleVisualListBox}
+        >
+          <span><md-icon name="icon-arrow-down_16"></md-icon> </span>
+        </button>
+      `;
+    }
+
+    getSelectAllOption() {
+      return html`
+        <li
+          id="selectAll"
+          part="combobox-option"
+          role="option"
+          class="md-combobox-option ${classMap(this.listItemOptionMap)}"
+          @click=${this.handleSelectAll}
+          aria-checked=${ifDefined(this.isSelectAllChecked ? "true" : undefined)}
+        >
+          ${!this.isSelectAllChecked && this.selectedOptions.length !== 0
+            ? html`
+                <span class="select-option indeterminate">
+                  <md-icon name="icon-minus_14"></md-icon>
+                </span>
+              `
+            : html`
+                <span class="select-option">
+                  <md-icon name="icon-check_14"></md-icon>
+                </span>
+              `}
+          <span part="label" class="select-label">${this.selectAllTextLocalization}</span>
+        </li>
+      `;
+    }
+
+    getSelctedCount() {
+      if (this.selectedOptions.length === 0) {
+        return nothing;
+      } else if (this.isSelectAllSelected()) {
+        return html`
+          <md-span class="selected-count">${this.allTextLocalization}</md-span>
+        `;
+      }
+      return html`
+        <md-span class="selected-count">${this.selectedOptions.length} ${this.selectedTextLocalization}</md-span>
+      `;
+    }
+
+    getCustomErrorContent() {
+      return this.querySelector("[slot]") || this.shadowRoot!.querySelector("[slot]");
+    }
+
+    render() {
+      return html`
+        <div
+          part="combobox"
+          aria-label=${this.ariaLabel}
+          class="md-combobox md-combobox-list ${classMap(this.comboBoxTemplateClassMap)}"
+        >
+          <div part="group" class="group ${classMap(this.listItemOptionMap)}">
+            ${this.searchable ? this.searchIconTemplate() : nothing}
+            <div class="md-combobox__multiwrap" part="multiwrap">
+              ${this.isMulti
+                ? this.isMulti && !this.showSelectedCount
+                  ? repeat(this.selectedOptions, selectedOption => this.selectedOptionTemplate(selectedOption))
+                  : this.getSelctedCount()
+                : nothing}
+              <input
+                class="md-combobox-listbox"
+                type="text"
+                role="combobox"
+                aria-autocomplete="both"
+                aria-label=${this.ariaLabel}
+                part="multiwrap-input"
+                aria-expanded=${this.expanded}
+                placeholder=${this.isMulti && this.showSelectedCount && this.selectedOptions.length !== 0
+                  ? ""
+                  : this.placeholder}
+                aria-controls="md-combobox-listbox"
+                ?disabled=${this.disabled}
+                ?autofocus=${this.autofocus}
+                title=${ifDefined(this.selectedOptions.length > 0 ? this.selectedOptions[0] : this.placeholder)}
+                .value=${this.inputValue}
+                @click=${this.toggleVisualListBox}
+                @input=${this.handleInput}
+                @keyup=${this.handleInputKeyUp}
+                @keydown=${this.handleInputKeyDown}
+              />
+            </div>
+            ${this.compact
+              ? nothing
+              : this.shouldChangeButton()
+              ? this.clearButtonTemplate()
+              : this.arrowButtonTemplate()}
+          </div>
+          ${!this.showCustomError
+            ? html`
+                <ul
+                  id="md-combobox-listbox"
+                  part="combobox-options"
+                  role="listbox"
+                  aria-label=${this.label}
+                  style=${styleMap({
+                    display: this.expanded
+                      ? this.options.length &&
+                        this.filteredOptions.length === 0 &&
+                        this.inputValue &&
+                        this.allowCustomValue
+                        ? "none"
+                        : "block"
+                      : "none",
+                    "z-index": "1"
+                  })}
+                >
+                  ${this.isMulti && this.allowSelectAll ? this.getSelectAllOption() : nothing}
+                  ${repeat(
+                    this.filterOptions(this.trimSpace ? this.inputValue.replace(/\s+/g, "") : this.inputValue),
+                    (option: string | OptionMember) => this.getOptionId(option),
+                    (option, optionIndex) => html`
+                      <li
+                        id=${this.getOptionId(option)}
+                        title="${this.getOptionValue(option)}"
+                        part="combobox-option"
+                        role="option"
+                        class="md-combobox-option"
+                        aria-label=${this.getOptionValue(option)}
+                        aria-selected=${this.getAriaState(optionIndex)}
+                        tabindex="-1"
+                        @click=${this.handleListClick}
+                        aria-checked=${ifDefined(this.isMulti ? this.isOptionChecked(option) : undefined)}
+                      >
+                        ${this.isMulti
+                          ? html`
+                              <span class="select-option">
+                                <md-icon name="icon-check_14"></md-icon>
+                              </span>
+                            `
+                          : nothing}
+                        <span part="label" class="select-label">
+                          ${this.isCustomContent
+                            ? html`
+                                <slot name=${ifDefined(this.getCustomContentName(option))}></slot>
+                              `
+                            : findHighlight(
+                                this.getOptionValue(option),
+                                this.trimSpace ? this.inputValue.replace(/\s+/g, "") : this.inputValue
+                              ).map(({ text, matching }) =>
+                                matching
+                                  ? html`
+                                      <span class="highlight-text">${text}</span>
+                                    `
+                                  : html`
+                                      <span class="selected-label-text">${text}</span>
+                                    `
+                              )}
+                        </span>
+                      </li>
+                    `
+                  )}
+                  ${this.options.length &&
+                  this.filteredOptions.length === 0 &&
+                  this.inputValue &&
+                  !this.allowCustomValue
+                    ? html`
+                        <li class="no-result" role="option" aria-selected="false" tabindex="-1">
+                          ${this.resultsTextLocalization.trim()}
+                        </li>
+                      `
+                    : nothing}
+                  ${this.options.length === 0
+                    ? html`
+                        <li class="no-result" role="option" aria-selected="false" tabindex="-1">
+                          ${this.optionsTextLocalization.trim()}
+                        </li>
+                      `
+                    : nothing}
+                </ul>
+              `
+            : html`
+                <ul
+                  id="md-combobox-listbox"
+                  part="combobox-options"
+                  role="listbox"
+                  aria-label=${this.label}
+                  style=${styleMap({
+                    display: this.expanded ? "block" : "none",
+                    "z-index": "1"
+                  })}
+                >
+                  ${this.getCustomErrorContent()}
+                </ul>
+              `}
+        </div>
+        ${this.invalid
+          ? html`
+              <div part="message" class="md-combobox-error">
+                <md-help-text .message=${this.invalidText} messageType="error"></md-help-text>
+              </div>
+            `
+          : nothing}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-combobox": ComboBox.ELEMENT;
+  }
+}