fluid-dnd 2.0.0 → 2.0.2

package/dist/core/utils/GetStyles.js

@@ -0,0 +1,138 @@
+import { HORIZONTAL, VERTICAL } from "..";
+import { DRAGGABLE_CLASS } from "./classes";
+import { containClass } from "./dom/classList";
+export const getWindowScroll = () => {
+    const { scrollX, scrollY } = window;
+    return { scrollX, scrollY };
+};
+export const parseFloatEmpty = (value) => {
+    if (!value || value.trim().length == 0 || value == "normal") {
+        return 0;
+    }
+    return parseFloat(value);
+};
+export const parseIntEmpty = (value) => {
+    if (!value) {
+        return -1;
+    }
+    return parseInt(value);
+};
+export const getTransform = (element) => {
+    const style = getComputedStyle(element);
+    const matrix = new DOMMatrixReadOnly(style.transform);
+    return {
+        x: matrix.m41,
+        y: matrix.m42,
+    };
+};
+const intersection = (firstInterval, secondInterval) => {
+    if (firstInterval.x1 > secondInterval.x1) {
+        return intersection(secondInterval, firstInterval);
+    }
+    if (firstInterval.x2 < secondInterval.x1) {
+        return 0;
+    }
+    if (firstInterval.x2 >= secondInterval.x2) {
+        return firstInterval.x2 - firstInterval.x1;
+    }
+    return firstInterval.x2 - secondInterval.x1;
+};
+export const draggableIsOutside = (draggable, droppable) => {
+    return !hasIntersection(draggable, droppable);
+};
+export const hasIntersection = (element1, element2) => {
+    const rect1 = getRect(element1);
+    const rect2 = getRect(element2);
+    const intersectionY = intersectionByDirection(rect1, rect2, VERTICAL);
+    const intersectionX = intersectionByDirection(rect1, rect2, HORIZONTAL);
+    return (intersectionY >= Math.min(rect1.height, rect2.height) / 2 &&
+        intersectionX >= Math.min(rect1.width, rect2.width) / 2);
+};
+const intersectionByDirection = (rect1, rect2, direction) => {
+    const { before, distance } = getPropByDirection(direction);
+    return intersection({
+        x1: rect1[before],
+        x2: rect1[before] + rect1[distance],
+    }, {
+        x1: rect2[before],
+        x2: rect2[before] + rect2[distance],
+    });
+};
+export const getValueFromProperty = (element, property) => {
+    if (element) {
+        return parseFloatEmpty(getComputedStyle(element)[property]);
+    }
+    return 0;
+};
+export const getScrollElement = (element) => {
+    const { scrollLeft, scrollTop } = element;
+    return { scrollLeft, scrollTop };
+};
+const getRect = (element) => {
+    return element.getBoundingClientRect();
+};
+export const getPropByDirection = (direction) => {
+    const ifHorizontal = direction == HORIZONTAL;
+    return {
+        beforeMargin: ifHorizontal ? "marginLeft" : "marginTop",
+        afterMargin: ifHorizontal ? "marginRight" : "marginBottom",
+        borderBeforeWidth: ifHorizontal ? "borderLeftWidth" : "borderTopWidth",
+        before: ifHorizontal ? "left" : "top",
+        after: ifHorizontal ? "right" : "down",
+        gap: ifHorizontal ? "columnGap" : "rowGap",
+        distance: ifHorizontal ? "width" : "height",
+        axis: ifHorizontal ? "x" : "y",
+        offset: ifHorizontal ? "offsetX" : "offsetY",
+        scroll: ifHorizontal ? "scrollX" : "scrollY",
+        scrollElement: ifHorizontal ? "scrollLeft" : "scrollTop",
+        page: ifHorizontal ? "pageX" : "pageY",
+        inner: ifHorizontal ? "innerWidth" : "innerHeight",
+        offsetElement: ifHorizontal ? "offsetLeft" : "offsetTop",
+        scrollDistance: ifHorizontal ? "scrollWidth" : "scrollHeight",
+        clientDistance: ifHorizontal ? "clientWidth" : "clientHeight",
+        paddingBefore: ifHorizontal ? 'paddingLeft' : 'paddingTop',
+        getRect
+    };
+};
+export const getSiblings = (current, parent) => {
+    return getSiblingsByParent(current, parent);
+};
+export const getGroupDroppables = (currentDroppable, droppableGroup) => {
+    if (!droppableGroup) {
+        return [currentDroppable];
+    }
+    return Array.from(document.querySelectorAll(`.droppable-group-${droppableGroup}`));
+};
+export const getParentDraggableChildren = (parent) => {
+    const siblings = [...parent.children]
+        .filter((child) => containClass(child, DRAGGABLE_CLASS));
+    return siblings;
+};
+export const getSiblingsByParent = (current, parent) => {
+    const siblings = [...parent.children]
+        .filter((child) => containClass(child, DRAGGABLE_CLASS) &&
+        !child.isEqualNode(current))
+        .toReversed();
+    const positionOnDroppable = [...parent.children].findLastIndex((child) => child.isEqualNode(current));
+    return [
+        siblings,
+        positionOnDroppable,
+        parent,
+    ];
+};
+const getNearestFixedParent = (element) => {
+    let parent = element.parentElement;
+    while (parent) {
+        const position = window.getComputedStyle(parent).position;
+        if (position === 'fixed') {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return null; // No fixed parent found
+};
+export const getNearestFixedParentPosition = (element, direction) => {
+    const { before, borderBeforeWidth } = getPropByDirection(direction);
+    const fixedParent = getNearestFixedParent(element);
+    return fixedParent ? (getRect(fixedParent)[before] + getValueFromProperty(fixedParent, borderBeforeWidth)) : 0;
+};

package/dist/core/utils/ParseStyles.d.ts

@@ -1,6 +1,5 @@
-import { GapStyle } from '../../../index';
-import { Direction } from '..';
-
+import { GapStyle } from "../../../index";
+import { Direction } from "..";
 export declare const getNumberFromPixels: (pixels: string | undefined) => number;
 export declare const computeGapPixels: (element: Element, gapType: GapStyle) => number;
 export declare const gapAndDisplayInformation: (element: Element | null, gapStyle: GapStyle) => [number, boolean];

package/dist/core/utils/ParseStyles.js

@@ -0,0 +1,40 @@
+import { getPropByDirection, parseFloatEmpty } from "./GetStyles";
+export const getNumberFromPixels = (pixels) => {
+    if (!pixels || pixels.length == 0) {
+        return 0;
+    }
+    return parseFloatEmpty(pixels.replace("px", ""));
+};
+export const computeGapPixels = (element, gapType) => {
+    const gap = getComputedStyle(element)[gapType];
+    if (gap.match("%")) {
+        const gap_percent = parseFloatEmpty(gap.replace("%", ""));
+        const { width } = element.getBoundingClientRect();
+        return width * (gap_percent / 100);
+    }
+    const gap_px = getNumberFromPixels(gap);
+    return gap_px;
+};
+export const gapAndDisplayInformation = (element, gapStyle) => {
+    if (!(element instanceof Element))
+        return [
+            0,
+            false,
+        ];
+    const gap = computeGapPixels(element, gapStyle);
+    const display = getComputedStyle(element).display;
+    const hasGaps = gap > 0 || display === "flex";
+    return [gap, hasGaps];
+};
+export const getBeforeStyles = (element) => {
+    const { top, left } = getComputedStyle(element);
+    return [getNumberFromPixels(top), getNumberFromPixels(left)];
+};
+export const getGapPixels = (element, direction) => {
+    const { gap: gapStyle } = getPropByDirection(direction);
+    const [gap, hasGaps] = gapAndDisplayInformation(element, gapStyle);
+    if (hasGaps) {
+        return gap;
+    }
+    return 0;
+};

package/dist/core/utils/SetStyles.d.ts

@@ -1,5 +1,4 @@
-import { DragMouseTouchEvent, fixedSize } from '../../../index';
-
+import { DragMouseTouchEvent, fixedSize } from "../../../index";
 type onTouchEvent = "ontouchstart" | "ontouchmove" | "ontouchend";
 declare const onMouseEvents: readonly ["onmouseup", "onmousedown", "onmousemove"];
 type onMouseEvent = (typeof onMouseEvents)[number];

package/dist/core/utils/SetStyles.js

@@ -0,0 +1,192 @@
+import { HORIZONTAL, VERTICAL } from "..";
+import { getPropByDirection, getValueFromProperty } from "./GetStyles";
+import { IsHTMLElement, IsMouseEvent, isTouchEvent } from "./touchDevice";
+const onMouseEvents = ["onmouseup", "onmousedown", "onmousemove"];
+const mouseEvents = ["mouseup", "mousedown", "mousemove"];
+export const setSizeStyles = (element, height, width) => {
+    if (!element) {
+        return;
+    }
+    element.style.height = `${height}px`;
+    element.style.width = `${width}px`;
+};
+export const fixSizeStyle = (element) => {
+    if (!element) {
+        return;
+    }
+    const { height, width } = element.getBoundingClientRect();
+    setSizeStyles(element, height, width);
+};
+export const moveTranslate = (element, height, width) => {
+    if (!element || !IsHTMLElement(element)) {
+        return;
+    }
+    if (width == 0 && height == 0) {
+        element.style.transform = "";
+    }
+    else {
+        element.style.transform = `translate(${width}px,${height}px)`;
+    }
+};
+const assignDraggingTouchEvent = (element, onEvent, callback, touchCallback) => {
+    element[onEvent] = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        touchCallback && touchCallback(event);
+        const dragMouseTouchEvent = convetEventToDragMouseTouchEvent(event);
+        callback(dragMouseTouchEvent);
+    };
+};
+export const assignDraggingEvent = (element, onEvent, callback, touchCallback) => {
+    if (!callback) {
+        return;
+    }
+    if (isOnMouseEvent(onEvent)) {
+        element[onEvent] = callback;
+    }
+    else {
+        assignDraggingTouchEvent(element, onEvent, callback, touchCallback);
+    }
+};
+export const addDragMouseToucEventListener = (event, callback) => {
+    if (!callback) {
+        return;
+    }
+    if (isMouseEvent(event)) {
+        document.addEventListener(event, callback);
+    }
+    else {
+        document.addEventListener(event, (event) => {
+            const dragMouseTouchEvent = convetEventToDragMouseTouchEvent(event);
+            callback(dragMouseTouchEvent);
+        });
+    }
+};
+const isOnMouseEvent = (x) => onMouseEvents.includes(x);
+const isMouseEvent = (x) => mouseEvents.includes(x);
+const getDefaultEvent = (event) => {
+    const { target } = event;
+    return {
+        clientX: 0,
+        clientY: 0,
+        pageX: 0,
+        pageY: 0,
+        screenX: 0,
+        screenY: 0,
+        target,
+        offsetX: 0,
+        offsetY: 0,
+    };
+};
+const getOffsetFromEvent = (event, tempEvent) => {
+    const getTouchEventOffset = (element, direction) => {
+        return getOffset(tempEvent, window, direction, element);
+    };
+    if (IsMouseEvent(event)) {
+        const { offsetX, offsetY } = event;
+        return [offsetX, offsetY];
+    }
+    else {
+        const element = event.target;
+        return [
+            getTouchEventOffset(element, HORIZONTAL),
+            getTouchEventOffset(element, VERTICAL),
+        ];
+    }
+};
+export const convetEventToDragMouseTouchEvent = (event) => {
+    const tempEvent = getEvent(event);
+    if (!tempEvent) {
+        return getDefaultEvent(event);
+    }
+    const [offsetX, offsetY] = getOffsetFromEvent(event, tempEvent);
+    const { clientX, clientY, pageX, pageY, screenX, screenY, target } = tempEvent;
+    return {
+        clientX,
+        clientY,
+        pageX,
+        pageY,
+        screenX,
+        screenY,
+        target,
+        offsetX,
+        offsetY,
+    };
+};
+const getEvent = (event) => {
+    if (isTouchEvent(event)) {
+        return event.touches[0] ?? event.changedTouches[0];
+    }
+    if (IsMouseEvent(event)) {
+        return event;
+    }
+};
+const getOffset = (event, window, direction, element) => {
+    const { page, scroll, before, borderBeforeWidth, getRect } = getPropByDirection(direction);
+    const boundingClientRect = getRect(element);
+    return (event[page] -
+        window[scroll] -
+        boundingClientRect[before] -
+        getValueFromProperty(element, borderBeforeWidth));
+};
+export const setTranistion = (element, duration, timingFunction = "ease-out", types = "transform") => {
+    if (IsHTMLElement(element)) {
+        element.style.transitionDuration = `${duration}ms`;
+        element.style.transitionTimingFunction = `${timingFunction}`;
+        element.style.transitionProperty = `${types}`;
+    }
+};
+export const setEventWithInterval = (element, eventName, callback) => {
+    if (!element || !IsHTMLElement(element)) {
+        return;
+    }
+    element[eventName] = () => {
+        callback();
+    };
+};
+const getStyles = (node) => {
+    var style = node.querySelector("style");
+    if (!style) {
+        var newStyle = document.createElement("style");
+        node.appendChild(newStyle);
+        return newStyle;
+    }
+    return style;
+};
+const containRule = (sheet, cssCode) => {
+    const selectorTextRegex = /\.-?[_a-zA-Z0-9-*\s<>():]+/g;
+    const [selectorText] = cssCode.match(selectorTextRegex) || [];
+    for (const rule of sheet.cssRules) {
+        const [ruleSelectorText] = rule.cssText.match(selectorTextRegex) || [];
+        if (selectorText === ruleSelectorText) {
+            return true;
+        }
+    }
+    return false;
+};
+export const AddCssStylesToElement = (node, cssCodes) => {
+    cssCodes.forEach((cssCode) => {
+        AddCssStyleToElement(node, cssCode);
+    });
+};
+const AddCssStyleToElement = (node, cssCode) => {
+    var style = getStyles(node);
+    if (!style.sheet) {
+        return;
+    }
+    if (!containRule(style.sheet, cssCode)) {
+        style.sheet?.insertRule(cssCode, style.sheet.cssRules.length);
+    }
+};
+export const setCustomFixedSize = (element, fixedProps = {}) => {
+    for (const fixedProp of Object.keys(fixedProps)) {
+        const fixedValue = fixedProps[fixedProp];
+        if (fixedValue != undefined) {
+            setCustomProperty(element, `--${fixedProp}`, fixedValue);
+        }
+    }
+};
+const setCustomProperty = (element, fixedProp, newFixedSize) => {
+    return element && element.style.setProperty(fixedProp, newFixedSize);
+};

package/dist/core/utils/SetTransform.d.ts

@@ -1,6 +1,5 @@
-import { DragMouseTouchEvent, TransformEvent } from '../../../index';
-import { Direction } from '..';
-
+import { DragMouseTouchEvent, TransformEvent } from "../../../index";
+import { Direction } from "..";
 export declare const useTransform: (draggedElement: HTMLElement) => readonly [(element: HTMLElement, parent: HTMLElement, pagePosition: {
     pageX: number;
     pageY: number;

package/dist/core/utils/SetTransform.js

@@ -0,0 +1,148 @@
+import { draggableIsOutside, getNearestFixedParentPosition, getPropByDirection, getValueFromProperty, } from "./GetStyles";
+import { HORIZONTAL, VERTICAL } from "..";
+import { scrollByDirection } from "./scroll";
+import { HANDLER_CLASS, DRAGGING_CLASS } from "./classes";
+import { containClass } from "./dom/classList";
+export const useTransform = (draggedElement) => {
+    let currentOffset = { offsetX: 0, offsetY: 0 };
+    let position = { top: 0, left: 0 };
+    let translate = { x: 0, y: 0 };
+    const updateTranform = (newTranslate) => {
+        draggedElement.style.transform = `translate( ${newTranslate.x}px, ${newTranslate.y}px)`;
+    };
+    const updatePosition = (newPosition) => {
+        draggedElement.style.top = `${newPosition.top}px`;
+        draggedElement.style.left = `${newPosition.left}px`;
+    };
+    const setTransform = (element, parent, pagePosition, direction) => {
+        const getTranslateWihtDirection = (translateDirection) => {
+            const { beforeMargin, borderBeforeWidth, before, offset, scroll, page, inner, distance, axis, getRect } = getPropByDirection(translateDirection);
+            const pageValue = pagePosition[page];
+            const scrollValue = window[scroll];
+            const innerDistance = window[inner];
+            const distanceValue = getRect(element)[distance];
+            const border = getValueFromProperty(element, borderBeforeWidth);
+            const margin = getValueFromProperty(element, beforeMargin);
+            const elementPosittion = pageValue - currentOffset[offset];
+            const beforefixecParentValue = getNearestFixedParentPosition(element, translateDirection);
+            if (elementPosittion >= scrollValue - distanceValue / 2 &&
+                elementPosittion <= scrollValue + innerDistance) {
+                const newTranslate = elementPosittion -
+                    position[before] -
+                    border -
+                    margin -
+                    scrollValue -
+                    beforefixecParentValue;
+                updateScroll(translateDirection);
+                return newTranslate;
+            }
+            const defaultTransalation = translate[axis];
+            return defaultTransalation;
+        };
+        const updateScroll = (translateDirection) => {
+            if (element &&
+                containClass(element, DRAGGING_CLASS) &&
+                translateDirection === direction) {
+                const { before, distance, axis, getRect } = getPropByDirection(direction);
+                const distanceValue = getRect(element)[distance];
+                const parentBoundingClientRect = getRect(parent);
+                const positionInsideParent = position[before] -
+                    parentBoundingClientRect[before] +
+                    translate[axis];
+                const parentDistance = parentBoundingClientRect[distance];
+                const totalDistance = parentDistance - distanceValue;
+                const relativePosition = positionInsideParent / totalDistance;
+                const relativeDistanceValue = distanceValue / totalDistance;
+                const velocity = 0.1;
+                const infLimit = 0.2;
+                const upperLimit = 0.8;
+                let percent = 0;
+                const isOutside = draggableIsOutside(element, parent);
+                if (!isOutside &&
+                    relativePosition < infLimit &&
+                    relativePosition > -relativeDistanceValue) {
+                    percent = relativePosition / infLimit - 1;
+                }
+                else if (!isOutside &&
+                    relativePosition > upperLimit &&
+                    relativePosition < 1 + relativeDistanceValue) {
+                    percent = (1 / (1 - upperLimit)) * (relativePosition - upperLimit);
+                }
+                const scrollAmount = velocity * distanceValue * percent;
+                scrollByDirection(parent, direction, scrollAmount);
+            }
+        };
+        const updateTranlateByDirection = (direction) => {
+            const { axis } = getPropByDirection(direction);
+            translate[axis] = getTranslateWihtDirection(direction);
+            updateTranform(translate);
+        };
+        updateTranlateByDirection(HORIZONTAL);
+        updateTranlateByDirection(VERTICAL);
+    };
+    const updateTransformState = (event, element) => {
+        const [top, left, offsetX, offsetY] = getTransformState(event, element, draggedElement);
+        position = {
+            top,
+            left,
+        };
+        updatePosition(position);
+        currentOffset = { offsetX, offsetY };
+    };
+    return [
+        setTransform,
+        updateTransformState,
+    ];
+};
+const getOffsetWithDraggable = (direction, element, draggable) => {
+    const { borderBeforeWidth, before, getRect } = getPropByDirection(direction);
+    return (getRect(element)[before] -
+        getRect(draggable)[before] -
+        getValueFromProperty(draggable, borderBeforeWidth));
+};
+const getOffset = (event, draggable) => {
+    let { offsetX, offsetY, target } = event;
+    let targetHandler = getHandlerElementAncestor(target, draggable);
+    const targetElement = target;
+    if (targetElement && targetHandler && !targetElement.isSameNode(targetHandler)) {
+        offsetX += getOffsetWithDraggable(HORIZONTAL, targetElement, targetHandler);
+        offsetY += getOffsetWithDraggable(VERTICAL, targetElement, targetHandler);
+    }
+    if (targetHandler && draggable != target) {
+        offsetX += getOffsetWithDraggable(HORIZONTAL, targetHandler, draggable);
+        offsetY += getOffsetWithDraggable(VERTICAL, targetHandler, draggable);
+    }
+    return [offsetX, offsetY];
+};
+const getHandlerElementAncestor = (target, draggable) => {
+    const targetHandler = target?.closest(`.${HANDLER_CLASS}`);
+    if (targetHandler && targetHandler.isSameNode(draggable)) {
+        return target;
+    }
+    return targetHandler;
+};
+const getPositionByDistance = (direction, event, element, offsetEvent) => {
+    const { offset, beforeMargin, page, borderBeforeWidth, scroll } = getPropByDirection(direction);
+    const beforefixecParentValue = getNearestFixedParentPosition(element, direction);
+    return (event[page] -
+        offsetEvent[offset] -
+        getValueFromProperty(element, beforeMargin) -
+        getValueFromProperty(element, borderBeforeWidth) -
+        window[scroll] -
+        beforefixecParentValue);
+};
+export const getTransformState = (event, element, draggable) => {
+    const [offsetX, offsetY] = getOffset(event, draggable);
+    return [
+        getPositionByDistance(VERTICAL, event, element, {
+            offsetX,
+            offsetY,
+        }),
+        getPositionByDistance(HORIZONTAL, event, element, {
+            offsetX,
+            offsetY,
+        }),
+        offsetX,
+        offsetY
+    ];
+};

package/dist/core/utils/classes.js

@@ -0,0 +1,9 @@
+export const DRAGGABLE_CLASS = "draggable";
+export const DROPPABLE_CLASS = "droppable";
+export const HANDLER_CLASS = "handler-class";
+export const DRAGGING_CLASS = 'dragging';
+export const DRAGGING_HANDLER_CLASS = "dragging-handler-class";
+export const DROPPING_CLASS = "dropping";
+export const GRABBING_CLASS = "grabbing";
+export const GRAB_CLASS = "grab";
+export const DISABLE_TRANSITION = "disable-transition";

package/dist/core/utils/config.d.ts

@@ -1,5 +1,5 @@
-import { ListCondig, MapFrom, Config, CoreConfig } from '..';
-import { DroppableConfig } from '../configHandler';
-
+import { ListCondig, MapFrom } from "..";
+import { Config, CoreConfig } from "..";
+import { DroppableConfig } from "../configHandler";
 export declare const getConfig: <T>(listCondig: ListCondig<T>, config?: Config<T>) => CoreConfig<T>;
 export declare const MapConfig: <T>(coreConfig: DroppableConfig<any>, mapFrom: MapFrom<T>) => CoreConfig<any>;

package/dist/core/utils/config.js

@@ -0,0 +1,55 @@
+import { VERTICAL, } from "..";
+import { DRAGGABLE_CLASS } from "./classes";
+export const getConfig = (listCondig, config) => {
+    const onRemoveAtEvent = (index, sync) => {
+        return listCondig.removeAtEvent(index, sync);
+    };
+    const onInsertEvent = (index, value, sync) => {
+        return listCondig.insertEvent(index, value, sync);
+    };
+    const onGetLegth = () => {
+        return listCondig.getLength();
+    };
+    const onGetValue = (index) => {
+        return listCondig.getValue(index);
+    };
+    const defaultMapFrom = (object) => {
+        return object;
+    };
+    return {
+        direction: config?.direction ?? VERTICAL,
+        handlerSelector: config?.handlerSelector ?? DRAGGABLE_CLASS,
+        draggingClass: config?.draggingClass ?? "dragging",
+        droppableClass: config?.droppableClass ?? 'droppable-hover',
+        isDraggable: config?.isDraggable ?? (() => true),
+        onDragStart: config?.onDragStart ?? (() => { }),
+        onDragEnd: config?.onDragEnd ?? (() => { }),
+        droppableGroup: config?.droppableGroup,
+        onRemoveAtEvent,
+        onInsertEvent,
+        onGetLegth,
+        onGetValue,
+        animationDuration: config?.animationDuration ?? 200,
+        removingClass: config?.removingClass ?? "removing",
+        insertingFromClass: config?.insertingFromClass ?? 'from-inserting',
+        delayBeforeRemove: config?.delayBeforeRemove ?? 200,
+        delayBeforeInsert: config?.delayBeforeInsert ?? 200,
+        mapFrom: config?.mapFrom ?? defaultMapFrom,
+    };
+};
+export const MapConfig = (coreConfig, mapFrom) => {
+    const { config, droppable } = coreConfig;
+    const { onInsertEvent, onDragEnd } = config;
+    const mapOnInsertEvent = (index, value) => {
+        return onInsertEvent(index, mapFrom(value, droppable), true);
+    };
+    const mapOnDragEnd = (eventData) => {
+        const { index, value } = eventData;
+        onDragEnd({ index, value: mapFrom(value, droppable) });
+    };
+    return {
+        ...config,
+        onDragEnd: mapOnDragEnd,
+        onInsertEvent: mapOnInsertEvent
+    };
+};

package/dist/core/utils/dom/classList.js

@@ -0,0 +1,35 @@
+export const containClass = (element, cssClass) => {
+    return element.classList.contains(cssClass);
+};
+export const toggleClass = (element, cssClass, force = false) => {
+    element.classList.toggle(cssClass, force);
+};
+export const addClass = (element, cssClass) => {
+    element.classList.add(cssClass);
+};
+export const removeClass = (element, cssClass) => {
+    element.classList.remove(cssClass);
+};
+export const containstClasses = (element, classes) => {
+    return getClassesList(classes).every((cssClass) => containClass(element, cssClass));
+};
+export const getClassesSelector = (classes) => {
+    if (!classes) {
+        return "";
+    }
+    const classesSelector = getClassesList(classes).join(".");
+    return `.${classesSelector}`;
+};
+export const addMultipleClasses = (element, classes) => {
+    if (!classes) {
+        return;
+    }
+    const classesList = getClassesList(classes);
+    element.classList.add(...classesList);
+};
+export const getClassesList = (classes) => {
+    if (!classes) {
+        return [];
+    }
+    return classes.split(" ").filter((cssClass) => cssClass);
+};

package/dist/core/utils/droppableConfigurator.d.ts

@@ -1,7 +1,6 @@
-import { DroppableConfig } from '../configHandler';
-import { DragMouseTouchEvent } from '../../../index';
-import { MapFrom } from '..';
-
+import { DroppableConfig } from "../configHandler";
+import { DragMouseTouchEvent } from "../../../index";
+import { MapFrom } from "..";
 export declare class DroppableConfigurator<T> {
     initial: DroppableConfig<any> | undefined;
     current: DroppableConfig<T> | undefined;