@carbon/ibm-products-web-components 0.29.0 → 0.30.0

package/es/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2024, 2024
+ * Copyright IBM Corp. 2024, 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.
@@ -19,3 +19,7 @@ export { default as CDSPageHeaderContent } from './components/page-header/page-h
 export { default as CDSPageHeaderContentText } from './components/page-header/page-header-content-text';
 export { default as CDSPageHeaderHeroImage } from './components/page-header/page-header-hero-image';
 export { default as CDSPageHeaderTabs } from './components/page-header/page-header-tabs';
+export { default as CDSGuideBanner } from './components/guide-banner/guide-banner';
+export { default as CDSGuideBannerElement } from './components/guide-banner/guide-banner-element';
+export { default as CDSCoachmark } from './components/coachmark/coachmark';
+export { default as CDSCoachmarkBeacon } from './components/coachmark/coachmark-beacon/coachmark-beacon';

package/es/index.js

@@ -18,4 +18,8 @@ export { default as CDSPageHeaderContent } from './components/page-header/page-h
 export { default as CDSPageHeaderContentText } from './components/page-header/page-header-content-text.js';
 export { default as CDSPageHeaderHeroImage } from './components/page-header/page-header-hero-image.js';
 export { default as CDSPageHeaderTabs } from './components/page-header/page-header-tabs.js';
+export { default as CDSGuideBanner } from './components/guide-banner/guide-banner.js';
+export { default as CDSGuideBannerElement } from './components/guide-banner/guide-banner-element.js';
+export { default as CDSCoachmark } from './components/coachmark/coachmark.js';
+export { default as CDSCoachmarkBeacon } from './components/coachmark/coachmark-beacon/coachmark-beacon.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

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

package/es/packages/ibm-products-web-components/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.29.0-rc.0";
+var version = "0.30.0-rc.0";
 var packageJson = {
 	version: version};
 

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 {};

package/es/utilities/makeDraggable/makeDraggable.js

@@ -0,0 +1,136 @@
+/**
+ * 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, 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.
+ */
+/**
+ * Makes a given element draggable using a handle element.
+ *@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
+ */
+const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep, }) => {
+    if (dragHandle) {
+        dragHandle.style.cursor = 'move';
+        el.style.cursor = 'default';
+    }
+    else {
+        el.style.cursor = 'move';
+    }
+    let isDragging = false;
+    let currentX = 0;
+    let currentY = 0;
+    let initialMouseX = 0;
+    let initialMouseY = 0;
+    const dispatch = (type, detail) => {
+        const eventInit = {
+            detail,
+            bubbles: true,
+        };
+        el.dispatchEvent(new CustomEvent(type, eventInit));
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            isDragging = !isDragging;
+        }
+        if (isDragging) {
+            dispatch('dragstart', { keyboard: true });
+        }
+        else {
+            dispatch('dragend', { keyboard: true });
+        }
+        if (!isDragging) {
+            return;
+        }
+        const distance = e.shiftKey ? (shiftDragStep !== null && shiftDragStep !== void 0 ? shiftDragStep : 32) : (dragStep !== null && dragStep !== void 0 ? dragStep : 8);
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                break;
+            case 'ArrowLeft':
+                el.style.left = `${el.offsetLeft - distance}px`;
+                break;
+            case 'ArrowRight':
+                el.style.left = `${el.offsetLeft + distance}px`;
+                break;
+            case 'ArrowUp':
+                el.style.top = `${el.offsetTop - distance}px`;
+                break;
+            case 'ArrowDown':
+                el.style.top = `${el.offsetTop + distance}px`;
+                break;
+        }
+    };
+    const onMouseDown = (e) => {
+        const target = e.target;
+        if (!(target instanceof Node)) {
+            return;
+        }
+        const isTargetInHandle = dragHandle
+            ? dragHandle.contains(target)
+            : el.contains(target);
+        if (!isTargetInHandle) {
+            return;
+        }
+        const style = window.getComputedStyle(el);
+        const matrix = new DOMMatrix(style.transform);
+        currentX = matrix.m41;
+        currentY = matrix.m42;
+        // Store the mouse position at the start of the drag
+        initialMouseX = e.clientX;
+        initialMouseY = e.clientY;
+        isDragging = true;
+        dispatch('dragstart', { mouse: true });
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp, { once: true });
+    };
+    const onMouseMove = (e) => {
+        if (!isDragging) {
+            return;
+        }
+        // Calculate the change in mouse position from the start
+        const dx = e.clientX - initialMouseX;
+        const dy = e.clientY - initialMouseY;
+        // Add that change to the element's original translation
+        el.style.transform = `translate(${currentX + dx}px, ${currentY + dy}px)`;
+    };
+    const onMouseUp = () => {
+        if (!isDragging) {
+            return;
+        }
+        isDragging = false;
+        dispatch('dragend', { mouse: true });
+        document.removeEventListener('mousemove', onMouseMove);
+    };
+    if (dragHandle) {
+        dragHandle.addEventListener('mousedown', onMouseDown);
+    }
+    else {
+        el.addEventListener('mousedown', onMouseDown);
+    }
+    focusableDragHandle === null || focusableDragHandle === void 0 ? void 0 : focusableDragHandle.addEventListener('keydown', onKeyDown);
+    const draggableCleanup = () => {
+        if (dragHandle) {
+            dragHandle.removeEventListener('mousedown', onMouseDown);
+        }
+        else {
+            el.removeEventListener('mousedown', onMouseDown);
+        }
+        focusableDragHandle === null || focusableDragHandle === void 0 ? void 0 : focusableDragHandle.removeEventListener('keydown', onKeyDown);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+    return {
+        cleanup: draggableCleanup,
+    };
+};
+
+export { makeDraggable };
+//# sourceMappingURL=makeDraggable.js.map

package/es/utilities/makeDraggable/makeDraggable.js.map

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