@sankhyalabs/sankhyablocks 8.9.0-dev.6 → 8.9.0-dev.8

package/dist/cjs/snk-tab-config.cjs.entry.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f9e81701.js');
-const draggable_bundle = require('./draggable.bundle-82a25c06.js');
+const Sortable = require('./Sortable-fb1c4cbb.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-d187e03e.js');
-require('./_commonjsHelpers-537d719a.js');
+const constants = require('./constants-35ddd366.js');
 
 const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--snk-tab-config__lower-bar--background-color:var(--color--disable-primary, #e5eaf0);--snk-tab-config__lower-bar--border:2px solid var(--color--disable-primary, #e5eaf0);--snk-tab-config__tab--color:var(--text--primary, #626e82);--snk-tab-config__tab--font-family:var(--font-pattern, \"Roboto\");--snk-tab-config__tab--font-size:var(--title--small, 14px);--snk-tab-config__tab--padding:var(--space--small, 6px) var(--space--medium, 12px);--snk-tab-config__tab-is-active--color:var(--color--primary, #008561);--snk-tab-config__tab-hover--color:var(--color--secondary, #383c45);--snk-tab-config__tab-is-focused--border:1px dashed var(--color--primary, #008561);--snk-tab-config__tab-label--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--snk-tab-config__tab-label--margin-bottom:var(--space--extra-small, 3px);--snk-tab-config__new-button-icon--color:var(--color--secondary-700, #1C1D22);--snk-tab-config__forward-button--background-color:var(--text--primary, #626e82);--snk-tab-config__forward-button-hover--background-color:var(--color--primary, #008561);--snk-tab-config__left-icon--padding-right:var(--space--small, 6px);--snk-tab-config__left-icon--color:var(--text--disable, #AFB6C0);--snk-tab-config__tab-label-disabled--color:var(--text--disable, #AFB6C0);--snk-tab-config__slot--margin-left:var(--space--small, 6px);display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background-color:var(--snk-tab-config__lower-bar--background-color);border:var(--snk-tab-config__lower-bar--border)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--snk-tab-config__tab--color);font-family:var(--snk-tab-config__tab--font-family);font-size:var(--snk-tab-config__tab--font-size);padding:var(--snk-tab-config__tab--padding)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out;background-color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-focused.sc-snk-tab-config{border:var(--snk-tab-config__tab-is-focused--border)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--snk-tab-config__tab-label--text-shadow);margin-bottom:var(--snk-tab-config__tab-label--margin-bottom)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__new-button-icon--color)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;width:10px;height:16px;background-color:var(--snk-tab-config__forward-button--background-color)}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--snk-tab-config__left-icon--padding-right);--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--snk-tab-config__left-icon--padding-right)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear, opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--snk-tab-config__tab-label-disabled--color)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--snk-tab-config__slot--margin-left)}";
 
@@ -44,14 +43,15 @@ const SnkTabConfig = class {
     if (this._sortableTab) {
       this._sortableTab.destroy();
     }
-    this._sortableTab = new draggable_bundle.draggable_bundle.Sortable(this._hostElem.querySelectorAll('[data-draggable-parent="tab"]'), {
+    this._sortableTab = new Sortable.Sortable(this._hostElem.querySelectorAll('[data-draggable-parent="tab"]'), {
       draggable: '[data-draggable-element="tab"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: constants.CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableTab.on(constants.CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
-    this._sortableTab.on(constants.CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
+    this._sortableTab.on(constants.CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
+    this._sortableTab.on(constants.CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
   }
   controlStartDraggingTab(evt) {
     var _a, _b;
@@ -226,8 +226,9 @@ const SnkTabConfig = class {
     };
     return styledLabel;
   }
-  cancelEditText() {
+  cancelEditText(cancelTextEdition) {
     var _a;
+    cancelTextEdition.stopPropagation();
     this._activeEditText = false;
     if (this._scrollContainer != undefined) {
       (_a = this._scrollContainer.querySelector('.tab-config__tab--is-active')) === null || _a === void 0 ? void 0 : _a.focus();
@@ -249,13 +250,13 @@ const SnkTabConfig = class {
   handleSaveEditionText(editDetails) {
     const { value, newValue } = editDetails.detail;
     if (value === newValue) {
-      this.cancelEditText();
+      this.cancelEditText(editDetails);
       return;
     }
     this._processedTabs.forEach((tab) => {
       if (tab.label === value) {
         tab.label = newValue;
-        this.cancelEditText();
+        this.cancelEditText(editDetails);
         this.editionTitleTab.emit(editDetails);
       }
     });
@@ -321,7 +322,7 @@ const SnkTabConfig = class {
       return index.h("button", { id: tabId, class: `tab-config__tab${isSelected ? " tab-config__tab--is-active" : ""}`, onClick: () => this.handleTabClick(tab), onDblClick: () => { this._activeEditText = true; this._activeEditTextIndex = index$1; }, "data-draggable-element": index$1 > 0 ? "tab" : "", onMouseLeave: () => this.onHideActions(index$1), key: tab.label }, (this._activeEditText === true && this._activeEditTextIndex === index$1 && index$1 > 0) ||
         index.h(index.Fragment, null, index$1 > 0 && index.h("ez-icon", { iconName: tab.leftIcon || "drag-indicator", class: "tab-config__left-icon" }), (tab.visible === false && index$1 > 0) && index.h("ez-icon", { iconName: tab.leftIcon || "eye-off", class: "tab-config__left-icon tab-config__left-icon--eye-off" }), index.h("span", { class: "tab-config__tab-label" + (tab.visible === false && index$1 > 0 ? " tab-config__tab-label-disabled" : ""), title: tab.label }, tab.label), index$1 > 0 &&
           index.h("ez-actions-button", { class: "tab-config__actions-button", size: "small", ref: elem => this._refTabActions[index$1] = elem, actions: tab.visible === false ? this._actionsShow : this._actionsHide, isTransparent: true, arrowActive: true, onEzAction: (ev) => this.handleActions(ev, tab) }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } })), (this._activeEditText === true && index$1 > 0 && this._activeEditTextIndex === index$1) &&
-        index.h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: () => this.cancelEditText() }));
+        index.h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: (ev) => this.cancelEditText(ev) }));
     })), index.h("button", { class: "tab-config__forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   get _hostElem() { return index.getElement(this); }

package/dist/collection/components/snk-form/subcomponents/snk-form-config/snk-form-config.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { Sortable } from '@shopify/draggable';
 import { ObjectUtils, ArrayUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from "@sankhyalabs/ezui/dist/collection/utils";
-import { ACTION_CONFIG, CONFIG_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../../../lib/utils/constants";
+import { ACTION_CONFIG, CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../../../lib/utils/constants";
 import { UserConfigType } from "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher";
 import { buildFormConfigFromDataUnit } from "@sankhyalabs/ezui/dist/collection/utils/form";
 const CONTAINER_ID = {
@@ -410,11 +410,12 @@ export class SnkFormConfig {
       draggable: '[data-draggable-element="field"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableField.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
-    this._sortableField.on(CONFIG_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
-    this._sortableField.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
   }
   controlStartDraggingGroup(evt) {
     if (this._mouseOnFieldConfig || this._editingTitleGroup) {
@@ -440,10 +441,11 @@ export class SnkFormConfig {
       draggable: '[data-draggable-element="group"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableGroup.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
-    this._sortableGroup.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
   }
   loadUserConfig() {
     if (this.configManager == undefined) {

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js

@@ -1,7 +1,7 @@
 import { h, Host, Fragment } from "@stencil/core";
 import { Sortable } from '@shopify/draggable';
 import { ApplicationContext, ElementIDUtils } from "@sankhyalabs/core";
-import { CONFIG_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
+import { CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
 export class SnkTabConfig {
   constructor() {
     this._refTabActions = [];
@@ -33,10 +33,11 @@ export class SnkTabConfig {
       draggable: '[data-draggable-element="tab"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableTab.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
-    this._sortableTab.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
+    this._sortableTab.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
+    this._sortableTab.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
   }
   controlStartDraggingTab(evt) {
     var _a, _b;
@@ -211,8 +212,9 @@ export class SnkTabConfig {
     };
     return styledLabel;
   }
-  cancelEditText() {
+  cancelEditText(cancelTextEdition) {
     var _a;
+    cancelTextEdition.stopPropagation();
     this._activeEditText = false;
     if (this._scrollContainer != undefined) {
       (_a = this._scrollContainer.querySelector('.tab-config__tab--is-active')) === null || _a === void 0 ? void 0 : _a.focus();
@@ -234,13 +236,13 @@ export class SnkTabConfig {
   handleSaveEditionText(editDetails) {
     const { value, newValue } = editDetails.detail;
     if (value === newValue) {
-      this.cancelEditText();
+      this.cancelEditText(editDetails);
       return;
     }
     this._processedTabs.forEach((tab) => {
       if (tab.label === value) {
         tab.label = newValue;
-        this.cancelEditText();
+        this.cancelEditText(editDetails);
         this.editionTitleTab.emit(editDetails);
       }
     });
@@ -306,7 +308,7 @@ export class SnkTabConfig {
       return h("button", { id: tabId, class: `tab-config__tab${isSelected ? " tab-config__tab--is-active" : ""}`, onClick: () => this.handleTabClick(tab), onDblClick: () => { this._activeEditText = true; this._activeEditTextIndex = index; }, "data-draggable-element": index > 0 ? "tab" : "", onMouseLeave: () => this.onHideActions(index), key: tab.label }, (this._activeEditText === true && this._activeEditTextIndex === index && index > 0) ||
         h(Fragment, null, index > 0 && h("ez-icon", { iconName: tab.leftIcon || "drag-indicator", class: "tab-config__left-icon" }), (tab.visible === false && index > 0) && h("ez-icon", { iconName: tab.leftIcon || "eye-off", class: "tab-config__left-icon tab-config__left-icon--eye-off" }), h("span", { class: "tab-config__tab-label" + (tab.visible === false && index > 0 ? " tab-config__tab-label-disabled" : ""), title: tab.label }, tab.label), index > 0 &&
           h("ez-actions-button", { class: "tab-config__actions-button", size: "small", ref: elem => this._refTabActions[index] = elem, actions: tab.visible === false ? this._actionsShow : this._actionsHide, isTransparent: true, arrowActive: true, onEzAction: (ev) => this.handleActions(ev, tab) }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } })), (this._activeEditText === true && index > 0 && this._activeEditTextIndex === index) &&
-        h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: () => this.cancelEditText() }));
+        h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: (ev) => this.cancelEditText(ev) }));
     })), h("button", { class: "tab-config__forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   static get is() { return "snk-tab-config"; }

package/dist/collection/lib/utils/constants.js

@@ -35,6 +35,9 @@ export const CONFIG_EVENTS = {
   changeConfig: "changeConfig",
   configChanged: "configChanged",
   fieldChanged: "ezChange",
+  dragStartDistance: 40
+};
+export const CONFIG_SORTABLE_EVENTS = {
   dragStart: "sortable:start",
   dragSort: "sortable:sort",
   dragSorted: "sortable:sorted",

package/dist/components/DataFetcher.js

@@ -1,8 +1,23 @@
 import { DataType, ApplicationContext, StringUtils, ErrorException, WarningException, ObjectUtils } from '@sankhyalabs/core';
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
 import { DataUnitTransient } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
 import { P as PrintUtils } from './PrintUtils.js';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
 var browserPonyfill = createCommonjsModule(function (module, exports) {
 var global = typeof self !== 'undefined' ? self : commonjsGlobal;
 var __self__ = (function () {

package/dist/components/constants.js

@@ -32,6 +32,9 @@ const CONFIG_EVENTS = {
   changeConfig: "changeConfig",
   configChanged: "configChanged",
   fieldChanged: "ezChange",
+  dragStartDistance: 40
+};
+const CONFIG_SORTABLE_EVENTS = {
   dragStart: "sortable:start",
   dragSort: "sortable:sort",
   dragSorted: "sortable:sorted",
@@ -87,4 +90,4 @@ var SIMPLE_CRUD_MODE;
   SIMPLE_CRUD_MODE[SIMPLE_CRUD_MODE["IN_MEMORY"] = 1] = "IN_MEMORY";
 })(SIMPLE_CRUD_MODE || (SIMPLE_CRUD_MODE = {}));
 
-export { ACTION_CONFIG as A, CONFIG_EVENTS as C, DEFAULT_TYPE as D, KEY_EVENTS as K, ORDER_VALUES as O, REPORT_LAUNCHER_RESOURCE_ID as R, SIMPLE_CRUD_MODE as S, TAGS_BY_TYPE as T, VIEW_MODE as V, VARS_BY_TYPE as a, TAB_NAMES as b, TYPE_ACTIONS as c };
+export { ACTION_CONFIG as A, CONFIG_EVENTS as C, DEFAULT_TYPE as D, KEY_EVENTS as K, ORDER_VALUES as O, REPORT_LAUNCHER_RESOURCE_ID as R, SIMPLE_CRUD_MODE as S, TAGS_BY_TYPE as T, VIEW_MODE as V, VARS_BY_TYPE as a, CONFIG_SORTABLE_EVENTS as b, TAB_NAMES as c, TYPE_ACTIONS as d };

package/dist/components/snk-form-config2.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as draggable_bundle, d as defineCustomElement$1 } from './snk-tab-config2.js';
+import { a as Sortable, d as defineCustomElement$1 } from './snk-tab-config2.js';
 import { ObjectUtils, ElementIDUtils, ArrayUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
-import { C as CONFIG_EVENTS, b as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
+import { C as CONFIG_EVENTS, b as CONFIG_SORTABLE_EVENTS, c as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
 import { U as UserConfigType } from './form-config-fetcher.js';
 import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
 import { d as defineCustomElement$3 } from './snk-config-options2.js';
@@ -412,15 +412,16 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this._sortableField) {
       this._sortableField.destroy();
     }
-    this._sortableField = new draggable_bundle.Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="field"]'), {
+    this._sortableField = new Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="field"]'), {
       draggable: '[data-draggable-element="field"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableField.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
-    this._sortableField.on(CONFIG_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
-    this._sortableField.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
+    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
   }
   controlStartDraggingGroup(evt) {
     if (this._mouseOnFieldConfig || this._editingTitleGroup) {
@@ -442,14 +443,15 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this._sortableGroup) {
       this._sortableGroup.destroy();
     }
-    this._sortableGroup = new draggable_bundle.Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="group"]'), {
+    this._sortableGroup = new Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="group"]'), {
       draggable: '[data-draggable-element="group"]',
       mirror: {
         constrainDimensions: true
-      }
+      },
+      distance: CONFIG_EVENTS.dragStartDistance
     });
-    this._sortableGroup.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
-    this._sortableGroup.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
   }
   loadUserConfig() {
     if (this.configManager == undefined) {