@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

package/dist/collection/components/combobox/combobox.js

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.598
  */
-import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
 import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
@@ -47,12 +47,14 @@ export class Combobox {
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
     /**
-     * When true, makes the component required for form-submission.
+     * When true, the component must have a value in order for the form to submit.
      *
      * @internal
      */
@@ -770,18 +772,16 @@ export class Combobox {
     return (h("span", { class: {
         "input-wrap": true,
         "input-wrap--single": single
-      } },
-      showLabel && (h("span", { class: {
-          label: true,
-          "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon)
-        }, key: "label" }, selectedItem.textLabel)),
-      h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
-          input: true,
-          "input--single": true,
-          "input--transparent": this.activeChipIndex > -1,
-          "input--hidden": showLabel,
-          "input--icon": !!this.placeholderIcon
-        }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
+      } }, showLabel && (h("span", { class: {
+        label: true,
+        "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon)
+      }, key: "label" }, selectedItem.textLabel)), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
+        input: true,
+        "input--single": true,
+        "input--transparent": this.activeChipIndex > -1,
+        "input--hidden": showLabel,
+        "input--icon": !!this.placeholderIcon
+      }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
@@ -796,10 +796,7 @@ export class Combobox {
     return (h("div", { "aria-hidden": "true", class: {
         "floating-ui-container": true,
         "floating-ui-container--active": open || active
-      }, ref: setFloatingEl },
-      h("div", { class: classes, ref: setContainerEl },
-        h("ul", { class: { list: true, "list--hide": !(open || active) } },
-          h("slot", null)))));
+      }, ref: setFloatingEl }, h("div", { class: classes, ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !(open || active) } }, h("slot", null)))));
   }
   renderIconStart() {
     const { selectedItems, placeholderIcon, selectionMode } = this;
@@ -809,578 +806,582 @@ export class Combobox {
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
-    return (iconAtStart && (h("span", { class: "icon-start" },
-      h("calcite-icon", { class: "selected-icon", icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: "s" }))));
+    return (iconAtStart && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: "s" }))));
   }
   renderIconEnd() {
     const { active, open } = this;
-    return (h("span", { class: "icon-end" },
-      h("calcite-icon", { icon: active || open ? "chevron-up" : "chevron-down", scale: "s" })));
+    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: active || open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   render() {
     const { active, guid, label, open } = this;
     const single = this.selectionMode === "single";
-    return (h(Host, null,
-      h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
-          wrapper: true,
-          "wrapper--single": single || !this.selectedItems.length,
-          "wrapper--active": open || active
-        }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, ref: this.setReferenceEl, role: "combobox" },
-        h("div", { class: "grid-input" },
-          this.renderIconStart(),
-          !single && this.renderChips(),
-          h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label),
-          this.renderInput()),
-        this.renderIconEnd()),
-      h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
-      this.renderFloatingUIContainer(),
-      h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, null, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+        wrapper: true,
+        "wrapper--single": single || !this.selectedItems.length,
+        "wrapper--active": open || active
+      }, onClick: this.clickHandler, onKeyDown: this.keydownHandler, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-combobox"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["combobox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["combobox.css"]
-  }; }
-  static get properties() { return {
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use open instead"
-          }],
-        "text": "When true, opens the combobox"
-      },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, opens the combobox"
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable combobox input"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria label for combobox (required)"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Placeholder text for input"
+  static get originalStyleUrls() {
+    return {
+      "$": ["combobox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["combobox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use open instead"
+            }],
+          "text": "When true, opens the combobox"
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "placeholderIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, opens the combobox"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Placeholder icon for input"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable combobox input"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "placeholder-icon",
-      "reflect": true
-    },
-    "maxItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria label for combobox (required)"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specify the maximum number of combobox items (including nested children) to display before showing the scroller"
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for input"
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "attribute": "max-items",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "placeholderIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder icon for input"
+        },
+        "attribute": "placeholder-icon",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The name of the switch input"
+      "maxItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify the maximum number of combobox items (including nested children) to display before showing the scroller"
+        },
+        "attribute": "max-items",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "attribute": "name",
-      "reflect": true
-    },
-    "allowCustomValues": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the switch input"
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Allow entry of custom values which are not in the original set of items"
+      "allowCustomValues": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Allow entry of custom values which are not in the original set of items"
+        },
+        "attribute": "allow-custom-values",
+        "reflect": true
       },
