@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
86 lines (85 loc) • 3.5 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 { ref } from "lit-html/directives/ref.js";
import { nothing, html } from "lit-html";
import { g as getElementDir } from "./dom.js";
import { S as SLOTS } from "./resources7.js";
import { S as SLOTS$1 } from "./resources2.js";
const queryActions = (el) => {
return Array.from(el.querySelectorAll("calcite-action")).filter(
(action) => action.closest("calcite-action-menu") ? action.slot === SLOTS$1.trigger : true
);
};
const overflowActions = ({
actionGroups,
expanded,
overflowCount
}) => {
let needToSlotCount = overflowCount;
actionGroups.reverse().forEach((group) => {
let slottedWithinGroupCount = 0;
const groupActions = queryActions(group).reverse();
groupActions.forEach((groupAction) => {
if (groupAction.slot === SLOTS.menuActions) {
groupAction.removeAttribute("slot");
groupAction.textEnabled = expanded;
}
});
if (needToSlotCount > 0) {
groupActions.some((groupAction) => {
const unslottedActions = groupActions.filter((action) => !action.slot);
if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
groupAction.textEnabled = true;
groupAction.setAttribute("slot", SLOTS.menuActions);
slottedWithinGroupCount++;
if (slottedWithinGroupCount > 1) {
needToSlotCount--;
}
}
return needToSlotCount < 1;
});
}
group.manager.component.requestUpdate();
});
};
const ICONS = {
chevronsLeft: "chevrons-left",
chevronsRight: "chevrons-right"
};
function getCalcitePosition(position, el) {
return position || el.closest("calcite-shell-panel")?.position || "start";
}
function toggleChildActionText({ el, expanded }) {
queryActions(el).filter((el2) => el2.slot !== SLOTS.menuActions).forEach((action) => action.textEnabled = expanded);
el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el2) => el2.expanded = expanded);
}
const setTooltipReference = ({ tooltip, referenceElement, expanded, ref: ref2 }) => {
if (tooltip) {
tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
}
if (ref2) {
ref2(referenceElement);
}
return referenceElement;
};
const ExpandToggle = ({ expanded, expandText, collapseText, expandLabel, collapseLabel, toggle, el, position, tooltip, ref: ref$1, scale }) => {
const rtl = getElementDir(el) === "rtl";
const text = expanded ? collapseText : expandText;
const label = expanded ? collapseLabel : expandLabel;
const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
if (rtl) {
icons.reverse();
}
const end = getCalcitePosition(position, el) === "end";
const expandIcon = end ? icons[1] : icons[0];
const collapseIcon = end ? icons[0] : icons[1];
const actionNode = html`<calcite-action .icon=${expanded ? expandIcon : collapseIcon} id=expand-toggle .label=${label} @click=${toggle} .scale=${scale} .text=${text} .textEnabled=${expanded} title=${(!expanded && !tooltip ? text : null) ?? nothing} ${ref((referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref: ref$1 }))}></calcite-action>`;
return actionNode;
};
export {
ExpandToggle as E,
overflowActions as o,
queryActions as q,
toggleChildActionText as t
};