@3t-transform/threeteeui 1.9.75 → 1.9.77

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

@@ -3,17 +3,13 @@
 }
 
 :host {
-  --tree-accent: #146EB3;
-  /* selection accent color */
+  --tree-accent: #1579C6;
   --tree-selected-bg: #E7E7E7;
-  /* selected group background */
   --indent: 36px;
-  /* per-level indentation */
   --accent-gap: 46px;
-  /* gap from content to accent bar */
-  --accent-width: 4px;
-  /* accent bar width */
+  --accent-width: 6px;
   --tree-left-edge-shift: 0px;
+  --leaf-accent-offset: 48px;
 }
 
 .tree-view-element > ul {
@@ -29,15 +25,14 @@
 .tree-view-element ul li.selected-group {
   position: relative;
   /* Remove default accent bars */
-  /* Highlight ONLY the selected group header */
-  /* Children / nested groups should remain default */
-  /* Leaves (treeLeaf) remain transparent */
+  /* Highlight the selected group header */
+  /* Children / nested groups remain default visual style */
 }
 .tree-view-element ul li.selected-group::before, .tree-view-element ul li.selected-group::after {
   display: none;
 }
 .tree-view-element ul li.selected-group > li.inline-tree-item.element-row.tree-node {
-  background-color: #E8E8E8 !important;
+  background-color: var(--tree-selected-bg) !important;
   position: relative;
 }
 .tree-view-element ul li.selected-group > li.inline-tree-item.element-row.tree-node::after {
@@ -48,7 +43,6 @@
   width: var(--accent-width);
   left: calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));
   background-color: var(--tree-accent);
-  border-radius: 0 2px 2px 0;
   z-index: 5;
 }
 .tree-view-element ul li.selected-group > ul li.inline-tree-item.element-row.tree-node {
@@ -57,9 +51,6 @@
 .tree-view-element ul li.selected-group > ul li.inline-tree-item.element-row.tree-node::after {
   display: none !important;
 }
-.tree-view-element ul li.selected-group li.inline-tree-item.element-row:not(.tree-node)::before {
-  background-color: transparent !important;
-}
 .tree-view-element ul li.inline-tree-item {
   display: flex;
   align-items: center;
@@ -98,6 +89,10 @@
   padding: 8px 0px;
   position: relative;
   color: #212121 !important;
+  /* Apply the same selected background for both groups and leaves */
+  /* keep blue accent for selected group nodes (left bar) */
+  /* add blue accent for selected rows that are NOT group nodes (leaf/activity rows)
+     Position accent bar to align with the icon */
 }
 .tree-view-element ul li.inline-tree-item.element-row::before {
   content: "";
@@ -113,9 +108,6 @@
   z-index: 2;
   background-color: #F9F9F9;
 }
-.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected::before {
-  background-color: #E8E8E8 !important;
-}
 .tree-view-element ul li.inline-tree-item.element-row.tree-node * {
   z-index: 3;
 }
@@ -129,13 +121,54 @@
   font-weight: 400;
   color: #212121 !important;
 }
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected {
+  background-color: var(--tree-selected-bg) !important;
+  /* also paint the ::before (border area) so the row looks fully filled */
+}
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before {
+  background-color: var(--tree-selected-bg) !important;
+}
 .tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeLeaf,
 .tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeNode {
   color: #212121 !important;
 }
+.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected {
+  position: relative;
+}
+.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--accent-width);
+  left: calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));
+  background-color: var(--tree-accent);
+  z-index: 5;
+}
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node) {
+  position: relative;
+}
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--accent-width);
+  background-color: var(--tree-accent);
+  z-index: 5;
+}
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)[data-has-drag-handle=true] {
+  --drag-handle-offset: 34px;
+}
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)[data-has-checkbox=true] {
+  --checkbox-offset: 36px;
+}
 .tree-view-element ul li.inline-tree-item.element-row .drag-handle {
   margin-right: 10px;
 }
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected .drag-handle {
+  margin-left: 10px;
+}
 .tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed {
   border-color: red;
   border-style: dashed;
@@ -151,20 +184,14 @@
   .tree-view-element ul li.selected-group::after {
     background: Highlight;
   }
+
+  /* ensure forced-colors highlights selected rows */
+  .tree-view-element ul li.inline-tree-item.element-row.rowSelected {
+    background: Highlight !important;
+  }
 }
 .inline-tree-item:focus-visible {
   outline: 2px solid var(--tree-accent);
   outline-offset: 2px;
   border-radius: 6px;
-}
-
-/* Ensure leaves do not get selected background */
-.tree-view-element ul li.inline-tree-item.element-row:not(.tree-node).rowSelected {
-  background-color: transparent !important;
-}
-.tree-view-element ul li.inline-tree-item.element-row:not(.tree-node).rowSelected::before {
-  background-color: transparent !important;
-}
-.tree-view-element ul li.inline-tree-item.element-row:not(.tree-node).rowSelected:hover::before {
-  background-color: transparent !important;
 }

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

