lido-player 0.0.2-beta-15 → 0.0.2-beta-15-dev

package/dist/collection/components/calculator/lido-calculator.css

@@ -7,18 +7,18 @@
   padding: 2%;
   box-sizing: border-box;         
 }
-.lido-calculator-btn-special{
-  --btn-bg-color: #014D4D !important;
-  background-color:#014D4D !important;
-  --btn-shadow-color: #0a2f2f !important;
-}
-
-.lido-calculator-btn-default {
-  --btn-bg-color: #029A9A !important;
-  background-color: #029A9A !important;
-  color: #000;
-  --btn-shadow-color: #0f4242 !important ; 
-}
+.lido-calculator-btn-special{
+  --btn-bg-color: #014D4D !important;
+  background-color:#014D4D !important;
+  --btn-shadow-color: #0a2f2f !important;
+}
+
+.lido-calculator-btn-default {
+  --btn-bg-color: #029A9A !important;
+  background-color: #029A9A !important;
+  color: #000;
+  --btn-shadow-color: #0f4242 !important ; 
+}
 
 #lido-calculator-penIcon {
   --btn-bg-color: #FB7038 !important;   

package/dist/collection/components/canvas/lido-canvas.css

@@ -1,33 +1,33 @@
-:host {
-  box-sizing: border-box;
-}
-
-.lido-canvas {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-#lido-exit-button {
-  padding: 6px 14px;
-  border: none;
-  background:transparent;
+:host {
+  box-sizing: border-box;
+}
+
+.lido-canvas {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+#lido-exit-button {
+  padding: 6px 14px;
+  border: none;
+  background:transparent;
   color: #fff;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 15;
-}
-
-canvas {
-  /* flex: 1; */
-  touch-action: none;
-  display: block;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-}
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 15;
+}
+
+canvas {
+  /* flex: 1; */
+  touch-action: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+}

package/dist/collection/components/canvas/lido-canvas.js

