@3t-transform/threeteeui 1.9.99 → 1.9.101

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js

@@ -8,63 +8,63 @@ export default {
   },
 };
 const Default = ({ border }) => `
-    <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
-      <span slot="before"><tttx-button_1_9_99 design="primary">Before</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99></span>
-      <span slot="center"><tttx-button_1_9_99 design="primary">Center</tttx-button_1_9_99></span>
-      <span slot="after"><tttx-button_1_9_99 design="primary">After</tttx-button_1_9_99></span>
-    </tttx-toolbar_1_9_99>
+    <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+      <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
+      <span slot="center"><tttx-button_1_9_101 design="primary">Center</tttx-button_1_9_101></span>
+      <span slot="after"><tttx-button_1_9_101 design="primary">After</tttx-button_1_9_101></span>
+    </tttx-toolbar_1_9_101>
 `;
 export const DefaultToolbar = Default.bind({});
 DefaultToolbar.args = {
   border: true
 };
 const TallElements = ({ border }) => `
-  <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
-    <span slot="before"><tttx-button_1_9_99 design="primary">Before</tttx-button_1_9_99><div style="position: relative; top: 18px;"><tttx-standalone-input_1_9_99 placeholder="before" label="search" required showerrorbubble="false" inputicon="search" /></div></span>
-    <span slot="center"><div style="position: relative; top: 17px;"><tttx-standalone-input_1_9_99 placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
-    <span slot="after"><div style="position: relative; top: 22px;"><tttx-keyvalue-block_1_9_99 horizontal keyvalues='{"Position":"after"}' /></div></span>
-  </tttx-toolbar_1_9_99>
+  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><div style="position: relative; top: 18px;"><tttx-standalone-input_1_9_101 placeholder="before" label="search" required showerrorbubble="false" inputicon="search" /></div></span>
+    <span slot="center"><div style="position: relative; top: 17px;"><tttx-standalone-input_1_9_101 placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
+    <span slot="after"><div style="position: relative; top: 22px;"><tttx-keyvalue-block_1_9_101 horizontal keyvalues='{"Position":"after"}' /></div></span>
+  </tttx-toolbar_1_9_101>
 `;
 export const TallElementsToolbar = TallElements.bind({});
 TallElementsToolbar.args = {
   border: true
 };
 const WrapElements = ({ border }) => `
-  <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
-    <span slot="before"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_99 design="primary">Button One</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Three</tttx-button_1_9_99></div></span>
-    <span slot="center"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_99 design="primary">Button One</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Three</tttx-button_1_9_99></div></span>
-    <span slot="after"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_99 design="primary">Button One</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Three</tttx-button_1_9_99></div></span>
-  </tttx-toolbar_1_9_99>
+  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+    <span slot="before"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_101 design="primary">Button One</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Three</tttx-button_1_9_101></div></span>
+    <span slot="center"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_101 design="primary">Button One</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Three</tttx-button_1_9_101></div></span>
+    <span slot="after"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_101 design="primary">Button One</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Three</tttx-button_1_9_101></div></span>
+  </tttx-toolbar_1_9_101>
 `;
 export const WrapElementsToolbar = WrapElements.bind({});
 WrapElementsToolbar.args = {
   border: true
 };
 const LeftToolbar = ({ border }) => `
-  <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
-    <span slot="before"><tttx-button_1_9_99 design="primary">Before</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99></span>
-  </tttx-toolbar_1_9_99>
+  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
+  </tttx-toolbar_1_9_101>
 `;
 export const LeftToolbarOnly = LeftToolbar.bind({});
 LeftToolbarOnly.args = {
   border: true
 };
 const CenterToolbar = ({ border }) => `
-  <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
+  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
     <span slot='before'></span>
-    <span slot="center"><tttx-button_1_9_99 design="primary">Before</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99></span>
+    <span slot="center"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
     <span slot='after'></span>
-    </tttx-toolbar_1_9_99>
+    </tttx-toolbar_1_9_101>
 `;
 export const CenterToolbarOnly = CenterToolbar.bind({});
 CenterToolbarOnly.args = {
   border: true
 };
 const TwoColumn = ({ border }) => `
-  <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
-    <span slot="before"><tttx-button_1_9_99 design="primary">Before</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99></span>
-    <span slot='after'><tttx-button_1_9_99 design="primary">After</tttx-button_1_9_99><tttx-button_1_9_99 design="primary">Button Two</tttx-button_1_9_99></span>
-  </tttx-toolbar_1_9_99>
+  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
+    <span slot='after'><tttx-button_1_9_101 design="primary">After</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
+  </tttx-toolbar_1_9_101>
 `;
 export const TwoColumnToolbar = TwoColumn.bind({});
 TwoColumnToolbar.args = {
@@ -87,34 +87,34 @@ const selectOptions = JSON.stringify([
   { value: 'Ronaldo', label: 'Mann' },
 ]);
 const LongItems = ({ border }) => `
-  <tttx-toolbar_1_9_99 border="${border ? 'true' : 'false'}">
+  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
     <span slot="before">
       <div style="width: 350px">
-        <tttx-select-box_1_9_99
+        <tttx-select-box_1_9_101
           id="htmlSelectBox"
           options-data='${selectOptions}'
           placeholder='Select a name'
           label=''
           inline='true'
-        ></tttx-select-box_1_9_99>
+        ></tttx-select-box_1_9_101>
       </div>
-      <tttx-button_1_9_99>
+      <tttx-button_1_9_101>
         This is a very long button
-      </tttx-button_1_9_99>
-      <tttx-button_1_9_99>
+      </tttx-button_1_9_101>
+      <tttx-button_1_9_101>
         This is a very long button
-      </tttx-button_1_9_99>
-      <tttx-button_1_9_99>
+      </tttx-button_1_9_101>
+      <tttx-button_1_9_101>
         This is a very long button
-      </tttx-button_1_9_99>
+      </tttx-button_1_9_101>
     </span>
     <span slot="center">
-      <tttx-button_1_9_99>
+      <tttx-button_1_9_101>
         This is a very long button in the middle
-      </tttx-button_1_9_99>
+      </tttx-button_1_9_101>
     </span>
     <span slot="after"></span>
-  </tttx-toolbar_1_9_99>
+  </tttx-toolbar_1_9_101>
 `;
 export const LongItemsToolbar = LongItems.bind({});
 LongItemsToolbar.args = {

package/dist/collection/components/molecules/tttx-tooltip/tttx-tooltip.js

@@ -82,7 +82,7 @@ export class TttxTooltip {
   render() {
     return (h("div", { class: "tooltip-wrapper" }, h("slot", null), this.visible && (h("div", { class: `tooltip-box ${this.placement} ${!this.showShadow ? 'no-shadow' : ''}`, style: this.tooltipStyles, role: "tooltip", "aria-label": this.ariaLabel || this.text }, this.text, h("span", { class: "arrow" })))));
   }
-  static get is() { return "tttx-tooltip_1_9_99"; }
+  static get is() { return "tttx-tooltip_1_9_101"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/molecules/tttx-tooltip/tttx-tootip.stories.js

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 export default {
   title: 'atoms/Tooltip',
-  component: 'tttx-tooltip_1_9_99',
+  component: 'tttx-tooltip_1_9_101',
   parameters: {
     layout: 'centered',
   },
@@ -10,7 +10,7 @@ const Template = ({ text, placement, delay, showShadow }) => {
   const wrapper = document.createElement('div');
   wrapper.style.display = 'inline-block';
   wrapper.style.margin = '100px'; // Ensure enough space around for placement testing
-  const tooltip = document.createElement('tttx-tooltip_1_9_99');
+  const tooltip = document.createElement('tttx-tooltip_1_9_101');
   tooltip.setAttribute('text', text);
   tooltip.setAttribute('placement', placement);
   tooltip.setAttribute('delay', delay);
@@ -75,7 +75,7 @@ const ScrollableTemplate = ({ placement, numRows, showOnlyOnOverflow }) => {
     }
   }
   items.forEach((item) => {
-    const tooltipEl = document.createElement('tttx-tooltip_1_9_99');
+    const tooltipEl = document.createElement('tttx-tooltip_1_9_101');
     tooltipEl.text = item.tooltip;
     tooltipEl.placement = placement;
     tooltipEl.showOnlyOnOverflow = showOnlyOnOverflow;

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.css

@@ -12,6 +12,45 @@
   --leaf-accent-offset: 48px;
 }
 
+.drag-drop-placeholder-row {
+  background-color: #DBEAFE;
+  padding: 5px;
+  border: 1px dashed #3B82F6;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.drag_drop_success_fade {
+  transition: background-color 1s linear;
+}
+
+.inline-tree-item > .drag-drop-placeholder-row > .treeLeaf {
+  text-align: center;
+  padding: 10px 0px;
+}
+
+.placeholder-text {
+  color: #3B82F6;
+  width: 100%;
+  font-weight: 400;
+  text-align: center;
+  padding: 8px;
+}
+
+.is-being-dragged {
+  background-color: rgba(125, 130, 138, 0.05) !important;
+}
+
+.drag-handle-container {
+  height: 100%;
+}
+
+.tree-node {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  height: 51px;
+}
+
 .tree-view-element > ul {
   margin: 0;
   padding: 0;
@@ -70,9 +109,6 @@
   justify-content: center;
 }
 @media (hover: hover) {
-  .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected) {
-    cursor: pointer;
-  }
   .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected)::before {
     background-color: rgba(17, 17, 17, 0.05);
     z-index: 3;
@@ -82,11 +118,18 @@
     z-index: 3;
   }
 }
+.tree-view-element ul li.inline-tree-item.precedes_drag_drop::before {
+  content: "";
+  position: absolute;
+  left: -50%;
+  bottom: 0;
+  right: 0;
+  border-bottom: 1px solid #3B82F6 !important;
+}
 .tree-view-element ul li.inline-tree-item.element-row {
-  min-height: 36px;
   font-family: "Roboto", serif;
   font-size: 16px;
-  padding: 8px 0px;
+  padding: 15px 0px;
   position: relative;
   color: #212121 !important;
   /* Apply the same selected background for both groups and leaves */
@@ -165,6 +208,7 @@
 }
 .tree-view-element ul li.inline-tree-item.element-row .drag-handle {
   margin-right: 10px;
+  cursor: grab;
 }
 .tree-view-element ul li.inline-tree-item.element-row.rowSelected .drag-handle {
   margin-left: 10px;
@@ -172,7 +216,6 @@
 .tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed {
   border-color: red;
   border-style: dashed;
-  cursor: not-allowed;
   opacity: 0.7;
 }
 

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js

@@ -7,40 +7,64 @@ export class TttxTreeView {
     this.dragGhost = {
       el: null,
     };
+    this.dragDropPlaceholderId = 'drag-drop-placeholder';
     this.createGhostImage = (label) => {
+      if (label.length > 30)
+        label = `${label.slice(0, 30)}...`;
       const ghost = document.createElement('div');
-      ghost.textContent = label;
       Object.assign(ghost.style, {
         position: 'absolute',
         top: '-9999px',
         left: '-9999px',
-        padding: '6px 20px',
+        padding: '8px 12px',
         background: 'white',
-        border: '1px solid #ccc',
-        fontSize: '14px',
         pointerEvents: 'none',
+        boxShadow: '0px 0px 12px #F9F9F9',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '10px',
+        borderRadius: '4px'
       });
+      const dragHandle = document.createElement('img');
+      dragHandle.src = this.dragIcon;
+      dragHandle.alt = 'drag';
+      ghost.appendChild(dragHandle);
+      const ghostText = document.createElement('span');
+      Object.assign(ghostText.style, { fontSize: '14px' });
+      ghostText.textContent = label;
+      ghost.appendChild(ghostText);
       document.body.appendChild(ghost);
-      setTimeout(() => document.body.removeChild(ghost), 0);
       return ghost;
     };
     this.handleDragStart = (event, node, index, parentId) => {
       if (!event.dataTransfer)
         return;
       this.draggedNodeParentId = parentId;
+      this.draggedNodeId = node.id;
       const payload = JSON.stringify({ parentId, index, node });
       event.dataTransfer.setData('text/plain', payload);
       const ghostImg = this.createGhostImage(node.title);
       this.dragGhost.el = ghostImg;
-      event.dataTransfer.setDragImage(ghostImg, 0, 0);
+      event.dataTransfer.setDragImage(ghostImg, 32, 30);
     };
-    this.handleDragDrop = (event, node, targetIndex, parentId) => {
+    this.handleDragEnd = () => {
+      // if drag ends on a valid target, handleDragDrop should handle everything
+      // if not dropped on a valid target, use this trigger to remove the placeholder
+      setTimeout(() => {
+        const placeHolderExists = this.findNodeById(this.treeData, this.dragDropPlaceholderId);
+        if (placeHolderExists) {
+          const placeHolderRemovedList = this.updateDragDropPlaceholder(this.treeData);
+          this.treeData = [...placeHolderRemovedList];
+        }
+      }, 300);
+    };
+    this.handleDragDrop = (event, node, parentId) => {
       var _a;
       event.preventDefault();
       const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
       if (!nodeData)
         return;
-      const { parentId: sourceParentId, index: sourceParentIndex, node: sourceNode } = JSON.parse(nodeData);
+      const { parentId: sourceParentId, node: sourceNode } = JSON.parse(nodeData);
       // Prevent dropping on itself or different parents
       if (node.id === sourceNode.id || sourceParentId !== parentId)
         return;
@@ -51,32 +75,70 @@ export class TttxTreeView {
       const children = (parent === null || parent === void 0 ? void 0 : parent.child) ? [...parent.child] : [...updatedTree];
       if (!children || children.length === 0)
         return;
-      // Move the node
-      const [moved] = children.splice(sourceParentIndex, 1);
-      children.splice(targetIndex, 0, moved);
+      // move the node to wherever the placeholder now is
+      const movedElement = sourceNode;
+      const newChildren = [];
+      for (const child of children) {
+        if (child.id == movedElement.id)
+          continue; // will be inserted in placeholder position
+        if (child.id == this.dragDropPlaceholderId) {
+          // moved element added to new list in placeholder's place
+          newChildren.push(movedElement);
+          continue;
+        }
+        newChildren.push(child); // retain existing elements
+      }
       // Update the tree
       if (parent) {
-        parent.child = children;
+        parent.child = newChildren;
       }
       else {
-        this.treeData = children;
+        this.treeData = newChildren;
       }
       this.draggedNodeParentId = undefined;
+      this.draggedNodeId = undefined;
       if (this.dragGhost.el) {
         this.dragGhost.el.remove();
         this.dragGhost.el = null;
       }
+      this.handleDragDropSuccessBackground(movedElement.id);
+      this.treeData = [...this.updateDragDropPlaceholder(this.treeData)];
       this.moveNode.emit(this.treeData);
     };
-    this.handleDragOver = (event, parentId) => {
+    this.handleDragOver = (event, draggedOverId, parentId, isDragDropPlaceholder) => {
       event.preventDefault();
       if (!event.dataTransfer)
         return;
-      const validDrag = this.draggedNodeParentId === parentId;
+      const validDrag = this.draggedNodeParentId === parentId || isDragDropPlaceholder;
       event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
+      if (validDrag && !isDragDropPlaceholder) {
+        this.treeData = [...this.updateDragDropPlaceholder(this.treeData, draggedOverId)];
+      }
+    };
+    this.updateDragDropPlaceholder = (treeData, createPlaceholderOnId) => {
+      const newTreeData = [];
+      for (const treeViewItem of treeData) {
+        // delete existing placeholders & create a new one if this is where it should be dropped
+        if (treeViewItem.isDragDropPlaceholder)
+          continue;
+        if (treeViewItem.id == createPlaceholderOnId) {
+          newTreeData.push({
+            id: this.dragDropPlaceholderId,
+            title: 'Drop here',
+            isDragDropPlaceholder: true
+          });
+        }
+        if (treeViewItem.child) {
+          const children = this.updateDragDropPlaceholder(treeViewItem.child, createPlaceholderOnId);
+          treeViewItem.child = children;
+        }
+        newTreeData.push(treeViewItem);
+      }
+      return newTreeData;
     };
     this.data = undefined;
     this.treeData = undefined;
+    this.nodesRecentlyMoved = [];
   }
   componentWillRender() {
     if (!this.data)
@@ -172,7 +234,8 @@ export class TttxTreeView {
     const rowHoverActive = node.hasHover ? 'rowHover' : '';
     const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
     const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
-    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive };
+    const dragDropPlaceholder = node.isDragDropPlaceholder ? 'drag_drop_placeholder' : '';
+    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive, dragDropPlaceholder };
   }
   findNodeById(nodes, id) {
     for (const node of nodes) {
@@ -206,39 +269,80 @@ export class TttxTreeView {
     // Update the tree to trigger re-render
     this.treeData = [...this.treeData];
   }
+  handleDragDropSuccessBackground(nodeId) {
+    this.nodesRecentlyMoved.push(nodeId);
+    setTimeout((nodeId) => {
+      this.nodesRecentlyMoved = [...this.nodesRecentlyMoved.filter((id) => id !== nodeId)];
+    }, 300, nodeId);
+  }
+  doesNodePrecedeDragDropPlaceholder(node, index, parentId = undefined) {
+    var _a;
+    if (node.child) {
+      // is parent, so first child would have to be placeholder
+      return node.child.length > 0 && node.child[0].isDragDropPlaceholder;
+    }
+    // child, so check if following element is placeholder
+    const parentNode = parentId ? this.findNodeById(this.treeData, parentId) : undefined;
+    if (parentNode) {
+      return index !== parentNode.child.length && ((_a = parentNode.child[index + 1]) === null || _a === void 0 ? void 0 : _a.isDragDropPlaceholder);
+    }
+    return false;
+  }
   renderNode(node, index, parentId = undefined, level = 0 // <-- depth
   ) {
-    var _a, _b;
     const options = this.treeConfigs(node);
+    const precedesDragDropPlaceholderClass = this.doesNodePrecedeDragDropPlaceholder(node, index, parentId) ? 'precedes_drag_drop' : '';
     if (node.child) {
       // group node
       const isSelectedGroup = !!node.selected;
-      return (h("li", { class: `${isSelectedGroup ? 'selected-group' : ''}`, style: { '--level': String(level) } }, h("li", Object.assign({ "data-id": node.id, draggable: (_a = node.draggable) !== null && _a !== void 0 ? _a : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
+      return (h("li", { class: `${isSelectedGroup ? 'selected-group' : ''}`, style: { '--level': String(level) } }, h("li", Object.assign({ id: node.id, "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive} ${options.dragDropPlaceholder} ${precedesDragDropPlaceholderClass}`, onClick: event => {
           if (node.hasHover) {
             this.onClickHandler(event, node);
           }
-        } }), h("tttx-button_1_9_99", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("ul", null, node.child.map((childNode, childIndex) => {
+        } }), h("tttx-button_1_9_101", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("ul", null, node.child.map((childNode, childIndex) => {
         // next level = level + 1
         return this.renderNode(childNode, childIndex, node.id, level + 1);
       }))) : null));
     }
     // leaf (activity)
-    return (h("li", Object.assign({ "data-id": node.id, draggable: (_b = node.draggable) !== null && _b !== void 0 ? _b : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, style: { '--level': String(level) }, onClick: event => {
+    const leafStyle = { '--level': String(level) };
+    if (this.nodesRecentlyMoved.find((x) => x == node.id)) {
+      leafStyle['background-color'] = '#D1F7F0'; //'rgba(51, 170, 51, .1)';
+    }
+    return (h("li", Object.assign({ "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `
+                    inline-tree-item element-row
+                    ${options.rowHoverActive}
+                    ${options.selectedActive}
+                    ${options.dragDropPlaceholder}
+                    ${precedesDragDropPlaceholderClass}
+                    drag_drop_success_fade
+                    ${this.draggedNodeId == node.id ? ' is-being-dragged' : ''}
+                `, style: leafStyle, onClick: event => {
         if (node.hasHover) {
           this.onClickHandler(event, node);
         }
       } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
   }
   htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_99", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_99", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
-    return htmlcode;
+    if (node.isDragDropPlaceholder) {
+      return (h("div", { class: "inline-tree-item element" }, h("div", { class: 'drag-drop-placeholder-row' }, h("div", { class: 'placeholder-text' }, node.title))));
+    }
+    return (h("div", { class: "inline-tree-item element" }, node.draggable && (h("div", { class: "drag-handle-container" }, h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: node.draggable, onDragStart: event => {
+        if (node.draggable) {
+          this.handleDragStart(event, node, index, parentId);
+        }
+      }, onDragEnd: () => {
+        if (node.draggable) {
+          this.handleDragEnd();
+        }
+      } }))), node.hasCheckbox && (h("tttx-button_1_9_101", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_101", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
   }
   render() {
     if (!this.data)
       return;
-    return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
+    return (h("div", { ref: (element) => this.rootElement = element, class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
   }
-  static get is() { return "tttx-tree-view_1_9_99"; }
+  static get is() { return "tttx-tree-view_1_9_101"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -276,7 +380,8 @@ export class TttxTreeView {
   }
   static get states() {
     return {
-      "treeData": {}
+      "treeData": {},
+      "nodesRecentlyMoved": {}
     };
   }
   static get events() {

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.stories.js

@@ -10,7 +10,7 @@ export default {
   decorators: [withActions],
 };
 const TttxTreeViewTemplate = ({ data }) => `
-    <tttx-tree-view_1_9_99 id="treeView"></tttx-tree-view_1_9_99>
+    <tttx-tree-view_1_9_101 id="treeView"></tttx-tree-view_1_9_101>
     <script>
     (function() {
         const treeView = document.getElementById('treeView');
@@ -333,7 +333,7 @@ DragDropWithSelection.args = {
           draggable: false,
           child: [
             {
-              id: 'cloud',
+              id: '01KKC11BWW4RJ138DXQQBH4TWJ',
               title: 'Cloud engineer',
               hasIcon: false,
               hasHover: true,
@@ -341,7 +341,7 @@ DragDropWithSelection.args = {
               draggable: true,
             },
             {
-              id: 'software',
+              id: '01KKC11K9FHKZX03S85ZA8G5SK',
               title: 'Software engineer',
               hasIcon: false,
               hasHover: true,
@@ -349,23 +349,15 @@ DragDropWithSelection.args = {
               draggable: true,
             },
             {
-              id: 'devops',
-              title: 'Devops engineer',
+              id: '01KKC11PHZZWN1X65SW44JBT0Q',
+              title: 'This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name This is a long name ',
               hasIcon: false,
               hasHover: true,
               selectable: true,
               draggable: true,
-            },
+            }
           ],
         },
-        {
-          id: 'gdpr',
-          title: 'GDPR',
-          hasIcon: false,
-          hasHover: true,
-          selectable: true,
-          draggable: true,
-        },
         {
           id: 'skills',
           title: 'Skills',
@@ -378,14 +370,14 @@ DragDropWithSelection.args = {
           draggable: false,
           child: [
             {
-              id: 'softeng',
+              id: '01KKC11VFZ6A4Q479EYDG7BVT6',
               title: 'Software engineering',
               hasHover: true,
               selectable: true,
               draggable: true,
             },
             {
-              id: 'patterns',
+              id: '01KKC11YHZ9SB1T56SRZWTB4P7',
               title: 'Design patterns',
               hasHover: true,
               selectable: true,
@@ -393,6 +385,26 @@ DragDropWithSelection.args = {
             },
           ],
         },
+        {
+          id: 'thinking',
+          title: 'Thinking',
+          isOpen: true,
+          hasCheckbox: false,
+          hasIcon: false,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          draggable: false,
+          child: [
+            {
+              id: '01KKESF79WXXC3T137YBMAES51',
+              title: 'Critical thinking skills',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            }
+          ],
+        },
       ],
     },
   ],

package/dist/collection/components/organisms/tttx-data-pattern/tttx-data-pattern.js

@@ -11,12 +11,12 @@ export class TttxDataPattern {
     this.addbutton = false;
   }
   render() {
-    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_9_99", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
-      h("tttx-sorter_1_9_99", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
-      h("tttx-filter_1_9_99", { "filter-options": JSON.stringify(this.filterOptions), showSelectAll: false, "show-option-icons": true, "filter-header": this.filterHeader, "filter-key": "data-pattern-list" })), h("span", { slot: "after" }, h("tttx-standalone-input_1_9_99", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_99", { border: false }, h("span", { slot: "before" }, this.addbutton &&
-      h("tttx-button_1_9_99", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_99", { data: this.data }))));
+    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_9_101", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
+      h("tttx-sorter_1_9_101", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
+      h("tttx-filter_1_9_101", { "filter-options": JSON.stringify(this.filterOptions), showSelectAll: false, "show-option-icons": true, "filter-header": this.filterHeader, "filter-key": "data-pattern-list" })), h("span", { slot: "after" }, h("tttx-standalone-input_1_9_101", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_101", { border: false }, h("span", { slot: "before" }, this.addbutton &&
+      h("tttx-button_1_9_101", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_101", { data: this.data }))));
   }
-  static get is() { return "tttx-data-pattern_1_9_99"; }
+  static get is() { return "tttx-data-pattern_1_9_101"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {