@momentum-ui/web-components 2.16.8 → 2.16.9

package/src/components/dropdown/Dropdown.ts

@@ -1,903 +0,0 @@
-/**
- * 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/icon/Icon";
-import { ATTRIBUTES, Key } from "@/constants";
-import { customElementWithCheck, FocusMixin } from "@/mixins";
-import { debounce } from "@/utils/helpers";
-import reset from "@/wc_scss/reset.scss";
-import { internalProperty, LitElement, property, PropertyValues, query, queryAll } from "lit-element";
-import { html, nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map.js";
-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";
-
-const EMPTY_KEY = "";
-
-export namespace Dropdown {
-  type OptionMember = { [key: string]: string };
-  type Option = string | OptionMember;
-  type RenderOptionMember = { key: string; value: string; option?: Option };
-
-  export type EventDetail = {
-    "dropdown-focus-in": undefined;
-    "dropdown-focus-out": undefined;
-    "dropdown-selected": {
-      option: Option;
-    };
-    "dropdown-selection-removed": undefined;
-  };
-
-  export type MessageType = "error" | "success" | "warning";
-  export type Message = {
-    type: MessageType;
-    message: string;
-    id?: string;
-    ariaLive?: "off" | "assertive" | "polite";
-  };
-
-  export class MessageController {
-    determineMessageType(array: Dropdown.Message[]) {
-      return array.reduce<Dropdown.MessageType>(
-        (accumulator, errorMessage) =>
-          (errorMessage as unknown as string) === "error" ? accumulator : errorMessage.type,
-        "" as Dropdown.MessageType
-      );
-    }
-    filterMessagesByType(array: Dropdown.Message[], value: string) {
-      return array.reduce(
-        (accumulator, errorMessage) =>
-          errorMessage.type === value ? accumulator.concat(errorMessage.message) : accumulator,
-        [] as string[]
-      );
-    }
-  }
-
-  @customElementWithCheck("md-dropdown")
-  export class ELEMENT extends FocusMixin(LitElement) {
-    @property({ type: String, attribute: "title" }) title = "Select...";
-    @property({ type: Array }) options: Option[] = [];
-    @property({ type: String, attribute: "option-id" }) optionId = "";
-    @property({ type: String, attribute: "option-value" }) optionValue = "";
-    @property({ type: Object }) defaultOption: Option = EMPTY_KEY;
-
-    @property({ type: Boolean, reflect: true }) disabled = false;
-    @property({ type: Number, attribute: "custom-tab-index", reflect: true }) customTabIndex = 0;
-    @property({ type: Boolean, attribute: "allow-unselected", reflect: true }) allowUnselected = false;
-    @property({ type: Number, attribute: "visible-option", reflect: true }) visibleOptions = 8;
-
-    @property({ type: Boolean }) newMomentum = false;
-
-    @property({ type: Boolean, reflect: true }) compact = false;
-    @property({ type: Boolean, reflect: true }) searchable = false;
-    @property({ type: Boolean, reflect: true }) searchItem = false;
-    @property({ type: String, attribute: "input-value", reflect: true }) inputValue = "";
-    @property({ type: String }) placeholder = "Select...";
-    @property({ type: Boolean, reflect: true }) readOnly = false;
-    @property({ type: Boolean, reflect: true }) autofocus = false;
-    @property({ type: String, attribute: "left-icon", reflect: true }) leftIcon = "";
-    @property({ type: Boolean, reflect: true, attribute: "search-trim-space" }) trimSpace = false;
-    @property({ type: String, attribute: "no-results-i18n" }) resultsTextLocalization = "No Results";
-
-    @property({ type: Boolean })
-    pill: boolean | null = false;
-
-    @property({ type: String }) helpText = "";
-    @property({ type: Array }) messageArr: Dropdown.Message[] = [];
-    @property({ type: String }) htmlId = "";
-
-    @property({ type: String, attribute: "clear-aria-label" }) clearAriaLabel = "Clear";
-    @property({ type: String, attribute: "clear-icon-height" }) clearIconHeight = "auto";
-    @property({ type: String, attribute: "arrow-aria-label" }) arrowAriaLabel = "Expand";
-    @property({ type: String, attribute: "popup-chevron-aria-hidden" }) popupChevronAriaHidden = "true";
-
-    @property({ type: String, reflect: true }) ariaLabel = ""; // This aria-label is used by default when there is no search or list-items are displayed.
-    @property({ type: String, attribute: "search-result-aria-label" }) searchResultAriaLabel = ""; // This aria-label is dynamic and used when there is search and list-items are displayed.
-
-    @internalProperty()
-    private ariaLabelForDropdown = ""; // This internal property is used to conditionally set aria-label.
-
-    @internalProperty() private renderOptions: RenderOptionMember[] = [];
-    @internalProperty() private selectedKey: string = EMPTY_KEY;
-
-    @internalProperty() private expanded = false;
-    @internalProperty() private focusedIndex = -1;
-
-    @query("label") label!: HTMLLabelElement;
-    @query(".md-dropdown-input") input?: HTMLInputElement;
-    @query("ul.md-dropdown-list") optionsList!: HTMLUListElement;
-    @queryAll("li.md-dropdown-option") optionsListItems?: HTMLLIElement[];
-
-    private readonly messageController = new MessageController();
-
-    private lastMaxHeight = "";
-
-    connectedCallback() {
-      super.connectedCallback();
-
-      this.setupEvents();
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this.teardownEvents();
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      changedProperties.forEach((oldValue, name) => {
-        if (name === "defaultOption") {
-          if (this.defaultOption) {
-            const { key } = this.getOptionKeyValuePair(this.defaultOption);
-            this.selectedKey = key;
-          }
-        }
-      });
-
-      if (this.searchable) {
-        this.setInitialValue();
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-
-      changedProperties.forEach((oldValue, name) => {
-        if (name === "options") {
-          this.updateRenderOptions();
-        }
-        if (name === "selectedKey") {
-          const idx = this.renderOptions.findIndex((o) => o.key === this.selectedKey);
-          if (idx !== -1) {
-            this.focusToIndex(idx);
-            if (this.searchable) {
-              this.setInitialValue();
-            }
-          }
-        }
-        if (name === "expanded") {
-          this.updateListDOM();
-        }
-        if (name === "focusedIndex") {
-          this.updateListDOM();
-        }
-        if (name === "defaultOption") {
-          if (this.defaultOption) {
-            const { key } = this.getOptionKeyValuePair(this.defaultOption);
-
-            this.selectedKey = key;
-          }
-        }
-      });
-    }
-
-    private notifySearchResultCount() {
-      // this function is to update ariaLabelForComboBox for search result count.
-
-      // If searchResultAriaLabel is passed, the {{}} is replaced with the search result count.
-      if (this.searchResultAriaLabel) {
-        const regex = /{{.*?}}/g;
-        this.ariaLabelForDropdown = this.searchResultAriaLabel.replace(regex, this.filteredOptions.length.toString());
-      }
-      // If searchResultAriaLabel is not passed and ariaLabel is passed, the ariaLabel is appended with the search result count.
-      else if (this.ariaLabel) {
-        this.ariaLabelForDropdown = `${this.ariaLabel}, ${this.filteredOptions.length} results found.`;
-      }
-      // If both searchResultAriaLabel and ariaLabel are not passed, the default text is appended with the search result count.
-      else {
-        this.ariaLabelForDropdown = `Dropdown Element, ${this.filteredOptions.length} results found.`;
-      }
-    }
-
-    private setInitialValue() {
-      if (this.options.length) {
-        const foundOptionMember = this.renderOptions.find((o) => o.key === this.selectedKey);
-        const option = foundOptionMember?.option;
-        if (option) {
-          this.setInputValue(this.getOptionValue(option));
-          this.input?.setAttribute(ATTRIBUTES.AriaActivedescendant, this.getOptionId(option));
-          this.notifyInputValueChanged(this.getOptionValue(option));
-          this.requestUpdate();
-        }
-      }
-    }
-
-    private getOptionValue(option: string | OptionMember) {
-      if (this.isOptionObject(option) && !this.optionValue) {
-        return Object.values(option)[0];
-      }
-      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 isOptionObject(option: string | OptionMember) {
-      return typeof option === "object" && option !== null;
-    }
-
-    updateRenderOptions() {
-      const existingKeys: string[] = [];
-
-      this.focusReset();
-
-      const renderOptions = this.options.reduce((acc, option) => {
-        const { key, value } = this.getOptionKeyValuePair(option);
-
-        if (existingKeys.indexOf(key) !== -1) {
-          console.error(`Dropdown already have option key: "${key}". Ignoring `);
-        } else if (!key) {
-          console.error(`Dropdown key is not defined: "${key}". (value: "${value}"). Ignoring `);
-        } else {
-          existingKeys.push(key);
-          acc.push({ key, value, option });
-        }
-        return acc;
-      }, [] as RenderOptionMember[]);
-
-      if (this.allowUnselected) {
-        renderOptions.unshift({
-          key: EMPTY_KEY,
-          value: this.title // || "" ?
-        });
-      }
-
-      this.renderOptions = renderOptions;
-    }
-
-    async updateListDOM() {
-      if (!this.expanded) {
-        return;
-      }
-      await this.resizeDropdownList();
-      await this.scrollToIndex(this.focusedIndex);
-    }
-
-    async resizeDropdownList() {
-      await new Promise<void>((resolve) =>
-        requestAnimationFrame(() => {
-          if (this.optionsListItems) {
-            if (this.optionsListItems.length > this.visibleOptions) {
-              const maxHeight = [...this.optionsListItems]
-                .slice(0, this.visibleOptions)
-                .reduce((acc, option) => acc + option.offsetHeight, 0);
-
-              const nextMaxHeight = `${maxHeight}px`;
-              if (this.lastMaxHeight !== nextMaxHeight) {
-                this.optionsList.style.maxHeight = nextMaxHeight;
-                this.lastMaxHeight = nextMaxHeight;
-              }
-            } else {
-              const nextMaxHeight = `auto`;
-              if (this.lastMaxHeight !== nextMaxHeight) {
-                this.optionsList.style.maxHeight = nextMaxHeight;
-                this.lastMaxHeight = nextMaxHeight;
-              }
-            }
-          }
-          resolve();
-        })
-      );
-    }
-
-    protected handleFocusIn(event: Event) {
-      if (!this.disabled || !this.readOnly) {
-        super.handleFocusIn && super.handleFocusIn(event);
-      }
-
-      this.dispatchEvent(
-        new CustomEvent<EventDetail["dropdown-focus-in"]>("dropdown-focus-in", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-
-    protected handleFocusOut(event: Event) {
-      super.handleFocusOut && super.handleFocusOut(event);
-
-      this.dispatchEvent(
-        new CustomEvent<EventDetail["dropdown-focus-out"]>("dropdown-focus-out", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get filteredOptions() {
-      const inputValue = this.trimSpace ? this.inputValue.replace(/\s+/g, "") : this.inputValue;
-
-      if (!inputValue.trim()) {
-        return this.renderOptions;
-      }
-      const filtered = this.renderOptions.filter((o) => o.value.toLowerCase().includes(inputValue.toLowerCase()));
-
-      if (filtered.length === 0) {
-        return [{ key: "no-result", value: "No Result", disabled: true }];
-      }
-
-      return filtered;
-    }
-
-    get messageType(): Dropdown.MessageType | null {
-      if (this.messageArr.length > 0) {
-        return this.messageController.determineMessageType(this.messageArr);
-      }
-      return null;
-    }
-
-    get messages() {
-      if (this.messageType) {
-        return this.messageController.filterMessagesByType(this.messageArr, this.messageType);
-      }
-      return null;
-    }
-
-    private setVisualListbox(value: boolean) {
-      this.expanded = value;
-    }
-
-    private updateOnNextFrame(cb: FrameRequestCallback) {
-      requestAnimationFrame(cb);
-    }
-
-    private setInputValue(value = "") {
-      this.input!.value = value;
-    }
-
-    private shouldChangeButton() {
-      const shouldChange = this.input && this.input.value.length > 0;
-      if (shouldChange) {
-        document.dispatchEvent(new CustomEvent("on-widget-update"));
-      }
-      return shouldChange;
-    }
-
-    toggleVisualListBox(e: any) {
-      if (this.readOnly) {
-        return;
-      }
-      if (e.target.classList.contains("md-dropdown-input")) {
-        e.target.focus();
-      } else if (e.target.localName === "md-icon") {
-        const parentElement = e.target.parentElement?.parentElement?.parentElement;
-        if (parentElement) {
-          const input = parentElement.querySelector(".md-dropdown-input");
-          setTimeout(() => {
-            input.focus();
-          }, 10);
-        }
-      }
-      if (this.expanded) {
-        this.setVisualListbox(false);
-      } else {
-        // While open dropdown
-        this.dispatchEvent(
-          new CustomEvent("combobox-on-expand", {
-            composed: true,
-            bubbles: true
-          })
-        );
-        this.notifySearchResultCount();
-        this.setVisualListbox(true);
-      }
-      this.input!.focus();
-    }
-
-    handleRemoveAll(event: MouseEvent) {
-      event.stopPropagation();
-      this.dispatchEvent(new CustomEvent("remove-all-selected"));
-    }
-
-    private removeAllSelected() {
-      this.focusReset();
-      this.selectedKey = EMPTY_KEY;
-      this.inputValue = "";
-      this.setInputValue();
-      this.input?.setAttribute(ATTRIBUTES.AriaActivedescendant, "");
-      this.setVisualListbox(false);
-      this.updateOnNextFrame(() => {
-        this.input!.focus();
-      });
-
-      this.dispatchEvent(
-        new CustomEvent("dropdown-selection-removed", {
-          composed: true,
-          bubbles: true,
-          detail: {}
-        })
-      );
-    }
-
-    setupEvents() {
-      document.addEventListener("click", this.onOutsideClick);
-
-      this.addEventListener("keydown", this.onKeyDown);
-      this.addEventListener("remove-all-selected", this.removeAllSelected);
-    }
-
-    teardownEvents() {
-      document.removeEventListener("click", this.onOutsideClick);
-
-      this.removeEventListener("keydown", this.onKeyDown);
-      this.removeEventListener("remove-all-selected", this.removeAllSelected);
-    }
-
-    expand() {
-      this.expanded = true;
-      const selectedIndex = this.focusedIndex !== -1 ? `combo-${this.focusedIndex}` : "";
-      document.dispatchEvent(new CustomEvent("on-widget-update"));
-      this.label.setAttribute("aria-activedescendant", selectedIndex);
-      if (this.optionsList) {
-        (this.optionsList as HTMLElement).focus();
-      }
-
-      if (this.focusedIndex === -1) {
-        this.focusNext();
-      }
-    }
-
-    collapse() {
-      this.expanded = false;
-      if (!this.searchable) {
-        this.label.setAttribute("aria-activedescendant", "");
-      }
-    }
-
-    toggle() {
-      !this.expanded ? this.expand() : this.collapse();
-    }
-
-    select() {
-      if (this.focusedIndex !== -1) {
-        const renderOption = this.renderOptions[this.focusedIndex];
-
-        const nextSelectedKey = renderOption.key;
-        const prevSelectedKey = this.selectedKey;
-
-        if (nextSelectedKey !== prevSelectedKey) {
-          this.selectedKey = nextSelectedKey;
-
-          this.dispatchEvent(
-            new CustomEvent<EventDetail["dropdown-selected"]>("dropdown-selected", {
-              composed: true,
-              bubbles: true,
-              detail: {
-                option: renderOption.option ? renderOption.option : renderOption.key
-              }
-            })
-          );
-        }
-      }
-    }
-
-    onOutsideClick = (e: MouseEvent) => {
-      let insideSelfClick = false;
-      const path = e.composedPath();
-      if (path.length) {
-        insideSelfClick = !!path.find((element) => element === this);
-        if (!insideSelfClick) {
-          if (this.expanded) {
-            this.collapse();
-          }
-        }
-      }
-    };
-
-    onKeyDown = (e: KeyboardEvent) => {
-      switch (e.code) {
-        case Key.Tab: {
-          if (this.expanded) {
-            e.stopPropagation();
-            this.collapse();
-          }
-          break;
-        }
-        case Key.Space:
-        case Key.Enter: {
-          if (!this.expanded) {
-            this.expand();
-          } else {
-            this.select();
-
-            this.collapse();
-          }
-          break;
-        }
-        case Key.ArrowDown: {
-          if (!this.expanded) {
-            this.expand();
-          } else {
-            this.focusNext();
-          }
-          break;
-        }
-        case Key.ArrowUp: {
-          if (!this.expanded) {
-            this.expand();
-          } else {
-            this.focusPrev();
-          }
-
-          break;
-        }
-        case Key.Home: {
-          if (!this.expanded) {
-            this.expand();
-          } else {
-            this.focusFirst();
-          }
-          break;
-        }
-        case Key.End: {
-          if (!this.expanded) {
-            this.expand();
-          } else {
-            this.focusLast();
-          }
-          break;
-        }
-        case Key.Escape || Key.Backspace: {
-          if (this.expanded) {
-            e.stopPropagation();
-            this.collapse();
-          }
-          break;
-        }
-      }
-    };
-
-    onLabelClick() {
-      this.label.focus();
-      this.toggle();
-    }
-
-    focusFirst() {
-      if (this.renderOptions.length) {
-        this.focusedIndex = 0;
-      }
-    }
-
-    focusLast() {
-      if (this.renderOptions.length) {
-        this.focusedIndex = this.renderOptions.length - 1;
-      }
-    }
-
-    focusNext() {
-      if (this.renderOptions.length) {
-        if (this.focusedIndex !== -1 && this.focusedIndex < this.renderOptions.length - 1) {
-          this.focusedIndex++;
-        } else {
-          this.focusFirst();
-        }
-      }
-    }
-
-    focusPrev() {
-      if (this.renderOptions.length) {
-        if (this.focusedIndex > 0) {
-          this.focusedIndex--;
-        } else {
-          this.focusLast();
-        }
-      }
-    }
-
-    focusToIndex(n: number) {
-      if (this.renderOptions.length) {
-        if (n >= 0 && n <= this.renderOptions.length - 1) {
-          this.focusedIndex = n;
-        }
-      }
-    }
-
-    focusToIndexWithOption(o: RenderOptionMember) {
-      const n = this.renderOptions.findIndex((option) => option.key === o.key);
-      if (this.renderOptions.length) {
-        if (n >= 0 && n <= this.renderOptions.length - 1) {
-          this.focusedIndex = n;
-        }
-      }
-    }
-
-    focusReset() {
-      this.focusedIndex = -1;
-    }
-
-    async scrollToIndex(n: number) {
-      await new Promise<void>((resolve) => {
-        requestAnimationFrame(() => {
-          if (
-            this.optionsListItems &&
-            this.optionsListItems.length > this.visibleOptions &&
-            n >= 0 &&
-            this.optionsListItems.length > n
-          ) {
-            let distance = 0;
-
-            const { top, bottom } = this.optionsList.getBoundingClientRect();
-            const option = this.optionsListItems[n];
-
-            const nextOption = this.optionsListItems[n + 1] || option;
-            const prevOption = this.optionsListItems[n - 1] || option;
-
-            const nextOptionRect = nextOption.getBoundingClientRect();
-            const prevOptionRect = prevOption.getBoundingClientRect();
-
-            if (nextOptionRect.bottom > bottom) {
-              distance = nextOptionRect.bottom - bottom + 2;
-            } else if (prevOptionRect.top < top) {
-              distance = prevOptionRect.top - top - 2;
-            }
-
-            this.optionsList.scrollTop += distance;
-          }
-          resolve();
-        });
-      });
-    }
-
-    getOptionKeyValuePair(option: Option) {
-      if (typeof option === "string") {
-        return { key: option.trim(), value: option };
-      }
-
-      if (option && typeof option === "object") {
-        const optionKeys = Object.keys(option as OptionMember);
-        const optionValues = Object.values(option as OptionMember);
-
-        if (optionKeys.length) {
-          if (optionKeys.length === 1 || !this.optionId) {
-            return { key: optionKeys[0], value: optionValues[0] };
-          } else if (this.optionId) {
-            return { key: option[this.optionId], value: option[this.optionValue || this.optionId] };
-          }
-        }
-      }
-
-      return { key: "undefined", value: "undefined" };
-    }
-
-    get labelTitle() {
-      if (this.selectedKey) {
-        const option = this.renderOptions.find((o) => o.key === this.selectedKey);
-        if (option) {
-          return option.value;
-        }
-      }
-      return this.title;
-    }
-
-    get dropDownClassMap() {
-      return {
-        "md-dropdown__expanded": this.expanded,
-        [`md-${this.messageType}`]: !!this.messageType,
-        "md-new-dropdown": this.newMomentum,
-        "md-dropdown--pill": this.pill === true
-      };
-    }
-
-    handleInput(event: Event) {
-      const inputValue = (event.target as HTMLInputElement).value;
-      this.inputValue = inputValue.trim();
-      this.notifyInputValueChanged(inputValue.trim());
-    }
-
-    private notifyInputValueChanged = debounce((value: string) => {
-      this.dispatchEvent(
-        new CustomEvent("dropdown-input", {
-          composed: true,
-          bubbles: true,
-          detail: {
-            value
-          }
-        })
-      );
-
-      this.notifySearchResultCount();
-      requestAnimationFrame(() => {
-        this.input!.focus();
-      });
-    }, 250);
-
-    helpTextTemplate() {
-      return this.helpText
-        ? html`
-            <md-help-text
-              class="help-text ${classMap({ disabled: this.disabled, newMomentum: this.newMomentum })}"
-              .message=${this.helpText}
-              style=${styleMap({ width: "100%" })}
-            ></md-help-text>
-          `
-        : nothing;
-    }
-
-    messagesTemplate() {
-      return this.messages && !!this.messages.length
-        ? html`
-            <div id="${this.htmlId}-message" part="message" class="md-dropbox__messages">
-              ${repeat(this.messages, (message, id) => {
-                return html`
-                  <md-help-text
-                    .message=${message}
-                    .id=${this.messageArr[id].id || ""}
-                    .ariaLive=${this.messageArr[id].ariaLive || "polite"}
-                    .messageType=${this.messageType as Dropdown.MessageType}
-                  ></md-help-text>
-                `;
-              })}
-            </div>
-          `
-        : nothing;
-    }
-
-    iconTemplate() {
-      return html`
-        <md-icon
-          class="md-dropdown-left-icon"
-          name="${this.leftIcon}"
-          size="16"
-          iconSet="momentumDesign"
-          @click=${this.toggleVisualListBox}
-        ></md-icon>
-      `;
-    }
-
-    clearButtonTemplate() {
-      return html`
-        <button
-          type="button"
-          class="md-dropdown-button clear"
-          aria-label=${this.clearAriaLabel}
-          aria-controls="md-dropdown-input"
-          tabindex="0"
-          ?readonly=${this.readOnly}
-          ?disabled=${this.disabled}
-          @click=${this.handleRemoveAll}
-        >
-          <md-icon
-            class="md-input__icon-clear"
-            name="cancel-bold"
-            size="16"
-            iconSet="momentumDesign"
-            style="height: ${this.clearIconHeight};"
-          ></md-icon>
-        </button>
-      `;
-    }
-
-    arrowButtonTemplate() {
-      return html`
-        <button
-          type="button"
-          class="md-dropdown-button arrow-down"
-          aria-expanded=${this.expanded}
-          aria-label=${ifDefined(this.popupChevronAriaHidden === "true" ? undefined : this.arrowAriaLabel)}
-          aria-controls="md-dropdown-input"
-          tabindex="-1"
-          aria-hidden=${ifDefined(this.popupChevronAriaHidden === "true" ? "true" : undefined)}
-          ?readonly=${this.readOnly}
-          ?disabled=${this.disabled}
-          @click=${this.toggleVisualListBox}
-        >
-          <md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
-        </button>
-      `;
-    }
-
-    render() {
-      return html`
-        <div class="md-dropdown ${classMap(this.dropDownClassMap)}" part="dropdown">
-          ${!this.searchable
-            ? html`
-                <label
-                  class="md-dropdown-label ${classMap({ "md-new-dropdown-label": this.newMomentum })}"
-                  aria-expanded="${this.expanded}"
-                  aria-label="${this.title}"
-                  aria-controls="md-dropdown-list"
-                  aria-haspopup="listbox"
-                  ?disabled="${this.disabled}"
-                  @click="${() => this.onLabelClick()}"
-                  part="dropdown-header"
-                  role="combobox"
-                  tabindex="0"
-                >
-                  <span class="md-dropdown-label--text ${classMap({ "md-new-dropdown-label--text": this.newMomentum })}"
-                    >${this.labelTitle}</span
-                  >
-                  <span class="md-dropdown-label--icon">
-                    <md-icon name="arrow-down-bold" size="16" iconSet="momentumDesign"></md-icon>
-                  </span>
-                </label>
-              `
-            : html`
-                <div part="group" class="group" ?readonly=${this.readOnly}>
-                  ${this.leftIcon ? this.iconTemplate() : nothing}
-                  <input
-                    class="md-dropdown-input"
-                    type="text"
-                    role="combobox"
-                    aria-autocomplete="both"
-                    aria-label=${this.title}
-                    part="dropdown-input"
-                    aria-expanded=${this.expanded}
-                    placeholder=${this.placeholder}
-                    aria-controls="md-dropdown-list"
-                    ?readonly=${this.readOnly}
-                    ?disabled=${this.disabled}
-                    ?autofocus=${this.autofocus}
-                    title=${this.title}
-                    tabindex="0"
-                    .value=${this.inputValue}
-                    @click=${this.toggleVisualListBox}
-                    @input=${this.handleInput}
-                  />
-                  ${this.compact || !this.searchable
-                    ? nothing
-                    : this.shouldChangeButton()
-                      ? this.clearButtonTemplate()
-                      : this.arrowButtonTemplate()}
-                </div>
-              `}
-          <ul
-            id="md-dropdown-list"
-            class="md-dropdown-list"
-            role="listbox"
-            aria-label="${this.labelTitle}"
-            aria-hidden="${!this.expanded}"
-            part="dropdown-options"
-            tabindex=${ifDefined(this.customTabIndex === -1 ? undefined : this.customTabIndex)}
-          >
-            ${this.filteredOptions.map(
-              (o, idx) => html`
-                <li
-                  id="combo-${idx}"
-                  class="md-dropdown-option"
-                  role="option"
-                  tabindex=${ifDefined(this.customTabIndex === -1 ? undefined : this.customTabIndex)}
-                  aria-label="${o.value}"
-                  label="${o.value}"
-                  aria-selected="${o.key === this.selectedKey}"
-                  part="dropdown-option"
-                  ?focused="${idx === this.focusedIndex}"
-                  ?selected="${o.key === this.selectedKey}"
-                  @click="${() => {
-                    this.focusToIndexWithOption(o);
-                    this.select();
-                    this.collapse();
-                  }}"
-                >
-                  <span class="select-label" part="label">
-                    <span>${o.value}</span>
-                  </span>
-                </li>
-              `
-            )}
-          </ul>
-        </div>
-        ${this.messagesTemplate()} ${this.helpTextTemplate()}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-dropdown": Dropdown.ELEMENT;
-  }
-}