-      "attribute": "allow-custom-values",
-      "reflect": true
-    },
-    "overlayPositioning": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OverlayPositioning",
-        "resolved": "\"absolute\" | \"fixed\"",
-        "references": {
-          "OverlayPositioning": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "overlayPositioning": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OverlayPositioning",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "OverlayPositioning": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
-      },
-      "attribute": "overlay-positioning",
-      "reflect": true,
-      "defaultValue": "\"absolute\""
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
+        },
+        "attribute": "overlay-positioning",
+        "reflect": true,
+        "defaultValue": "\"absolute\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "When true, makes the component required for form-submission."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When true, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selectionMode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ComboboxSelectionMode",
-        "resolved": "\"ancestors\" | \"multi\" | \"single\"",
-        "references": {
-          "ComboboxSelectionMode": {
-            "location": "import",
-            "path": "./interfaces"
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ComboboxSelectionMode",
+          "resolved": "\"ancestors\" | \"multi\" | \"single\"",
+          "references": {
+            "ComboboxSelectionMode": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the selection mode\n- multi: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the selection mode\n- multi: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips"
+        },
+        "attribute": "selection-mode",
+        "reflect": true,
+        "defaultValue": "\"multi\""
       },
-      "attribute": "selection-mode",
-      "reflect": true,
-      "defaultValue": "\"multi\""
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specify the scale of the combobox, defaults to m"
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value(s) of the selectedItem(s)"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify the scale of the combobox, defaults to m"
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "intlRemoveTag": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value(s) of the selectedItem(s)"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Remove tag\""
-          }],
-        "text": "string to override the English \"Remove tag\" text for when an item is selected."
+      "intlRemoveTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Remove tag\""
+            }],
+          "text": "string to override the English \"Remove tag\" text for when an item is selected."
+        },
+        "attribute": "intl-remove-tag",
+        "reflect": false,
+        "defaultValue": "TEXT.removeTag"
       },
