@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
561 lines (560 loc) • 21.3 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { g as guid } from "./guid.js";
import { C as CSS_UTILITY } from "./runtime.js";
/*!
* tabbable 6.2.0
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
*/
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);
};
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 getElementDir(el) {
const prop = "dir";
const selector = `[${prop}]`;
const closest = closestElementCrossShadowBoundary(el, selector);
return closest ? closest.getAttribute(prop) : "ltr";
}
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) {
if (!el) {
return;
}
return isCalciteFocusable(el) ? el.setFocus() : el.focus();
}
function getFirstTabbable(element) {
if (!element) {
return;
}
return tabbable(element, tabbableOptions)[0] ?? element;
}
function focusFirstTabbable(element) {
getFirstTabbable(element)?.focus();
}
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 toAriaBoolean(value) {
return Boolean(value).toString();
}
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.target, 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) => {
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);
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, onStart, onEnd) {
return whenTransitionOrAnimationDone(targetEl, animationName, "animation", onStart, onEnd);
}
async function whenTransitionDone(targetEl, transitionProp, onStart, onEnd) {
return whenTransitionOrAnimationDone(targetEl, transitionProp, "transition", onStart, onEnd);
}
async function triggerFallbackStartEnd(start, end) {
await nextFrame();
start?.();
await nextFrame();
end?.();
}
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, onStart, onEnd) {
let anim = findAnimation(targetEl, type, transitionPropOrAnimationName);
if (!anim) {
await nextFrame();
anim = findAnimation(targetEl, type, transitionPropOrAnimationName);
}
if (!anim) {
return triggerFallbackStartEnd(onStart, onEnd);
}
onStart?.();
try {
await anim.finished;
} catch {
} finally {
onEnd?.();
}
}
function nextFrame() {
return new Promise((resolve) => requestAnimationFrame(() => resolve()));
}
function getStylePixelValue(value) {
switch (true) {
case value.endsWith("px"):
return parseFloat(value);
case value.endsWith("vw"):
return window.innerWidth / 100 * parseFloat(value);
case value.endsWith("vh"):
return window.innerHeight / 100 * parseFloat(value);
default:
return 0;
}
}
export {
getTextWidth as A,
getElementWidth as B,
getModeName as C,
hasVisibleContent as D,
slotChangeHasAssignedElement as a,
focusElement as b,
getShadowRootNode as c,
focusElementInGroup as d,
getSlotAssignedElements as e,
filterDirectChildren as f,
getElementDir as g,
focusFirstTabbable as h,
isPrimaryPointerButton as i,
intersects as j,
getStylePixelValue as k,
closestElementCrossShadowBoundary as l,
isBefore as m,
nodeListToArray as n,
ensureId as o,
tabbableOptions as p,
queryElementRoots as q,
slotChangeHasContent as r,
slotChangeGetAssignedElements as s,
toAriaBoolean as t,
isKeyboardTriggeredClick as u,
setRequestedIcon as v,
whenTransitionDone as w,
getFirstTabbable as x,
getRootNode as y,
whenAnimationDone as z
};