| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895 | 
							- /*!
 
-  * 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-beta.97
 
-  */
 
- import { h, Host } from "@stencil/core";
 
- import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 
- import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 
- import { SLOTS } from "./resources";
 
- import { createObserver } from "../../utils/observers";
 
- import { updateHostInteraction } from "../../utils/interactive";
 
- import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 
- import { guid } from "../../utils/guid";
 
- import { isActivationKey } from "../../utils/key";
 
- /**
 
-  * @slot - A slot for adding `calcite-dropdown-group` components. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
 
-  * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
 
-  */
 
- export class Dropdown {
 
-   constructor() {
 
-     //--------------------------------------------------------------------------
 
-     //
 
-     //  Public Properties
 
-     //
 
-     //--------------------------------------------------------------------------
 
-     /**
 
-      * Opens or closes the dropdown
 
-      *
 
-      * @deprecated use open instead.
 
-      */
 
-     this.active = false;
 
-     /** When true, opens the dropdown */
 
-     this.open = false;
 
-     /**
 
-      allow the dropdown to remain open after a selection is made
 
-      if the selection-mode of the selected item's containing group is "none", the dropdown will always close
 
-      */
 
-     this.disableCloseOnSelect = false;
 
-     /** is the dropdown disabled  */
 
-     this.disabled = false;
 
-     /**
 
-      specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
 
-      this value does not include groupTitles passed to calcite-dropdown-group
 
-      */
 
-     this.maxItems = 0;
 
-     /**
 
-      * Determines the type of positioning to use for the overlaid content.
 
-      *
 
-      * 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";
 
-     /**
 
-      * Determines where the dropdown will be positioned relative to the button.
 
-      *
 
-      * @default "bottom-start"
 
-      */
 
-     this.placement = defaultMenuPlacement;
 
-     /** specify the scale of dropdown, defaults to m */
 
-     this.scale = "m";
 
-     /**
 
-      * **read-only** The currently selected items
 
-      *
 
-      * @readonly
 
-      */
 
-     this.selectedItems = [];
 
-     /** specify whether the dropdown is opened by hover or click of a trigger element */
 
-     this.type = "click";
 
-     this.items = [];
 
-     this.groups = [];
 
-     this.mutationObserver = createObserver("mutation", () => this.updateItems());
 
-     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
 
-     this.openTransitionProp = "visibility";
 
-     this.guid = `calcite-dropdown-${guid()}`;
 
-     this.defaultAssignedElements = [];
 
-     //--------------------------------------------------------------------------
 
-     //
 
-     //  Private Methods
 
-     //
 
-     //--------------------------------------------------------------------------
 
-     this.slotChangeHandler = (event) => {
 
-       this.defaultAssignedElements = event.target.assignedElements({
 
-         flatten: true
 
-       });
 
-       this.updateItems();
 
-     };
 
-     this.setFilteredPlacements = () => {
 
-       const { el, flipPlacements } = this;
 
-       this.filteredFlipPlacements = flipPlacements
 
-         ? filterComputedPlacements(flipPlacements, el)
 
-         : null;
 
-     };
 
-     this.updateTriggers = (event) => {
 
-       this.triggers = event.target.assignedElements({
 
-         flatten: true
 
-       });
 
-       this.reposition(true);
 
-     };
 
-     this.updateItems = () => {
 
-       this.items = this.groups
 
-         .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
 
-         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
 
-       this.updateSelectedItems();
 
-       this.reposition(true);
 
-     };
 
-     this.updateGroups = (event) => {
 
-       const groups = event.target
 
-         .assignedElements({ flatten: true })
 
-         .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
 
-       this.groups = groups;
 
-       this.updateItems();
 
-     };
 
-     this.resizeObserverCallback = (entries) => {
 
-       entries.forEach((entry) => {
 
-         const { target } = entry;
 
-         if (target === this.referenceEl) {
 
-           this.setDropdownWidth();
 
-         }
 
-         else if (target === this.scrollerEl) {
 
-           this.setMaxScrollerHeight();
 
-         }
 
-       });
 
-     };
 
-     this.setDropdownWidth = () => {
 
-       const { referenceEl, scrollerEl } = this;
 
-       const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
 
-       if (!referenceElWidth || !scrollerEl) {
 
-         return;
 
-       }
 
-       scrollerEl.style.minWidth = `${referenceElWidth}px`;
 
-     };
 
-     this.setMaxScrollerHeight = () => {
 
-       const { scrollerEl } = this;
 
-       if (!scrollerEl) {
 
-         return;
 
-       }
 
-       this.reposition(true);
 
-       const maxScrollerHeight = this.getMaxScrollerHeight();
 
-       scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
 
-       this.reposition(true);
 
-     };
 
-     this.setScrollerAndTransitionEl = (el) => {
 
-       this.resizeObserver.observe(el);
 
-       this.scrollerEl = el;
 
-       this.transitionEl = el;
 
-       connectOpenCloseComponent(this);
 
-     };
 
-     this.setReferenceEl = (el) => {
 
-       this.referenceEl = el;
 
-       connectFloatingUI(this, this.referenceEl, this.floatingEl);
 
-       this.resizeObserver.observe(el);
 
-     };
 
-     this.setFloatingEl = (el) => {
 
-       this.floatingEl = el;
 
-       connectFloatingUI(this, this.referenceEl, this.floatingEl);
 
-     };
 
-     this.keyDownHandler = (event) => {
 
-       const target = event.target;
 
-       if (target !== this.referenceEl) {
 
-         return;
 
-       }
 
-       const { defaultPrevented, key } = event;
 
-       if (defaultPrevented) {
 
-         return;
 
-       }
 
-       if (this.open) {
 
-         if (key === "Escape") {
 
-           this.closeCalciteDropdown();
 
-           event.preventDefault();
 
-           return;
 
-         }
 
-         else if (event.shiftKey && key === "Tab") {
 
-           this.closeCalciteDropdown();
 
-           event.preventDefault();
 
-           return;
 
-         }
 
-       }
 
-       if (isActivationKey(key)) {
 
-         this.openCalciteDropdown();
 
-         event.preventDefault();
 
-       }
 
-       else if (key === "Escape") {
 
-         this.closeCalciteDropdown();
 
-         event.preventDefault();
 
-       }
 
-     };
 
-     this.focusOnFirstActiveOrFirstItem = () => {
 
-       this.getFocusableElement(this.items.find((item) => item.selected) || this.items[0]);
 
-     };
 
-     this.toggleOpenEnd = () => {
 
-       this.focusOnFirstActiveOrFirstItem();
 
-       this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
 
-     };
 
-     this.openCalciteDropdown = () => {
 
-       this.open = !this.open;
 
-       if (this.open) {
 
-         this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
 
-       }
 
-     };
 
-   }
 
-   activeHandler(value) {
 
-     this.open = value;
 
-   }
 
-   openHandler(value) {
 
-     if (!this.disabled) {
 
-       if (value) {
 
-         this.reposition(true);
 
-       }
 
-       else {
 
-         updateAfterClose(this.floatingEl);
 
-       }
 
-       this.active = value;
 
-       return;
 
-     }
 
-     if (!value) {
 
-       updateAfterClose(this.floatingEl);
 
-     }
 
-     this.open = false;
 
-   }
 
-   handleDisabledChange(value) {
 
-     if (!value) {
 
-       this.open = false;
 
-     }
 
-   }
 
-   flipPlacementsHandler() {
 
-     this.setFilteredPlacements();
 
-     this.reposition(true);
 
-   }
 
-   maxItemsHandler() {
 
-     this.setMaxScrollerHeight();
 
-   }
 
-   overlayPositioningHandler() {
 
-     this.reposition(true);
 
-   }
 
-   placementHandler() {
 
-     this.reposition(true);
 
-   }
 
-   //--------------------------------------------------------------------------
 
-   //
 
-   //  Lifecycle
 
-   //
 
-   //--------------------------------------------------------------------------
 
-   connectedCallback() {
 
-     var _a;
 
-     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
 
-     this.setFilteredPlacements();
 
-     this.reposition(true);
 
-     if (this.open) {
 
-       this.openHandler(this.open);
 
-     }
 
-     if (this.active) {
 
-       this.activeHandler(this.active);
 
-     }
 
-     connectOpenCloseComponent(this);
 
-   }
 
-   componentDidLoad() {
 
-     this.reposition(true);
 
-   }
 
-   componentDidRender() {
 
-     updateHostInteraction(this);
 
-   }
 
-   disconnectedCallback() {
 
-     var _a, _b;
 
-     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
 
-     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
 
-     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
 
-     disconnectOpenCloseComponent(this);
 
-   }
 
-   render() {
 
-     const { open, guid } = this;
 
-     return (h(Host, null, h("div", { class: "calcite-dropdown-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
 
-         ["calcite-dropdown-content"]: true,
 
-         [FloatingCSS.animation]: true,
 
-         [FloatingCSS.animationActive]: open
 
-       }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { onSlotchange: this.updateGroups })))));
 