@@ -102,7 +102,7 @@ export class LidoCanvas {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        return (h(Host, { key: 'ebf767a3c0cf33104428fba8fe21be6e76fa44c2', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'e5f247157140b9038d7b207bf71bba0b5e05978c', id: "lido-exit-button", onClick: () => this.clearCanvas() }), h("canvas", { key: 'ac5cbd11a9bd0bb22ac88ca7781994ce52309d52', id: "lido-canvas" })));
+        return (h(Host, { key: '6bb47f06656ce667d23236e9f3c3a8f383885a43', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'fd0d1217bda63071fbf6496c2538c2a944b14181', id: "lido-exit-button", onClick: () => this.clearCanvas() }), h("canvas", { key: 'ed0333972bb7ce0fc4e14c81bb466ea895ce65e0', id: "lido-canvas" })));
     }
     static get is() { return "lido-canvas"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cell/lido-cell.js

@@ -257,7 +257,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: '98b1531fb9231062fa8a07cfa0e364e63a7d4829', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: 'd223539fc21f45c0dc87c179e58f2dd689fa9276' })));
+        return (h(Host, { key: '73bdf9dd33fdd8322c35465de011697da112193a', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '6e9d4507b36716f04853d39ef66015441782aa88' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/column/lido-col.js

@@ -78,7 +78,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'cf619b69e4616e83c163479a224ad86079afa927', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '2af707c5e7ec75db20c8d7c9cf05c2af9508a590' })));
+        return (h(Host, { key: '334206d6054442fec787cfb479a68ae164404730', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {

package/dist/collection/components/container/lido-container.js

@@ -171,7 +171,7 @@ export class LidoContainer {
         this.handleWindowLoad = () => this.scaleContainer(this.el);
     }
     cleanupInteractionHandlers() {
-        this.el.querySelectorAll('[type="drag"], [type="slide"]').forEach(element => {
+        this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach(element => {
             element.dispatchEvent(new Event(LIDO_INTERACTION_CLEANUP_EVENT));
         });
     }
@@ -452,7 +452,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: '104e6cc49ab78121a9b7e9939e5def1952567a53', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: 'ec5e3d78fbf2b8a0cf4b6f918b41c22dc18b2484', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '384172d5224ae11a20983cda82a3761da456ba2a' })));
+        return (h(Host, { key: '1862e30fedda58726edc107f81fae1f63e96d009', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c3128ea2164892757b32cb076d717436947f9a4c' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/float/lido-float.js

@@ -85,7 +85,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: '5b047b9480951c7741fc20cd7dada79da3cb8bc3', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '4d200251a291484f06f6bc7179c4ac61b8193fc8' })));
+        return (h(Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {

package/dist/collection/components/position/lido-pos.js

@@ -131,7 +131,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: '6fe74859974f9ef71853a7cae126cc04108fcf75', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'fab9cfb298d95a5899cadfa330ef44ba6057c5ad' })));
+        return (h(Host, { key: 'cfd38900b31991e89c21a099fc4f91f77663ae94', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '73f7bfe2d8214693d6f40a4dab6d735906ad4eaa' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {

package/dist/collection/components/row/lido-row.js

@@ -77,7 +77,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: 'd6ad19979d6cf5c02d1980418782f969def9765d', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: '2411f3960437cc90bb0578eba08df15eaa905206' })));
+        return (h(Host, { key: 'c69aea0b1b11d9aec167d1a4376f68073f91ca81', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, h("slot", { key: '8756ee0447057cddb949e23decbde5fe4d1d25c8' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/slideFill/lido-slide-fill.js

@@ -218,7 +218,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        return (h(Host, { key: '1293c37a88f56ed8a66355d8eff64ce6bc932d00', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '4a6ad5d37c061fa057af4633acca3efee6a1439a', innerHTML: this.svgContent, class: "lido-svg-element" })));
+        return (h(Host, { key: 'a19d35ba055a5ed9ab38adb02f37c9cb634c272d', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '987f42b3c213f570714b2ddf600243e83c3b12ad', innerHTML: this.svgContent, class: "lido-svg-element" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {

package/dist/collection/components/text/lido-text.js

@@ -59,6 +59,10 @@ export class LidoText {
          * The ARIA hidden attribute of the container. Used for accessibility to hide the element.
          */
         this.ariaHidden = '';
+        /**
+         * Allows the text element to be freely moved by pointer/touch and persists the final x/y attributes.
+         */
+        this.move = 'false';
         /**
          * X-axis (horizontal) position of the text component (CSS value, e.g., '10px', '5vw').
          */
@@ -256,7 +260,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: 'e1ca534d9823a8b967c9d8c51d4aebd4706004e7', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
+        return (h(Host, { key: '30e77a008aba08f90f88541574f70588bb8a2cd6', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {
@@ -511,6 +515,26 @@ export class LidoText {
                 "attribute": "aria-hidden",
                 "defaultValue": "''"
             },
+            "move": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the text element to be freely moved by pointer/touch and persists the final x/y attributes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "move",
+                "defaultValue": "'false'"
+            },
             "x": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/wrap/lido-wrap.js

@@ -75,7 +75,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: 'c209fed0cad8eb46d43fc9ec54822eef228c4321', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '83ff04e7488aa185c1711de212eecc75b1aa9861' })));
+        return (h(Host, { key: '58b1e37a1787349d3ccd2bc6952d94a7d945e234', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '44389fcc3d2e86faf291b74bfe50b55d467a7278' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {

package/dist/collection/utils/utils.js

@@ -7,6 +7,7 @@ import { AudioPlayer } from "./audioPlayer";
 import { enableReorderDrag } from "./utilsHandlers/sortHandler";
 import { slideAnimation, slidingWithScaling } from "./utilsHandlers/slideHandler";
 import { enableDraggingWithScaling, enableOptionArea, getElementScale, handleDropElement, appendingDragElementsInDrop, multiplyBeedsCalculation } from "./utilsHandlers/dragDropHandler";
+import { enableFreeMove } from "./utilsHandlers/moveHandler";
 import { addClickListenerForClickType, onTouchListenerForOnTouch } from "./utilsHandlers/clickHandler";
 import { evaluate, isArray } from "mathjs";
 import { fillSlideHandle } from "./utilsHandlers/floatHandler";
@@ -62,6 +63,9 @@ export const initEventsForElement = async (element, type) => {
     }
     const onEntry = element.getAttribute('onEntry');
     await executeActions(onEntry, element);
+    if (element.getAttribute('move') === 'true') {
+        enableFreeMove(element);
+    }
     switch (type) {
         case 'drag': {
             enableDraggingWithScaling(element);

package/dist/collection/utils/utilsHandlers/moveHandler.js

@@ -0,0 +1,111 @@
+import { LIDO_INTERACTION_CLEANUP_EVENT, LidoContainer } from "../constants";
+const getContainerScale = (container) => {
+    const transform = window.getComputedStyle(container).transform;
+    if (!transform || transform === 'none')
+        return 1;
+    const matrix = new DOMMatrixReadOnly(transform);
+    return matrix.a || 1;
+};
+const readPixelPosition = (value, fallback) => {
+    const parsed = parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+};
+const getParentContainer = (element) => {
+    var _a;
+    return (_a = element.closest('lido-container')) !== null && _a !== void 0 ? _a : document.getElementById(LidoContainer);
+};
+export function enableFreeMove(element) {
+    var _a;
+    const moveElement = element;
+    (_a = moveElement.__lidoMoveCleanup) === null || _a === void 0 ? void 0 : _a.call(moveElement);
+    const container = getParentContainer(element);
+    if (!container)
+        return;
+    let isMoving = false;
+    let didMove = false;
+    let startX = 0;
+    let startY = 0;
+    let initialLeft = 0;
+    let initialTop = 0;
+    const onStart = (event) => {
+        if (container.getAttribute('canplay') !== 'false')
+            return;
+        const point = event instanceof MouseEvent ? event : event.touches[0];
+        if (!point)
+            return;
+        const computedStyle = window.getComputedStyle(element);
+        if (computedStyle.position === 'static') {
+            element.style.position = 'absolute';
+        }
+        isMoving = true;
+        didMove = false;
+        startX = point.clientX;
+        startY = point.clientY;
+        initialLeft = readPixelPosition(element.style.left || computedStyle.left, element.offsetLeft);
+        initialTop = readPixelPosition(element.style.top || computedStyle.top, element.offsetTop);
+        element.style.cursor = 'grabbing';
+        element.style.transition = 'none';
+        element.style.zIndex = element.style.zIndex || element.getAttribute('z') || '1';
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onEnd);
+        document.addEventListener('touchmove', onMove, { passive: false });
+        document.addEventListener('touchend', onEnd);
+    };
+    const onMove = (event) => {
+        if (!isMoving)
+            return;
+        if (event.cancelable)
+            event.preventDefault();
+        const point = event instanceof MouseEvent ? event : event.touches[0];
+        if (!point)
+            return;
+        didMove = true;
+        const scale = getContainerScale(container);
+        const nextLeft = initialLeft + (point.clientX - startX) / scale;
+        const nextTop = initialTop + (point.clientY - startY) / scale;
+        element.style.left = `${nextLeft}px`;
+        element.style.top = `${nextTop}px`;
+    };
+    const removeDocumentListeners = () => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onEnd);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onEnd);
+    };
+    const onEnd = () => {
+        if (!isMoving)
+            return;
+        isMoving = false;
+        removeDocumentListeners();
+        element.style.cursor = 'move';
+        if (!didMove)
+            return;
+        element.setAttribute('x', element.style.left);
+        element.setAttribute('y', element.style.top);
+    };
+    const preventMovedClick = (event) => {
+        if (!didMove)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        didMove = false;
+    };
+    const cleanup = () => {
+        isMoving = false;
+        removeDocumentListeners();
+        element.removeEventListener('mousedown', onStart);
+        element.removeEventListener('touchstart', onStart);
+        element.removeEventListener('click', preventMovedClick, true);
+        element.removeEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
+        if (moveElement.__lidoMoveCleanup === cleanup) {
+            delete moveElement.__lidoMoveCleanup;
+        }
+    };
+    moveElement.__lidoMoveCleanup = cleanup;
+    element.style.cursor = 'move';
+    element.style.touchAction = 'none';
+    element.addEventListener('mousedown', onStart);
+    element.addEventListener('touchstart', onStart);
+    element.addEventListener('click', preventMovedClick, true);
+    element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
+}