@watermarkinsights/ripple 5.16.0-alpha.2 → 5.16.0-alpha.5

package/dist/collection/global/functions.js

@@ -0,0 +1,927 @@
+import * as lang from "../lang/lang";
+import { createIntl, createIntlCache } from "@formatjs/intl";
+const DEFAULT_LANGUAGE = "en";
+function getBrowserLang() {
+    const langAttr = document.documentElement.getAttribute("lang");
+    if (!!langAttr) {
+        return langAttr;
+    }
+    else if (window.navigator && window.navigator.language) {
+        const lang = window.navigator.languages ? window.navigator.languages[0] : window.navigator.language;
+        return lang.slice(0, 2);
+    }
+    else {
+        return DEFAULT_LANGUAGE;
+    }
+}
+// prevents memory leak
+const cache = createIntlCache();
+const locale = getBrowserLang();
+export const intl = createIntl({
+    locale: locale,
+    defaultLocale: "en",
+    messages: lang[locale] || lang.en,
+}, cache);
+export function generateId() {
+    return "wmcl-" + Math.random().toString(36).substr(2, 10);
+}
+// limits how many times a function fires
+// use when the function should run periodically, but not too often (e.g. window resize)
+export function throttle(fn, wait) {
+    let timeout;
+    let shouldWait = false;
+    return function () {
+        const context = this;
+        if (!shouldWait) {
+            fn.apply(context, arguments);
+            shouldWait = true;
+            clearTimeout(timeout);
+            timeout = setTimeout(function () {
+                shouldWait = false;
+            }, wait);
+        }
+    };
+}
+// waits until it hasn't been called for [timeout] ms.
+// use when the function should run only after something (event) is done firing
+export function debounce(fn, wait) {
+    let timeout;
+    return function () {
+        const context = this;
+        const functionCall = () => fn.apply(context, arguments);
+        clearTimeout(timeout);
+        timeout = setTimeout(functionCall, wait);
+    };
+}
+export function getTextDir() {
+    const dir = document.querySelector("html").getAttribute("dir");
+    return dir ? dir.toLowerCase() : "";
+}
+export function getPosition(el) {
+    const coords = el.getBoundingClientRect();
+    let x = coords.x;
+    let y = coords.y;
+    // Edge doesn't have x and y
+    if (!x) {
+        if (getTextDir() === "rtl") {
+            x = coords.right;
+        }
+        else {
+            x = coords.left;
+        }
+        y = coords.top;
+    }
+    return { x, y };
+}
+function getParentOrHost(el) {
+    // Handle slot traversal - if element is assigned to a slot, go to the slot first
+    if (el.assignedSlot) {
+        return el.assignedSlot;
+    }
+    let nextEl = el.parentElement;
+    if (!nextEl) {
+        // Check if we're at a shadow root boundary
+        const rootNode = el.getRootNode();
+        if (rootNode instanceof ShadowRoot && rootNode.host) {
+            nextEl = rootNode.host;
+        }
+    }
+    return nextEl;
+}
+function findPositionedAncestor(el) {
+    // Used to find the nearest positioned ancestor of an element (typically absolute or fixed)
+    let positionedAncestor = getParentOrHost(el);
+    while (positionedAncestor && positionedAncestor !== document.documentElement) {
+        const ancestorStyle = window.getComputedStyle(positionedAncestor);
+        if (["relative", "absolute", "fixed", "sticky"].includes(ancestorStyle.position)) {
+            return positionedAncestor;
+        }
+        positionedAncestor = getParentOrHost(positionedAncestor);
+    }
+    // If no positioned ancestor found, that ancestor is the document element
+    return document.documentElement;
+}
+function findPositioningBoundary(el) {
+    // Check for positioned elements that create new positioning contexts
+    let current = el;
+    while (current && current !== document.documentElement) {
+        const currentStyle = window.getComputedStyle(current);
+        // Elements with position: fixed are positioned relative to viewport
+        if (currentStyle.position === "fixed") {
+            return current;
+        }
+        // Elements with position: absolute are positioned relative to nearest positioned ancestor
+        if (currentStyle.position === "absolute") {
+            return findPositionedAncestor(current);
+        }
+        current = getParentOrHost(current);
+    }
+    return null; // No special positioning context found
+}
+export function findAllScrollableParents(el) {
+    const scrollableParents = [];
+    let currentEl = getParentOrHost(el);
+    // Traverse up to and including the document.documentElement (html element)
+    while (currentEl) {
+        const style = window.getComputedStyle(currentEl);
+        if (["scroll", "auto"].includes(style.overflowY) || ["scroll", "auto"].includes(style.overflowX)) {
+            scrollableParents.push(currentEl);
+        }
+        currentEl = getParentOrHost(currentEl);
+    }
+    if (document.documentElement && !scrollableParents.includes(document.documentElement)) {
+        // Check if the document itself is scrollable (common case for page-level scrolling)
+        // Special case: document element can scroll even with overflow: visible when content overflows viewport
+        const htmlStyle = window.getComputedStyle(document.documentElement);
+        if (["scroll", "auto"].includes(htmlStyle.overflowY) ||
+            ["scroll", "auto"].includes(htmlStyle.overflowX) ||
+            // For document element only: also check if page content can actually scroll
+            document.documentElement.scrollHeight > document.documentElement.clientHeight ||
+            document.documentElement.scrollWidth > document.documentElement.clientWidth) {
+            scrollableParents.push(document.documentElement);
+        }
+    }
+    return scrollableParents;
+}
+export function getCumulativeScrollOffset(el) {
+    const scrollableParents = findAllScrollableParents(el);
+    let totalScrollX = 0;
+    let totalScrollY = 0;
+    // Find the positioning context boundary - this determines which scroll offsets are relevant
+    const positioningBoundary = findPositioningBoundary(el);
+    scrollableParents.forEach((parent) => {
+        // Skip scroll offsets from elements outside the positioning boundary, but include the positioning boundary itself
+        if (positioningBoundary && parent !== positioningBoundary && !positioningBoundary.contains(parent)) {
+            return;
+        }
+        if (parent === document.documentElement) {
+            // For the document element, use window scroll values
+            totalScrollX += window.scrollX || window.pageXOffset || 0;
+            totalScrollY += window.scrollY || window.pageYOffset || 0;
+        }
+        else {
+            // For regular elements, use scrollLeft/scrollTop
+            totalScrollX += parent.scrollLeft;
+            totalScrollY += parent.scrollTop;
+        }
+    });
+    return { x: totalScrollX, y: totalScrollY };
+}
+export function findParentWithHiddenOverflow(el) {
+    while (!!el) {
+        if (window.getComputedStyle(el).overflowY !== "visible") {
+            return el;
+        }
+        el = getParentOrHost(el);
+    }
+}
+export function isElOrChild(componentEl, el) {
+    var _a;
+    // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
+    return el === componentEl || componentEl.contains(el) || ((_a = componentEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
+}
+export function getContextMeasurements(el) {
+    const fixedRect = el.getBoundingClientRect();
+    const parentEl = findParentWithHiddenOverflow(el);
+    const parentRect = parentEl && parentEl.getBoundingClientRect();
+    // if parentEl is not found, measurements are checked against the viewport
+    return {
+        // NB boundingClientRect.bottom is space from top of viewport to bottom of el
+        // to get space below the el -> height of viewport minus boundingClientRect.bottom
+        spaceAbove: parentRect ? fixedRect.top - parentRect.top : fixedRect.top,
+        // NB boundingClientRect.bottom is space from top of viewport to bottom of el
+        // to get space below the el -> height of viewport minus boundingClientRect.bottom
+        spaceBelow: parentRect
+            ? parentRect.bottom - fixedRect.bottom
+            : document.documentElement.clientHeight - fixedRect.bottom,
+        spaceLeft: parentRect ? fixedRect.left - parentRect.left : fixedRect.left,
+        spaceRight: parentRect
+            ? parentRect.right - fixedRect.right
+            : document.documentElement.clientWidth - fixedRect.right,
+    };
+}
+export function shouldOpenUp(fixedEl, //the element visible on the page when the component is closed
+closableElHeight, //the dropdown/popup/etc that becomes visible when the component is open
+offsetAbove = 0, // if closableEl covers a part of fixedEl, that part should be offset
+offsetBelow = 0) {
+    const { spaceAbove, spaceBelow } = getContextMeasurements(fixedEl);
+    //we want to open up only if there's not enough space below AND there is enough space above
+    const openUp = closableElHeight > spaceBelow + offsetBelow && closableElHeight <= spaceAbove + offsetAbove;
+    return openUp;
+}
+export function shouldOpenDown(fixedEl, //the element visible on the page when the component is closed
+closableElHeight, //the dropdown/popup/etc that becomes visible when the component is open
+offsetAbove = 0, // if closableEl covers a part of fixedEl, that part should be offset
+offsetBelow = 0) {
+    const { spaceAbove, spaceBelow } = getContextMeasurements(fixedEl);
+    //we want to open up only if there's not enough space below AND there is enough space above
+    const openDown = closableElHeight > spaceAbove + offsetAbove && closableElHeight <= spaceBelow + offsetBelow;
+    return openDown;
+}
+export function shouldShiftRight(fixedEl, closableElWidth) {
+    const { spaceLeft, spaceRight } = getContextMeasurements(fixedEl);
+    const needsSpaceLeft = closableElWidth > spaceLeft && spaceRight > spaceLeft;
+    return needsSpaceLeft;
+}
+export function shouldShiftLeft(fixedEl, closableElWidth) {
+    const { spaceLeft, spaceRight } = getContextMeasurements(fixedEl);
+    const needsSpaceRight = closableElWidth > spaceRight && spaceLeft > spaceRight;
+    return needsSpaceRight;
+}
+export function adjustTooltipPlacement(placement, anchorEl, tooltipHeight, tooltipWidth) {
+    const { spaceLeft, spaceRight, spaceBelow, spaceAbove } = getContextMeasurements(anchorEl);
+    const enoughSpaceAbove = spaceAbove > tooltipHeight;
+    const enoughSpaceBelow = spaceBelow > tooltipHeight;
+    // a tooltip should never be closer than 24px to the edge of a screen
+    const enoughSpaceLeft = spaceLeft - 24 > tooltipWidth;
+    const enoughSpaceRight = spaceRight - 24 > tooltipWidth;
+    const swapAbove = (placement) => {
+        return !enoughSpaceAbove ? placement.replace("top", "bottom") : placement;
+    };
+    const swapBelow = (placement) => {
+        return !enoughSpaceBelow && enoughSpaceAbove ? placement.replace("bottom", "top") : placement;
+    };
+    const swapLeft = (placement, centeredPosition) => {
+        if (!enoughSpaceLeft && enoughSpaceRight) {
+            placement = placement.replace("left", "right");
+        }
+        else if (!enoughSpaceLeft && !enoughSpaceRight) {
+            placement = centeredPosition;
+        }
+        return placement;
+    };
+    const swapRight = (placement, centeredPosition) => {
+        if (!enoughSpaceRight && enoughSpaceLeft) {
+            placement = placement.replace("right", "left");
+        }
+        else if (!enoughSpaceRight && !enoughSpaceLeft) {
+            placement = centeredPosition;
+        }
+        return placement;
+    };
+    // horizontal checks must occur before vertical checks, because horizontal can affect vertical placement but not vice versa
+    switch (placement) {
+        case "left":
+            placement = swapLeft(placement, "bottom");
+        case "right":
+            placement = swapRight(placement, "bottom");
+        case "top-left":
+            placement = swapLeft(placement, "top");
+            placement = swapAbove(placement);
+        case "top-right":
+            placement = swapRight(placement, "top");
+            placement = swapAbove(placement);
+        case "bottom-left":
+            placement = swapLeft(placement, "bottom");
+            placement = swapBelow(placement);
+        case "bottom-right":
+            placement = swapRight(placement, "bottom");
+            placement = swapBelow(placement);
+        case "top":
+            placement = swapAbove(placement);
+        case "bottom":
+            placement = swapBelow(placement);
+    }
+    return placement;
+}
+export function showTooltip(placement, anchorEl, tooltipText) {
+    // until popover is supported by firefox, we have to check for and position additional tooltip rendered within the modal's dialog element
+    // this additional tooltip is only rendered in browsers that do not support popover
+    const tooltipEls = document.querySelectorAll(".wm-tooltip");
+    tooltipEls.forEach((tooltipEl) => {
+        //@ts-ignore
+        if (!!tooltipEl.showPopover) {
+            //@ts-ignore
+            tooltipEl.showPopover();
+        }
+        tooltipEl.classList.add("show");
+        tooltipEl.textContent = tooltipText;
+        // tooltip only has a maxWidth if it contains whitespace and can break
+        const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
+        if (hasNoWhitespace) {
+            tooltipEl.classList.add("single-word");
+            tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
+        }
+        else {
+            tooltipEl.classList.remove("single-word");
+            tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
+        }
+        const tooltipRect = tooltipEl.getBoundingClientRect();
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const adjustedPlacement = adjustTooltipPlacement(placement, anchorEl, tooltipRect.height, tooltipRect.width);
+        let verticalPos, horizontalPos;
+        [verticalPos, horizontalPos] = positionTooltip(adjustedPlacement, anchorRect, tooltipRect.height, tooltipRect.width);
+        tooltipEl.style.setProperty("--wmTooltipTop", verticalPos + "px");
+        tooltipEl.style.setProperty("--wmTooltipLeft", horizontalPos + "px");
+    });
+}
+export function hideTooltip() {
+    const tooltipEls = document.querySelectorAll(".wm-tooltip");
+    tooltipEls.forEach((tooltipEl) => {
+        //@ts-ignore
+        if (!!tooltipEl.hidePopover) {
+            //@ts-ignore
+            tooltipEl.hidePopover();
+        }
+        tooltipEl.classList.remove("show");
+    });
+}
+function positionTooltip(placement, anchorRect, tooltipHeight, tooltipWidth) {
+    // to get the center positions, calculate the difference between the button width and the tooltip width
+    const verticalDiff = (anchorRect.height - tooltipHeight) / 2;
+    const horizontalDiff = (anchorRect.width - tooltipWidth) / 2;
+    // the naming convention defaults to center in the absence of a value
+    // "top" and "bottom" imply centering horizontally; "right" and "left" imply centering vertically
+    // therefore we first set to center and adjust accordingly
+    let verticalPos = anchorRect.top + verticalDiff;
+    let horizontalPos = anchorRect.left + horizontalDiff;
+    if (placement.includes("top")) {
+        verticalPos = anchorRect.top - tooltipHeight - 8;
+    }
+    if (placement.includes("bottom")) {
+        verticalPos = anchorRect.bottom + 8;
+    }
+    if (placement.includes("left")) {
+        horizontalPos = anchorRect.left - tooltipWidth - 8;
+    }
+    if (placement.includes("right")) {
+        horizontalPos = anchorRect.right + 8;
+    }
+    // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted
+    // this only occurs when the tooltip is overflowing to the left and is placed top or bottom
+    // (button placed too far left, or screen size under 268px)
+    horizontalPos = Math.max(horizontalPos, 24);
+    return [verticalPos, horizontalPos];
+}
+export function hasRoomRight(x, spaceNeeded) {
+    let horizOffset = 0;
+    // if (getTextDir() === "ltr") {
+    if (x.type === "click") {
+        // if it's a mouse event, deal with mouse coords
+        horizOffset = x.clientX;
+        // if it's a focus event, the offset is 0
+    }
+    else if (x.type === "focus") {
+        horizOffset = 0;
+    }
+    else {
+        // otherwise an element was passed, calculate how far it is from the edge of the window
+        let el = x; // re-assignment is for clarity
+        while (el) {
+            if (el.tagName == "BODY") {
+                // deal with browser quirks with body/window/document and page scroll
+                var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
+                horizOffset += el.offsetLeft - xScroll + el.clientLeft;
+            }
+            else {
+                // for all other non-BODY elements
+                horizOffset += el.offsetLeft - el.scrollLeft + el.clientLeft;
+            }
+            el = el.offsetParent;
+        }
+        // }
+    }
+    return window.innerWidth - horizOffset >= spaceNeeded;
+}
+export function checkForActiveElInShadow(element) {
+    while (element && element.shadowRoot) {
+        element = element.shadowRoot.activeElement;
+    }
+    return element;
+}
+export function checkForFocusableElInShadow(element) {
+    const selectors = [
+        "button",
+        "a",
+        "input",
+        "select",
+        "textarea",
+        "wm-button",
+        "wm-search",
+        "wm-select",
+        "wm-action-menu",
+        "wm-tab-item",
+        "wm-datepicker",
+    ];
+    let focusableEl = element;
+    selectors.forEach((selector) => {
+        if (focusableEl && focusableEl.shadowRoot) {
+            let elInShadow = focusableEl.shadowRoot.querySelector(selector);
+            if (elInShadow) {
+                if (selector.startsWith("wm-")) {
+                    focusableEl = checkForFocusableElInShadow(elInShadow);
+                }
+                else {
+                    focusableEl = elInShadow;
+                }
+            }
+        }
+    });
+    return focusableEl;
+}
+export function isFocusable(element) {
+    if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute("tabIndex") !== null)) {
+        return true;
+    }
+    if (element.disabled) {
+        return false;
+    }
+    switch (element.nodeName) {
+        case "A":
+            return !!element.href && element.rel != "ignore";
+        case "INPUT":
+            return element.type != "hidden" && element.type != "file";
+        case "BUTTON":
+        case "SELECT":
+        case "TEXTAREA":
+        case "WM-BUTTON":
+        case "WM-SELECT":
+        case "WM-ACTION-MENU":
+        case "WM-DATEPICKER":
+        case "WM-TIMEPICKER":
+        case "WM-INPUT":
+        case "WM-TAG-INPUT":
+        case "WM-TAB-ITEM":
+        case "WM-SEARCH":
+            return true;
+        default:
+            return false;
+    }
+}
+export function getFirstFocusableDescendant(element) {
+    if (isFocusable(element)) {
+        return checkForFocusableElInShadow(element);
+    }
+    else if (element.childNodes.length > 0) {
+        element.childNodes.forEach((i) => {
+            const childEl = getFirstFocusableDescendant(i);
+            return childEl && checkForFocusableElInShadow(childEl);
+        });
+    }
+}
+export function getLastFocusableDescendant(element) {
+    if (isFocusable(element)) {
+        return checkForFocusableElInShadow(element);
+    }
+    else if (element.childNodes.length > 0) {
+        // Convert to array and reverse to process children from last to first
+        const children = Array.from(element.childNodes).reverse();
+        return children.reduce((focusable, child) => {
+            if (focusable)
+                return focusable;
+            const childEl = getLastFocusableDescendant(child);
+            return childEl ? checkForFocusableElInShadow(childEl) : null;
+        }, null);
+    }
+    return null;
+}
+// takes a string (space separated list of extensions), returns an array of strings (corresponding MIME types)
+export function getAcceptedMimeTypesList(acceptedExtensions) {
+    // this is just a list of common file types (regardless of whether they are/can be valid or not)
+    // front end checks are just a convenience to users, independent of security.
+    // it allows users to be notified of an invalid type as soon as they select the file, rather than when it gets uploaded
+    const lookupTable = {
+        aac: ["audio/aac"],
+        abw: ["application/x-abiword"],
+        arc: ["application/x-freearc"],
+        avi: ["video/x-msvideo"],
+        azw: ["application/vnd.amazon.ebook"],
+        bin: ["application/octet-stream"],
+        bmp: ["image/bmp"],
+        bz: ["application/x-bzip"],
+        bz2: ["application/x-bzip2"],
+        csh: ["application/x-csh"],
+        css: ["text/css"],
+        csv: ["text/csv"],
+        doc: ["application/msword"],
+        docx: ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
+        eot: ["application/vnd.ms-fontobject"],
+        epub: ["application/epub+zip"],
+        gz: ["application/gzip"],
+        gif: ["image/gif"],
+        htm: ["text/html"],
+        html: ["text/html"],
+        ico: ["image/vnd.microsoft.icon"],
+        ics: ["text/calendar"],
+        jar: ["application/java-archive"],
+        jpeg: ["image/jpeg"],
+        jpg: ["image/jpeg"],
+        js: ["text/javascript"],
+        json: ["application/json"],
+        jsonld: ["application/ld+json"],
+        log: ["text/plain"],
+        mid: ["audio/x-midi"],
+        midi: ["audio/x-midi"],
+        mjs: ["text/javascript"],
+        mp3: ["audio/mpeg"],
+        mpeg: ["video/mpeg"],
+        mpkg: ["application/vnd.apple.installer+xml"],
+        odp: ["application/vnd.oasis.opendocument.presentation"],
+        ods: ["application/vnd.oasis.opendocument.spreadsheet"],
+        odt: ["application/vnd.oasis.opendocument.text"],
+        oga: ["audio/ogg"],
+        ogv: ["video/ogg"],
+        ogx: ["application/ogg"],
+        opus: ["audio/opus"],
+        otf: ["font/otf"],
+        png: ["image/png"],
+        pdf: ["application/pdf"],
+        php: ["application/php"],
+        ppt: ["application/vnd.ms-powerpoint"],
+        pptx: ["application/vnd.openxmlformats-officedocument.presentationml.presentation"],
+        rar: ["application/vnd.rar", "application/x-rar", "application/x-rar-compressed"],
+        rtf: ["application/rtf"],
+        sh: ["application/x-sh"],
+        svg: ["image/svg+xml"],
+        swf: ["application/x-shockwave-flash"],
+        tar: ["application/x-tar"],
+        tif: ["image/tiff"],
+        tiff: ["image/tiff"],
+        ts: ["video/mp2t"],
+        ttf: ["font/ttf"],
+        txt: ["text/plain"],
+        vsd: ["application/vnd.visio"],
+        wav: ["audio/wav"],
+        weba: ["audio/webm"],
+        webm: ["video/webm"],
+        webp: ["image/webp"],
+        woff: ["font/woff"],
+        woff2: ["font/woff2"],
+        xhtml: ["application/xhtml+xml"],
+        xls: ["application/vnd.ms-excel"],
+        xlsx: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
+        xml: ["application/xml", "text/xml"],
+        xul: ["application/vnd.mozilla.xul+xml"],
+        zip: ["application/zip", "application/x-zip-compressed", "multipart/x-zip"],
+        "3gp": ["video/3gpp", "audio/3gpp"],
+        "3g2": ["video/3gpp2", "audio/3gpp2"],
+        "7z": ["application/x-7z-compressed"],
+    };
+    return acceptedExtensions.reduce((acc, ext) => acc.concat(lookupTable[ext]), []);
+}
+export function snakeCaseToCamelCase(str) {
+    const snakeCaseRegexp = /^([a-z0-9]*)(_[a-z0-9]*)*$/g;
+    if (snakeCaseRegexp.test(str)) {
+        let camelCase = "";
+        let arr = str.split("_");
+        arr.forEach((word, idx) => {
+            camelCase += idx === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1);
+        });
+        return camelCase;
+    }
+    else {
+        return str;
+    }
+}
+export function csvToArray(csv) {
+    return csv ? csv.split(/, ?/) : [];
+}
+export function getNewIndexToFocus(currentIndex, direction, listLength) {
+    let newIndex = currentIndex;
+    if (direction === "ArrowDown") {
+        newIndex = (currentIndex + 1) % listLength;
+    }
+    if (direction === "ArrowUp") {
+        newIndex = currentIndex === 0 ? listLength - 1 : currentIndex - 1;
+    }
+    return newIndex;
+}
+export function isRelatedTarget(ev, id) {
+    // used for onBlur events to check the element that has been clicked
+    const ids = id.split(" ");
+    return ev.relatedTarget && ids.includes(ev.relatedTarget.id);
+}
+export function toBool(val) {
+    // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+    return val == "false" ? false : !!val;
+}
+export function measureText(originEl, placeholderText) {
+    const measurementEl = document.createElement("div");
+    const originStyles = getComputedStyle(originEl);
+    measurementEl.style.position = "absolute";
+    measurementEl.style.top = "-100vh";
+    measurementEl.style.fontFamily = originStyles.fontFamily;
+    measurementEl.style.fontWeight = originStyles.fontWeight;
+    measurementEl.style.fontSize = originStyles.fontSize;
+    measurementEl.textContent = placeholderText;
+    document.body.appendChild(measurementEl);
+    const boundingClientRect = measurementEl.getBoundingClientRect();
+    document.body.removeChild(measurementEl);
+    return boundingClientRect;
+}
+export function truncateText(textEl, text, availableSpace, endAmt) {
+    const cloneEl = document.createElement("div");
+    cloneEl.style.visibility = "hidden";
+    cloneEl.style.position = "absolute";
+    cloneEl.style.top = "-200vh";
+    cloneEl.style.left = "-200vh";
+    cloneEl.textContent = text;
+    textEl.appendChild(cloneEl);
+    const ellipses = "...";
+    const minimumLength = 2 + ellipses.length + endAmt;
+    let canFitText = availableSpace > cloneEl.clientWidth;
+    if (!canFitText && text.length > minimumLength) {
+        let frontChars = text.slice(0, text.length - endAmt - ellipses.length).trim();
+        let endChars = text.slice(-endAmt).trim();
+        let truncatedText = frontChars + ellipses + endChars;
+        cloneEl.textContent = truncatedText;
+        canFitText = availableSpace > cloneEl.clientWidth;
+        while (!canFitText && truncatedText.length > minimumLength) {
+            frontChars = frontChars.slice(0, -1).trim();
+            truncatedText = frontChars + ellipses + endChars;
+            cloneEl.textContent = truncatedText;
+            canFitText = availableSpace > cloneEl.clientWidth;
+        }
+    }
+    const truncatedText = cloneEl.textContent;
+    cloneEl.remove();
+    return truncatedText;
+}
+export function transposeMatrix(originalMatrix) {
+    let newMatrix = [];
+    for (let i = 0; i < originalMatrix[0].length; i++) {
+        let column = [];
+        for (let j = 0; j < originalMatrix.length; j++) {
+            column.push(originalMatrix[j][i]);
+        }
+        newMatrix.push(column);
+    }
+    return newMatrix;
+}
+// wrap around includes 0, so it won't work for something like dates (wrapping around months)
+export function wrapAround(currentIdx, step, endIdx) {
+    currentIdx += step;
+    if (currentIdx > endIdx) {
+        currentIdx = (currentIdx - 1) % endIdx;
+    }
+    while (currentIdx < 0) {
+        currentIdx = endIdx - Math.abs(currentIdx) + 1;
+    }
+    return currentIdx;
+}
+export function skipByInterval(list, skipInterval) {
+    let skippedList = [];
+    for (let i = 0; i < list.length; i += 1 + skipInterval) {
+        skippedList.push(list[i]);
+    }
+    return skippedList;
+}
+export function getSmallestSkipInterval(list, maxLength) {
+    let skipInterval = 0;
+    let skippedList = list;
+    while (skipByInterval(list, skipInterval).length > maxLength) {
+        skipInterval++;
+        skippedList = skipByInterval(list, skipInterval);
+    }
+    return { skipInterval: skipInterval, skippedList: skippedList };
+}
+export function calcPercentageInRange(value, rangeLowest, rangeHighest) {
+    const rangeDistance = rangeHighest - rangeLowest;
+    const adjustedValue = Math.abs(value - rangeLowest);
+    const percentage = (adjustedValue / rangeDistance) * 100;
+    return percentage;
+}
+export function triggerFormSubmit(formEl) {
+    // requestSubmit is not supported by Safari v<16, use a polyfill for this
+    if (formEl.requestSubmit) {
+        formEl.requestSubmit();
+    }
+    else {
+        const submitButton = document.createElement("button");
+        submitButton.style.display = "none";
+        formEl.appendChild(submitButton);
+        submitButton.click();
+        document.removeChild(submitButton);
+    }
+}
+export function handleDisabledAttribute(el, isDisabled) {
+    if (isDisabled == false && el.hasAttribute("disabled")) {
+        el.removeAttribute("disabled");
+    }
+}
+// get the prev/next element with an option to circle through the list
+export function findPrev(list, item, loop = false) {
+    if (!!list && !item)
+        return list[list.length - 1]; // if list was passed but no item, get the last item
+    if (!list.includes(item))
+        return; // if list is empty or doesn't include item
+    let current = list.indexOf(item);
+    let beforeFirst = loop ? list.length - 1 : 0; // before first item can be first (hard stop) or back to last
+    let prev = current > 0 ? current - 1 : beforeFirst;
+    return list[prev];
+}
+export function findNext(list, item, loop = false) {
+    if (!!list && !item)
+        return list[0]; // if list was passed but no item, get the first item
+    if (!list.includes(item))
+        return; // if list is empty or doesn't include item
+    let current = list.indexOf(item);
+    const last = list.length - 1;
+    let afterLast = loop ? 0 : last; // after last item can be last (hard stop) or back to first
+    let next = current !== last ? current + 1 : afterLast;
+    return list[next];
+}
+export function safeMultiplyFloat(factor1, factor2) {
+    // There can be floating point precision errors when multiplying floats.
+    // For example 0.2 * 3 will result in 0.6000000000000001 instead of the expected 0.6
+    const factor1DecimalCount = countDecimals(factor1);
+    const factor2DecimalCount = countDecimals(factor2);
+    const expectedDecimals = factor1DecimalCount + factor2DecimalCount;
+    return parseFloat((factor1 * factor2).toFixed(expectedDecimals));
+}
+function countDecimals(num) {
+    const asString = num.toString();
+    const decimalPointIndex = asString.indexOf(".");
+    if (decimalPointIndex == -1) {
+        return 0;
+    }
+    else {
+        return asString.split(".")[1].length;
+    }
+}
+export function getMonthLength(month, year) {
+    const months30 = [4, 6, 9, 11];
+    const leapYear = year % 4 === 0;
+    return month === 2 ? (leapYear ? 29 : 28) : months30.includes(month) ? 30 : 31;
+}
+export function dateToISO(date) {
+    return `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().padStart(2, "0")}-${date
+        .getDate()
+        .toString()
+        .padStart(2, "0")}`;
+}
+function splitISO(isoDate) {
+    const [year, month, day] = isoDate.split("-");
+    return {
+        year: { asInt: parseInt(year), asString: year },
+        month: { asInt: parseInt(month), asString: month },
+        day: { asInt: parseInt(day), asString: day },
+    };
+}
+export function makeISO(y, m, d) {
+    return `${y}-${m.toString().padStart(2, "0")}-${d.toString().padStart(2, "0")}`;
+}
+export const dateFind = {
+    year: {
+        asString: (date) => splitISO(date).year.asString,
+        asInt: (date) => splitISO(date).year.asInt,
+        increase: (date, n) => {
+            const _date = splitISO(date);
+            const y = _date.year.asInt;
+            const m = _date.month.asInt;
+            const d = _date.day.asInt;
+            return makeISO(y + n, m, d);
+        },
+        decrease: (date, n) => {
+            const _date = splitISO(date);
+            const y = _date.year.asInt;
+            const m = _date.month.asInt;
+            const d = _date.day.asInt;
+            return makeISO(y - n, m, d);
+        },
+    },
+    month: {
+        asString: (date) => splitISO(date).month.asString,
+        asInt: (date) => splitISO(date).month.asInt,
+        increase: (date, n) => {
+            const _date = splitISO(date);
+            const yearsToAdd = Math.floor(n / 12);
+            const monthsToAdd = n % 12;
+            let y = _date.year.asInt;
+            let m = _date.month.asInt;
+            const d = _date.day.asInt;
+            y = m + monthsToAdd > 12 ? y + 1 : y;
+            y = y + yearsToAdd;
+            m = m + monthsToAdd;
+            // modulo requires zero-indexing
+            m = ((m - 1) % 12) + 1;
+            return makeISO(y, m, d);
+        },
+        decrease: (date, n) => {
+            const _date = splitISO(date);
+            const yearsToRemove = Math.floor(n / 12);
+            const monthsToRemove = n % 12;
+            let y = _date.year.asInt;
+            let m = _date.month.asInt;
+            const d = _date.day.asInt;
+            y = m - monthsToRemove < 1 ? y - 1 : y;
+            y = y - yearsToRemove;
+            // ensure no negative value by shifting up
+            m = m + 12;
+            m = m - monthsToRemove;
+            // modulo needs zero-indexing
+            m = ((m - 1) % 12) + 1;
+            return makeISO(y, m, d);
+        },
+    },
+    day: {
+        asString: (date) => splitISO(date).day.asString,
+        asInt: (date) => splitISO(date).day.asInt,
+        increase: (date, n) => {
+            if (n > 7)
+                throw new Error("this.dateFind.day.increase(): max 7 days");
+            const _date = splitISO(date);
+            let y = _date.year.asInt;
+            let m = _date.month.asInt;
+            let d = _date.day.asInt;
+            const maxDays = getMonthLength(m, y);
+            const goesToNextMonth = d + n > maxDays;
+            const goesToNextYear = goesToNextMonth && m === 12;
+            m = goesToNextMonth ? (goesToNextYear ? 1 : m + 1) : m;
+            y = goesToNextYear ? y + 1 : y;
+            d = ((d - 1 + n) % maxDays) + 1;
+            return makeISO(y, m, d);
+        },
+        decrease: (date, n) => {
+            if (n > 7)
+                throw new Error("this.dateFind.day.decrease(): max 7 days");
+            const _date = splitISO(date);
+            let y = _date.year.asInt;
+            let m = _date.month.asInt;
+            let d = _date.day.asInt;
+            const prevMonth = m === 1 ? 12 : m - 1;
+            const maxDays = getMonthLength(prevMonth, y);
+            const goesToPreviousMonth = d - n < 1;
+            const goesToPreviousYear = goesToPreviousMonth && m === 1;
+            // ensure no negative value by shifting up
+            d = d + maxDays;
+            d = d - n;
+            // modulo needs zero-indexing
+            d = ((d - 1) % maxDays) + 1;
+            m = goesToPreviousMonth ? (goesToPreviousYear ? 12 : m - 1) : m;
+            y = goesToPreviousYear ? y - 1 : y;
+            return makeISO(y, m, d);
+        },
+    },
+};
+export const calendar_months = [
+    intl.formatMessage({
+        id: "date.january",
+        defaultMessage: "January",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.february",
+        defaultMessage: "February",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.march",
+        defaultMessage: "March",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.april",
+        defaultMessage: "April",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.may",
+        defaultMessage: "May",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.june",
+        defaultMessage: "June",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.july",
+        defaultMessage: "July",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.august",
+        defaultMessage: "August",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.september",
+        defaultMessage: "September",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.october",
+        defaultMessage: "October",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.november",
+        defaultMessage: "November",
+        description: "Month of the year",
+    }),
+    intl.formatMessage({
+        id: "date.december",
+        defaultMessage: "December",
+        description: "Month of the year",
+    }),
+];
+export const weekdays = [
+    intl.formatMessage({ id: "date.sunday", defaultMessage: "Sunday" }),
+    intl.formatMessage({ id: "date.monday", defaultMessage: "Monday" }),
+    intl.formatMessage({ id: "date.tuesday", defaultMessage: "Tuesday" }),
+    intl.formatMessage({ id: "date.wednesday", defaultMessage: "Wednesday" }),
+    intl.formatMessage({ id: "date.thursday", defaultMessage: "Thursday" }),
+    intl.formatMessage({ id: "date.friday", defaultMessage: "Friday" }),
+    intl.formatMessage({ id: "date.saturday", defaultMessage: "Saturday" }),
+];