-   }
 
-   //--------------------------------------------------------------------------
 
-   //
 
-   //  Public Methods
 
-   //
 
-   //--------------------------------------------------------------------------
 
-   /**
 
-    * Updates the position of the component.
 
-    *
 
-    * @param delayed
 
-    */
 
-   async reposition(delayed = false) {
 
-     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
 
-     return reposition(this, {
 
-       floatingEl,
 
-       referenceEl,
 
-       overlayPositioning,
 
-       placement,
 
-       flipPlacements: filteredFlipPlacements,
 
-       type: "menu"
 
-     }, delayed);
 
-   }
 
-   closeCalciteDropdownOnClick(event) {
 
-     if (!isPrimaryPointerButton(event) || !this.open || event.composedPath().includes(this.el)) {
 
-       return;
 
-     }
 
-     this.closeCalciteDropdown(false);
 
-   }
 
-   closeCalciteDropdownOnEvent(event) {
 
-     this.closeCalciteDropdown();
 
-     event.stopPropagation();
 
-   }
 
-   closeCalciteDropdownOnOpenEvent(event) {
 
-     if (event.composedPath().includes(this.el)) {
 
-       return;
 
-     }
 
-     this.open = false;
 
-   }
 
-   mouseEnterHandler() {
 
-     if (this.type === "hover") {
 
-       this.openCalciteDropdown();
 
-     }
 
-   }
 
