@3t-transform/threeteeui 0.2.86 → 0.2.88

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

@@ -29,6 +29,7 @@ export class TttxTreeView {
     event.stopPropagation();
     node.isOpen = !node.isOpen;
     this.treeData = [...this.treeData];
+    this.expandNode.emit({ node: node, treeViewData: this.treeData });
   }
   handleCheckboxChange(node, event) {
     event.stopPropagation();
@@ -90,13 +91,7 @@ export class TttxTreeView {
     }
   }
   htmlcode(type, node, check_box, check_boxColor) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { 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", { 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) }), (node.menuActive || node.chevronActive) && (h("div", { class: "right-buttons-container" }, node.menuActive && (h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
-        event.stopPropagation();
-        this.onClickHandler('menu', event, node);
-      } })), node.chevronActive && (h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
-        event.stopPropagation();
-        this.onClickHandler('chevron', event, node);
-      } }))))));
+    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { 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", { 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() {
@@ -163,6 +158,26 @@ export class TttxTreeView {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "expandNode",
+        "name": "expandNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ExpandNodeEvent",
+          "resolved": "ExpandNodeEvent",
+          "references": {
+            "ExpandNodeEvent": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        }
       }];
   }
 }

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

@@ -24,7 +24,7 @@ export const Default = TttxTreeViewStory.bind({});
 Default.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
