@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/utils/kup-debug/kup-debug.js

@@ -1,23 +1,21 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _debugWidget;
+var _KupDebug_debugWidget;
 import { KupCardFamily } from '../../components/kup-card/kup-card-declarations';
 import { KupLanguageDebug } from '../kup-language/kup-language-declarations';
 import { KupDebugCategory, KupDebugLogColor, } from './kup-debug-declarations';
 const dom = document.documentElement;
 /**
- * Debugging suite, used to log messages and statuses from the Ketch.UP components.
+ * Debugging suite, used to log messages and statuses from the Ketchup components.
  * @module KupDebug
  */
 export class KupDebug {
@@ -28,7 +26,7 @@ export class KupDebug {
    * @param {number} logLimit - Maximum amount of logs stored, when they exceed the number specified in logLimit the cache will be automatically cleared.
    */
   constructor(active, autoprint, logLimit) {
-    _debugWidget.set(this, void 0);
+    _KupDebug_debugWidget.set(this, void 0);
     this.active = active ? true : false;
     this.autoPrint = autoprint ? true : false;
     this.container = document.createElement('div');
@@ -36,9 +34,9 @@ export class KupDebug {
     document.body.appendChild(this.container);
     this.logLimit = logLimit ? logLimit : 250;
     this.logs = [];
-    __classPrivateFieldSet(this, _debugWidget, null);
+    __classPrivateFieldSet(this, _KupDebug_debugWidget, null, "f");
     document.addEventListener('kup-language-change', () => {
-      if (this.active && __classPrivateFieldGet(this, _debugWidget)) {
+      if (this.active && __classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
         this.hideWidget();
         this.showWidget();
       }
@@ -82,6 +80,15 @@ export class KupDebug {
         selected: themes[index] === dom.ketchup.theme.name ? true : false,
       });
     }
+    const locales = dom.ketchup.dates.getLocales();
+    const localesListData = [];
+    for (let index = 0; index < locales.length; index++) {
+      localesListData.push({
+        text: locales[index],
+        value: locales[index],
+        selected: locales[index] === dom.ketchup.dates.locale ? true : false,
+      });
+    }
     debugWidget.data = {
       button: [
         {
@@ -179,6 +186,24 @@ export class KupDebug {
           initialValue: dom.ketchup.language.name,
           isSelect: true,
         },
+        {
+          className: 'kup-full-height',
+          data: {
+            'kup-list': {
+              data: localesListData,
+              id: 'kup-debug-locale-changer-list',
+            },
+            'kup-text-field': {
+              className: 'kup-full-height',
+              emitSubmitEventOnEnter: false,
+              inputType: 'text',
+              label: dom.ketchup.language.translate(KupLanguageDebug.LOCALE_CHANGER),
+            },
+          },
+          id: 'kup-debug-locale-changer',
+          initialValue: dom.ketchup.dates.locale,
+          isSelect: true,
+        },
       ],
       textfield: [
         {
@@ -192,7 +217,7 @@ export class KupDebug {
       ],
     };
     debugWidget.customStyle =
-      '#kup-debug-log-limit {width: 120px;} #kup-debug-theme-changer {width: 190px;} #kup-debug-language-changer {width: 190px;}';
+      '#kup-debug-log-limit {width: 120px;} #kup-debug-theme-changer {width: 190px;} #kup-debug-language-changer {width: 190px;} #kup-debug-locale-changer {width: 190px;}';
     debugWidget.id = 'kup-debug-widget';
     debugWidget.layoutFamily = KupCardFamily.DIALOG;
     debugWidget.layoutNumber = 3;
@@ -200,20 +225,20 @@ export class KupDebug {
     debugWidget.sizeY = 'auto';
     debugWidget.addEventListener('kup-card-event', (e) => this.handleEvents(e));
     this.container.append(debugWidget);
-    __classPrivateFieldSet(this, _debugWidget, debugWidget);
+    __classPrivateFieldSet(this, _KupDebug_debugWidget, debugWidget, "f");
   }
   /**
    * Closes the debug widget.
    */
   hideWidget() {
-    __classPrivateFieldGet(this, _debugWidget).remove();
-    __classPrivateFieldSet(this, _debugWidget, null);
+    __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").remove();
+    __classPrivateFieldSet(this, _KupDebug_debugWidget, null, "f");
   }
   /**
    * Clears all the printed logs inside the debug widget.
    */
   widgetClear() {
-    const children = Array.prototype.slice.call(__classPrivateFieldGet(this, _debugWidget).children, 0);
+    const children = Array.prototype.slice.call(__classPrivateFieldGet(this, _KupDebug_debugWidget, "f").children, 0);
     for (let index = 0; index < children.length; index++) {
       children[index].remove();
     }
@@ -277,7 +302,7 @@ export class KupDebug {
     }
     slots.reverse();
     for (let index = 0; index < slots.length; index++) {
-      __classPrivateFieldGet(this, _debugWidget).append(slots[index]);
+      __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").append(slots[index]);
     }
   }
   /**
@@ -352,13 +377,13 @@ export class KupDebug {
     }
     if (this.active) {
       document.dispatchEvent(new CustomEvent('kup-debug-active'));
-      if (!__classPrivateFieldGet(this, _debugWidget)) {
+      if (!__classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
         this.showWidget();
       }
     }
     else {
       document.dispatchEvent(new CustomEvent('kup-debug-inactive'));
-      if (__classPrivateFieldGet(this, _debugWidget)) {
+      if (__classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
         this.hideWidget();
       }
     }
@@ -378,7 +403,7 @@ export class KupDebug {
             break;
           case 'kup-debug-clear':
             this.widgetClear();
-            __classPrivateFieldGet(this, _debugWidget).refresh();
+            __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").refresh();
             break;
           case 'kup-debug-dl-props':
             this.getProps().then((res) => {
@@ -402,7 +427,7 @@ export class KupDebug {
           case 'kup-debug-print':
             this.widgetClear();
             this.widgetPrint();
-            __classPrivateFieldGet(this, _debugWidget).refresh();
+            __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").refresh();
             break;
         }
         break;
@@ -411,6 +436,9 @@ export class KupDebug {
           case 'kup-debug-language-changer':
             dom.ketchup.language.set(compEvent.detail.value);
             break;
+          case 'kup-debug-locale-changer':
+            dom.ketchup.dates.setLocale(compEvent.detail.value);
+            break;
           case 'kup-debug-theme-changer':
             dom.ketchup.theme.set(compEvent.detail.value);
             break;
@@ -560,10 +588,10 @@ export class KupDebug {
         this.dump();
       }
       this.logs.push(log);
-      if (this.autoPrint && __classPrivateFieldGet(this, _debugWidget)) {
+      if (this.autoPrint && __classPrivateFieldGet(this, _KupDebug_debugWidget, "f")) {
         this.widgetClear();
         this.widgetPrint();
-        __classPrivateFieldGet(this, _debugWidget).refresh();
+        __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").refresh();
       }
     }
     switch (category) {
@@ -678,4 +706,4 @@ export class KupDebug {
     }
   }
 }
-_debugWidget = new WeakMap();
+_KupDebug_debugWidget = new WeakMap();

package/dist/collection/utils/kup-dynamic-position/kup-dynamic-position.js

@@ -33,9 +33,7 @@ export class KupDynamicPosition {
    */
   register(el, anchorEl, margin, placement, detach) {
     if (this.isRegistered(el)) {
-      if (this.anchorIsHTMLElement(anchorEl)) {
-        this.changeAnchor(el, anchorEl);
-      }
+      this.changeAnchor(el, anchorEl);
       return;
     }
     el.setAttribute(kupDynamicPositionAttribute, '');
@@ -49,7 +47,7 @@ export class KupDynamicPosition {
     else {
       el.style.position = 'fixed';
     }
-    el.style.zIndex = '1000';
+    el.style.zIndex = `calc(var(--kup-navbar-zindex) - 1)`;
     el.kupDynamicPosition = {
       anchor: anchorEl,
       detach: detach ? true : false,
@@ -74,7 +72,7 @@ export class KupDynamicPosition {
   /**
    * Changes the anchor point of the given element.
    * @param {KupDynamicPositionElement} elements - Dynamically positioned element previously registered.
-   * @param {HTMLElement} anchorEl - New anchor point.
+   * @param {KupDynamicPositionAnchor} anchorEl - New anchor point.
    */
   changeAnchor(el, anchorEl) {
     el.kupDynamicPosition.anchor = anchorEl;
@@ -181,7 +179,7 @@ export class KupDynamicPosition {
       el.style.top = `${bottom + el.kupDynamicPosition.margin}px`;
     }
     else {
-      if (window.innerHeight - bottom < offsetH) {
+      if (window.innerHeight - rect.bottom < offsetH) {
         el.style.bottom = `${window.innerHeight - top + el.kupDynamicPosition.margin}px`;
       }
       else {
@@ -210,7 +208,7 @@ export class KupDynamicPosition {
       el.style.right = `${window.innerWidth - scrollbarWidth - right}px`;
     }
     else {
-      if (window.innerWidth - left < offsetW) {
+      if (window.innerWidth - rect.left < offsetW) {
         let scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
         if (scrollbarWidth > 30) {
           scrollbarWidth = 0;

package/dist/collection/utils/kup-interact/kup-interact-declarations.js

@@ -0,0 +1,48 @@
+/**
+ * HTML Attribute attached to dialogs.
+ * Referenced by kup-theme.css
+ */
+export const kupDialogAttribute = 'kup-dialog';
+/**
+ * CSS class attached to resizable dialogs.
+ * Referenced by kup-theme.css
+ */
+export const kupDialogResizableClass = 'kup-resizable';
+/**
+ * Drag & drop variables.
+ */
+export const kupDropEvent = 'kup-drop';
+export const kupDragActiveAttr = 'kup-drag-active';
+export const kupDragOverAttr = 'kup-drag-over';
+export const kupDraggableAttr = 'kup-draggable';
+export const kupDraggableCellAttr = 'kup-draggable-cell';
+export const kupDraggableColumnAttr = 'kup-draggable-column';
+export const kupDraggableRowAttr = 'kup-draggable-row';
+/**
+ * Available effects fro dragging.
+ */
+export var KupDragEffect;
+(function (KupDragEffect) {
+  KupDragEffect["BADGE"] = "badge";
+  KupDragEffect["CLONE"] = "clone";
+  KupDragEffect["MOVE"] = "move";
+  KupDragEffect["NONE"] = "none";
+})(KupDragEffect || (KupDragEffect = {}));
+/**
+ * Supported types of pointer events.
+ */
+export var KupPointerEventTypes;
+(function (KupPointerEventTypes) {
+  KupPointerEventTypes["DOUBLETAP"] = "doubletap";
+  KupPointerEventTypes["HOLD"] = "hold";
+  KupPointerEventTypes["TAP"] = "tap";
+})(KupPointerEventTypes || (KupPointerEventTypes = {}));
+/**
+ * Supported types of drop event.
+ */
+export var KupDropEventTypes;
+(function (KupDropEventTypes) {
+  KupDropEventTypes["BOX"] = "text/kup-box-drag";
+  KupDropEventTypes["DATATABLE"] = "text/kup-data-table-row-drag";
+  KupDropEventTypes["MAGICBOX"] = "text/kup-magic-box-drag";
+})(KupDropEventTypes || (KupDropEventTypes = {}));

package/dist/collection/utils/kup-interact/kup-interact.js

@@ -0,0 +1,379 @@
+import interact from 'interactjs';
+import { kupDialogAttribute, kupDialogResizableClass, KupDragEffect, kupDraggableAttr, kupDraggableCellAttr, kupDraggableColumnAttr, kupDraggableRowAttr, kupDragOverAttr, kupDropEvent, } from './kup-interact-declarations';
+const dom = document.documentElement;
+/**
+ * This class handles elements as dialogs, making them resizable and movable.
+ * @module KupInteract
+ */
+export class KupInteract {
+  /**
+   * Initializes KupInteract.
+   * @param {number} zIndex - The starting z-index assigned to dialogs.
+   * @param {RectResolvable<[number, number, Interaction<keyof ActionMap>]>} restrictContainer - The container setting the restriction's boundary.
+   */
+  constructor(zIndex, restrictContainer) {
+    interact.dynamicDrop(true);
+    this.container = document.createElement('div');
+    this.container.setAttribute('kup-interact', '');
+    document.body.appendChild(this.container);
+    this.managedElements = new Set();
+    this.zIndex = zIndex ? zIndex : 200;
+    this.restrictContainer = restrictContainer ? restrictContainer : null;
+  }
+  /**
+   * Sets up a new draggable element.
+   * @param {HTMLElement} el - The draggable element.
+   * @param {Partial<DraggableOptions>} options - Options of the draggable element.
+   * @param {KupDragEventData} eventData - Property used to transfer data for the drop event. The callback is used to return information of the starting item - such as cell, column and row info.
+   * @param {KupDragEffect} effect - Visual effect of the drag action.
+   * @param {KupDragCallbacks} callbacks - Additional callbacks to invoke.
+   * @see https://interactjs.io/docs/action-options/ For more options
+   */
+  draggable(el, options, eventData, effect, callbacks) {
+    el.style.touchAction = 'none';
+    el.style.userSelect = 'none';
+    if (!options) {
+      options = {};
+    }
+    if (!effect) {
+      effect = KupDragEffect.MOVE;
+    }
+    options.listeners = {
+      move(e) {
+        if (callbacks && callbacks.move) {
+          callbacks.move(e);
+        }
+        if (effect.toLowerCase() !== KupDragEffect.NONE) {
+          const draggable = e.target;
+          const ghostImage = draggable.kupDragDrop &&
+            draggable.kupDragDrop.ghostImage
+            ? draggable.kupDragDrop.ghostImage
+            : e.target;
+          const oldTransform = ghostImage.style.transform;
+          let x = parseFloat(ghostImage.getAttribute('data-x')) || 0;
+          let y = parseFloat(ghostImage.getAttribute('data-y')) || 0;
+          x = x + e.dx;
+          y = y + e.dy;
+          ghostImage.style.transform = `translate(${x}px, ${y}px)`;
+          if (dom.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
+            ghostImage.setAttribute('data-x', x.toString());
+            ghostImage.setAttribute('data-y', y.toString());
+          }
+        }
+      },
+      start(e) {
+        if (callbacks && callbacks.start) {
+          callbacks.start(e);
+        }
+        const draggable = e.target;
+        const draggableDetails = eventData && eventData.callback
+          ? eventData.callback(e)
+          : {};
+        draggable.kupDragDrop = draggableDetails;
+        draggable.setAttribute(kupDraggableAttr, '');
+        if (draggableDetails.cell) {
+          draggable.setAttribute(kupDraggableCellAttr, '');
+        }
+        if (draggableDetails.column) {
+          draggable.setAttribute(kupDraggableColumnAttr, '');
+        }
+        if (draggableDetails.row) {
+          draggable.setAttribute(kupDraggableRowAttr, '');
+        }
+        let ghostImage = null;
+        switch (effect) {
+          case KupDragEffect.BADGE:
+            ghostImage = document.createElement('kup-badge');
+            if (draggable.kupDragDrop.multiple) {
+              ghostImage.text = draggable.kupDragDrop.selectedRows
+                ? draggable.kupDragDrop.selectedRows.length.toString()
+                : '0';
+            }
+            else {
+              ghostImage.text = '1';
+            }
+            ghostImage.style.left =
+              e.clientX - ghostImage.clientWidth / 2 + 'px';
+            ghostImage.style.pointerEvents = 'none';
+            ghostImage.style.position = 'fixed';
+            ghostImage.style.top =
+              e.clientY - ghostImage.clientHeight / 2 + 'px';
+            ghostImage.style.transition = 'none';
+            ghostImage.style.zIndex =
+              'calc(var(--kup-navbar-zindex) + 1)';
+            dom.ketchup.interact.container.appendChild(ghostImage);
+            draggable.kupDragDrop.ghostImage = ghostImage;
+            break;
+          case KupDragEffect.CLONE:
+            ghostImage = draggable.cloneNode(true);
+            setComputedStyle(draggable, ghostImage);
+            ghostImage.style.cursor = 'grabbing';
+            ghostImage.style.height = draggable.clientHeight + 'px';
+            ghostImage.style.left =
+              e.clientX - draggable.clientWidth / 2 + 'px';
+            ghostImage.style.opacity = '0.75';
+            ghostImage.style.position = 'fixed';
+            ghostImage.style.top =
+              e.clientY - draggable.clientHeight / 2 + 'px';
+            ghostImage.style.width = draggable.clientWidth + 'px';
+            ghostImage.style.zIndex =
+              'calc(var(--kup-navbar-zindex) + 1)';
+            dom.ketchup.interact.container.appendChild(ghostImage);
+            draggable.kupDragDrop.ghostImage = ghostImage;
+            break;
+        }
+      },
+      end(e) {
+        if (callbacks && callbacks.end) {
+          callbacks.end(e);
+        }
+        const draggable = e.target;
+        const ghostImage = draggable.kupDragDrop
+          ? draggable.kupDragDrop.ghostImage
+          : null;
+        if (ghostImage) {
+          ghostImage.setAttribute('style', '');
+          ghostImage.remove();
+        }
+        draggable.removeAttribute(kupDraggableAttr);
+        draggable.removeAttribute(kupDraggableCellAttr);
+        draggable.removeAttribute(kupDraggableColumnAttr);
+        draggable.removeAttribute(kupDraggableRowAttr);
+      },
+    };
+    interact(el).draggable(options);
+    this.managedElements.add(el);
+    function setComputedStyle(draggable, ghostImage) {
+      recursive(draggable, ghostImage);
+      function recursive(source, target) {
+        const styles = getComputedStyle(source);
+        for (const key in styles) {
+          if (Object.prototype.hasOwnProperty.call(styles, key)) {
+            const s = styles[key];
+            try {
+              target.style[s] = styles[s];
+            }
+            catch (error) { }
+          }
+        }
+        for (let index = 0; index < source.children.length; index++) {
+          const sourceChild = source.children[index];
+          const targetChild = target.children[index];
+          recursive(sourceChild, targetChild);
+        }
+      }
+    }
+  }
+  /**
+   * Sets up a new dropzone.
+   * @param {HTMLElement} el - The dropzone element.
+   * @param {DropzoneOptions} options - Options of the dropzone.
+   * @param {KupDropEventData} eventData - Argument used to transfer data for the drop event. The callback is used to return information of the receiving item - such as cell, column and row info.
+   * @param {KupDropCallbacks} callbacks - Additional callbacks to invoke.
+   * @see https://interactjs.io/docs/action-options/ For more options
+   */
+  dropzone(el, options, eventData, callbacks) {
+    if (!options) {
+      options = {};
+    }
+    options.listeners = {
+      drop(e) {
+        if (callbacks && callbacks.drop) {
+          callbacks.drop(e);
+        }
+        if (eventData) {
+          const draggableDetails = e.relatedTarget.kupDragDrop ||
+            {};
+          const dropzoneDetails = eventData.callback
+            ? eventData.callback()
+            : {};
+          const ketchupDropEvent = new CustomEvent(kupDropEvent, {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              dataType: eventData.type,
+              sourceElement: {
+                id: draggableDetails.id
+                  ? draggableDetails.id
+                  : '',
+                row: draggableDetails.row
+                  ? draggableDetails.row
+                  : null,
+                selectedRows: draggableDetails.selectedRows
+                  ? draggableDetails.selectedRows
+                  : null,
+                cell: draggableDetails.cell
+                  ? draggableDetails.cell
+                  : null,
+                column: draggableDetails.column
+                  ? draggableDetails.column
+                  : null,
+              },
+              targetElement: {
+                id: dropzoneDetails.id
+                  ? dropzoneDetails.id
+                  : '',
+                row: dropzoneDetails.row
+                  ? dropzoneDetails.row
+                  : null,
+                cell: dropzoneDetails.cell
+                  ? dropzoneDetails.cell
+                  : null,
+                column: dropzoneDetails.column
+                  ? dropzoneDetails.column
+                  : null,
+              },
+            },
+          });
+          e.currentTarget.removeAttribute(kupDragOverAttr);
+          eventData.dispatcher.dispatchEvent(ketchupDropEvent);
+        }
+        e.currentTarget.removeAttribute(kupDragOverAttr);
+      },
+      enter(e) {
+        if (callbacks && callbacks.enter) {
+          callbacks.enter(e);
+        }
+        e.currentTarget.setAttribute(kupDragOverAttr, '');
+      },
+      leave(e) {
+        if (callbacks && callbacks.leave) {
+          callbacks.leave(e);
+        }
+        e.currentTarget.removeAttribute(kupDragOverAttr);
+      },
+    };
+    interact(el).dropzone(options);
+    this.managedElements.add(el);
+  }
+  /**
+   * Sets up a new resizable element.
+   * @param {HTMLElement} el - The resizable element.
+   * @param {Partial<ResizableOptions>} options - Options of the resize action.
+   * @param {KupResizeCallbacks} callbacks - Additional callbacks to invoke.
+   * @param {boolean} moveOnResize - When true, the element will be moved when resizing in order to keep its position.
+   * @see https://interactjs.io/docs/action-options/ For more options
+   */
+  resizable(el, options, callbacks, moveOnResize) {
+    if (!options) {
+      options = {};
+    }
+    options.listeners = {
+      move(e) {
+        if (callbacks && callbacks.move) {
+          callbacks.move(e);
+        }
+        if (moveOnResize) {
+          const el = e.target;
+          const oldTransform = e.target.style.transform;
+          let x = parseFloat(el.getAttribute('data-x')) || 0;
+          let y = parseFloat(el.getAttribute('data-y')) || 0;
+          el.style.width = e.rect.width + 'px';
+          el.style.height = e.rect.height + 'px';
+          x += e.deltaRect.left;
+          y += e.deltaRect.top;
+          el.style.transform = 'translate(' + x + 'px,' + y + 'px)';
+          if (dom.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
+            el.setAttribute('data-x', x.toString());
+            el.setAttribute('data-y', y.toString());
+          }
+        }
+      },
+    };
+    interact(el).resizable(options);
+    this.managedElements.add(el);
+  }
+  /**
+   * Adds a new interact.js event listener to the given argument.
+   * @param {HTMLElement} el - The element on which the event listener will be added.
+   * @param {KupPointerEventTypes} event - Supported events.
+   * @param {KupResizeCallbacks} callback - Callback to invoke when the event fires.
+   */
+  on(el, event, callback) {
+    interact(el).on(event, callback);
+    this.managedElements.add(el);
+  }
+  /**
+   * This method checks whether the element is breaking the viewport boundaries.
+   * @param {HTMLElement} el - Element to check.
+   * @param {string} oldTransform - Previously set transform, used to rollback in case element breaks viewport boundaries.
+   * @param {Point} delta - X and Y delta values of the last movement.
+   */
+  isInViewport(el, oldTransform, delta) {
+    const style = window.getComputedStyle(el);
+    const isFixed = !!(style.position === 'fixed');
+    const rect = el.getBoundingClientRect();
+    if (rect.left < 0 ||
+      rect.top < 0 ||
+      (isFixed && rect.right > window.innerWidth && delta.x >= 0) ||
+      (isFixed && rect.bottom > window.innerHeight && delta.y >= 0)) {
+      el.style.transform = oldTransform;
+      return false;
+    }
+    return true;
+  }
+  /**
+   * This method treats the given element as a dialog, by activating moving-on-drag and, optionally, its resize.
+   * @param {HTMLElement} el - Dialog element.
+   * @param {HTMLElement} handleEl - Element that must be dragged in order to trigger movement. When not provided, dragging anywhere on "el" will move it.
+   * @param {boolean} unresizable - When true, the dialog can't be resized.
+   * @param {RectResolvable<[number, number, Interaction<keyof ActionMap>]>} restrictContainer - When present, it will set the constraint of "el": it can't be moved outside this container.
+   */
+  dialogify(el, handleEl, unresizable, restrictContainer) {
+    el.setAttribute(kupDialogAttribute, '');
+    el.style.zIndex = (this.zIndex++).toString();
+    const callbacks = {
+      start(e) {
+        const el = e.currentTarget;
+        el.style.zIndex = (dom.ketchup.interact.zIndex++).toString();
+      },
+    };
+    this.draggable(el, {
+      allowFrom: handleEl ? handleEl : null,
+      modifiers: [
+        interact.modifiers.restrictRect({
+          restriction: restrictContainer
+            ? restrictContainer
+            : dom.ketchup.interact.restrictContainer,
+          endOnly: true,
+        }),
+      ],
+    }, null, KupDragEffect.MOVE, callbacks);
+    if (!unresizable) {
+      el.classList.add(kupDialogResizableClass);
+      this.resizable(el, {
+        edges: {
+          left: true,
+          right: true,
+          bottom: true,
+          top: false,
+        },
+        modifiers: [
+          interact.modifiers.restrictSize({
+            min: { width: 100, height: 100 },
+          }),
+        ],
+      }, null, true);
+    }
+  }
+  /**
+   * Removes the elements from the MoveOnDrag class watchlist.
+   * @param {HTMLElement[]} elements - Elements to remove.
+   */
+  unregister(elements) {
+    if (this.managedElements) {
+      for (let index = 0; index < elements.length; index++) {
+        this.managedElements.delete(elements[index]);
+        interact(elements[index]).unset();
+      }
+    }
+  }
+  /**
+   * Returns whether an element was previously registered or not.
+   * @param {HTMLElement} el - Element to test.
+   * @returns {boolean} True if the element was registered.
+   */
+  isRegistered(el) {
+    return !this.managedElements ? false : this.managedElements.has(el);
+  }
+}

package/dist/collection/utils/kup-language/kup-language-declarations.js

@@ -43,6 +43,7 @@ export var KupLanguageDebug;
   KupLanguageDebug["DL_PROPS"] = "debugDLProps";
   KupLanguageDebug["DL_PROPS_COMP"] = "debugDLPropsComp";
   KupLanguageDebug["LANGUAGE_CHANGER"] = "debugLanguageChanger";
+  KupLanguageDebug["LOCALE_CHANGER"] = "debugLocaleChanger";
   KupLanguageDebug["LOG_LIMIT"] = "debugLogLimit";
   KupLanguageDebug["MAGIC_BOX"] = "debugMagicBox";
   KupLanguageDebug["OFF"] = "debugOff";
@@ -83,6 +84,7 @@ export var KupLanguageGeneric;
   KupLanguageGeneric["EDITABLE"] = "genericEditable";
   KupLanguageGeneric["EDITABLE_FIELD"] = "genericEditableField";
   KupLanguageGeneric["EMPTY_DATA"] = "genericEmptyData";
+  KupLanguageGeneric["EMPTY_OBJECT"] = "genericEmptyObject";
   KupLanguageGeneric["EXPAND"] = "genericExpand";
   KupLanguageGeneric["EXPERIMENTAL_FEAT"] = "genericExperimentalFeat";
   KupLanguageGeneric["FILTERS"] = "genericFilters";