dom-9ac0341c.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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.82
  5. */
  6. 'use strict';
  7. const guid = require('./guid-8b6d6cb4.js');
  8. const autoTheme = "calcite-theme-auto";
  9. const darkTheme = "calcite-theme-dark";
  10. const lightTheme = "calcite-theme-light";
  11. const CSS_UTILITY = {
  12. autoTheme,
  13. darkTheme,
  14. lightTheme,
  15. rtl: "calcite--rtl"
  16. };
  17. const TEXT = {
  18. loading: "Loading"
  19. };
  20. /**
  21. * This helper will guarantee an ID on the provided element.
  22. *
  23. * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  24. *
  25. * @returns {string} The element's ID.
  26. */
  27. function ensureId(el) {
  28. if (!el) {
  29. return "";
  30. }
  31. return (el.id = el.id || `${el.tagName.toLowerCase()}-${guid.guid()}`);
  32. }
  33. function nodeListToArray(nodeList) {
  34. return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
  35. }
  36. function getThemeName(el) {
  37. const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
  38. return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
  39. }
  40. function getElementDir(el) {
  41. const prop = "dir";
  42. const selector = `[${prop}]`;
  43. const closest = closestElementCrossShadowBoundary(el, selector);
  44. return closest ? closest.getAttribute(prop) : "ltr";
  45. }
  46. function getElementProp(el, prop, fallbackValue) {
  47. const selector = `[${prop}]`;
  48. const closest = el.closest(selector);
  49. return closest ? closest.getAttribute(prop) : fallbackValue;
  50. }
  51. function getRootNode(el) {
  52. return el.getRootNode();
  53. }
  54. function getHost(root) {
  55. return root.host || null;
  56. }
  57. /**
  58. * This helper queries an element's rootNodes and any ancestor rootNodes.
  59. *
  60. * @returns {Element[]} The elements.
  61. */
  62. function queryElementsRoots(element, selector) {
  63. // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
  64. // Based on: https://stackoverflow.com/q/54520554/194216
  65. function queryFromAll(el, allResults) {
  66. if (!el) {
  67. return allResults;
  68. }
  69. if (el.assignedSlot) {
  70. el = el.assignedSlot;
  71. }
  72. const rootNode = getRootNode(el);
  73. const results = Array.from(rootNode.querySelectorAll(selector));
  74. const uniqueResults = results.filter((result) => !allResults.includes(result));
  75. allResults = [...allResults, ...uniqueResults];
  76. const host = getHost(rootNode);
  77. return host ? queryFromAll(host, allResults) : allResults;
  78. }
  79. return queryFromAll(element, []);
  80. }
  81. /**
  82. * This helper queries an element's rootNode and any ancestor rootNodes.
  83. *
  84. * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  85. *
  86. * @returns {Element} The element.
  87. */
  88. function queryElementRoots(element, { selector, id }) {
  89. // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
  90. // Based on: https://stackoverflow.com/q/54520554/194216
  91. function queryFrom(el) {
  92. if (!el) {
  93. return null;
  94. }
  95. if (el.assignedSlot) {
  96. el = el.assignedSlot;
  97. }
  98. const rootNode = getRootNode(el);
  99. const found = id
  100. ? "getElementById" in rootNode
  101. ? /*
  102. Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
  103. https://github.com/Esri/calcite-components/pull/4280
  104. */
  105. rootNode.getElementById(id)
  106. : null
  107. : selector
  108. ? rootNode.querySelector(selector)
  109. : null;
  110. const host = getHost(rootNode);
  111. return found ? found : host ? queryFrom(host) : null;
  112. }
  113. return queryFrom(element);
  114. }
  115. function closestElementCrossShadowBoundary(element, selector) {
  116. // based on https://stackoverflow.com/q/54520554/194216
  117. function closestFrom(el) {
  118. return el ? el.closest(selector) || closestFrom(getHost(getRootNode(el))) : null;
  119. }
  120. return closestFrom(element);
  121. }
  122. function isCalciteFocusable(el) {
  123. return typeof (el === null || el === void 0 ? void 0 : el.setFocus) === "function";
  124. }
  125. async function focusElement(el) {
  126. if (!el) {
  127. return;
  128. }
  129. return isCalciteFocusable(el) ? el.setFocus() : el.focus();
  130. }
  131. const defaultSlotSelector = ":not([slot])";
  132. function getSlotted(element, slotName, options) {
  133. if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
  134. options = slotName;
  135. slotName = null;
  136. }
  137. const slotSelector = slotName
  138. ? Array.isArray(slotName)
  139. ? slotName.map((name) => `[slot="${name}"]`).join(",")
  140. : `[slot="${slotName}"]`
  141. : defaultSlotSelector;
  142. if (options === null || options === void 0 ? void 0 : options.all) {
  143. return queryMultiple(element, slotSelector, options);
  144. }
  145. return querySingle(element, slotSelector, options);
  146. }
  147. function getDirectChildren(el, selector) {
  148. return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
  149. }
  150. function queryMultiple(element, slotSelector, options) {
  151. let matches = slotSelector === defaultSlotSelector
  152. ? getDirectChildren(element, defaultSlotSelector)
  153. : Array.from(element.querySelectorAll(slotSelector));
  154. matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
  155. matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
  156. const selector = options === null || options === void 0 ? void 0 : options.selector;
  157. return selector
  158. ? matches
  159. .map((item) => Array.from(item.querySelectorAll(selector)))
  160. .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], [])
  161. .filter((match) => !!match)
  162. : matches;
  163. }
  164. function querySingle(element, slotSelector, options) {
  165. let match = slotSelector === defaultSlotSelector
  166. ? getDirectChildren(element, defaultSlotSelector)[0] || null
  167. : element.querySelector(slotSelector);
  168. match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
  169. match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
  170. const selector = options === null || options === void 0 ? void 0 : options.selector;
  171. return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
  172. }
  173. function filterDirectChildren(el, selector) {
  174. return Array.from(el.children).filter((child) => child.matches(selector));
  175. }
  176. // set a default icon from a defined set or allow an override with an icon name string
  177. function setRequestedIcon(iconObject, iconValue, matchedValue) {
  178. if (typeof iconValue === "string" && iconValue !== "") {
  179. return iconValue;
  180. }
  181. else if (iconValue === "") {
  182. return iconObject[matchedValue];
  183. }
  184. }
  185. function intersects(rect1, rect2) {
  186. return !(rect2.left > rect1.right ||
  187. rect2.right < rect1.left ||
  188. rect2.top > rect1.bottom ||
  189. rect2.bottom < rect1.top);
  190. }
  191. /**
  192. * This helper makes sure that boolean aria attributes are properly converted to a string.
  193. *
  194. * It should only be used for aria attributes that require a string value of "true" or "false".
  195. *
  196. * @returns {string} The string conversion of a boolean value ("true" | "false").
  197. */
  198. function toAriaBoolean(value) {
  199. return (!!value).toString();
  200. }
  201. exports.CSS_UTILITY = CSS_UTILITY;
  202. exports.TEXT = TEXT;
  203. exports.closestElementCrossShadowBoundary = closestElementCrossShadowBoundary;
  204. exports.ensureId = ensureId;
  205. exports.filterDirectChildren = filterDirectChildren;
  206. exports.focusElement = focusElement;
  207. exports.getElementDir = getElementDir;
  208. exports.getElementProp = getElementProp;
  209. exports.getSlotted = getSlotted;
  210. exports.getThemeName = getThemeName;
  211. exports.intersects = intersects;
  212. exports.isCalciteFocusable = isCalciteFocusable;
  213. exports.nodeListToArray = nodeListToArray;
  214. exports.queryElementRoots = queryElementRoots;
  215. exports.queryElementsRoots = queryElementsRoots;
  216. exports.setRequestedIcon = setRequestedIcon;
  217. exports.toAriaBoolean = toAriaBoolean;