@@ -215,7 +215,7 @@ export class TttxTreeView {
           if (node.hasHover) {
             this.onClickHandler(event, node);
           }
-        } }), h("tttx-button_1_9_75", { 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_77", { 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));
@@ -228,7 +228,7 @@ export class TttxTreeView {
       } }), 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_75", { 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_75", { 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) })));
+    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_77", { 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_77", { 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;
   }
   render() {
@@ -236,7 +236,7 @@ export class TttxTreeView {
       return;
     return (h("div", { 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_75"; }
+  static get is() { return "tttx-tree-view_1_9_77"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -10,48 +10,13 @@ export default {
   decorators: [withActions],
 };
 const TttxTreeViewTemplate = ({ data }) => `
-    <style>
-        .selected-bg { background: #E8E8E8 !important; }
-        .default-bg { background: #F9F9F9 !important; }
-    </style>
-
-    <tttx-tree-view_1_9_75 id="treeView"></tttx-tree-view_1_9_75>
-
+    <tttx-tree-view_1_9_77 id="treeView"></tttx-tree-view_1_9_77>
     <script>
     (function() {
-
-        // Find selected node recursively
-        const findSelected = (nodes) => {
-            for (const node of nodes) {
-                if (node.selected) return node;
-                if (Array.isArray(node.child) && node.child.length) {
-                    const found = findSelected(node.child);
-                    if (found) return found;
-                }
-            }
-            return null;
-        };
-
-        // Assign background: only selected gets selected-bg
-        const applyBackgrounds = (nodes, selectedNode) => {
-            return nodes.map(n => ({
-                ...n,
-                backgroundClass: n.id === selectedNode?.id
-                    ? 'selected-bg'
-                    : 'default-bg',
-                child: n.child ? applyBackgrounds(n.child, selectedNode) : []
-            }));
-        };
-
         const treeView = document.getElementById('treeView');
-
         if (treeView) {
-            const dataOriginal = ${JSON.stringify(data)};
-            const selectedNode = findSelected(dataOriginal);
-            const processed = applyBackgrounds(dataOriginal, selectedNode);
-            treeView.data = processed;
+            treeView.data = ${JSON.stringify(data)};
         }
-
     })();
     </script>
 `;
@@ -79,6 +44,64 @@ GroupSelectionDemo.args = {
           selectable: true,
           draggable: true,
         },
+        {
+          id: 'frontend',
+          title: 'Front end development',
+          isOpen: true,
+          hasCheckbox: true,
+          hasIcon: true,
+          icon: 'folder',
+          iconColor: 'grey',
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'portal',
+              title: 'Portal',
+              hasIcon: true,
+              icon: 'description',
+              iconColor: 'grey',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'webcomp',
+              title: 'Web components',
+              isOpen: true,
+              hasCheckbox: true,
+              hasIcon: true,
+              icon: 'folder',
+              iconColor: 'grey',
+              hasHover: true,
+              selectable: true,
+              selected: true,
+              draggable: false,
+              child: [
+                {
+                  id: '11092',
+                  title: '11092',
+                  hasIcon: true,
+                  icon: 'description',
+                  iconColor: 'grey',
+                  hasHover: true,
+                  selectable: true,
+                  draggable: true,
+                },
+              ],
+            },
+            {
+              id: 'subact',
+              title: 'subact-1407',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
         {
           id: '0002',
           title: '0002',
@@ -134,3 +157,243 @@ GroupSelectionDemo.args = {
     },
   ],
 };
+export const MultipleGroupsSelection = TttxTreeViewTemplate.bind({});
+MultipleGroupsSelection.args = {
+  data: [
+    {
+      id: 'group1',
+      title: 'Selected Parent Group',
+      isOpen: true,
+      hasCheckbox: true,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'subgroup1',
+          title: 'Selected Subgroup',
+          isOpen: true,
+          hasCheckbox: true,
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'activity1',
+              title: 'Activity (No Blue Border)',
+              hasIcon: true,
+              icon: 'check_circle',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'activity2',
+              title: 'Another Activity',
+              hasIcon: true,
+              icon: 'assignment',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+        {
+          id: 'activity3',
+          title: 'Direct Child Activity',
+          hasIcon: true,
+          icon: 'task',
+          hasHover: true,
+          selectable: true,
+          draggable: true,
+        },
+      ],
+    },
+    {
+      id: 'group2',
+      title: 'Unselected Group',
+      isOpen: true,
+      hasCheckbox: true,
+      hasHover: true,
+      selectable: true,
+      selected: false,
+      draggable: false,
+      child: [
+        {
+          id: 'subgroup2',
+          title: 'Unselected Subgroup',
+          isOpen: false,
+          hasCheckbox: true,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          draggable: false,
+          child: [
+            {
+              id: 'activity4',
+              title: 'Hidden Activity',
+              hasIcon: true,
+              icon: 'visibility_off',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export const DeepNestedSelection = TttxTreeViewTemplate.bind({});
+DeepNestedSelection.args = {
+  data: [
+    {
+      id: 'root',
+      title: 'Root Group (Selected)',
+      isOpen: true,
+      hasCheckbox: true,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'level1',
+          title: 'Level 1 Subgroup (Selected)',
+          isOpen: true,
+          hasCheckbox: true,
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'level2',
+              title: 'Level 2 Subgroup (Selected)',
+              isOpen: true,
+              hasCheckbox: true,
+              hasHover: true,
+              selectable: true,
+              selected: true,
+              draggable: false,
+              child: [
+                {
+                  id: 'level3',
+                  title: 'Level 3 Subgroup (Selected)',
+                  isOpen: true,
+                  hasCheckbox: true,
+                  hasHover: true,
+                  selectable: true,
+                  selected: true,
+                  draggable: false,
+                  child: [
+                    {
+                      id: 'deepactivity',
+                      title: 'Deep Activity (No Border)',
+                      hasIcon: true,
+                      icon: 'star',
+                      hasHover: true,
+                      selectable: true,
+                      draggable: true,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+export const DragDropWithSelection = TttxTreeViewTemplate.bind({});
+DragDropWithSelection.args = {
+  data: [
+    {
+      id: 'engineer',
+      title: 'Engineer (Selected)',
+      isOpen: true,
+      hasCheckbox: false,
+      hasIcon: false,
+      hasHover: true,
+      selectable: true,
+      selected: true,
+      draggable: false,
+      child: [
+        {
+          id: 'qualification',
+          title: 'Qualification (Selected)',
+          isOpen: true,
+          hasCheckbox: false,
+          hasHover: true,
+          selectable: true,
+          selected: true,
+          draggable: false,
+          child: [
+            {
+              id: 'cloud',
+              title: 'Cloud engineer',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'software',
+              title: 'Software engineer',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'devops',
+              title: 'Devops engineer',
+              hasIcon: false,
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+          ],
+        },
+        {
+          id: 'gdpr',
+          title: 'GDPR',
+          hasIcon: false,
+          hasHover: true,
+          selectable: true,
+          draggable: true,
+        },
+        {
+          id: 'skills',
+          title: 'Skills',
+          isOpen: true,
+          hasCheckbox: false,
+          hasIcon: false,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          draggable: false,
+          child: [
+            {
+              id: 'softeng',
+              title: 'Software engineering',
+              hasHover: true,
+              selectable: true,
+              draggable: true,
+            },
+            {
+              id: 'patterns',
+              title: 'Design patterns',
+              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_75", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
-      h("tttx-sorter_1_9_75", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
-      h("tttx-filter_1_9_75", { "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_75", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_75", { border: false }, h("span", { slot: "before" }, this.addbutton &&
-      h("tttx-button_1_9_75", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_75", { data: this.data }))));
+    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_9_77", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
+      h("tttx-sorter_1_9_77", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
+      h("tttx-filter_1_9_77", { "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_77", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_77", { border: false }, h("span", { slot: "before" }, this.addbutton &&
+      h("tttx-button_1_9_77", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_77", { data: this.data }))));
   }
-  static get is() { return "tttx-data-pattern_1_9_75"; }
+  static get is() { return "tttx-data-pattern_1_9_77"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -8,7 +8,7 @@ export default {
   },
 };
 const Default = ({ data, sorterOptions, filterOptions }) => `
-    <tttx-data-pattern_1_9_75 id="datapatternlist"></tttx-data-pattern_1_9_75>
+    <tttx-data-pattern_1_9_77 id="datapatternlist"></tttx-data-pattern_1_9_77>
     <script>
       const element = document.getElementById('datapatternlist');
       element.data = ${JSON.stringify(data)};
@@ -19,10 +19,10 @@ const Default = ({ data, sorterOptions, filterOptions }) => `
 export const WIPDefaultDataPattern = Default.bind({});
 WIPDefaultDataPattern.args = {
   data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_75 icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_75 icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_75 icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_75 icon="egg" /></span> Ben' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_77 icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_77 icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_77 icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_77 icon="egg" /></span> Ben' },
   ],
   sorterOptions: {
     sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Age' }],