@3t-transform/threeteeui 1.9.56 → 1.9.57

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

@@ -9,575 +9,78 @@ export default {
   },
   decorators: [withActions],
 };
-const TttxTreeViewStory = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewDefault"></tttx-tree-view_1_9_56>
+const TttxTreeViewDragDrop = ({ data }) => `
+    <tttx-tree-view_1_9_57 id="treeViewDragDrop"></tttx-tree-view_1_9_57>
     <script>
-    if(!treeViewDefault) {
-      const treeViewDefault = document.getElementById('treeViewDefault');
+    if (!treeViewDragDrop) {
+      const treeViewDragDrop = document.getElementById('treeViewDragDrop');
     }
-    treeViewDefault.data = ${JSON.stringify(data)};
+    treeViewDragDrop.data = ${JSON.stringify(data)};
     </script>
 `;
-export const Default = TttxTreeViewStory.bind({});
-Default.args = {
+export const Dragdrop = TttxTreeViewDragDrop.bind({});
+Dragdrop.args = {
   data: [
     {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
+      id: '1',
+      title: 'Engineer',
       isOpen: false,
-      hasCheckbox: true,
-      checked: false,
-      icon: 'check_circle',
-      iconColor: 'green',
-      child: [
-        {
-          id: 'second',
-          title: 'Boop',
-          isOpen: false,
-          icon: 'check_circle',
-          iconColor: 'green',
-          child: [
-            {
-              id: 'third',
-              hasIcon: true,
-              icon: 'help',
-              iconColor: 'gray',
-              title: 'this is a test',
-            },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      icon: 'help',
-      iconColor: 'gray',
-      child: [
-        {
-          id: 4,
-          hasCheckbox: true,
-          hasIcon: true,
-          icon: 'help',
-          iconColor: 'gray',
-          title: 'Boop 2077',
-        },
-        {
-          id: 4,
-          hasCheckbox: true,
-          hasIcon: true,
-          icon: 'help',
-          iconColor: 'gray',
-          title: 'sjdnfkn 2077',
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewSimple = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewSimple"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewSimple) {
-      const treeViewSimple = document.getElementById('treeViewSimple');
-    }
-    treeViewSimple.data = ${JSON.stringify(data)};
-    </script>
-`;
-export const Simple = TttxTreeViewSimple.bind({});
-Simple.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      hasCheckbox: false,
-      hasIcon: false,
-      child: [
-        {
-          id: 'second',
-          title: 'Boop',
-          isOpen: false,
-          child: [
-            {
-              id: 'third',
-              hasIcon: false,
-              title: 'this is a test',
-            },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          hasIcon: false,
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      hasIcon: false,
-      hasCheckbox: false,
-      child: [
-        {
-          id: 4,
-          title: 'Boop 2077',
-        },
-        {
-          id: 4,
-          title: 'sjdnfkn 2077',
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewHTML = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewHTML"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewHTML) {
-      const treeViewHTML = document.getElementById('treeViewHTML');
-    }
-    treeViewHTML.data = ${JSON.stringify(data)};
-    </script>
-`;
-export const HTML = TttxTreeViewHTML.bind({});
-HTML.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      html: '<div>This is html </div>',
       hasCheckbox: false,
       hasIcon: false,
+      draggable: false,
       child: [
         {
-          id: 2,
-          title: 'Boop',
+          id: '2',
+          title: 'Qualification',
           isOpen: false,
-          html: '<div>This is html </div>',
+          draggable: false,
           child: [
             {
-              id: 2,
+              id: '3a',
+              title: 'Cloud engineer',
               hasIcon: false,
-              title: 'this is a test',
-              html: '<div>This is html </div>',
+              draggable: true,
             },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          hasIcon: false,
-          html: '<div>This is html </div>',
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      hasIcon: false,
-      hasCheckbox: false,
-      html: '<div>This is html </div>',
-      child: [
-        {
-          id: 4,
-          title: 'Boop 2077',
-          html: '<div>This is html </div>',
-        },
-        {
-          id: 4,
-          title: 'sjdnfkn 2077',
-          html: '<div>This is html </div>',
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewCheckbox = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewCheckbox"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewCheckbox) {
-      const treeViewCheckbox = document.getElementById('treeViewCheckbox');
-    }
-    treeViewCheckbox.data = ${JSON.stringify(data)};
-    </script>
-`;
-export const Checkbox = TttxTreeViewCheckbox.bind({});
-Checkbox.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      hasCheckbox: true,
-      checked: false,
-      hasIcon: false,
-      child: [
-        {
-          id: 2,
-          title: 'Boop',
-          isOpen: false,
-          hasCheckbox: true,
-          checked: false,
-          child: [
             {
-              id: 2,
+              id: '3b',
+              title: 'Software engineer',
               hasIcon: false,
-              title: 'this is a test',
-              hasCheckbox: true,
-              checked: false,
+              draggable: true,
             },
             {
-              id: 2,
+              id: '3c',
+              title: 'Devops engineer',
               hasIcon: false,
-              title: 'uncheckable',
-              hasCheckbox: false
+              draggable: true,
             },
           ],
         },
         {
-          id: 3,
-          title: 'Boop',
+          id: '4',
+          title: 'GDPR',
           isOpen: false,
           hasIcon: false,
-          hasCheckbox: true,
-          checked: false,
-        },
-        {
-          id: 2,
-          hasIcon: false,
-          title: 'can\'t be checked',
-          hasCheckbox: false
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      hasIcon: false,
-      hasCheckbox: true,
-      checked: false,
-      child: [
-        {
-          id: 4,
-          title: 'Boop 2077',
-          hasCheckbox: true,
-          checked: false,
-        },
-        {
-          id: 4,
-          title: 'sjdnfkn 2077',
-          hasCheckbox: true,
-          checked: false,
-        },
-        {
-          id: 2,
-          hasIcon: false,
-          title: 'won\'t be checked',
-          hasCheckbox: false
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewIcons = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewIcons"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewIcons) {
-      const treeViewIcons = document.getElementById('treeViewIcons');
-    }
-    treeViewIcons.data = ${JSON.stringify(data)};
-    </script>
-`;
-export const Icons = TttxTreeViewIcons.bind({});
-Icons.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      hasCheckbox: false,
-      hasIcon: true,
-      icon: 'check_circle',
-      iconColor: 'green',
-      child: [
-        {
-          id: 2,
-          title: 'Boop',
-          isOpen: false,
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
-          child: [
-            {
-              id: 2,
-              hasIcon: true,
-              icon: 'check_circle',
-              iconColor: 'green',
-              title: 'this is a test',
-            },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      hasIcon: true,
-      icon: 'help',
-      iconColor: 'gray',
-      hasCheckbox: false,
-      child: [
-        {
-          id: 4,
-          title: 'Boop 2077',
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
+          draggable: true,
         },
         {
-          id: 4,
-          title: 'sjdnfkn 2077',
-          hasIcon: true,
-          icon: 'help',
-          iconColor: 'gray',
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewCheckBoxAndIcons = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewCheckBoxAndIcons"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewCheckBoxAndIcons) {
-      const treeViewCheckBoxAndIcons = document.getElementById('treeViewCheckBoxAndIcons');
-    }
-    treeViewCheckBoxAndIcons.data = ${JSON.stringify(data)};
-    </script>
-`;
-export const CheckBoxAndIcons = TttxTreeViewCheckBoxAndIcons.bind({});
-CheckBoxAndIcons.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      hasCheckbox: true,
-      checked: false,
-      hasIcon: true,
-      icon: 'check_circle',
-      iconColor: 'green',
-      child: [
-        {
-          id: 2,
-          title: 'Boop',
+          id: '5',
+          title: 'Skills',
           isOpen: false,
-          hasIcon: true,
-          hasCheckbox: true,
-          checked: false,
-          icon: 'check_circle',
-          iconColor: 'green',
+          hasIcon: false,
+          draggable: false,
           child: [
             {
-              id: 2,
-              hasIcon: true,
-              icon: 'check_circle',
-              iconColor: 'green',
-              hasCheckbox: true,
-              checked: false,
-              title: 'this is a test',
+              id: '6a',
+              title: 'Software engineering',
+              draggable: true,
             },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          hasCheckbox: true,
-          checked: false,
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      hasCheckbox: true,
-      checked: false,
-      hasIcon: true,
-      icon: 'check_circle',
-      iconColor: 'green',
-      child: [
-        {
-          id: 4,
-          title: 'Boop 2077',
-          hasCheckbox: true,
-          checked: false,
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
-        },
-        {
-          id: 4,
-          title: 'sjdnfkn 2077',
-          hasCheckbox: true,
-          checked: false,
-          hasIcon: true,
-          icon: 'check_circle',
-          iconColor: 'green',
-        },
-      ],
-    },
-  ],
-};
-// ----------- Skills passport examples -----------
-const convertNode = (node) => {
-  let children = [];
-  if (node.Groups) {
-    children = node.Groups.map((child) => convertNode(child));
-  }
-  if (node.Requirements) {
-    children = children.concat(node.Requirements.map((child) => convertNode(child)));
-  }
-  return {
-    id: node.Name,
-    title: node.Name,
-    child: children,
-    isOpen: true,
-  };
-};
-const convertNodes = (nodes) => {
-  return nodes.Groups.map((node) => convertNode(node));
-};
-// Requirements list example 1
-export const RequirementsList1 = TttxTreeViewStory.bind({});
-import requirementsListData1 from './story-data/example1.json';
-const convertedData1 = {
-  id: requirementsListData1.tagId,
-  title: requirementsListData1.listName,
-  child: convertNodes(requirementsListData1),
-  isOpen: true
-};
-RequirementsList1.args = {
-  data: [convertedData1],
-};
-// Requirements list example 2
-export const RequirementsList2 = TttxTreeViewStory.bind({});
-import requirementsListData2 from './story-data/example2.json';
-const convertedData2 = {
-  id: requirementsListData2.tagId,
-  title: requirementsListData2.listName,
-  child: convertNodes(requirementsListData2),
-  isOpen: true
-};
-RequirementsList2.args = {
-  data: [convertedData2],
-};
-const TttxTreeViewEmptyGroup = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewEmptyGroup"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewEmptyGroup) {
-      const treeViewEmptyGroup = document.getElementById('treeViewEmptyGroup');
-    }
-    treeViewEmptyGroup.data = ${JSON.stringify(data)};
-    </script>
-`;
-export const EmptyGroup = TttxTreeViewEmptyGroup.bind({});
-EmptyGroup.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      hasCheckbox: true,
-      checked: false,
-      hasIcon: true,
-      icon: 'check_circle',
-      iconColor: 'green',
-      child: [],
-    },
-  ],
-};
-const TttxTreeViewselectable = ({ data }) => `
-    <tttx-tree-view_1_9_56 id="treeViewselectable"></tttx-tree-view_1_9_56>
-    <script>
-    if(!treeViewselectable) {
-      const treeViewselectable = document.getElementById('treeViewselectable');
-    }
-    treeViewselectable.data = ${JSON.stringify(data)};
-    treeViewselectable.firstSelected = true;
-    </script>
-`;
-export const SelectableAndHover = TttxTreeViewselectable.bind({});
-SelectableAndHover.args = {
-  data: [
-    {
-      id: 'First',
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      hasCheckbox: false,
-      hasIcon: false,
-      hasHover: true,
-      selectable: true,
-      selected: false,
-      child: [
-        {
-          id: 'second',
-          title: 'Boop',
-          isOpen: false,
-          hasCheckbox: false,
-          hasIcon: false,
-          hasHover: true,
-          selectable: true,
-          selected: false,
-          child: [
             {
-              id: 'third',
-              hasCheckbox: false,
-              hasIcon: false,
-              title: 'this is a test',
-              hasHover: true,
-              selectable: true,
-              selected: false,
+              id: '6b',
+              title: 'Design patterns',
+              draggable: true,
             },
           ],
         },
-        {
-          id: 'fouth',
-          title: 'Boop',
-          isOpen: false,
-          hasCheckbox: false,
-          hasIcon: false,
-          hasHover: true,
-          selectable: true,
-          selected: false,
-        },
       ],
     },
   ],

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_56", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
-      h("tttx-sorter_1_9_56", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
-      h("tttx-filter_1_9_56", { "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_56", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_56", { border: false }, h("span", { slot: "before" }, this.addbutton &&
-      h("tttx-button_1_9_56", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_56", { data: this.data }))));
+    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_9_57", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
+      h("tttx-sorter_1_9_57", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
+      h("tttx-filter_1_9_57", { "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_57", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_57", { border: false }, h("span", { slot: "before" }, this.addbutton &&
+      h("tttx-button_1_9_57", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_57", { data: this.data }))));
   }
-  static get is() { return "tttx-data-pattern_1_9_56"; }
+  static get is() { return "tttx-data-pattern_1_9_57"; }
   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_56 id="datapatternlist"></tttx-data-pattern_1_9_56>
+    <tttx-data-pattern_1_9_57 id="datapatternlist"></tttx-data-pattern_1_9_57>
     <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_56 icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_56 icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_56 icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_56 icon="egg" /></span> Ben' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_57 icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_57 icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_57 icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_57 icon="egg" /></span> Ben' },
   ],
   sorterOptions: {
     sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Age' }],