dropdown.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.97
  5. */
  6. import { h, Host } from "@stencil/core";
  7. import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
  8. import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
  9. import { SLOTS } from "./resources";
  10. import { createObserver } from "../../utils/observers";
  11. import { updateHostInteraction } from "../../utils/interactive";
  12. import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
  13. import { guid } from "../../utils/guid";
  14. import { isActivationKey } from "../../utils/key";
  15. /**
  16. * @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.
  17. * @slot dropdown-trigger - A slot for the element that triggers the `calcite-dropdown`.
  18. */
  19. export class Dropdown {
  20. constructor() {
  21. //--------------------------------------------------------------------------
  22. //
  23. // Public Properties
  24. //
  25. //--------------------------------------------------------------------------
  26. /**
  27. * Opens or closes the dropdown
  28. *
  29. * @deprecated use open instead.
  30. */
  31. this.active = false;
  32. /** When true, opens the dropdown */
  33. this.open = false;
  34. /**
  35. allow the dropdown to remain open after a selection is made
  36. if the selection-mode of the selected item's containing group is "none", the dropdown will always close
  37. */
  38. this.disableCloseOnSelect = false;
  39. /** is the dropdown disabled */
  40. this.disabled = false;
  41. /**
  42. specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
  43. this value does not include groupTitles passed to calcite-dropdown-group
  44. */
  45. this.maxItems = 0;
  46. /**
  47. * Determines the type of positioning to use for the overlaid content.
  48. *
  49. * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
  50. *
  51. * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
  52. *
  53. */
  54. this.overlayPositioning = "absolute";
  55. /**
  56. * Determines where the dropdown will be positioned relative to the button.
  57. *
  58. * @default "bottom-start"
  59. */
  60. this.placement = defaultMenuPlacement;
  61. /** specify the scale of dropdown, defaults to m */
  62. this.scale = "m";
  63. /**
  64. * **read-only** The currently selected items
  65. *
  66. * @readonly
  67. */
  68. this.selectedItems = [];
  69. /** specify whether the dropdown is opened by hover or click of a trigger element */
  70. this.type = "click";
  71. this.items = [];
  72. this.groups = [];
  73. this.mutationObserver = createObserver("mutation", () => this.updateItems());
  74. this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
  75. this.openTransitionProp = "visibility";
  76. this.guid = `calcite-dropdown-${guid()}`;
  77. this.defaultAssignedElements = [];
  78. //--------------------------------------------------------------------------
  79. //
  80. // Private Methods
  81. //
  82. //--------------------------------------------------------------------------
  83. this.slotChangeHandler = (event) => {
  84. this.defaultAssignedElements = event.target.assignedElements({
  85. flatten: true
  86. });
  87. this.updateItems();
  88. };
  89. this.setFilteredPlacements = () => {
  90. const { el, flipPlacements } = this;
  91. this.filteredFlipPlacements = flipPlacements
  92. ? filterComputedPlacements(flipPlacements, el)
  93. : null;
  94. };
  95. this.updateTriggers = (event) => {
  96. this.triggers = event.target.assignedElements({
  97. flatten: true
  98. });
  99. this.reposition(true);
  100. };
  101. this.updateItems = () => {
  102. this.items = this.groups
  103. .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
  104. .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
  105. this.updateSelectedItems();
  106. this.reposition(true);
  107. };
  108. this.updateGroups = (event) => {
  109. const groups = event.target
  110. .assignedElements({ flatten: true })
  111. .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
  112. this.groups = groups;
  113. this.updateItems();
  114. };
  115. this.resizeObserverCallback = (entries) => {
  116. entries.forEach((entry) => {
  117. const { target } = entry;
  118. if (target === this.referenceEl) {
  119. this.setDropdownWidth();
  120. }
  121. else if (target === this.scrollerEl) {
  122. this.setMaxScrollerHeight();
  123. }
  124. });
  125. };
  126. this.setDropdownWidth = () => {
  127. const { referenceEl, scrollerEl } = this;
  128. const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
  129. if (!referenceElWidth || !scrollerEl) {
  130. return;
  131. }
  132. scrollerEl.style.minWidth = `${referenceElWidth}px`;
  133. };
  134. this.setMaxScrollerHeight = () => {
  135. const { scrollerEl } = this;
  136. if (!scrollerEl) {
  137. return;
  138. }
  139. this.reposition(true);
  140. const maxScrollerHeight = this.getMaxScrollerHeight();
  141. scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
  142. this.reposition(true);
  143. };
  144. this.setScrollerAndTransitionEl = (el) => {
  145. this.resizeObserver.observe(el);
  146. this.scrollerEl = el;
  147. this.transitionEl = el;
  148. connectOpenCloseComponent(this);
  149. };
  150. this.setReferenceEl = (el) => {
  151. this.referenceEl = el;
  152. connectFloatingUI(this, this.referenceEl, this.floatingEl);
  153. this.resizeObserver.observe(el);
  154. };
  155. this.setFloatingEl = (el) => {
  156. this.floatingEl = el;
  157. connectFloatingUI(this, this.referenceEl, this.floatingEl);
  158. };
  159. this.keyDownHandler = (event) => {
  160. const target = event.target;
  161. if (target !== this.referenceEl) {
  162. return;
  163. }
  164. const { defaultPrevented, key } = event;
  165. if (defaultPrevented) {
  166. return;
  167. }
  168. if (this.open) {
  169. if (key === "Escape") {
  170. this.closeCalciteDropdown();
  171. event.preventDefault();
  172. return;
  173. }
  174. else if (event.shiftKey && key === "Tab") {
  175. this.closeCalciteDropdown();
  176. event.preventDefault();
  177. return;
  178. }
  179. }
  180. if (isActivationKey(key)) {
  181. this.openCalciteDropdown();
  182. event.preventDefault();
  183. }
  184. else if (key === "Escape") {
  185. this.closeCalciteDropdown();
  186. event.preventDefault();
  187. }
  188. };
  189. this.focusOnFirstActiveOrFirstItem = () => {
  190. this.getFocusableElement(this.items.find((item) => item.selected) || this.items[0]);
  191. };
  192. this.toggleOpenEnd = () => {
  193. this.focusOnFirstActiveOrFirstItem();
  194. this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
  195. };
  196. this.openCalciteDropdown = () => {
  197. this.open = !this.open;
  198. if (this.open) {
  199. this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
  200. }
  201. };
  202. }
  203. activeHandler(value) {
  204. this.open = value;
  205. }
  206. openHandler(value) {
  207. if (!this.disabled) {
  208. if (value) {
  209. this.reposition(true);
  210. }
  211. else {
  212. updateAfterClose(this.floatingEl);
  213. }
  214. this.active = value;
  215. return;
  216. }
  217. if (!value) {
  218. updateAfterClose(this.floatingEl);
  219. }
  220. this.open = false;
  221. }
  222. handleDisabledChange(value) {
  223. if (!value) {
  224. this.open = false;
  225. }
  226. }
  227. flipPlacementsHandler() {
  228. this.setFilteredPlacements();
  229. this.reposition(true);
  230. }
  231. maxItemsHandler() {
  232. this.setMaxScrollerHeight();
  233. }
  234. overlayPositioningHandler() {
  235. this.reposition(true);
  236. }
  237. placementHandler() {
  238. this.reposition(true);
  239. }
  240. //--------------------------------------------------------------------------
  241. //
  242. // Lifecycle
  243. //
  244. //--------------------------------------------------------------------------
  245. connectedCallback() {
  246. var _a;
  247. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
  248. this.setFilteredPlacements();
  249. this.reposition(true);
  250. if (this.open) {
  251. this.openHandler(this.open);
  252. }
  253. if (this.active) {
  254. this.activeHandler(this.active);
  255. }
  256. connectOpenCloseComponent(this);
  257. }
  258. componentDidLoad() {
  259. this.reposition(true);
  260. }
  261. componentDidRender() {
  262. updateHostInteraction(this);
  263. }
  264. disconnectedCallback() {
  265. var _a, _b;
  266. (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  267. disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
  268. (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
  269. disconnectOpenCloseComponent(this);
  270. }
  271. render() {
  272. const { open, guid } = this;
  273. 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: {
  274. ["calcite-dropdown-content"]: true,
  275. [FloatingCSS.animation]: true,
  276. [FloatingCSS.animationActive]: open
  277. }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { onSlotchange: this.updateGroups })))));
  278. }
  279. //--------------------------------------------------------------------------
  280. //
  281. // Public Methods
  282. //
  283. //--------------------------------------------------------------------------
  284. /**
  285. * Updates the position of the component.
  286. *
  287. * @param delayed
  288. */
  289. async reposition(delayed = false) {
  290. const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
  291. return reposition(this, {
  292. floatingEl,
  293. referenceEl,
  294. overlayPositioning,
  295. placement,
  296. flipPlacements: filteredFlipPlacements,
  297. type: "menu"
  298. }, delayed);
  299. }
  300. closeCalciteDropdownOnClick(event) {
  301. if (!isPrimaryPointerButton(event) || !this.open || event.composedPath().includes(this.el)) {
  302. return;
  303. }
  304. this.closeCalciteDropdown(false);
  305. }
  306. closeCalciteDropdownOnEvent(event) {
  307. this.closeCalciteDropdown();
  308. event.stopPropagation();
  309. }
  310. closeCalciteDropdownOnOpenEvent(event) {
  311. if (event.composedPath().includes(this.el)) {
  312. return;
  313. }
  314. this.open = false;
  315. }
  316. mouseEnterHandler() {
  317. if (this.type === "hover") {
  318. this.openCalciteDropdown();
  319. }
  320. }
  321. mouseLeaveHandler() {
  322. if (this.type === "hover") {
  323. this.closeCalciteDropdown();
  324. }
  325. }
  326. calciteInternalDropdownItemKeyEvent(event) {
  327. const { keyboardEvent } = event.detail;
  328. // handle edge
  329. const target = keyboardEvent.target;
  330. const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
  331. const isFirstItem = this.itemIndex(itemToFocus) === 0;
  332. const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
  333. switch (keyboardEvent.key) {
  334. case "Tab":
  335. if (isLastItem && !keyboardEvent.shiftKey) {
  336. this.closeCalciteDropdown();
  337. }
  338. else if (isFirstItem && keyboardEvent.shiftKey) {
  339. this.closeCalciteDropdown();
  340. }
  341. else if (keyboardEvent.shiftKey) {
  342. this.focusPrevItem(itemToFocus);
  343. }
  344. else {
  345. this.focusNextItem(itemToFocus);
  346. }
  347. break;
  348. case "ArrowDown":
  349. this.focusNextItem(itemToFocus);
  350. break;
  351. case "ArrowUp":
  352. this.focusPrevItem(itemToFocus);
  353. break;
  354. case "Home":
  355. this.focusFirstItem();
  356. break;
  357. case "End":
  358. this.focusLastItem();
  359. break;
  360. }
  361. event.stopPropagation();
  362. }
  363. handleItemSelect(event) {
  364. this.updateSelectedItems();
  365. event.stopPropagation();
  366. this.calciteDropdownSelect.emit({
  367. item: event.detail.requestedDropdownItem
  368. });
  369. if (!this.disableCloseOnSelect ||
  370. event.detail.requestedDropdownGroup.selectionMode === "none") {
  371. this.closeCalciteDropdown();
  372. }
  373. event.stopPropagation();
  374. }
  375. onBeforeOpen() {
  376. this.calciteDropdownBeforeOpen.emit();
  377. }
  378. onOpen() {
  379. this.calciteDropdownOpen.emit();
  380. }
  381. onBeforeClose() {
  382. this.calciteDropdownBeforeClose.emit();
  383. }
  384. onClose() {
  385. this.calciteDropdownClose.emit();
  386. }
  387. updateSelectedItems() {
  388. this.selectedItems = this.items.filter((item) => item.selected);
  389. }
  390. getMaxScrollerHeight() {
  391. const { maxItems, items } = this;
  392. let itemsToProcess = 0;
  393. let maxScrollerHeight = 0;
  394. let groupHeaderHeight;
  395. this.groups.forEach((group) => {
  396. if (maxItems > 0 && itemsToProcess < maxItems) {
  397. Array.from(group.children).forEach((item, index) => {
  398. if (index === 0) {
  399. if (isNaN(groupHeaderHeight)) {
  400. groupHeaderHeight = item.offsetTop;
  401. }
  402. maxScrollerHeight += groupHeaderHeight;
  403. }
  404. if (itemsToProcess < maxItems) {
  405. maxScrollerHeight += item.offsetHeight;
  406. itemsToProcess += 1;
  407. }
  408. });
  409. }
  410. });
  411. return items.length > maxItems ? maxScrollerHeight : 0;
  412. }
  413. closeCalciteDropdown(focusTrigger = true) {
  414. this.open = false;
  415. if (focusTrigger) {
  416. focusElement(this.triggers[0]);
  417. }
  418. }
  419. focusFirstItem() {
  420. const firstItem = this.items[0];
  421. this.getFocusableElement(firstItem);
  422. }
  423. focusLastItem() {
  424. const lastItem = this.items[this.items.length - 1];
  425. this.getFocusableElement(lastItem);
  426. }
  427. focusNextItem(el) {
  428. const index = this.itemIndex(el);
  429. const nextItem = this.items[index + 1] || this.items[0];
  430. this.getFocusableElement(nextItem);
  431. }
  432. focusPrevItem(el) {
  433. const index = this.itemIndex(el);
  434. const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
  435. this.getFocusableElement(prevItem);
  436. }
  437. itemIndex(el) {
  438. return this.items.indexOf(el);
  439. }
  440. getFocusableElement(item) {
  441. if (!item) {
  442. return;
  443. }
  444. const target = item.attributes.isLink
  445. ? item.shadowRoot.querySelector("a")
  446. : item;
  447. focusElement(target);
  448. }
  449. static get is() { return "calcite-dropdown"; }
  450. static get encapsulation() { return "shadow"; }
  451. static get originalStyleUrls() {
  452. return {
  453. "$": ["dropdown.scss"]
  454. };
  455. }
  456. static get styleUrls() {
  457. return {
  458. "$": ["dropdown.css"]
  459. };
  460. }
  461. static get properties() {
  462. return {
  463. "active": {
  464. "type": "boolean",
  465. "mutable": true,
  466. "complexType": {
  467. "original": "boolean",
  468. "resolved": "boolean",
  469. "references": {}
  470. },
  471. "required": false,
  472. "optional": false,
  473. "docs": {
  474. "tags": [{
  475. "name": "deprecated",
  476. "text": "use open instead."
  477. }],
  478. "text": "Opens or closes the dropdown"
  479. },
  480. "attribute": "active",
  481. "reflect": true,
  482. "defaultValue": "false"
  483. },
  484. "open": {
  485. "type": "boolean",
  486. "mutable": true,
  487. "complexType": {
  488. "original": "boolean",
  489. "resolved": "boolean",
  490. "references": {}
  491. },
  492. "required": false,
  493. "optional": false,
  494. "docs": {
  495. "tags": [],
  496. "text": "When true, opens the dropdown"
  497. },
  498. "attribute": "open",
  499. "reflect": true,
  500. "defaultValue": "false"
  501. },
  502. "disableCloseOnSelect": {
  503. "type": "boolean",
  504. "mutable": false,
  505. "complexType": {
  506. "original": "boolean",
  507. "resolved": "boolean",
  508. "references": {}
  509. },
  510. "required": false,
  511. "optional": false,
  512. "docs": {
  513. "tags": [],
  514. "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"
  515. },
  516. "attribute": "disable-close-on-select",
  517. "reflect": true,
  518. "defaultValue": "false"
  519. },
  520. "disabled": {
  521. "type": "boolean",
  522. "mutable": false,
  523. "complexType": {
  524. "original": "boolean",
  525. "resolved": "boolean",
  526. "references": {}
  527. },
  528. "required": false,
  529. "optional": false,
  530. "docs": {
  531. "tags": [],
  532. "text": "is the dropdown disabled"
  533. },
  534. "attribute": "disabled",
  535. "reflect": true,
  536. "defaultValue": "false"
  537. },
  538. "flipPlacements": {
  539. "type": "unknown",
  540. "mutable": false,
  541. "complexType": {
  542. "original": "EffectivePlacement[]",
  543. "resolved": "Placement[]",
  544. "references": {
  545. "EffectivePlacement": {
  546. "location": "import",
  547. "path": "../../utils/floating-ui"
  548. }
  549. }
  550. },
  551. "required": false,
  552. "optional": true,
  553. "docs": {
  554. "tags": [],
  555. "text": "Defines the available placements that can be used when a flip occurs."
  556. }
  557. },
  558. "maxItems": {
  559. "type": "number",
  560. "mutable": false,
  561. "complexType": {
  562. "original": "number",
  563. "resolved": "number",
  564. "references": {}
  565. },
  566. "required": false,
  567. "optional": false,
  568. "docs": {
  569. "tags": [],
  570. "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"
  571. },
  572. "attribute": "max-items",
  573. "reflect": true,
  574. "defaultValue": "0"
  575. },
  576. "overlayPositioning": {
  577. "type": "string",
  578. "mutable": false,
  579. "complexType": {
  580. "original": "OverlayPositioning",
  581. "resolved": "\"absolute\" | \"fixed\"",
  582. "references": {
  583. "OverlayPositioning": {
  584. "location": "import",
  585. "path": "../../utils/floating-ui"
  586. }
  587. }
  588. },
  589. "required": false,
  590. "optional": false,
  591. "docs": {
  592. "tags": [],
  593. "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\"`."
  594. },
  595. "attribute": "overlay-positioning",
  596. "reflect": true,
  597. "defaultValue": "\"absolute\""
  598. },
  599. "placement": {
  600. "type": "string",
  601. "mutable": false,
  602. "complexType": {
  603. "original": "MenuPlacement",
  604. "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
  605. "references": {
  606. "MenuPlacement": {
  607. "location": "import",
  608. "path": "../../utils/floating-ui"
  609. }
  610. }
  611. },
  612. "required": false,
  613. "optional": false,
  614. "docs": {
  615. "tags": [{
  616. "name": "default",
  617. "text": "\"bottom-start\""
  618. }],
  619. "text": "Determines where the dropdown will be positioned relative to the button."
  620. },
  621. "attribute": "placement",
  622. "reflect": true,
  623. "defaultValue": "defaultMenuPlacement"
  624. },
  625. "scale": {
  626. "type": "string",
  627. "mutable": false,
  628. "complexType": {
  629. "original": "Scale",
  630. "resolved": "\"l\" | \"m\" | \"s\"",
  631. "references": {
  632. "Scale": {
  633. "location": "import",
  634. "path": "../interfaces"
  635. }
  636. }
  637. },
  638. "required": false,
  639. "optional": false,
  640. "docs": {
  641. "tags": [],
  642. "text": "specify the scale of dropdown, defaults to m"
  643. },
  644. "attribute": "scale",
  645. "reflect": true,
  646. "defaultValue": "\"m\""
  647. },
  648. "selectedItems": {
  649. "type": "unknown",
  650. "mutable": true,
  651. "complexType": {
  652. "original": "HTMLCalciteDropdownItemElement[]",
  653. "resolved": "HTMLCalciteDropdownItemElement[]",
  654. "references": {
  655. "HTMLCalciteDropdownItemElement": {
  656. "location": "global"
  657. }
  658. }
  659. },
  660. "required": false,
  661. "optional": false,
  662. "docs": {
  663. "tags": [{
  664. "name": "readonly",
  665. "text": undefined
  666. }],
  667. "text": "**read-only** The currently selected items"
  668. },
  669. "defaultValue": "[]"
  670. },
  671. "type": {
  672. "type": "string",
  673. "mutable": false,
  674. "complexType": {
  675. "original": "\"hover\" | \"click\"",
  676. "resolved": "\"click\" | \"hover\"",
  677. "references": {}
  678. },
  679. "required": false,
  680. "optional": false,
  681. "docs": {
  682. "tags": [],
  683. "text": "specify whether the dropdown is opened by hover or click of a trigger element"
  684. },
  685. "attribute": "type",
  686. "reflect": true,
  687. "defaultValue": "\"click\""
  688. },
  689. "width": {
  690. "type": "string",
  691. "mutable": false,
  692. "complexType": {
  693. "original": "Scale",
  694. "resolved": "\"l\" | \"m\" | \"s\"",
  695. "references": {
  696. "Scale": {
  697. "location": "import",
  698. "path": "../interfaces"
  699. }
  700. }
  701. },
  702. "required": false,
  703. "optional": true,
  704. "docs": {
  705. "tags": [],
  706. "text": "specify the width of dropdown"
  707. },
  708. "attribute": "width",
  709. "reflect": true
  710. }
  711. };
  712. }
  713. static get events() {
  714. return [{
  715. "method": "calciteDropdownSelect",
  716. "name": "calciteDropdownSelect",
  717. "bubbles": true,
  718. "cancelable": false,
  719. "composed": true,
  720. "docs": {
  721. "tags": [],
  722. "text": "fires when a dropdown item has been selected or deselected"
  723. },
  724. "complexType": {
  725. "original": "Selection",
  726. "resolved": "Selection",
  727. "references": {
  728. "Selection": {
  729. "location": "import",
  730. "path": "./interfaces"
  731. }
  732. }
  733. }
  734. }, {
  735. "method": "calciteDropdownBeforeClose",
  736. "name": "calciteDropdownBeforeClose",
  737. "bubbles": true,
  738. "cancelable": false,
  739. "composed": true,
  740. "docs": {
  741. "tags": [],
  742. "text": "Fires when the component is requested to be closed and before the closing transition begins."
  743. },
  744. "complexType": {
  745. "original": "void",
  746. "resolved": "void",
  747. "references": {}
  748. }
  749. }, {
  750. "method": "calciteDropdownClose",
  751. "name": "calciteDropdownClose",
  752. "bubbles": true,
  753. "cancelable": false,
  754. "composed": true,
  755. "docs": {
  756. "tags": [],
  757. "text": "Fires when the component is closed and animation is complete."
  758. },
  759. "complexType": {
  760. "original": "void",
  761. "resolved": "void",
  762. "references": {}
  763. }
  764. }, {
  765. "method": "calciteDropdownBeforeOpen",
  766. "name": "calciteDropdownBeforeOpen",
  767. "bubbles": true,
  768. "cancelable": false,
  769. "composed": true,
  770. "docs": {
  771. "tags": [],
  772. "text": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins."
  773. },
  774. "complexType": {
  775. "original": "void",
  776. "resolved": "void",
  777. "references": {}
  778. }
  779. }, {
  780. "method": "calciteDropdownOpen",
  781. "name": "calciteDropdownOpen",
  782. "bubbles": true,
  783. "cancelable": false,
  784. "composed": true,
  785. "docs": {
  786. "tags": [],
  787. "text": "Fires when the component is open and animation is complete."
  788. },
  789. "complexType": {
  790. "original": "void",
  791. "resolved": "void",
  792. "references": {}
  793. }
  794. }];
  795. }
  796. static get methods() {
  797. return {
  798. "reposition": {
  799. "complexType": {
  800. "signature": "(delayed?: boolean) => Promise<void>",
  801. "parameters": [{
  802. "tags": [{
  803. "name": "param",
  804. "text": "delayed"
  805. }],
  806. "text": ""
  807. }],
  808. "references": {
  809. "Promise": {
  810. "location": "global"
  811. }
  812. },
  813. "return": "Promise<void>"
  814. },
  815. "docs": {
  816. "text": "Updates the position of the component.",
  817. "tags": [{
  818. "name": "param",
  819. "text": "delayed"
  820. }]
  821. }
  822. }
  823. };
  824. }
  825. static get elementRef() { return "el"; }
  826. static get watchers() {
  827. return [{
  828. "propName": "active",
  829. "methodName": "activeHandler"
  830. }, {
  831. "propName": "open",
  832. "methodName": "openHandler"
  833. }, {
  834. "propName": "disabled",
  835. "methodName": "handleDisabledChange"
  836. }, {
  837. "propName": "flipPlacements",
  838. "methodName": "flipPlacementsHandler"
  839. }, {
  840. "propName": "maxItems",
  841. "methodName": "maxItemsHandler"
  842. }, {
  843. "propName": "overlayPositioning",
  844. "methodName": "overlayPositioningHandler"
  845. }, {
  846. "propName": "placement",
  847. "methodName": "placementHandler"
  848. }];
  849. }
  850. static get listeners() {
  851. return [{
  852. "name": "pointerdown",
  853. "method": "closeCalciteDropdownOnClick",
  854. "target": "window",
  855. "capture": false,
  856. "passive": true
  857. }, {
  858. "name": "calciteInternalDropdownCloseRequest",
  859. "method": "closeCalciteDropdownOnEvent",
  860. "target": undefined,
  861. "capture": false,
  862. "passive": false
  863. }, {
  864. "name": "calciteDropdownOpen",
  865. "method": "closeCalciteDropdownOnOpenEvent",
  866. "target": "window",
  867. "capture": false,
  868. "passive": false
  869. }, {
  870. "name": "pointerenter",
  871. "method": "mouseEnterHandler",
  872. "target": undefined,
  873. "capture": false,
  874. "passive": true
  875. }, {
  876. "name": "pointerleave",
  877. "method": "mouseLeaveHandler",
  878. "target": undefined,
  879. "capture": false,
  880. "passive": true
  881. }, {
  882. "name": "calciteInternalDropdownItemKeyEvent",
  883. "method": "calciteInternalDropdownItemKeyEvent",
  884. "target": undefined,
  885. "capture": false,
  886. "passive": false
  887. }, {
  888. "name": "calciteInternalDropdownItemSelect",
  889. "method": "handleItemSelect",
  890. "target": undefined,
  891. "capture": false,
  892. "passive": false
  893. }];
  894. }
  895. }