@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
565 lines (564 loc) • 21.9 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { g as guid } from "./guid.js";
import { C as CSS_UTILITY } from "./runtime.js";
var candidateSelectors = ["input:not([inert])", "select:not([inert])", "textarea:not([inert])", "a[href]:not([inert])", "button:not([inert])", "[tabindex]:not(slot):not([inert])", "audio[controls]:not([inert])", "video[controls]:not([inert])", '[contenteditable]:not([contenteditable="false"]):not([inert])', "details>summary:first-of-type:not([inert])", "details:not([inert])"];
var candidateSelector = /* @__PURE__ */ candidateSelectors.join(",");
var NoElement = typeof Element === "undefined";
var matches = NoElement ? function() {
} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
var getRootNode$1 = !NoElement && Element.prototype.getRootNode ? function(element) {
var _element$getRootNode;
return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
} : function(element) {
return element === null || element === void 0 ? void 0 : element.ownerDocument;
};
var isInert = function isInert2(node, lookUp) {
var _node$getAttribute;
if (lookUp === void 0) {
lookUp = true;
}
var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, "inert");
var inert = inertAtt === "" || inertAtt === "true";
var result = inert || lookUp && node && isInert2(node.parentNode);
return result;
};
var isContentEditable = function isContentEditable2(node) {
var _node$getAttribute2;
var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, "contenteditable");
return attValue === "" || attValue === "true";
};
var getCandidates = function getCandidates2(el, includeContainer, filter) {
if (isInert(el)) {
return [];
}
var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
if (includeContainer && matches.call(el, candidateSelector)) {
candidates.unshift(el);
}
candidates = candidates.filter(filter);
return candidates;
};
var getCandidatesIteratively = function getCandidatesIteratively2(elements, includeContainer, options) {
var candidates = [];
var elementsToCheck = Array.from(elements);
while (elementsToCheck.length) {
var element = elementsToCheck.shift();
if (isInert(element, false)) {
continue;
}
if (element.tagName === "SLOT") {
var assigned = element.assignedElements();
var content = assigned.length ? assigned : element.children;
var nestedCandidates = getCandidatesIteratively2(content, true, options);
if (options.flatten) {
candidates.push.apply(candidates, nestedCandidates);
} else {
candidates.push({
scopeParent: element,
candidates: nestedCandidates
});
}
} else {
var validCandidate = matches.call(element, candidateSelector);
if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
candidates.push(element);
}
var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
typeof options.getShadowRoot === "function" && options.getShadowRoot(element);
var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
if (shadowRoot && validShadowRoot) {
var _nestedCandidates = getCandidatesIteratively2(shadowRoot === true ? element.children : shadowRoot.children, true, options);
if (options.flatten) {
candidates.push.apply(candidates, _nestedCandidates);
} else {
candidates.push({
scopeParent: element,
candidates: _nestedCandidates
});
}
} else {
elementsToCheck.unshift.apply(elementsToCheck, element.children);
}
}
}
return candidates;
};
var hasTabIndex = function hasTabIndex2(node) {
return !isNaN(parseInt(node.getAttribute("tabindex"), 10));
};
var getTabIndex = function getTabIndex2(node) {
if (!node) {
throw new Error("No node provided");
}
if (node.tabIndex < 0) {
if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
return 0;
}
}
return node.tabIndex;
};
var getSortOrderTabIndex = function getSortOrderTabIndex2(node, isScope) {
var tabIndex = getTabIndex(node);
if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
return 0;
}
return tabIndex;
};
var sortOrderedTabbables = function sortOrderedTabbables2(a, b) {
return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
};
var isInput = function isInput2(node) {
return node.tagName === "INPUT";
};
var isHiddenInput = function isHiddenInput2(node) {
return isInput(node) && node.type === "hidden";
};
var isDetailsWithSummary = function isDetailsWithSummary2(node) {
var r = node.tagName === "DETAILS" && Array.prototype.slice.apply(node.children).some(function(child) {
return child.tagName === "SUMMARY";
});
return r;
};
var getCheckedRadio = function getCheckedRadio2(nodes, form) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked && nodes[i].form === form) {
return nodes[i];
}
}
};
var isTabbableRadio = function isTabbableRadio2(node) {
if (!node.name) {
return true;
}
var radioScope = node.form || getRootNode$1(node);
var queryRadios = function queryRadios2(name) {
return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
};
var radioSet;
if (typeof window !== "undefined" && typeof window.CSS !== "undefined" && typeof window.CSS.escape === "function") {
radioSet = queryRadios(window.CSS.escape(node.name));
} else {
try {
radioSet = queryRadios(node.name);
} catch (err) {
console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s", err.message);
return false;
}
}
var checked = getCheckedRadio(radioSet, node.form);
return !checked || checked === node;
};
var isRadio = function isRadio2(node) {
return isInput(node) && node.type === "radio";
};
var isNonTabbableRadio = function isNonTabbableRadio2(node) {
return isRadio(node) && !isTabbableRadio(node);
};
var isNodeAttached = function isNodeAttached2(node) {
var _nodeRoot;
var nodeRoot = node && getRootNode$1(node);
var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
var attached = false;
if (nodeRoot && nodeRoot !== node) {
var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
while (!attached && nodeRootHost) {
var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
nodeRoot = getRootNode$1(nodeRootHost);
nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
}
}
return attached;
};
var isZeroArea = function isZeroArea2(node) {
var _node$getBoundingClie = node.getBoundingClientRect(), width = _node$getBoundingClie.width, height = _node$getBoundingClie.height;
return width === 0 && height === 0;
};
var isHidden = function isHidden2(node, _ref) {
var displayCheck = _ref.displayCheck, getShadowRoot = _ref.getShadowRoot;
if (getComputedStyle(node).visibility === "hidden") {
return true;
}
var isDirectSummary = matches.call(node, "details>summary:first-of-type");
var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
if (matches.call(nodeUnderDetails, "details:not([open]) *")) {
return true;
}
if (!displayCheck || displayCheck === "full" || displayCheck === "legacy-full") {
if (typeof getShadowRoot === "function") {
var originalNode = node;
while (node) {
var parentElement = node.parentElement;
var rootNode = getRootNode$1(node);
if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true) {
return isZeroArea(node);
} else if (node.assignedSlot) {
node = node.assignedSlot;
} else if (!parentElement && rootNode !== node.ownerDocument) {
node = rootNode.host;
} else {
node = parentElement;
}
}
node = originalNode;
}
if (isNodeAttached(node)) {
return !node.getClientRects().length;
}
if (displayCheck !== "legacy-full") {
return true;
}
} else if (displayCheck === "non-zero-area") {
return isZeroArea(node);
}
return false;
};
var isDisabledFromFieldset = function isDisabledFromFieldset2(node) {
if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
var parentNode = node.parentElement;
while (parentNode) {
if (parentNode.tagName === "FIELDSET" && parentNode.disabled) {
for (var i = 0; i < parentNode.children.length; i++) {
var child = parentNode.children.item(i);
if (child.tagName === "LEGEND") {
return matches.call(parentNode, "fieldset[disabled] *") ? true : !child.contains(node);
}
}
return true;
}
parentNode = parentNode.parentElement;
}
}
return false;
};
var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable2(options, node) {
if (node.disabled || // we must do an inert look up to filter out any elements inside an inert ancestor
// because we're limited in the type of selectors we can use in JSDom (see related
// note related to `candidateSelectors`)
isInert(node) || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
return false;
}
return true;
};
var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable2(options, node) {
if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
return false;
}
return true;
};
var isValidShadowRootTabbable = function isValidShadowRootTabbable2(shadowHostNode) {
var tabIndex = parseInt(shadowHostNode.getAttribute("tabindex"), 10);
if (isNaN(tabIndex) || tabIndex >= 0) {
return true;
}
return false;
};
var sortByOrder = function sortByOrder2(candidates) {
var regularTabbables = [];
var orderedTabbables = [];
candidates.forEach(function(item, i) {
var isScope = !!item.scopeParent;
var element = isScope ? item.scopeParent : item;
var candidateTabindex = getSortOrderTabIndex(element, isScope);
var elements = isScope ? sortByOrder2(item.candidates) : element;
if (candidateTabindex === 0) {
isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
} else {
orderedTabbables.push({
documentOrder: i,
tabIndex: candidateTabindex,
item,
isScope,
content: elements
});
}
});
return orderedTabbables.sort(sortOrderedTabbables).reduce(function(acc, sortable) {
sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
return acc;
}, []).concat(regularTabbables);
};
var tabbable = function tabbable2(container, options) {
options = options || {};
var candidates;
if (options.getShadowRoot) {
candidates = getCandidatesIteratively([container], options.includeContainer, {
filter: isNodeMatchingSelectorTabbable.bind(null, options),
flatten: false,
getShadowRoot: options.getShadowRoot,
shadowRootFilter: isValidShadowRootTabbable
});
} else {
candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
}
return sortByOrder(candidates);
};
var focusable = function focusable2(container, options) {
options = options || {};
var candidates;
if (options.getShadowRoot) {
candidates = getCandidatesIteratively([container], options.includeContainer, {
filter: isNodeMatchingSelectorFocusable.bind(null, options),
flatten: true,
getShadowRoot: options.getShadowRoot
});
} else {
candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
}
return candidates;
};
const tabbableOptions = {
getShadowRoot: true
};
function ensureId(el) {
if (!el) {
return "";
}
return el.id = el.id || `${el.tagName.toLowerCase()}-${guid()}`;
}
function nodeListToArray(nodeList) {
return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
}
function getModeName(el) {
const closestElWithMode = closestElementCrossShadowBoundary(
el,
`.${CSS_UTILITY.darkMode}, .${CSS_UTILITY.lightMode}, .${CSS_UTILITY.autoMode}`
);
return closestElWithMode?.classList.contains("calcite-mode-dark") || closestElWithMode?.classList.contains("calcite-mode-auto") && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function getElementWidth(el) {
if (!el) {
return 0;
}
return parseFloat(getComputedStyle(el).inlineSize);
}
function getRootNode(el) {
return el.getRootNode();
}
function getShadowRootNode(el) {
const rootNode = getRootNode(el);
return "host" in rootNode ? rootNode : null;
}
function getTextWidth(text, font) {
if (!text) {
return 0;
}
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
return context.measureText(text).width;
}
function getHost(root) {
return root.host || null;
}
function queryElementRoots(el, {
selector,
id
}) {
if (!el) {
return null;
}
if (el.assignedSlot) {
el = el.assignedSlot;
}
const rootNode = getRootNode(el);
const found = id ? "getElementById" in rootNode ? (
/*
Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
https://github.com/Esri/calcite-design-system/pull/4280
*/
rootNode.getElementById(id)
) : null : selector ? rootNode.querySelector(selector) : null;
return found || queryElementRoots(getHost(rootNode), { selector, id });
}
function closestElementCrossShadowBoundary(element, selector) {
return element ? element.closest(selector) || closestElementCrossShadowBoundary(getHost(getRootNode(element)), selector) : null;
}
function isCalciteFocusable(el) {
return typeof el?.setFocus === "function";
}
async function focusElement(el, includeContainer = false, strategy = "tabbable", context, options) {
if (!el) {
return;
}
if (isCalciteFocusable(el) && context !== el) {
return el.setFocus(options);
}
const firstFocusFunction = strategy === "tabbable" ? focusFirstTabbable : focusFirstFocusable;
return firstFocusFunction(el, includeContainer, options);
}
function getFirstTabbable(element, includeContainer) {
if (!element) {
return;
}
return tabbable(element, { ...tabbableOptions, includeContainer })[0] ?? element;
}
function focusFirstTabbable(element, includeContainer, options) {
getFirstTabbable(element, includeContainer)?.focus(options);
}
function getFirstFocusable(element, includeContainer) {
if (!element) {
return;
}
return focusable(element, { ...tabbableOptions, includeContainer })[0] ?? element;
}
function focusFirstFocusable(element, includeContainer, options) {
getFirstFocusable(element, includeContainer)?.focus(options);
}
function filterDirectChildren(el, selector) {
return Array.from(el.children).filter((child) => child.matches(selector));
}
function filterElementsBySelector(elements, selector) {
return elements.filter((element) => element.matches(selector));
}
function setRequestedIcon(iconObject, iconValue, matchedValue) {
if (typeof iconValue === "string" && iconValue !== "") {
return iconValue;
} else if (iconValue === "" || iconValue === true) {
return iconObject[matchedValue];
}
}
function intersects(rect1, rect2) {
return !(rect2.left > rect1.right || rect2.right < rect1.left || rect2.top > rect1.bottom || rect2.bottom < rect1.top);
}
function slotChangeHasContent(event) {
return slotChangeHasAssignedElement(event) || slotChangeHasTextContent(event);
}
function slotChangeGetTextContent(event) {
return slotChangeGetAssignedNodes(event).filter((node) => node.nodeType === Node.TEXT_NODE).map((node) => node.textContent).join("").trim();
}
function hasVisibleContent(element) {
for (const node of element.childNodes) {
if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== "" || node.nodeType === Node.ELEMENT_NODE) {
return true;
}
}
return false;
}
function slotChangeHasTextContent(event) {
return !!slotChangeGetTextContent(event);
}
function slotChangeGetAssignedNodes(event) {
return event.currentTarget.assignedNodes({
flatten: true
});
}
function slotChangeHasAssignedElement(event) {
return !!slotChangeGetAssignedElements(event).length;
}
function slotChangeGetAssignedElements(event, selector) {
return getSlotAssignedElements(event.currentTarget, selector);
}
function getSlotAssignedElements(slot, selector) {
const assignedElements = slot.assignedElements({
flatten: true
});
return selector ? filterElementsBySelector(assignedElements, selector) : assignedElements;
}
function isPrimaryPointerButton(event) {
return !!(event.isPrimary && event.button === 0);
}
function isKeyboardTriggeredClick(event) {
return event.detail === 0;
}
const focusElementInGroup = (elements, currentElement, destination, cycle = true, includeContainer = true, targetAsContext = false) => {
const currentIndex = elements.indexOf(currentElement);
const isFirstItem = currentIndex === 0;
const isLastItem = currentIndex === elements.length - 1;
if (cycle) {
destination = destination === "previous" && isFirstItem ? "last" : destination === "next" && isLastItem ? "first" : destination;
}
let focusTarget;
if (destination === "previous") {
focusTarget = elements[currentIndex - 1] || elements[cycle ? elements.length - 1 : currentIndex];
} else if (destination === "next") {
focusTarget = elements[currentIndex + 1] || elements[cycle ? 0 : currentIndex];
} else if (destination === "last") {
focusTarget = elements[elements.length - 1];
} else {
focusTarget = elements[0];
}
focusElement(focusTarget, includeContainer, "tabbable", targetAsContext ? focusTarget : void 0);
return focusTarget;
};
function isBefore(a, b) {
if (a.parentNode !== b.parentNode) {
return false;
}
const children = Array.from(a.parentNode.children);
return children.indexOf(a) < children.indexOf(b);
}
async function whenAnimationDone(targetEl, animationName) {
return whenTransitionOrAnimationDone(targetEl, animationName, "animation");
}
async function whenTransitionDone(targetEl, transitionProp) {
return whenTransitionOrAnimationDone(targetEl, transitionProp, "transition");
}
function findAnimation(targetEl, type, transitionPropOrAnimationName) {
const targetProp = type === "transition" ? "transitionProperty" : "animationName";
return targetEl.getAnimations().find((anim) => anim[targetProp] === transitionPropOrAnimationName);
}
async function whenTransitionOrAnimationDone(targetEl, transitionPropOrAnimationName, type) {
let anim = findAnimation(targetEl, type, transitionPropOrAnimationName);
if (!anim) {
await nextFrame();
anim = findAnimation(targetEl, type, transitionPropOrAnimationName);
}
if (!anim) {
return;
}
try {
await anim.finished;
} catch {
}
}
async function nextFrame() {
await new Promise((resolve) => requestAnimationFrame(() => resolve()));
}
function getStylePixelValue(value) {
if (value.endsWith("px")) {
return parseFloat(value);
} else if (value.endsWith("vw")) {
return viewportUnitToPixel(parseFloat(value), window.innerWidth);
} else if (value.endsWith("vh")) {
return viewportUnitToPixel(parseFloat(value), window.innerHeight);
}
return 0;
}
function viewportUnitToPixel(value, viewportSize) {
return value * viewportSize / 100;
}
export {
slotChangeHasTextContent as A,
ensureId as B,
filterDirectChildren as C,
getSlotAssignedElements as D,
slotChangeGetAssignedElements as a,
setRequestedIcon as b,
closestElementCrossShadowBoundary as c,
getModeName as d,
getRootNode as e,
focusElementInGroup as f,
getStylePixelValue as g,
hasVisibleContent as h,
focusElement as i,
isPrimaryPointerButton as j,
getElementWidth as k,
getTextWidth as l,
slotChangeHasContent as m,
nodeListToArray as n,
whenTransitionDone as o,
isBefore as p,
queryElementRoots as q,
isCalciteFocusable as r,
slotChangeHasAssignedElement as s,
tabbableOptions as t,
nextFrame as u,
getShadowRootNode as v,
whenAnimationDone as w,
isKeyboardTriggeredClick as x,
getFirstTabbable as y,
intersects as z
};