@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
101 lines (100 loc) • 3.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import "../cdn/main.css";
import { makeRuntime } from "@arcgis/lumina";
import { isServer } from "lit";
const autoMode = "calcite-mode-auto";
const darkMode = "calcite-mode-dark";
const lightMode = "calcite-mode-light";
const CSS_UTILITY = {
autoMode,
darkMode,
lightMode,
rtl: "calcite--rtl",
calciteAnimate: "calcite-animate",
calciteAnimateInUp: "calcite-animate__in-up",
calciteAnimateInDown: "calcite-animate__in-down",
calciteAnimateInRight: "calcite-animate__in-right",
calciteAnimateInLeft: "calcite-animate__in-left"
};
const DEBOUNCE = {
filter: 250,
nextTick: 0,
resize: 150,
reposition: 100
};
const resizeStep = 10;
const resizeShiftStep = 25;
function initModeChangeEvent() {
const { classList } = document.body;
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const getMode = () => classList.contains(darkMode) || classList.contains(autoMode) && prefersDark ? "dark" : "light";
const emitModeChange = (mode) => document.body.dispatchEvent(new CustomEvent("calciteModeChange", { bubbles: true, detail: { mode } }));
const modeChangeHandler = (newMode) => {
if (currentMode !== newMode) {
emitModeChange(newMode);
}
currentMode = newMode;
};
let currentMode = getMode();
emitModeChange(currentMode);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => modeChangeHandler(event.matches ? "dark" : "light"));
new MutationObserver(() => modeChangeHandler(getMode())).observe(document.body, {
attributes: true,
attributeFilter: ["class"]
});
}
let effectiveConfig = void 0;
const defaultConfig = {
focusTrapStack: [],
logLevel: "info"
};
function initConfig() {
return {
...defaultConfig,
...globalThis["calciteConfig"] ?? {}
};
}
function getConfig() {
if (!effectiveConfig) {
effectiveConfig = initConfig();
}
return effectiveConfig;
}
const version = "5.1.0-next.26";
const buildDate = "2026-03-31";
const revision = "374dbc9a4";
function stampVersion() {
const config = getConfig();
if (config && config.version) {
return;
}
console.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
Object.defineProperty(config, "version", {
value: version,
writable: false
});
globalThis["calciteConfig"] = config;
}
if (!isServer) {
if (document.readyState === "interactive") {
initModeChangeEvent();
} else {
document.addEventListener("DOMContentLoaded", initModeChangeEvent, { once: true });
}
}
if (process.env.NODE_ENV !== "test") {
queueMicrotask(stampVersion);
}
const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.0-next.26/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
const { customElement, getAssetPath, setAssetPath } = runtime;
export {
CSS_UTILITY as C,
DEBOUNCE as D,
getConfig as a,
resizeShiftStep as b,
customElement as c,
resizeStep as d,
getAssetPath as g,
runtime as r,
setAssetPath as s
};