@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.30.0

package/es/utilities/carousel/carousel.js

@@ -0,0 +1,341 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { registerSwipeEvents } from './swipeEvents.js';
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Initializes a carousel with the given configuration.
+ * @param carouselContainer - The HTMLElement representing the carousel container.
+ * @param config - Optional configuration object.
+ * @returns An object containing methods to control the carousel.
+ */
+const initCarousel = (carouselContainer, config) => {
+    const prefix = 'carousel';
+    let viewIndexStack = [0];
+    let previousViewIndexStack = [0];
+    const refs = {};
+    const minHeight = 10; // 10 rem
+    const { onViewChangeStart, onViewChangeEnd, excludeSwipeSupport } = config || {};
+    /**
+     * Registers an HTMLElement at a specific index in the refs array.
+     *
+     * @param {number} index - The index at which to register the HTMLElement.
+     * @param {HTMLElement} ref - The HTMLElement to register.
+     *
+     * @example
+     * registerRef(0, document.getElementById('myElement'));
+     */
+    const registerRef = (index, ref) => {
+        refs[index] = ref;
+    };
+    /**
+     * Wraps all child elements of a given container into a new div with the specified class.
+     * If an element with the specified class already exists as a child of the container, the function does nothing.
+     *
+     * @param {HTMLElement} container - The container element to wrap child elements of.
+     * @param {string} wrapperClass - The class name to apply to the new wrapper div.
+     * @returns {void}
+     */
+    const wrapAllItems = (container, wrapperClass) => {
+        if (container.querySelector(`.${wrapperClass}`)) {
+            return;
+        }
+        const wrapper = document.createElement('div');
+        wrapper.classList.add(`${wrapperClass}`);
+        while (container.firstChild) {
+            wrapper.appendChild(container.firstChild);
+        }
+        container.appendChild(wrapper);
+    };
+    const getHistory = () => {
+        return viewIndexStack.map((id) => ({
+            id,
+            elem: refs[id],
+        }));
+    };
+    /**
+     * Retrieves the current carousel response based on the view index stack and reference objects.
+     * @returns {CarouselResponse} - An object containing carousel response details.
+     */
+    const getCallbackResponse = () => {
+        const totalRefs = Object.keys(refs).length;
+        const lastElementRef = refs[totalRefs - 1];
+        const historicalData = getHistory();
+        return {
+            currentIndex: viewIndexStack[0],
+            lastIndex: parseInt((lastElementRef === null || lastElementRef === void 0 ? void 0 : lastElementRef.dataset.index) || viewIndexStack[0].toString(), 10),
+            totalViews: totalRefs,
+            historyStack: historicalData,
+        };
+    };
+    /**
+     * Handles the start of a transition in the application.
+     * This function is responsible for capturing the current state of the view index stack
+     * and invoking a callback function if it exists.
+     *
+     * @function handleTransitionStart
+     * @returns {void}
+     */
+    const handleTransitionStart = () => {
+        previousViewIndexStack = [...viewIndexStack];
+        const callbackData = getCallbackResponse();
+        onViewChangeStart === null || onViewChangeStart === void 0 ? void 0 : onViewChangeStart(callbackData);
+    };
+    /**
+     * Handles the 'transitionend' event for a given element.
+     * This function checks if the element has a 'data-index' attribute and if its value matches the current view index.
+     * If both conditions are met, it calls the 'onViewChangeEnd' callback with the response from 'getCallbackResponse'.
+     *
+     * @param {HTMLElement | null} el - The element to handle the 'transitionend' event for.
+     * @returns {void}
+     */
+    const handleTransitionEnd = (el) => {
+        if (!el) {
+            return;
+        }
+        const tmpElementIndex = el.dataset.index;
+        if (tmpElementIndex &&
+            viewIndexStack[0] === parseInt(tmpElementIndex, 10)) {
+            const callbackData = getCallbackResponse();
+            onViewChangeEnd === null || onViewChangeEnd === void 0 ? void 0 : onViewChangeEnd(callbackData);
+        }
+    };
+    /**
+     * A utility function to sanitize an index value.
+     * This function ensures the index stays within the bounds of the refs array.
+     *
+     * @param {number} idx - The index to be sanitized.
+     * @returns {number} - The sanitized index.
+     */
+    const sanitizeIndex = (idx) => {
+        const floorVal = 0;
+        const ceilVal = Object.keys(refs).length - 1;
+        return Math.max(floorVal, Math.min(idx, ceilVal));
+    };
+    /**
+     * Handles the 'transitionend' event for a given element.
+     * This function checks if the element has a 'data-index' attribute and if its value matches the current view index.
+     * If both conditions are met, it calls the 'onViewChangeEnd' callback with the response from 'getCallbackResponse'.
+     * @returns {void}
+     */
+    const transitionToViewIndex = (idx) => {
+        const sanitizedIndex = sanitizeIndex(idx);
+        if (viewIndexStack[0] !== sanitizedIndex) {
+            handleTransitionStart();
+            viewIndexStack = [sanitizedIndex, ...viewIndexStack];
+            performAnimation(false);
+        }
+    };
+    const transitionComplete = (ref) => {
+        handleTransitionEnd(ref);
+    };
+    /**
+     * Attaches class names to an HTMLElement based on given conditions.
+     *
+     * @param {HTMLElement} viewItem - The HTML element to which class names will be added.
+     * @param {boolean} isInViewStack - Indicates if the view item is in the view stack.
+     * @param {boolean} isActive - Indicates if the view item is active.
+     * @param {boolean} isBeingRecycledOut - Indicates if the view item is being recycled out.
+     * @param {boolean} isBeingRecycledIn - Indicates if the view item is being recycled in.
+     * @returns {void}
+     */
+    const attachClassNames = (viewItem, isInViewStack, isActive, isBeingRecycledOut, isBeingRecycledIn) => {
+        viewItem.classList.add(`${prefix}__view`);
+        viewItem.classList.toggle(`${prefix}__view-in-stack`, isInViewStack && !isActive);
+        viewItem.classList.toggle(`${prefix}__view-active`, isInViewStack && isActive);
+        if (isBeingRecycledIn && !isBeingRecycledOut) {
+            viewItem.classList.add(`${prefix}__view-recycle-in`);
+        }
+        if (!isBeingRecycledIn && isBeingRecycledOut) {
+            viewItem.classList.add(`${prefix}__view-recycle-out`);
+        }
+    };
+    const removeReCycleClasses = (viewItem) => {
+        viewItem.classList.remove(`${prefix}__view-recycle-in`, `${prefix}__view-recycle-out`);
+    };
+    const remToPx = (rem) => {
+        return (rem * parseFloat(getComputedStyle(document.documentElement).fontSize));
+    };
+    /**
+     * Updates the height of the items wrapper in a carousel based on the smallest item height and a threshold height.
+     * This function ensures that the items wrapper does not have a height smaller than the threshold, adjusting the item height if necessary.
+     *
+     * @param {number} itemHeightSmallest - The smallest height of an item in pixels.
+     */
+    const updateHeightForWrapper = (itemHeightSmallest) => {
+        const thresholdHeight = remToPx(minHeight);
+        const containerHeight = carouselContainer.clientHeight;
+        if (containerHeight < thresholdHeight) {
+            if (itemHeightSmallest < thresholdHeight) {
+                itemHeightSmallest = thresholdHeight;
+            }
+            const itemsWrapper = carouselContainer.querySelector(`.${prefix}__itemsWrapper`);
+            if (itemsWrapper) {
+                itemsWrapper.style.blockSize = `${itemHeightSmallest}px`;
+            }
+        }
+    };
+    /**
+     * Performs animation on view items based on their state in the view index stack.
+     * @param {boolean} isInitial - A flag indicating if this is the initial animation.
+     */
+    const performAnimation = (isInitial) => {
+        let itemHeightSmallest = 0;
+        Array.from(viewItems).forEach((viewItem, index) => {
+            const stackIndex = viewIndexStack.findIndex((idx) => idx === index);
+            const stackIndexInstanceCount = previousViewIndexStack.filter((viIdx) => viIdx === index).length;
+            const isBeingRecycledOut = previousViewIndexStack.length > viewIndexStack.length &&
+                previousViewIndexStack[0] === index &&
+                stackIndexInstanceCount > 0;
+            const isBeingRecycledIn = previousViewIndexStack.length < viewIndexStack.length &&
+                viewIndexStack[0] === index &&
+                stackIndexInstanceCount > 0;
+            const isInViewStack = stackIndex > -1;
+            const isActive = index === viewIndexStack[0];
+            attachClassNames(viewItem, isInViewStack, isActive, isBeingRecycledOut, isBeingRecycledIn);
+            if (isInitial) {
+                registerRef(index, viewItem);
+                setTimeout(() => {
+                    if (!itemHeightSmallest ||
+                        (viewItem.offsetHeight < itemHeightSmallest &&
+                            itemHeightSmallest > remToPx(minHeight))) {
+                        itemHeightSmallest = viewItem.offsetHeight;
+                    }
+                    viewItem.style.position = 'absolute';
+                    updateHeightForWrapper(itemHeightSmallest);
+                });
+                const listener = (e) => {
+                    removeReCycleClasses(viewItem);
+                    if (e.target === refs[viewIndexStack[0]]) {
+                        //transitionend will trigger twice for pervious card and current card
+                        transitionComplete(viewItem);
+                    }
+                };
+                // store reference on the element for later removal
+                viewItem._carouselListener = listener;
+                viewItem.addEventListener('animationend', listener);
+                viewItem.addEventListener('transitionend', listener);
+                viewItem.setAttribute('data-index', index.toString());
+            }
+        });
+        if (isInitial) {
+            handleTransitionEnd(Array.from(viewItems)[0]);
+        }
+    };
+    /**
+     * A utility function to navigate to the next view in the stack.
+     * This function increments the current view index and transitions to the new index.
+     *
+     * @returns {void} - This function does not return any value.
+     */
+    const navigateNext = () => {
+        const targetViewIndex = viewIndexStack[0] + 1;
+        transitionToViewIndex(targetViewIndex);
+    };
+    /**
+     * Navigates to the previous view in the view stack.
+     * @function navigatePrev
+     * @description This function checks if there is a previous view in the stack. If so, it triggers a transition start, removes the current view from the stack, and performs an animation to transition to the previous view.
+     * @returns {void} - This function does not return a value.
+     */
+    const navigatePrev = () => {
+        if (viewIndexStack.length - 1 >= 1) {
+            handleTransitionStart();
+            viewIndexStack = viewIndexStack.slice(1);
+            performAnimation(false);
+        }
+    };
+    /**
+     * A function that transitions the view to a specified index.
+     *
+     * @param {number} index - The index to transition to.
+     * @returns {void} - This function does not return a value.
+     */
+    const goToIndex = (index) => {
+        transitionToViewIndex(index);
+    };
+    /**
+     * Retrieves the currently active item and its index from the view index stack and references.
+     * @returns An object containing the index and the corresponding item reference.
+     */
+    const getActiveItem = () => {
+        return {
+            index: viewIndexStack[0],
+            item: refs[viewIndexStack[0]],
+        };
+    };
+    /**
+     * Resets the view index stack and performs an animation.
+     *
+     * @returns {void}
+     */
+    const reset = () => {
+        viewIndexStack = [0];
+        performAnimation(false);
+    };
+    /**
+     * Removes event listeners for 'animationend' and 'transitionend' events from all elements with references stored in the `refs` object.
+     * Also registers swipe events if `excludeSwipeSupport` is false.
+     */
+    const destroyEvents = () => {
+        Object.values(refs).forEach((el) => {
+            if (el && el._carouselListener) {
+                el.removeEventListener('animationend', el._carouselListener);
+                el.removeEventListener('transitionend', el._carouselListener);
+            }
+        });
+        if (!excludeSwipeSupport) {
+            registerSwipeEvents(carouselContainer, navigateNext, navigatePrev, true);
+        }
+    };
+    /**
+     * Retrieves carousel items from a given container element.
+     * If the container has a 'slot' element, it fetches all elements assigned to that slot.
+     * Otherwise, it fetches all direct children of the container.
+     *
+     * @param {HTMLElement} container - The container element from which to extract carousel items.
+     * @returns {HTMLElement[]} An array of HTMLElements representing the carousel items.
+     *
+     * @example
+     * const carouselContainer = document.querySelector('.carousel-container');
+     * const carouselItems = getCarouselItems(carouselContainer);
+     * console.log(carouselItems); // Logs the carousel items as HTMLElements
+     */
+    const getCarouselItems = (container) => {
+        const slot = container.querySelector('slot');
+        return slot
+            ? slot.assignedElements({ flatten: true })
+            : Array.from(container.children);
+    };
+    // initialize
+    wrapAllItems(carouselContainer, `${prefix}__itemsWrapper`);
+    const wrapper = carouselContainer.querySelector(`.${prefix}__itemsWrapper`);
+    const viewItems = getCarouselItems(wrapper);
+    carouselContainer.classList.add(`${prefix}__view-stack`);
+    performAnimation(true);
+    if (!excludeSwipeSupport) {
+        registerSwipeEvents(carouselContainer, navigateNext, navigatePrev, false);
+    }
+    return {
+        next: navigateNext,
+        prev: navigatePrev,
+        reset,
+        goToIndex,
+        getActiveItem,
+        destroyEvents,
+        allViews: refs,
+    };
+};
+
+export { initCarousel };
+//# sourceMappingURL=carousel.js.map