-      "attribute": "intl-remove-tag",
-      "reflect": false,
-      "defaultValue": "TEXT.removeTag"
-    },
-    "flipPlacements": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "EffectivePlacement[]",
-        "resolved": "Placement[]",
-        "references": {
-          "EffectivePlacement": {
-            "location": "import",
-            "path": "../../utils/floating-ui"
+      "flipPlacements": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EffectivePlacement[]",
+          "resolved": "Placement[]",
+          "references": {
+            "EffectivePlacement": {
+              "location": "import",
+              "path": "../../utils/floating-ui"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines the available placements that can be used when a flip occurs."
         }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Defines the available placements that can be used when a flip occurs."
       }
-    }
-  }; }
-  static get states() { return {
-    "items": {},
-    "groupItems": {},
-    "selectedItems": {},
-    "visibleItems": {},
-    "needsIcon": {},
-    "activeItemIndex": {},
-    "activeChipIndex": {},
-    "activeDescendant": {},
-    "text": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteLookupChange",
-      "name": "calciteLookupChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use calciteComboboxChange instead"
-          }],
-        "text": "Called when the selected items set changes"
-      },
-      "complexType": {
-        "original": "HTMLCalciteComboboxItemElement[]",
-        "resolved": "HTMLCalciteComboboxItemElement[]",
-        "references": {
-          "HTMLCalciteComboboxItemElement": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "items": {},
+      "groupItems": {},
+      "selectedItems": {},
+      "visibleItems": {},
+      "needsIcon": {},
+      "activeItemIndex": {},
+      "activeChipIndex": {},
+      "activeDescendant": {},
+      "text": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteLookupChange",
+        "name": "calciteLookupChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use calciteComboboxChange instead"
+            }],
+          "text": "Called when the selected items set changes"
+        },
+        "complexType": {
+          "original": "HTMLCalciteComboboxItemElement[]",
+          "resolved": "HTMLCalciteComboboxItemElement[]",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxChange",
-      "name": "calciteComboboxChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Called when the selected item(s) changes."
-      },
-      "complexType": {
-        "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
-        "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
-        "references": {
-          "HTMLCalciteComboboxItemElement": {
-            "location": "global"
+      }, {
+        "method": "calciteComboboxChange",
+        "name": "calciteComboboxChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Called when the selected item(s) changes."
+        },
+        "complexType": {
+          "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
+          "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxFilterChange",
-      "name": "calciteComboboxFilterChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Called when the user has entered text to filter the options list"
-      },
-      "complexType": {
-        "original": "{\n    visibleItems: HTMLCalciteComboboxItemElement[];\n    text: string;\n  }",
-        "resolved": "{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }",
-        "references": {
-          "HTMLCalciteComboboxItemElement": {
-            "location": "global"
+      }, {
+        "method": "calciteComboboxFilterChange",
+        "name": "calciteComboboxFilterChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Called when the user has entered text to filter the options list"
+        },
+        "complexType": {
+          "original": "{\n    visibleItems: HTMLCalciteComboboxItemElement[];\n    text: string;\n  }",
+          "resolved": "{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }",
+          "references": {
+            "HTMLCalciteComboboxItemElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxChipDismiss",
-      "name": "calciteComboboxChipDismiss",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Called when a selected item in the combobox is dismissed via its chip\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead"
-      },
-      "complexType": {
-        "original": "DeprecatedEventPayload",
-        "resolved": "any",
-        "references": {
-          "DeprecatedEventPayload": {
-            "location": "import",
-            "path": "../interfaces"
+      }, {
+        "method": "calciteComboboxChipDismiss",
+        "name": "calciteComboboxChipDismiss",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Called when a selected item in the combobox is dismissed via its chip\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead"
+        },
+        "complexType": {
+          "original": "DeprecatedEventPayload",
+          "resolved": "any",
+          "references": {
+            "DeprecatedEventPayload": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteComboboxBeforeClose",
-      "name": "calciteComboboxBeforeClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is requested to be closed and before the closing transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteComboboxClose",
-      "name": "calciteComboboxClose",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is closed and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteComboboxBeforeOpen",
-      "name": "calciteComboboxBeforeOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteComboboxOpen",
-      "name": "calciteComboboxOpen",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the component is open and animation is complete."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "reposition": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "calciteComboboxBeforeClose",
+        "name": "calciteComboboxBeforeClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is requested to be closed and before the closing transition begins."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Updates the position of the component.",
-        "tags": []
-      }
-    },
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteComboboxClose",
+        "name": "calciteComboboxClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is closed and animation is complete."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteComboboxBeforeOpen",
+        "name": "calciteComboboxBeforeOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteComboboxOpen",
+        "name": "calciteComboboxOpen",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the component is open and animation is complete."
         },
-        "return": "Promise<void>"
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "reposition": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Updates the position of the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "active",
-      "methodName": "activeHandler"
-    }, {
-      "propName": "open",
-      "methodName": "openHandler"
-    }, {
-      "propName": "disabled",
-      "methodName": "handleDisabledChange"
-    }, {
-      "propName": "maxItems",
-      "methodName": "maxItemsHandler"
-    }, {
-      "propName": "overlayPositioning",
-      "methodName": "overlayPositioningHandler"
-    }, {
-      "propName": "value",
-      "methodName": "valueHandler"
-    }, {
-      "propName": "flipPlacements",
-      "methodName": "flipPlacementsHandler"
-    }, {
-      "propName": "selectedItems",
-      "methodName": "selectedItemsHandler"
-    }, {
-      "propName": "text",
-      "methodName": "textHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "pointerdown",
-      "method": "documentClickHandler",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "calciteComboboxItemChange",
-      "method": "calciteComboboxItemChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "activeHandler"
+      }, {
+        "propName": "open",
+        "methodName": "openHandler"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
+      }, {
+        "propName": "maxItems",
+        "methodName": "maxItemsHandler"
+      }, {
+        "propName": "overlayPositioning",
+        "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "value",
+        "methodName": "valueHandler"
+      }, {
+        "propName": "flipPlacements",
+        "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "selectedItems",
+        "methodName": "selectedItemsHandler"
+      }, {
+        "propName": "text",
+        "methodName": "textHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "pointerdown",
+        "method": "documentClickHandler",
+        "target": "document",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "calciteComboboxItemChange",
+        "method": "calciteComboboxItemChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }