wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/utils/attribute-sync.js

@@ -0,0 +1,114 @@
+/**
+ * Attributes to exclude from synchronization.
+ * These are typically handled by Stencil @Props or should not be forwarded.
+ */
+const EXCLUDED_ATTRIBUTES = [
+    "class",
+    "style",
+    "label",
+    "size",
+    "type",
+    "value",
+    "placeholder",
+    "disabled",
+    "readonly",
+    "is-readonly",
+    "error",
+    "required",
+    "is-required",
+    "informative-icon",
+    "formatter",
+    "allowed-styles",
+];
+/**
+ * Presence/absence boolean attributes to normalize
+ */
+const BOOLEAN_ATTRIBUTES = new Set(["autofocus", "multiple", "spellcheck"]);
+/**
+ * Sets up automatic synchronization of attributes from a host element to an internal native element.
+ * Syncs all attributes except those in the exclusion list.
+ * Useful for wrapper components that need to forward HTML attributes to shadow DOM elements.
+ *
+ * @param hostEl The host element to watch for attribute changes
+ * @param getInternalEl Function that returns the internal native element to sync to
+ * @returns Cleanup function to disconnect the observer
+ */
+export const setupAttributeSync = (hostEl, getInternalEl, additionalExcludedAttributes = []) => {
+    const excludedAttrs = [
+        ...EXCLUDED_ATTRIBUTES,
+        ...additionalExcludedAttributes
+    ];
+    // Intercept boolean property and convert to attributes
+    BOOLEAN_ATTRIBUTES.forEach(prop => {
+        const existing = Object.getOwnPropertyDescriptor(hostEl, prop);
+        if (!existing) {
+            Object.defineProperty(hostEl, prop, {
+                get() {
+                    return this.hasAttribute(prop);
+                },
+                set(val) {
+                    if (!!val)
+                        this.setAttribute(prop, "");
+                    else
+                        this.removeAttribute(prop);
+                },
+                configurable: true
+            });
+        }
+    });
+    const syncAttributes = () => {
+        const internalEl = getInternalEl();
+        if (!internalEl)
+            return;
+        // Sync all attributes except excluded ones
+        Array.from(hostEl.attributes).forEach(attr => {
+            const name = attr.name;
+            if (excludedAttrs.includes(name))
+                return;
+            const val = attr.value;
+            // Handle boolean attributes by presence/absence
+            if (BOOLEAN_ATTRIBUTES.has(name)) {
+                const present = hostEl.hasAttribute(name);
+                const isTrue = present && (val === "" || val === "true");
+                if (name === "spellcheck") {
+                    // spellcheck: set to "true" or "false" explicitly
+                    const newVal = isTrue ? "true" : "false";
+                    if (internalEl.getAttribute(name) !== newVal) {
+                        internalEl.setAttribute(name, newVal);
+                    }
+                }
+                else {
+                    const attrValue = "";
+                    if (isTrue && !internalEl.hasAttribute(name)) {
+                        internalEl.setAttribute(name, attrValue);
+                    }
+                    else if (!isTrue && internalEl.hasAttribute(name)) {
+                        internalEl.removeAttribute(name);
+                    }
+                }
+                return;
+            }
+            // Sync normal attributes
+            if (internalEl.getAttribute(name) !== val) {
+                internalEl.setAttribute(name, val);
+            }
+        });
+        // Remove attributes from internal element that are no longer on host
+        Array.from(internalEl.attributes).forEach(attr => {
+            if (!excludedAttrs.includes(attr.name) &&
+                !hostEl.hasAttribute(attr.name)) {
+                internalEl.removeAttribute(attr.name);
+            }
+        });
+    };
+    if (typeof MutationObserver === "undefined") {
+        return () => { };
+    }
+    // Watch for attribute changes on host and sync to internal element
+    const observer = new MutationObserver(() => {
+        syncAttributes();
+    });
+    observer.observe(hostEl, { attributes: true });
+    syncAttributes();
+    return () => observer.disconnect();
+};

package/dist/collection/utils/clone-attributes.js

@@ -6,4 +6,11 @@ export const cloneAttributes = (el, ...excludedKeys) => {
         return acc;
     }, {});
 };
-//# sourceMappingURL=clone-attributes.js.map
+export const cloneSpecificAttributes = (el, ...atributesToInclude) => {
+    return Object.values(el.attributes)
+        .filter(({ name: keyName }) => atributesToInclude === null || atributesToInclude === void 0 ? void 0 : atributesToInclude.some(exKey => exKey === keyName))
+        .reduce((acc, attr) => {
+        acc = Object.assign(Object.assign({}, acc), { [attr.name]: attr.value });
+        return acc;
+    }, {});
+};

package/dist/collection/utils/combine-classes.js

@@ -1,2 +1,7 @@
+/**
+ * Join array of classes into a single string
+ *
+ * @params classes string[]
+ * @returns string
+ */
 export const combineClasses = (...classes) => classes.join(" ").trim();
-//# sourceMappingURL=combine-classes.js.map

package/dist/collection/utils/device-detection.js

@@ -0,0 +1,36 @@
+/**
+ * Detects whether the current device should be treated as a mobile device.
+ *
+ * Detection strategy (4 signals are evaluated and combined)
+ * returns true if at least 2 of the 4 signals indicate a mobile device
+ *
+ * 1. **navigator.maxTouchPoints > 0**
+ * 2. **window.matchMedia('(pointer: coarse)')**
+ * 3. **Screen width ≤ 768 px**
+ * 4. **navigator.userAgent mobile keyword match**
+ *
+ * @returns {boolean} True if at least 2 of the 4 signals indicate a mobile device, false otherwise.
+ * @example
+ * // Example usage:
+ * if (isMobileDevice()) {
+ *   console.log('Running on a mobile device');
+ * } else {
+ *   console.log('Running on a desktop device');
+ * }
+ */
+export const isMobileDevice = () => {
+    // Signal 1: hardware touch points reported by the browser
+    const hasTouchPoints = typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0;
+    // Signal 2: primary pointer is coarse (i.e. finger-based)
+    const hasCoarsePointer = typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(pointer: coarse)').matches;
+    // Signal 3: screen width falls within the conventional mobile breakpoint
+    const isMobileWidth = typeof window !== 'undefined' && window.screen.width <= 768;
+    // Signal 4: UA string contains a well-known mobile platform token
+    const hasMobileUserAgent = typeof navigator !== 'undefined' &&
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    // Require at least 2 out of 4 signals to reduce false positives
+    const positiveSignals = [hasTouchPoints, hasCoarsePointer, isMobileWidth, hasMobileUserAgent].filter(Boolean).length;
+    return positiveSignals >= 2;
+};

package/dist/collection/utils/floating-engine-utils.js