package/es/utilities/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sources":["../../../src/utilities/carousel/carousel.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/utilities/carousel/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from './carousel';
+export * from './types';

package/es/utilities/carousel/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { initCarousel } from './carousel.js';
+//# sourceMappingURL=index.js.map

package/es/utilities/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es/utilities/carousel/swipeEvents.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const registerSwipeEvents: (carousel: HTMLElement, next: () => void, prev: () => void, destroy: boolean) => void;

package/es/utilities/carousel/swipeEvents.js

@@ -0,0 +1,109 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const registerSwipeEvents = (carousel, next, prev, destroy) => {
+    const minSwipeDistance = 50;
+    // Touch support
+    let touchStartX = null;
+    let touchEndX = null;
+    let lastScrollTime = 0;
+    const scrollCoolDown = 400;
+    let isMouseDown = false;
+    let mouseStartX = null;
+    let mouseEndX = null;
+    //handlers
+    const touchStartHandler = (e) => {
+        touchStartX = e.touches[0].clientX;
+    };
+    const touchMoveHandler = (e) => {
+        touchEndX = e.touches[0].clientX;
+    };
+    const touchEndHandler = () => {
+        if (touchStartX !== null && touchEndX !== null) {
+            const distance = touchStartX - touchEndX;
+            if (Math.abs(distance) > minSwipeDistance) {
+                if (distance > 0) {
+                    next();
+                }
+                else {
+                    prev();
+                }
+            }
+        }
+        touchStartX = null;
+        touchEndX = null;
+    };
+    const mouseDownHandler = (e) => {
+        isMouseDown = true;
+        mouseStartX = e.clientX;
+    };
+    const mouseMoveHandler = (e) => {
+        if (!isMouseDown) {
+            return;
+        }
+        mouseEndX = e.clientX;
+    };
+    const mouseUpHandler = () => {
+        if (isMouseDown && mouseStartX !== null && mouseEndX !== null) {
+            const distance = mouseStartX - mouseEndX;
+            if (Math.abs(distance) > minSwipeDistance) {
+                if (distance > 0) {
+                    next();
+                }
+                else {
+                    prev();
+                }
+            }
+        }
+        isMouseDown = false;
+        mouseStartX = null;
+        mouseEndX = null;
+    };
+    const wheelHandler = (e) => {
+        const now = Date.now();
+        if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 20) {
+            e.preventDefault(); // Prevent page from scrolling
+            if (now - lastScrollTime < scrollCoolDown) {
+                return;
+            }
+            if (e.deltaX > 0) {
+                next();
+            }
+            else {
+                prev();
+            }
+            lastScrollTime = now;
+        }
+    };
+    if (destroy) {
+        carousel.removeEventListener('touchstart', touchStartHandler);
+        carousel.removeEventListener('touchmove', touchMoveHandler);
+        carousel.removeEventListener('touchend', touchEndHandler);
+        carousel.removeEventListener('mousedown', mouseDownHandler);
+        carousel.removeEventListener('mousemove', mouseMoveHandler);
+        carousel.removeEventListener('mouseup', mouseUpHandler);
+        carousel.removeEventListener('wheel', wheelHandler);
+    }
+    carousel.addEventListener('touchstart', touchStartHandler);
+    carousel.addEventListener('touchmove', touchMoveHandler);
+    carousel.addEventListener('touchend', touchEndHandler);
+    // Mouse drag support
+    carousel.addEventListener('mousedown', mouseDownHandler);
+    carousel.addEventListener('mousemove', mouseMoveHandler);
+    carousel.addEventListener('mouseup', mouseUpHandler);
+    // Wheel gesture support
+    carousel.addEventListener('wheel', wheelHandler);
+};
+
+export { registerSwipeEvents };
+//# sourceMappingURL=swipeEvents.js.map