-   mouseLeaveHandler() {
 
-     if (this.type === "hover") {
 
-       this.closeCalciteDropdown();
 
-     }
 
-   }
 
-   calciteInternalDropdownItemKeyEvent(event) {
 
-     const { keyboardEvent } = event.detail;
 
-     // handle edge
 
-     const target = keyboardEvent.target;
 
-     const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
 
-     const isFirstItem = this.itemIndex(itemToFocus) === 0;
 
-     const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
 
-     switch (keyboardEvent.key) {
 
-       case "Tab":
 
-         if (isLastItem && !keyboardEvent.shiftKey) {
 
-           this.closeCalciteDropdown();
 
-         }
 
-         else if (isFirstItem && keyboardEvent.shiftKey) {
 
-           this.closeCalciteDropdown();
 
-         }
 
-         else if (keyboardEvent.shiftKey) {
 
-           this.focusPrevItem(itemToFocus);
 
-         }
 
-         else {
 
-           this.focusNextItem(itemToFocus);
 
-         }
 
-         break;
 
-       case "ArrowDown":
 
-         this.focusNextItem(itemToFocus);
 
-         break;
 
-       case "ArrowUp":
 
-         this.focusPrevItem(itemToFocus);
 
-         break;
 
-       case "Home":
 
-         this.focusFirstItem();
 
-         break;
 
-       case "End":
 
-         this.focusLastItem();
 
-         break;
 
-     }
 
-     event.stopPropagation();
 
-   }
 
-   handleItemSelect(event) {
 
-     this.updateSelectedItems();
 
-     event.stopPropagation();
 
-     this.calciteDropdownSelect.emit({
 
-       item: event.detail.requestedDropdownItem
 
-     });
 
-     if (!this.disableCloseOnSelect ||
 
-       event.detail.requestedDropdownGroup.selectionMode === "none") {
 
-       this.closeCalciteDropdown();
 
-     }
 
-     event.stopPropagation();
 
-   }
 
-   onBeforeOpen() {
 
-     this.calciteDropdownBeforeOpen.emit();
 
-   }
 
-   onOpen() {
 
-     this.calciteDropdownOpen.emit();
 
-   }
 
-   onBeforeClose() {
 
-     this.calciteDropdownBeforeClose.emit();
 
-   }
 
-   onClose() {
 
-     this.calciteDropdownClose.emit();
 
-   }
 
-   updateSelectedItems() {
 
-     this.selectedItems = this.items.filter((item) => item.selected);
 
-   }
 
-   getMaxScrollerHeight() {
 
-     const { maxItems, items } = this;
 
-     let itemsToProcess = 0;
 
-     let maxScrollerHeight = 0;
 
-     let groupHeaderHeight;
 
-     this.groups.forEach((group) => {
 
-       if (maxItems > 0 && itemsToProcess < maxItems) {
 
-         Array.from(group.children).forEach((item, index) => {
 
-           if (index === 0) {
 
-             if (isNaN(groupHeaderHeight)) {
 
-               groupHeaderHeight = item.offsetTop;
 
-             }
 
-             maxScrollerHeight += groupHeaderHeight;
 
-           }
 
-           if (itemsToProcess < maxItems) {
 
-             maxScrollerHeight += item.offsetHeight;
 
-             itemsToProcess += 1;
 
-           }
 
-         });
 
-       }
 
-     });
 
-     return items.length > maxItems ? maxScrollerHeight : 0;
 
-   }
 
-   closeCalciteDropdown(focusTrigger = true) {
 
-     this.open = false;
 
-     if (focusTrigger) {
 
-       focusElement(this.triggers[0]);
 
-     }
 
-   }
 
-   focusFirstItem() {
 
-     const firstItem = this.items[0];
 
-     this.getFocusableElement(firstItem);
 
-   }
 
-   focusLastItem() {
 
-     const lastItem = this.items[this.items.length - 1];
 
-     this.getFocusableElement(lastItem);
 
-   }
 
-   focusNextItem(el) {
 
-     const index = this.itemIndex(el);
 
-     const nextItem = this.items[index + 1] || this.items[0];
 
-     this.getFocusableElement(nextItem);
 
-   }
 
-   focusPrevItem(el) {
 
-     const index = this.itemIndex(el);
 
-     const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
 
-     this.getFocusableElement(prevItem);
 
-   }
 
-   itemIndex(el) {
 
-     return this.items.indexOf(el);
 
-   }
 
-   getFocusableElement(item) {
 
-     if (!item) {
 
-       return;
 
-     }
 
-     const target = item.attributes.isLink
 
-       ? item.shadowRoot.querySelector("a")
 
-       : item;
 
-     focusElement(target);
 
-   }
 
-   static get is() { return "calcite-dropdown"; }
 
-   static get encapsulation() { return "shadow"; }
 
-   static get originalStyleUrls() {
 
-     return {
 
-       "$": ["dropdown.scss"]
 
-     };
 
-   }
 
-   static get styleUrls() {
 
-     return {
 
-       "$": ["dropdown.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": "Opens or closes the dropdown"
 
-         },
 
-         "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 dropdown"
 
-         },
 
-         "attribute": "open",
 
-         "reflect": true,
 
-         "defaultValue": "false"
 
-       },
 
-       "disableCloseOnSelect": {
 
-         "type": "boolean",
 
-         "mutable": false,
 
-         "complexType": {
 
-           "original": "boolean",
 
-           "resolved": "boolean",
 
-           "references": {}
 
-         },
 
-         "required": false,
 
-         "optional": false,
 
-         "docs": {
 
-           "tags": [],
 
-           "text": "allow the dropdown to remain open after a selection is made\nif the selection-mode of the selected item's containing group is \"none\", the dropdown will always close"
 
-         },
 
-         "attribute": "disable-close-on-select",
 
-         "reflect": true,
 
-         "defaultValue": "false"
 
-       },
 
-       "disabled": {
 
-         "type": "boolean",
 
-         "mutable": false,
 
-         "complexType": {
 
-           "original": "boolean",
 
-           "resolved": "boolean",
 
-           "references": {}
 
-         },
 
-         "required": false,
 
-         "optional": false,
 
-         "docs": {
 
-           "tags": [],
 
-           "text": "is the dropdown disabled"
 
-         },
 
-         "attribute": "disabled",
 
-         "reflect": true,
 
-         "defaultValue": "false"
 
-       },
 
-       "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."
 
-         }
 
-       },
 
-       "maxItems": {
 
-         "type": "number",
 
-         "mutable": false,
 
-         "complexType": {
 
-           "original": "number",
 
-           "resolved": "number",
 
-           "references": {}
 
-         },
 
-         "required": false,
 
-         "optional": false,
 
-         "docs": {
 
-           "tags": [],
 
-           "text": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group"
 
-         },
 
-         "attribute": "max-items",
 
-         "reflect": true,
 
-         "defaultValue": "0"
 
-       },
 
-       "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 `\"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\""
 
-       },
 
-       "placement": {
 
-         "type": "string",
 
-         "mutable": false,
 
-         "complexType": {
 
-           "original": "MenuPlacement",
 
-           "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
 
-           "references": {
 
-             "MenuPlacement": {
 
-               "location": "import",
 
-               "path": "../../utils/floating-ui"
 
-             }
 
-           }
 
-         },
 
-         "required": false,
 
-         "optional": false,
 
-         "docs": {
 
-           "tags": [{
 
-               "name": "default",
 
-               "text": "\"bottom-start\""
 
-             }],
 
-           "text": "Determines where the dropdown will be positioned relative to the button."
 
-         },
 
-         "attribute": "placement",
 
-         "reflect": true,
 
-         "defaultValue": "defaultMenuPlacement"
 
-       },
 
-       "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 dropdown, defaults to m"
 
-         },
 
-         "attribute": "scale",
 
-         "reflect": true,
 
-         "defaultValue": "\"m\""
 
-       },
 
-       "selectedItems": {
 
-         "type": "unknown",
 
-         "mutable": true,
 
-         "complexType": {
 
-           "original": "HTMLCalciteDropdownItemElement[]",
 
-           "resolved": "HTMLCalciteDropdownItemElement[]",
 
-           "references": {
 
-             "HTMLCalciteDropdownItemElement": {
 
-               "location": "global"
 
-             }
 
-           }
 
-         },
 
-         "required": false,
 
-         "optional": false,
 
-         "docs": {
 
-           "tags": [{
 
-               "name": "readonly",
 
-               "text": undefined
 
-             }],
 
-           "text": "**read-only** The currently selected items"
 
-         },
 
-         "defaultValue": "[]"
 
-       },
 
-       "type": {
 
-         "type": "string",
 
-         "mutable": false,
 
-         "complexType": {
 
-           "original": "\"hover\" | \"click\"",
 
-           "resolved": "\"click\" | \"hover\"",
 
-           "references": {}
 
-         },
 
-         "required": false,
 
-         "optional": false,
 
-         "docs": {
 
-           "tags": [],
 
-           "text": "specify whether the dropdown is opened by hover or click of a trigger element"
 
-         },
 
-         "attribute": "type",
 
-         "reflect": true,
 
-         "defaultValue": "\"click\""
 
-       },
 
-       "width": {
 
-         "type": "string",
 
-         "mutable": false,
 
-         "complexType": {
 
-           "original": "Scale",
 
-           "resolved": "\"l\" | \"m\" | \"s\"",
 
-           "references": {
 
-             "Scale": {
 
-               "location": "import",
 
-               "path": "../interfaces"
 
-             }
 
-           }
 
-         },
 
-         "required": false,
 
-         "optional": true,
 
-         "docs": {
 
-           "tags": [],
 
-           "text": "specify the width of dropdown"
 
-         },
 
-         "attribute": "width",
 
-         "reflect": true
 
-       }
 
-     };
 
-   }
 
-   static get events() {
 
-     return [{
 
-         "method": "calciteDropdownSelect",
 
-         "name": "calciteDropdownSelect",
 
-         "bubbles": true,
 
-         "cancelable": false,
 
-         "composed": true,
 
-         "docs": {
 
-           "tags": [],
 
-           "text": "fires when a dropdown item has been selected or deselected"
 
-         },
 
-         "complexType": {
 
-           "original": "Selection",
 
-           "resolved": "Selection",
 
-           "references": {
 
-             "Selection": {
 
-               "location": "import",
 
-               "path": "./interfaces"
 
-             }
 
-           }
 
-         }
 
-       }, {
 
-         "method": "calciteDropdownBeforeClose",
 
-         "name": "calciteDropdownBeforeClose",
 
-         "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": "calciteDropdownClose",
 
-         "name": "calciteDropdownClose",
 
-         "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": "calciteDropdownBeforeOpen",
 
-         "name": "calciteDropdownBeforeOpen",
 
-         "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": "calciteDropdownOpen",
 
-         "name": "calciteDropdownOpen",
 
-         "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": "(delayed?: boolean) => Promise<void>",
 
-           "parameters": [{
 
-               "tags": [{
 
-                   "name": "param",
 
-                   "text": "delayed"
 
-                 }],
 
-               "text": ""
 
-             }],
 
-           "references": {
 
-             "Promise": {
 
-               "location": "global"
 
-             }
 
-           },
 
-           "return": "Promise<void>"
 
-         },
 
-         "docs": {
 
-           "text": "Updates the position of the component.",
 
-           "tags": [{
 
-               "name": "param",
 
-               "text": "delayed"
 
-             }]
 
-         }
 
-       }
 
-     };
 
-   }
 
-   static get elementRef() { return "el"; }
 
-   static get watchers() {
 
-     return [{
 
-         "propName": "active",
 
-         "methodName": "activeHandler"
 
-       }, {
 
-         "propName": "open",
 
-         "methodName": "openHandler"
 
-       }, {
 
-         "propName": "disabled",
 
-         "methodName": "handleDisabledChange"
 
-       }, {
 
-         "propName": "flipPlacements",
 
-         "methodName": "flipPlacementsHandler"
 
-       }, {
 
-         "propName": "maxItems",
 
-         "methodName": "maxItemsHandler"
 
-       }, {
 
-         "propName": "overlayPositioning",
 
-         "methodName": "overlayPositioningHandler"
 
-       }, {
 
-         "propName": "placement",
 
-         "methodName": "placementHandler"
 
-       }];
 
-   }
 
-   static get listeners() {
 
-     return [{
 
-         "name": "pointerdown",
 
-         "method": "closeCalciteDropdownOnClick",
 
-         "target": "window",
 
-         "capture": false,
 
-         "passive": true
 
-       }, {
 
-         "name": "calciteInternalDropdownCloseRequest",
 
-         "method": "closeCalciteDropdownOnEvent",
 
-         "target": undefined,
 
-         "capture": false,
 
-         "passive": false
 
-       }, {
 
-         "name": "calciteDropdownOpen",
 
-         "method": "closeCalciteDropdownOnOpenEvent",
 
-         "target": "window",
 
-         "capture": false,
 
-         "passive": false
 
-       }, {
 
-         "name": "pointerenter",
 
-         "method": "mouseEnterHandler",
 
-         "target": undefined,
 
-         "capture": false,
 
-         "passive": true
 
-       }, {
 
-         "name": "pointerleave",
 
-         "method": "mouseLeaveHandler",
 
-         "target": undefined,
 
-         "capture": false,
 
-         "passive": true
 
-       }, {
 
-         "name": "calciteInternalDropdownItemKeyEvent",
 
-         "method": "calciteInternalDropdownItemKeyEvent",
 
-         "target": undefined,
 
-         "capture": false,
 
-         "passive": false
 
-       }, {
 
-         "name": "calciteInternalDropdownItemSelect",
 
-         "method": "handleItemSelect",
 
-         "target": undefined,
 
-         "capture": false,
 
-         "passive": false
 
-       }];
 
-   }
 
- }
 
 
  |