@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/components/kup-tree/kup-tree.js

@@ -12,10 +12,11 @@ import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
 import { FiltersColumnMenu } from '../../utils/filters/filters-column-menu';
 import { KupGlobalFilterMode, } from '../../utils/filters/filters-declarations';
 import { FiltersTreeItems } from '../../utils/filters/filters-tree-items';
-import { kupDynamicPositionAttribute, KupDynamicPositionPlacement, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
+import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupLanguageGeneric, KupLanguageSearch, KupLanguageTotals, } from '../../utils/kup-language/kup-language-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupPointerEventTypes } from '../../utils/kup-interact/kup-interact-declarations';
 export class KupTree {
   constructor() {
     /*-------------------------------------------------*/
@@ -182,6 +183,8 @@ export class KupTree {
     this.totalMenuCoords = null;
     this.contentRefs = [];
     this.oldWidth = null;
+    this.hold = false;
+    this.interactableTouch = [];
   }
   initWithPersistedState() {
     if (this.store && this.stateId) {
@@ -341,16 +344,6 @@ export class KupTree {
       this.columnMenuCard.layoutNumber = 12;
       this.columnMenuCard.sizeX = 'auto';
       this.columnMenuCard.sizeY = 'auto';
-      this.columnMenuCard.tabIndex = -1;
-      this.columnMenuCard.onblur = () => {
-        if (this.kupManager.utilities.lastPointerDownPath.includes(this.columnMenuCard)) {
-          this.columnMenuCard.focus();
-        }
-        else {
-          this.closeColumnMenu();
-        }
-      };
-      this.columnMenuCard.onclick = (e) => e.stopPropagation();
       this.columnMenuCard.addEventListener('kup-card-click', (e) => {
         this.kupTreeColumnMenu.emit({
           comp: this,
@@ -880,7 +873,7 @@ export class KupTree {
       };
       icon = h("span", { style: iconStyle, class: "kup-icon obj-icon" });
     }
-    const _hasTooltip = this.kupManager.objects.hasTooltip(cell.obj);
+    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(cell.obj);
     let title = undefined;
     if (_hasTooltip) {
       classObj['is-obj'] = true;
@@ -1311,7 +1304,7 @@ export class KupTree {
         }));
       }
     }
-    const _hasTooltip = this.kupManager.objects.hasTooltip(treeNodeData.obj);
+    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     let title = undefined;
     if (_hasTooltip && this.kupManager.debug.isDebug()) {
       title =
@@ -1340,7 +1333,7 @@ export class KupTree {
           'mdc-ripple-surface': this.ripple &&
             !this.showColumns &&
             !treeNodeData.disabled,
-          'is-obj': this.kupManager.objects.hasTooltip(treeNodeData.obj),
+          'is-obj': !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj),
         }, style: treeNodeData.style || null, title: title, onDblClick: () => {
           this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
         } }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip)), this.asAccordion && !treeNodeDepth
@@ -1480,7 +1473,7 @@ export class KupTree {
             separator: true,
           });
         }
-        totalMenu = (h("kup-list", { class: `kup-menu total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, onBlur: () => this.closeTotalMenu(), "onkup-list-click": (event) => this.onTotalsChange(event, column), tabindex: 0 }));
+        totalMenu = (h("kup-list", { class: `total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, "onkup-list-click": (event) => this.onTotalsChange(event, column) }));
       }
       let value;
       if (menuLabel === TotalLabel.COUNT ||
@@ -1499,14 +1492,52 @@ export class KupTree {
         nodesCell,
         footerCells)));
   }
+  didLoadInteractables() {
+    this.interactableTouch.push(this.treeWrapperRef);
+    const tapCb = (e) => {
+      if (this.hold) {
+        this.hold = false;
+        return;
+      }
+      switch (e.button) {
+        // right click
+        case 2:
+          this.kupTreeContextMenu.emit({
+            comp: this,
+            id: this.rootElement.id,
+            details: this.contextMenuHandler(e),
+          });
+          break;
+      }
+    };
+    const holdCb = (e) => {
+      if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+        this.hold = true;
+        this.kupTreeContextMenu.emit({
+          comp: this,
+          id: this.rootElement.id,
+          details: this.contextMenuHandler(e),
+        });
+      }
+    };
+    this.kupManager.interact.on(this.treeWrapperRef, KupPointerEventTypes.TAP, tapCb);
+    this.kupManager.interact.on(this.treeWrapperRef, KupPointerEventTypes.HOLD, holdCb);
+  }
   totalMenuPosition() {
     if (this.rootElement.shadowRoot) {
-      let menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
+      const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
       if (menu) {
-        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords, 0, KupDynamicPositionPlacement.TOP_RIGHT);
+        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords);
+        this.kupManager.utilities.pointerDownCallbacks.add({
+          cb: () => {
+            this.closeTotalMenu();
+            this.kupManager.dynamicPosition.stop(menu);
+          },
+          onlyOnce: true,
+          el: menu,
+        });
         this.kupManager.dynamicPosition.start(menu);
-        menu.classList.add('visible');
-        setTimeout(() => menu.focus(), 0);
+        menu.menuVisible = true;
       }
     }
   }
@@ -1587,6 +1618,7 @@ export class KupTree {
         this.hdlTreeNodeClick(null, tn, this.selectedNodeString, true);
       }
     }
+    this.didLoadInteractables();
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
     this.kupManager.resize.observe(this.rootElement);
     this.kupManager.debug.logLoad(this, true);
@@ -1665,11 +1697,9 @@ export class KupTree {
         h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
             el) },
           filterField,
-          h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => this.kupTreeContextMenu.emit({
-              comp: this,
-              id: this.rootElement.id,
-              details: this.contextMenuHandler(e),
-            }) },
+          h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
+              e.preventDefault();
+            } },
             h("thead", { class: {
                 'header--is-visible': visibleHeader,
               } },
@@ -1718,8 +1748,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When enabled, the first level of depth will give an accordion look to nodes."
       },
@@ -1777,11 +1807,11 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -1852,8 +1882,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "useDynamicExpansion",
-            "name": "see"
+            "name": "see",
+            "text": "useDynamicExpansion"
           }],
         "text": "Function that gets invoked when a new set of nodes must be loaded as children of a node.\n\nWhen useDynamicExpansion is set, the tree component will have two different behaviors depending on the value of this prop.\n1 - If this prop is set to null, no callback to download data is available:\n   the component will emit an event requiring the parent to load the children of the given node.\n2 - If this prop is set to have a callback, then the component will automatically make requests to load children of\n   a given node. After the load has been completed, a different event will be fired to alert the parent of the change."
       },
@@ -1912,8 +1942,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupTreeExpansionMode.DROPDOWN",
-            "name": "default"
+            "name": "default",
+            "text": "KupTreeExpansionMode.DROPDOWN"
           }],
         "text": "Behavior of nodes' expansion: it can be chosen between expanding a node by clicking on the dropdown icon, or by clicking on the whole node."
       },
@@ -2013,8 +2043,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false;",
-            "name": "default"
+            "name": "default",
+            "text": "false;"
           }],
         "text": "Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells.\nIt works only on cells of the main column."
       },
@@ -2052,8 +2082,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When enabled displays Material's ripple effect on nodes (only when no columns are displayed)."
       },
@@ -2166,8 +2196,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "showColumns",
-            "name": "see"
+            "name": "see",
+            "text": "showColumns"
           }],
         "text": "Flag: shows the header of the tree when the tree is displayed as a table."
       },
@@ -2243,8 +2273,8 @@ export class KupTree {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "dynamicExpansionCallback",
-            "name": "see"
+            "name": "see",
+            "text": "dynamicExpansionCallback"
           }],
         "text": "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the\ntree have been passed inside the data property.\n\nTherefore, when expanding a node, the tree must emit an event (or run a given callback)\nand wait for the child nodes to be downloaded from the server.\n\nFor more information:"
       },
@@ -2378,32 +2408,32 @@ export class KupTree {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "kup-tree-nodeexpand",
-            "name": "event"
+            "name": "event",
+            "text": "kup-tree-nodeexpand"
           }, {
-            "text": "{object}",
-            "name": "type"
+            "name": "type",
+            "text": "{object}"
           }, {
-            "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop.",
-            "name": "property"
+            "name": "property",
+            "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop."
           }, {
-            "text": "{TreeNode} treeNode - Reference to the TreeNode data object which is being expanded (passed through the data prop).",
-            "name": "property"
+            "name": "property",
+            "text": "{TreeNode} treeNode - Reference to the TreeNode data object which is being expanded (passed through the data prop)."
           }, {
-            "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode.",
-            "name": "property"
+            "name": "property",
+            "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode."
           }, {
-            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\nrequires the parent component to add TreeNode children to the given TreeNode.",
-            "name": "property"
+            "name": "property",
+            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\nrequires the parent component to add TreeNode children to the given TreeNode."
           }, {
-            "text": "useDynamicExpansion *",
-            "name": "see"
+            "name": "see",
+            "text": "useDynamicExpansion *"
           }, {
-            "text": "dynamicExpansionCallback *",
-            "name": "see"
+            "name": "see",
+            "text": "dynamicExpansionCallback *"
           }, {
-            "text": "1.0.0",
-            "name": "since"
+            "name": "since",
+            "text": "1.0.0"
           }],
         "text": "Fired when a node expansion ion has been triggered.\nContains additional data when the tree is using the dynamicExpansion feature."
       },
@@ -2648,8 +2678,8 @@ export class KupTree {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -2680,8 +2710,8 @@ export class KupTree {
         "signature": "(column: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "column - Name of the column.",
-                "name": "param"
+                "name": "param",
+                "text": "column - Name of the column."
               }],
             "text": "- Name of the column."
           }],
@@ -2748,8 +2778,8 @@ export class KupTree {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],

package/dist/collection/f-components/f-button/f-button.js

@@ -5,7 +5,7 @@ const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-export const FButton = (props) => {
+export const FButton = (props, children) => {
   if (!props.styling) {
     props.styling = FButtonStyling.RAISED;
   }
@@ -16,7 +16,9 @@ export const FButton = (props) => {
     (props.styling.toLowerCase() === FButtonStyling.RAISED &&
       props.icon &&
       (props.label === null || props.label === undefined)));
-  return (h("div", Object.assign({ class: `f-button--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), isIconButton ? renderIconButton(props) : renderButton(props)));
+  return (h("div", Object.assign({ class: `f-button--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    isIconButton ? renderIconButton(props) : renderButton(props),
+    children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */

package/dist/collection/f-components/f-image/f-image.js

@@ -55,8 +55,7 @@ function createIcon(props) {
       : `var(${KupThemeColorValues.ICON})`,
   };
   if (props.resource.indexOf('--kup') > -1) {
-    let themeIcon = props.resource.replace('--kup-', '');
-    themeIcon = themeIcon.replace('-icon', '');
+    let themeIcon = props.resource.replace('--', '');
     classObj['kup-icon'] = true;
     classObj[themeIcon] = true;
   }

package/dist/collection/f-components/f-text-field/f-text-field.js

@@ -3,12 +3,14 @@ import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-export const FTextField = (props) => {
-  return (h("div", Object.assign({ class: `f-text-field--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
-    setContent(props),
-    setHelper(props),
-    h("label", null, props.label),
-  ])) : ([setContent(props), setHelper(props)])));
+export const FTextField = (props, children) => {
+  return (h("div", Object.assign({ class: `f-text-field--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
+      setContent(props),
+      setHelper(props),
+      h("label", null, props.label),
+    ])) : ([setContent(props), setHelper(props)]),
+    children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -1,4 +1,4 @@
-import { KupDynamicPositionPlacement } from '../kup-dynamic-position/kup-dynamic-position-declarations';
+import { KupDynamicPositionPlacement, } from '../kup-dynamic-position/kup-dynamic-position-declarations';
 import { treeMainColumnName } from '../../components/kup-tree/kup-tree-declarations';
 import { unsetTooltip } from '../helpers';
 import { FiltersColumnMenu } from '../filters/filters-column-menu';
@@ -39,6 +39,7 @@ export class KupColumnMenu {
    */
   close(card) {
     card.menuVisible = false;
+    dom.ketchup.dynamicPosition.stop(card);
   }
   /**
    * Function called to reposition the column menu card to the appropriate column.
@@ -56,6 +57,13 @@ export class KupColumnMenu {
         else {
           dom.ketchup.dynamicPosition.register(card, wrapper, 0, KupDynamicPositionPlacement.BOTTOM, true);
         }
+        dom.ketchup.utilities.pointerDownCallbacks.add({
+          cb: () => {
+            this.close(card);
+          },
+          onlyOnce: true,
+          el: card,
+        });
         dom.ketchup.dynamicPosition.start(card);
         card.menuVisible = true;
       }
@@ -263,7 +271,7 @@ export class KupColumnMenu {
   prepSwitch(comp, column) {
     const props = [];
     if (!FiltersColumnMenu.isTree(comp)) {
-      if (!dom.ketchup.objects.isEmptySmeupObject(column.obj)) {
+      if (!dom.ketchup.objects.isEmptyKupObj(column.obj)) {
         props.push({
           'data-storage': {
             columnName: column.name,
@@ -538,7 +546,7 @@ export class KupColumnMenu {
   eventHandlers(cardEvent, comp) {
     const card = cardEvent.detail.card
       ? cardEvent.detail.card
-      : cardEvent.detail.comp;
+      : cardEvent.detail.comp.rootElement;
     const compEvent = cardEvent.detail.event;
     const compID = compEvent.detail.id;
     const subcomp = compEvent.target;

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

@@ -1,17 +1,15 @@
-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';
@@ -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();
       }
@@ -200,20 +198,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 +275,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 +350,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 +376,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 +400,7 @@ export class KupDebug {
           case 'kup-debug-print':
             this.widgetClear();
             this.widgetPrint();
-            __classPrivateFieldGet(this, _debugWidget).refresh();
+            __classPrivateFieldGet(this, _KupDebug_debugWidget, "f").refresh();
             break;
         }
         break;
@@ -560,10 +558,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 +676,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;

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