package/es/utilities/carousel/swipeEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeEvents.js","sources":["../../../src/utilities/carousel/swipeEvents.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/utilities/carousel/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+interface CarouselStackHistory {
+    id: number;
+    elem: HTMLLIElement;
+}
+type CarouselResponse = {
+    currentIndex: number;
+    lastIndex: number;
+    totalViews: number;
+    historyStack: CarouselStackHistory[];
+};
+type ActiveItem = {
+    index: number;
+    item: HTMLElement | null;
+};
+export type Config = {
+    onViewChangeStart?: (args: CarouselResponse) => void;
+    onViewChangeEnd?: (args: CarouselResponse) => void;
+    excludeSwipeSupport?: boolean;
+};
+interface InitCarousel {
+    next: () => void;
+    prev: () => void;
+    reset: () => void;
+    goToIndex: (index: number) => void;
+    getActiveItem: () => ActiveItem;
+    destroyEvents: (() => void) | null;
+    allViews: Record<number, HTMLElement | null>;
+}
+export type { CarouselStackHistory, CarouselResponse, InitCarousel };

package/es/utilities/carousel/types.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//# sourceMappingURL=types.js.map

package/es/utilities/carousel/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es/utilities/makeDraggable/makeDraggable.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+interface DraggableProps {
+    /**
+     * HTML element to move.
+     */
+    el: HTMLElement;
+    /**
+     * HTML element to initiate the drag (e.g., header).
+     */
+    dragHandle?: HTMLElement;
+    /**
+     * HTML element to focus on drag for keyboard interaction (e.g., Drag Icon).
+     */
+    focusableDragHandle?: HTMLElement;
+    /**
+     * Pixel value that defines the distance to move when dragging with arrow
+     * keys.
+     */
+    dragStep?: number;
+    /**
+     * Pixel value that defines the distance to move when dragging with
+     * shift+arrow keys.
+     */
+    shiftDragStep?: number;
+}
+/**
+ * Makes a given element draggable using a handle element.
+ *@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
+ */
+export declare const makeDraggable: ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }: DraggableProps) => {
+    cleanup: () => void;
+};
+export {};