@@ -1,109 +1,91 @@
-import { computePosition, flip, offset, shift, size, arrow, autoUpdate } from "./floating-engine";
-const handleArrowRotation = (side) => {
-    switch (side) {
-        case "top":
-            return "rotate(0deg)";
-        case "right":
-            return "rotate(90deg)";
-        case "bottom":
-            return "rotate(180deg)";
-        case "left":
-            return "rotate(270deg)";
-    }
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { autoUpdate, computePosition, shift, autoPlacement, offset, arrow, size, hide } from "@floating-ui/dom";
+const floatingTrigger = (hostEl, selector) => {
+    const floatingBoxTrigger = hostEl.shadowRoot.querySelector(selector);
+    return floatingBoxTrigger;
 };
-const calcPosition = (xAxis, yAxis, side, hasOverflow) => {
-    const x = setNumberInsteadOfNaN(xAxis);
-    const y = setNumberInsteadOfNaN(yAxis);
-    const overflow = hasOverflow ? 7 : 0;
-    switch (side) {
-        case "top":
-            return { top: `${y - 4 + overflow}px`, left: `${x}px` };
-        case "right":
-            return { top: `${y}px`, left: `${x + 4 - overflow}px` };
-        case "bottom":
-            return { top: `${y + 4 - overflow}px`, left: `${x}px` };
-        case "left":
-            return { top: `${y}px`, left: `${x - 4 + overflow}px` };
-    }
+const floatingBox = (hostEl, selector) => {
+    const floatingBoxContainer = hostEl.shadowRoot.querySelector(selector);
+    return floatingBoxContainer;
 };
-const calcArrowMargin = (side) => {
-    const marginHorizontal = "3px";
-    const marginVertical = "5px";
-    switch (side) {
-        case "top":
-            return `0px 0px ${marginVertical} 0px`;
-        case "right":
-            return `0px 0px 0px ${marginHorizontal}`;
-        case "bottom":
-            return `${marginVertical} 0px 0px 0px`;
-        case "left":
-            return `0px ${marginHorizontal} 0px 0px`;
-    }
+const floatingArrow = (hostEl, selector) => {
+    const arrow = hostEl.shadowRoot.querySelector(selector);
+    return arrow;
 };
-const getCurrentPlacement = (data, position) => {
-    if (data && data.offset && data.offset.placement) {
-        return data.offset.placement === position ? position : data.offset.placement;
-    }
-    else {
-        return position;
-    }
+const ARROW_ROTATION = {
+    top: "rotate(0deg)",
+    right: "rotate(90deg)",
+    bottom: "rotate(180deg)",
+    left: "rotate(270deg)"
 };
-const overflowDetected = (data) => {
-    if (data && data.flip && data.flip.overflows && data.flip.overflows.length > 0) {
-        const overflow = data.flip.overflows[0];
-        if (overflow && overflow.placement) {
-            return true;
-        }
-    }
-    return false;
+const ARROW_MARGIN = {
+    top: "0 0 5px 0",
+    right: "0 0 0 3px",
+    bottom: "5px 0 0 0",
+    left: "0 3px 0 0"
+};
+const STATIC_SIDE = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+};
+const AUTO_UPDATE_OPTIONS = {
+    elementResize: true,
+    ancestorScroll: true,
+    ancestorResize: true,
+    layoutShift: true
 };
-const updateFloatingBoxPosition = async (referenceElement, floatingBoxElement, floatingArrow, position, autoPosition) => {
+const updateFloatingBoxPosition = async (referenceElement, floatingBoxElement, floatingArrow, position, autoPosition, allowedPlacements = null, preserveEndAlignment = false) => {
     if (!floatingBoxElement || !referenceElement) {
         console.warn("[updateFloatingBoxPosition] - Reference element (trigger) and floating element is required");
-        return;
+        return () => { };
     }
-    // Autoupdate options
-    const options = {
-        elementResize: true,
-        ancestorScroll: true,
-        ancestorResize: true,
-        layoutShift: true
-    };
     const updatePositionCallback = () => {
         try {
             computePosition(referenceElement, floatingBoxElement, {
                 placement: position,
                 middleware: [
-                    shift({ boundary: [] }),
-                    offset(),
-                    autoPosition ? flip() : null,
+                    offset(4),
+                    autoPosition ? shift({ padding: 4 }) : null,
+                    autoPosition ? autoPlacement(allowedPlacements ? { allowedPlacements: allowedPlacements } : {}) : null,
+                    autoPosition ? hide() : null,
                     size({
                         apply({ availableWidth, availableHeight, elements }) {
                             Object.assign(elements.floating.style, {
-                                maxWidth: `${setNumberInsteadOfNaN(availableWidth)}px`,
-                                maxHeight: `${setNumberInsteadOfNaN(availableHeight)}px`,
+                                maxWidth: `${Math.max(0, availableWidth || 0)}px`,
+                                maxHeight: `${Math.max(0, availableHeight || 0)}px`
                             });
-                        },
+                        }
                     }),
-                    floatingArrow ? arrow({ element: floatingArrow, padding: 5 }) : null,
-                ],
-            }).then(({ x, y, middlewareData }) => {
-                Object.assign(floatingBoxElement.style, Object.assign({ position: "absolute" }, calcPosition(x, y, position, overflowDetected(middlewareData))));
+                    floatingArrow ? arrow({ element: floatingArrow, padding: 5 }) : null
+                ].filter(Boolean)
+            }).then(({ x, y, placement, middlewareData }) => {
+                if (middlewareData.hide) {
+                    const isHidden = middlewareData.hide.referenceHidden;
+                    Object.assign(floatingBoxElement.style, {
+                        visibility: isHidden ? "hidden" : "visible",
+                        pointerEvents: isHidden ? "none" : "auto"
+                    });
+                    if (isHidden)
+                        return;
+                }
+                Object.assign(floatingBoxElement.style, {
+                    position: "absolute",
+                    top: `${y || 0}px`,
+                    left: preserveEndAlignment && placement.endsWith("-end") ? "" : `${x || 0}px`,
+                    right: preserveEndAlignment && placement.endsWith("-end") ? "0px" : ""
+                });
                 if (middlewareData.arrow && floatingArrow !== null) {
                     const { x, y } = middlewareData.arrow;
-                    const side = getCurrentPlacement(middlewareData, position);
-                    const staticSide = {
-                        top: "bottom",
-                        right: "left",
-                        bottom: "top",
-                        left: "right"
-                    }[side];
+                    const side = placement.split("-")[0];
                     Object.assign(floatingArrow.style, {
-                        left: x != null ? `${setNumberInsteadOfNaN(x)}px` : "",
-                        top: y != null ? `${setNumberInsteadOfNaN(y)}px` : "",
-                        margin: calcArrowMargin(side),
-                        [staticSide]: `${-setNumberInsteadOfNaN(floatingArrow.offsetWidth)}px`,
-                        transform: handleArrowRotation(side)
+                        top: y != null ? `${Math.max(0, y || 0)}px` : "",
+                        left: x != null ? `${Math.max(0, x || 0)}px` : "",
+                        margin: ARROW_MARGIN[side],
+                        [STATIC_SIDE[side]]: `-${floatingArrow.offsetWidth || 0}px`,
+                        transform: ARROW_ROTATION[side]
                     });
                 }
             });
@@ -112,12 +94,27 @@ const updateFloatingBoxPosition = async (referenceElement, floatingBoxElement, f
             console.warn("[updatePositionCallback] ", error);
         }
     };
-    const cleanup = autoUpdate(referenceElement, floatingBoxElement, updatePositionCallback, options);
-    if (!autoPosition) {
-        cleanup();
+    if (autoPosition) {
+        return autoUpdate(referenceElement, floatingBoxElement, updatePositionCallback, AUTO_UPDATE_OPTIONS);
+    }
+    else {
+        updatePositionCallback();
+        return () => { };
+    }
+};
+/**
+ * Toggles the display style of an HTML element.
+ *
+ * @param {HTMLElement} contentBox The HTML element to toggle the display for.
+ * @param {boolean} toggle A boolean value to control the display.
+ *  - True: Sets the display to "block".
+ *  - False: Sets the display to "none".
+ * @returns {void}
+ */
+const toggleContainerDisplay = (contentBox, toggle) => {
+    if (!contentBox) {
+        return;
     }
-    return cleanup;
+    contentBox.style.display = toggle ? "block" : "none";
 };
-const setNumberInsteadOfNaN = (input) => input > 0 ? input : 0;
-export { updateFloatingBoxPosition };
-//# sourceMappingURL=floating-engine-utils.js.map
+export { updateFloatingBoxPosition, toggleContainerDisplay, floatingBox, floatingArrow, floatingTrigger };

package/dist/collection/utils/floating-engine.js

@@ -1,3 +1,2 @@
-import { autoUpdate, computePosition, shift, flip, offset, arrow, size, detectOverflow } from "@floating-ui/dom";
-export { autoUpdate, computePosition, shift, flip, offset, arrow, size, detectOverflow };
-//# sourceMappingURL=floating-engine.js.map
+import { autoUpdate, computePosition, shift, offset, arrow, size, detectOverflow, autoPlacement, hide } from "@floating-ui/dom";
+export { autoUpdate, computePosition, shift, offset, arrow, size, detectOverflow, autoPlacement, hide };

package/dist/collection/utils/form.js

@@ -1,8 +1,3 @@
-/**
- * Emulates the native submit form
- *
- * @returns void
- */
 export const shadowSubmitForm = (host) => {
     const form = host.closest("form");
     if (form) {
@@ -14,6 +9,33 @@ export const shadowSubmitForm = (host) => {
         fakeSubmit.remove();
     }
 };
+export const setFocusElement = (focusEl) => {
+    focusEl && focusEl.focus();
+};
+/**
+ * Creates a hidden input element as a fake form element for a given host element.
+ *
+ * This function is useful when you need to submit data associated with a host element
+ * but the element itself cannot be included in the form submission. It checks if the
+ * host element has a `name` attribute and is a child of a form element. If both conditions
+ * are met, it creates a hidden input with the same name as the host element and returns it.
+ * Otherwise, it returns null.
+ *
+ * @param {HTMLElement} hostEl Host element.
+ * @returns {HTMLInputElement|null} input type hidden
+ */
+export const fakeFormElement = (hostEl) => {
+    const nameEl = hostEl.getAttribute("name");
+    const form = hostEl.closest("form");
+    const isChildOfFormElement = form && form.contains(hostEl);
+    if (nameEl && isChildOfFormElement) {
+        const input = document.createElement("input");
+        input.name = hostEl.getAttribute("name");
+        input.type = "hidden";
+        return input;
+    }
+    return null;
+};
 /**
  * Emits input event to create native reactive form support in Angular
  *
@@ -28,4 +50,3 @@ export const emitInputEvent = (host, value) => {
         host.dispatchEvent(event);
     }
 };
-//# sourceMappingURL=form.js.map

package/dist/collection/utils/get-deep-active-element.js

@@ -0,0 +1,7 @@
+export const getDeepActiveElement = () => {
+    let activeElement = document.activeElement;
+    while (activeElement !== null && !!(activeElement === null || activeElement === void 0 ? void 0 : activeElement.shadowRoot)) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+};

package/dist/collection/utils/get-random-id.js

@@ -0,0 +1,3 @@
+export function getRandomId(baseId) {
+    return baseId + Math.floor(Math.random() * 9999) + 1;
+}

package/dist/collection/utils/icon-attr.utils.js

@@ -80,4 +80,3 @@ export const getActionIconButtonSize = (componentSize) => {
             return 'medium';
     }
 };
-//# sourceMappingURL=icon-attr.utils.js.map

package/dist/collection/utils/icon-generation.utils.js

@@ -31,4 +31,3 @@ export const GenerateVdsSvg = (svgContent, removeSize = true, removeColors = tru
     }
     return content;
 };
-//# sourceMappingURL=icon-generation.utils.js.map

package/dist/collection/utils/icon-utils.js

@@ -141,4 +141,3 @@ export const TOGGLE = ['bell', 'star', 'favorite', 'lock-closed', 'show', 'hide'
 export const DATA = ['analysis', 'analytics', 'database', 'dashboard'];
 export const INVENTORY = ['container', 'asset', 'empty-returns'];
 export const BRAND = ['wabtec-corporation-logo', 'white-wabtec-corporation-logo'];
-//# sourceMappingURL=icon-utils.js.map

package/dist/collection/utils/is-key-event.js

@@ -0,0 +1,3 @@
+export const isKeyEvent = (event, key) => {
+    return (event.code || event.key) === key;
+};

package/dist/collection/utils/is-of-type.js

@@ -0,0 +1 @@
+export const isOfType = (varToBeChecked, propertyToCheckFor) => varToBeChecked[propertyToCheckFor] !== undefined;

package/dist/collection/utils/keyboard-navigation.js

@@ -0,0 +1,143 @@
+/**
+ * Singleton keyboard navigation manager.
+ *
+ * Use the static methods directly — no need to hold an instance reference in components.
+ * Only one session is active at a time — calling subscribe() while a session is already
+ * active replaces it silently (without invoking the previous onClose).
+ *
+ * Supported keys:
+ * - ArrowDown / ArrowRight : move focus forward  (circular)
+ * - ArrowUp  / ArrowLeft : move focus backward (circular)
+ * - Escape : remove listener, call onClose, focus focusOutElement
+ *
+ * @example
+ * KeyboardNavigation.subscribe(items, triggerEl, () => close());
+ * KeyboardNavigation.unsubscribe();
+ */
+export class KeyboardNavigation {
+    constructor() {
+        this.focusedItems = [];
+        this.focusOutElement = null;
+        this.onClose = null;
+        this.currentIndex = -1;
+        this.active = false;
+        this.boundHandler = (e) => this.handleKeyDown(e);
+    }
+    static getInstance() {
+        if (!KeyboardNavigation.instance) {
+            KeyboardNavigation.instance = new KeyboardNavigation();
+        }
+        return KeyboardNavigation.instance;
+    }
+    /**
+     * Activates keyboard navigation for the given items.
+     * Focuses the first item immediately.
+     * Replaces any previously active session without invoking its onClose.
+     *
+     * @param focusedItems - Non-empty array of focusable elements to navigate.
+     * @param focusOutElement - Element to return focus to on Escape.
+     * @param onClose - Optional callback invoked before focus returns to focusOutElement.
+     * @param focusElement - Optional element to focus initially instead of the first item.
+     */
+    static subscribe(focusedItems, focusOutElement, onClose, focusElement = null) {
+        const inst = KeyboardNavigation.getInstance();
+        if (!Array.isArray(focusedItems) || focusedItems.length === 0 || !focusedItems.every(item => item instanceof HTMLElement)) {
+            throw new Error('KeyboardNavigation: focusedItems must be a non-empty array of HTMLElements.');
+        }
+        if (!(focusOutElement instanceof HTMLElement)) {
+            throw new Error('KeyboardNavigation: focusOutElement must be a valid HTMLElement.');
+        }
+        inst.destroy();
+        inst.focusedItems = focusedItems;
+        inst.focusOutElement = focusOutElement;
+        inst.onClose = onClose !== null && onClose !== void 0 ? onClose : null;
+        inst.currentIndex = 0;
+        inst.active = true;
+        document.addEventListener('keydown', inst.boundHandler);
+        if (focusElement && focusElement instanceof HTMLElement) {
+            focusElement.focus();
+            inst.currentIndex = -1; // Since we're focusing a specific element, we don't want to override currentIndex
+        }
+        else {
+            focusedItems[0].focus();
+        }
+    }
+    /**
+     * Updates the currently tracked focusable elements without restarting the active session.
+     * Keeps the index aligned with the current active element when possible.
+     */
+    static updateFocusedItems(focusedItems) {
+        const inst = KeyboardNavigation.getInstance();
+        if (!inst.active) {
+            return;
+        }
+        if (!Array.isArray(focusedItems) || focusedItems.length === 0 || !focusedItems.every(item => item instanceof HTMLElement)) {
+            throw new Error('KeyboardNavigation: focusedItems must be a non-empty array of HTMLElements.');
+        }
+        inst.focusedItems = focusedItems;
+        inst.currentIndex = 0;
+        inst.active = true;
+    }
+    /**
+     * Tears down the active session, invokes onClose, and returns focus to focusOutElement.
+     */
+    static unsubscribe() {
+        KeyboardNavigation.getInstance().focusOutClose();
+    }
+    /**
+     * Removes the keyboard event listener, invokes onClose, and then returns focus to focusOutElement.
+     */
+    focusOutClose() {
+        const focusOutElement = this.focusOutElement;
+        const onClose = this.onClose;
+        this.destroy();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        focusOutElement === null || focusOutElement === void 0 ? void 0 : focusOutElement.focus();
+    }
+    /**
+     * Cleans up event listeners and internal state.
+     */
+    destroy() {
+        if (!this.active)
+            return;
+        document.removeEventListener('keydown', this.boundHandler);
+        this.focusedItems = [];
+        this.focusOutElement = null;
+        this.onClose = null;
+        this.currentIndex = -1;
+        this.active = false;
+    }
+    /**
+     * Handles keydown events for navigation and escape.
+     * @param event - The keyboard event to handle.
+     */
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.moveFocus(1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.moveFocus(-1);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.focusOutClose();
+                break;
+        }
+    }
+    /**
+     * Moves focus in the specified direction (1 for forward, -1 for backward).
+     * Wraps around the list of focusedItems.
+     * @param direction - The direction to move focus (1 or -1).
+     */
+    moveFocus(direction) {
+        const index = this.currentIndex === -1 && direction === -1 ? this.focusedItems.length - 1 : this.currentIndex;
+        this.currentIndex = (index + direction + this.focusedItems.length) % this.focusedItems.length;
+        this.focusedItems[this.currentIndex].focus();
+    }
+}
+KeyboardNavigation.instance = null;

package/dist/collection/utils/node-utils.js

@@ -14,4 +14,13 @@ export const setNodeObserver = (methodToExecuted, host, component) => {
 export const queryElementFromShadowRoot = (hostEl, selector) => {
     return hostEl.shadowRoot.querySelector(selector);
 };
-//# sourceMappingURL=node-utils.js.map
+export const isDescendant = (parent, child) => {
+    let node = child.parentNode;
+    while (node) {
+        if (node === parent) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};

package/dist/collection/utils/number-utils.js

@@ -5,4 +5,3 @@ export const countDecimalPlaces = (val) => {
     const decimalPart = val.toString().split(".")[1];
     return decimalPart ? decimalPart.length : 0;
 };
-//# sourceMappingURL=number-utils.js.map

package/dist/collection/utils/parentHasClass.js

@@ -0,0 +1,6 @@
+export const hasSomeParentTheClass = (element, classname) => {
+    var _a;
+    if (((_a = element === null || element === void 0 ? void 0 : element.className) === null || _a === void 0 ? void 0 : _a.split(" ").indexOf(classname)) >= 0)
+        return true;
+    return ((element === null || element === void 0 ? void 0 : element.parentNode) && hasSomeParentTheClass(element.parentNode, classname));
+};

package/dist/collection/utils/rems-to-px.js

@@ -0,0 +1,4 @@
+export const convertRemToPixels = rem => {
+    const parsedRem = rem.replace("rem", "");
+    return (parsedRem * parseFloat(getComputedStyle(document.documentElement).fontSize));
+};