@@ -34,16 +34,15 @@ Default.args = {
       iconColor: 'green',
       child: [
         {
-          id: 2,
+          id: 'second',
           title: 'Boop',
           isOpen: false,
           openOrClosed: 'arrow_right',
           icon: 'check_circle',
           iconColor: 'green',
-          menuActive: true,
           child: [
             {
-              id: 2,
+              id: 'third',
               hasIcon: true,
               icon: 'help',
               iconColor: 'gray',
@@ -69,7 +68,6 @@ Default.args = {
       openOrClosed: 'arrow_right',
       icon: 'help',
       iconColor: 'gray',
-      chevronActive: true,
       child: [
         {
           id: 4,
@@ -86,8 +84,6 @@ Default.args = {
           icon: 'help',
           iconColor: 'gray',
           title: 'sjdnfkn 2077',
-          chevronActive: true,
-          menuActive: true,
         },
       ],
     },
@@ -106,171 +102,23 @@ export const Simple = TttxTreeViewSimple.bind({});
 Simple.args = {
   data: [
     {
-      id: 1,
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      openOrClosed: 'arrow_right',
-      hasCheckbox: false,
-      hasIcon: false,
-      child: [
-        {
-          id: 2,
-          title: 'Boop',
-          isOpen: false,
-          openOrClosed: 'arrow_right',
-          child: [
-            {
-              id: 2,
-              hasIcon: false,
-              title: 'this is a test',
-            },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          openOrClosed: 'arrow_right',
-          hasIcon: false,
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      openOrClosed: 'arrow_right',
-      hasIcon: false,
-      hasCheckbox: false,
-      child: [
-        {
-          id: 4,
-          title: 'Boop 2077',
-        },
-        {
-          id: 4,
-          title: 'sjdnfkn 2077',
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewRightButtons = ({ data }) => `
-    <tttx-tree-view id="treeViewRightButtons"></tttx-tree-view>
-    <script>
-    if(!treeViewRightButtons) {
-      const treeViewRightButtons = document.getElementById('treeViewRightButtons');
-    }
-    treeViewRightButtons.data = ${JSON.stringify(data)};
-    </script>
-
-`;
-export const RightButtons = TttxTreeViewRightButtons.bind({});
-RightButtons.args = {
-  data: [
-    {
-      id: 1,
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      openOrClosed: 'arrow_right',
-      hasCheckbox: false,
-      hasIcon: false,
-      menuActive: true,
-      chevronActive: true,
-      child: [
-        {
-          id: 2,
-          title: 'Boop',
-          isOpen: false,
-          openOrClosed: 'arrow_right',
-          hasIcon: false,
-          menuActive: true,
-          chevronActive: true,
-          child: [
-            {
-              id: 2,
-              hasIcon: false,
-              title: 'this is a test',
-              menuActive: true,
-              chevronActive: true,
-            },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          openOrClosed: 'arrow_right',
-          hasIcon: false,
-          menuActive: true,
-          chevronActive: true,
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      openOrClosed: 'arrow_right',
-      hasIcon: false,
-      menuActive: true,
-      chevronActive: true,
-      child: [
-        {
-          id: 4,
-          hasCheckbox: false,
-          hasIcon: false,
-          title: 'Boop 2077',
-          menuActive: true,
-          chevronActive: true,
-        },
-        {
-          id: 4,
-          hasCheckbox: false,
-          hasIcon: false,
-          title: 'sjdnfkn 2077',
-          chevronActive: true,
-          menuActive: true,
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewMenuButton = ({ data }) => `
-    <tttx-tree-view id="treeViewMenuButton"></tttx-tree-view>
-    <script>
-    if(!treeViewMenuButton) {
-      const treeViewMenuButton = document.getElementById('treeViewMenuButton');
-    }
-    treeViewMenuButton.data = ${JSON.stringify(data)};
-    </script>
-
-`;
-export const MenuButton = TttxTreeViewMenuButton.bind({});
-MenuButton.args = {
-  data: [
-    {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
       hasCheckbox: false,
       hasIcon: false,
-      menuActive: true,
       child: [
         {
-          id: 2,
+          id: 'second',
           title: 'Boop',
           isOpen: false,
           openOrClosed: 'arrow_right',
-          hasIcon: false,
-          menuActive: true,
           child: [
             {
-              id: 2,
+              id: 'third',
               hasIcon: false,
               title: 'this is a test',
-              menuActive: true,
             },
           ],
         },
@@ -280,7 +128,6 @@ MenuButton.args = {
           isOpen: false,
           openOrClosed: 'arrow_right',
           hasIcon: false,
-          menuActive: true,
         },
       ],
     },
@@ -290,95 +137,15 @@ MenuButton.args = {
       isOpen: false,
       openOrClosed: 'arrow_right',
       hasIcon: false,
-      menuActive: true,
-      child: [
-        {
-          id: 4,
-          hasCheckbox: false,
-          hasIcon: false,
-          title: 'Boop 2077',
-          menuActive: true,
-        },
-        {
-          id: 4,
-          hasCheckbox: false,
-          hasIcon: false,
-          title: 'sjdnfkn 2077',
-          menuActive: true,
-        },
-      ],
-    },
-  ],
-};
-const TttxTreeViewChevron = ({ data }) => `
-    <tttx-tree-view id="treeViewChevron"></tttx-tree-view>
-    <script>
-    if(!treeViewChevron) {
-      const treeViewChevron = document.getElementById('treeViewChevron');
-    }
-    treeViewChevron.data = ${JSON.stringify(data)};
-    </script>
-
-`;
-export const Chevron = TttxTreeViewChevron.bind({});
-Chevron.args = {
-  data: [
-    {
-      id: 1,
-      title: 'Role Specific Vocational Qualification',
-      isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: false,
-      hasIcon: false,
-      chevronActive: true,
-      child: [
-        {
-          id: 2,
-          title: 'Boop',
-          isOpen: false,
-          openOrClosed: 'arrow_right',
-          hasIcon: false,
-          chevronActive: true,
-          child: [
-            {
-              id: 2,
-              hasIcon: false,
-              title: 'this is a test',
-              chevronActive: true,
-            },
-          ],
-        },
-        {
-          id: 3,
-          title: 'Boop',
-          isOpen: false,
-          openOrClosed: 'arrow_right',
-          hasIcon: false,
-          chevronActive: true,
-        },
-      ],
-    },
-    {
-      id: 3,
-      title: 'second route',
-      isOpen: false,
-      openOrClosed: 'arrow_right',
-      hasIcon: false,
-      chevronActive: true,
       child: [
         {
           id: 4,
-          hasCheckbox: false,
-          hasIcon: false,
           title: 'Boop 2077',
-          chevronActive: true,
         },
         {
           id: 4,
-          hasCheckbox: false,
-          hasIcon: false,
           title: 'sjdnfkn 2077',
-          chevronActive: true,
         },
       ],
     },
@@ -397,7 +164,7 @@ export const HTML = TttxTreeViewHTML.bind({});
 HTML.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       html: '<div>This is html </div>',
@@ -466,7 +233,7 @@ export const Checkbox = TttxTreeViewCheckbox.bind({});
 Checkbox.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
@@ -540,7 +307,7 @@ export const Icons = TttxTreeViewIcons.bind({});
 Icons.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
@@ -619,7 +386,7 @@ export const CheckBoxAndIcons = TttxTreeViewCheckBoxAndIcons.bind({});
 CheckBoxAndIcons.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
@@ -753,7 +520,7 @@ export const EmptyGroup = TttxTreeViewEmptyGroup.bind({});
 EmptyGroup.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
@@ -775,11 +542,11 @@ const TttxTreeViewselectable = ({ data }) => `
     treeViewselectable.data = ${JSON.stringify(data)};
     </script>
 `;
-export const selectableAndHover = TttxTreeViewselectable.bind({});
-selectableAndHover.args = {
+export const SelectableAndHover = TttxTreeViewselectable.bind({});
+SelectableAndHover.args = {
   data: [
     {
-      id: 1,
+      id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       openOrClosed: 'arrow_right',
@@ -788,10 +555,9 @@ selectableAndHover.args = {
       hasHover: true,
       selectable: true,
       selected: false,
-      chevronActive: true,
       child: [
         {
-          id: 2,
+          id: 'second',
           title: 'Boop',
           isOpen: false,
           hasCheckbox: false,
@@ -800,10 +566,9 @@ selectableAndHover.args = {
           hasHover: true,
           selectable: true,
           selected: false,
-          chevronActive: true,
           child: [
             {
-              id: 4,
+              id: 'third',
               hasCheckbox: false,
               hasIcon: false,
               title: 'this is a test',
@@ -814,7 +579,7 @@ selectableAndHover.args = {
           ],
         },
         {
-          id: 3,
+          id: 'fouth',
           title: 'Boop',
           isOpen: false,
           openOrClosed: 'arrow_right',

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,99 @@
+import { Host, h } from '@stencil/core';
+export class TttxDataPattern {
+  constructor() {
+    this.data = undefined;
+    this.sorteroptions = undefined;
+    this.filteroptions = undefined;
+    this.filterheader = 'Filter';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar", { border: true }, h("span", { slot: "before" }, h("tttx-sorter", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorteroptions, defaultOption: "Sort by" }), h("tttx-filter", { "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", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: "Search", type: "text",
+      // onInput={this.debounceFilter.bind(this)}
+      maxlength: 30 }))), h("tttx-toolbar", { border: false }, h("span", { slot: "before" }, h("tttx-button", { design: "primary", icon: "add" }, "Add"))), h("tttx-list", { data: this.data }))));
+  }
+  static get is() { return "tttx-data-pattern"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-data-pattern.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-data-pattern.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      },
+      "sorteroptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sorteroptions",
+        "reflect": false
+      },
+      "filteroptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filteroptions",
+        "reflect": false
+      },
+      "filterheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filterheader",
+        "reflect": false,
+        "defaultValue": "'Filter'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,35 @@
+export default {
+  title: 'organisms/Data Pattern',
+  component: 'data-pattern',
+  argTypes: {
+    border: {
+      control: { type: 'boolean' }
+    },
+  },
+};
+const Default = ({ data, sorterOptions, filterOptions }) => `
+    <tttx-data-pattern id="datapatternlist"></tttx-data-pattern>
+    <script>
+      const element = document.getElementById('datapatternlist');
+      element.data = ${JSON.stringify(data)};
+      element.sorteroptions = ${JSON.stringify(sorterOptions)};
+      element.filteroptions = ${JSON.stringify(filterOptions)};
+    </script>    
+`;
+export const WIPDefaultDataPattern = Default.bind({});
+WIPDefaultDataPattern.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ],
+  sorterOptions: {
+    sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Age' }],
+  },
+  filterOptions: [
+    { optionIcon: 'cancel', optionIconColor: 'exit', optionText: 'MAGICAL' },
+    { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
+    { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
+  ]
+};

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 /* tttx custom elements */
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
+export { TttxDataPattern as TttxDataPattern } from '../types/components/organisms/tttx-data-pattern/tttx-data-pattern';
 export { TttxDialogBox as TttxDialogBox } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
 export { TttxExpander as TttxExpander } from '../types/components/molecules/tttx-expander/tttx-expander';
 export { TttxFilter as TttxFilter } from '../types/components/molecules/tttx-filter/tttx-filter';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
+export { TttxDataPattern, defineCustomElement as defineCustomElementTttxDataPattern } from './tttx-data-pattern.js';
 export { TttxDialogBox, defineCustomElement as defineCustomElementTttxDialogBox } from './tttx-dialog-box.js';
 export { TttxExpander, defineCustomElement as defineCustomElementTttxExpander } from './tttx-expander.js';
 export { TttxFilter, defineCustomElement as defineCustomElementTttxFilter } from './tttx-filter.js';

package/dist/components/tttx-data-pattern.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxDataPattern extends Components.TttxDataPattern, HTMLElement {}
+export const TttxDataPattern: {
+  prototype: TttxDataPattern;
+  new (): TttxDataPattern;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;