@3t-transform/threeteeui 1.4.2 → 1.5.0

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

@@ -2,32 +2,64 @@
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
 
-.tree-view-element {
-  margin-left: -50px;
+.tree-view-element > ul {
+  margin: 0;
+  padding: 0;
 }
-
-.inline-tree-item {
+.tree-view-element > * ul {
+  padding: 0 0 0 36px;
+}
+.tree-view-element ul li {
+  list-style-type: none;
+}
+.tree-view-element ul li.inline-tree-item {
   display: flex;
   align-items: center;
 }
-
-.element {
+.tree-view-element ul li.inline-tree-item .element {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
+  padding-left: 8px;
 }
-
-.element-row {
+.tree-view-element ul li.inline-tree-item .element .padding-icon {
+  padding: 6px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (hover: hover) {
+  .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover {
+    cursor: pointer;
+  }
+  .tree-view-element ul li.inline-tree-item.element-row.rowHover:hover::before {
+    content: "";
+    position: absolute;
+    left: -50%;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+  }
+  .tree-view-element ul li.inline-tree-item.element-row.rowHover:not(.rowSelected):hover::before {
+    background-color: rgba(17, 17, 17, 0.05);
+  }
+  .tree-view-element ul li.inline-tree-item.element-row.rowHover.rowSelected:hover::before {
+    background-color: rgba(17, 17, 17, 0.15);
+  }
+}
+.tree-view-element ul li.inline-tree-item.element-row {
   min-height: 36px;
   font-family: "Roboto", serif;
   font-size: 16px;
   padding: 8px 0px;
   position: relative;
 }
-
-.element-row::before {
+.tree-view-element ul li.inline-tree-item.element-row::before {
   content: "";
   position: absolute;
   left: -50%;
@@ -36,8 +68,7 @@
   border-bottom: 1px solid #d5d5d5;
   pointer-events: none;
 }
-
-.element-row.rowSelected::before {
+.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before {
   content: "";
   position: absolute;
   left: -50%;
@@ -47,52 +78,20 @@
   background-color: rgba(17, 17, 17, 0.1);
   pointer-events: none;
 }
-
-li {
-  list-style-type: none;
+.tree-view-element ul li.inline-tree-item.element-row.tree-node::before {
+  background-color: #fafafa;
+  height: 51px;
+  z-index: 1;
 }
-
-.toggleNode {
-  padding-right: 3px;
+.tree-view-element ul li.inline-tree-item.element-row.tree-node * {
+  z-index: 2;
 }
-
-.padding-icon {
-  padding: 6px 6px;
-  height: 24px;
-  width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.treeNode {
+.tree-view-element ul li.inline-tree-item.element-row .treeNode {
   width: 100%;
   font-weight: 500;
+  color: #212121;
 }
-
-.treeLeaf {
+.tree-view-element ul li.inline-tree-item.element-row .treeLeaf {
   width: 100%;
   font-weight: 400;
-}
-
-.borderless:active {
-  outline-style: none;
-}
-
-@media (hover: hover) {
-  .element-row.rowHover:hover {
-    cursor: pointer;
-  }
-
-  .element-row.rowHover:hover::before {
-    content: "";
-    position: absolute;
-    left: -50%;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(17, 17, 17, 0.05);
-    opacity: 0.5;
-    right: 0;
-    pointer-events: none;
-  }
 }

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from '@stencil/core';
+import { h, Fragment } from '@stencil/core';
 import * as DOMPurify from 'dompurify';
 import domSanitiserOptions from '../../../shared/domsanitiser.options';
 export class TttxTreeView {
@@ -7,6 +7,11 @@ export class TttxTreeView {
     this.data = undefined;
     this.treeData = undefined;
   }
+  componentWillRender() {
+    if (!this.data)
+      return;
+    this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
+  }
   onClickHandler(event, node) {
     event.stopPropagation();
     this.clickEvent.emit(node);
@@ -49,35 +54,32 @@ export class TttxTreeView {
   renderNode(node) {
     const options = this.treeConfigs(node);
     if (node.child) {
-      return (h("li", null, h("div", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: (event) => {
+      return (h(Fragment, null, h("li", { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
           if (node.hasHover) {
-            event.stopPropagation();
             this.onClickHandler(event, node);
           }
-        } }, h("tttx-button_1_4_2", { 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)), node.isOpen ? (h("ul", null, h("div", { class: "child-node" }, node.child.map(childNode => {
+        } }, h("tttx-button_1_5_0", { 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)), node.isOpen ? (h("li", null, h("ul", null, node.child.map(childNode => {
         return this.renderNode(childNode);
       })))) : null));
     }
     else {
-      return (h("li", null, h("div", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: (event) => {
+      return (h("li", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
           if (node.hasHover) {
-            event.stopPropagation();
             this.onClickHandler(event, node);
           }
-        } }, this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor))));
+        } }, this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor)));
     }
   }
   htmlcode(type, node, check_box, check_boxColor) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button_1_4_2", { 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_4_2", { 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.hasCheckbox && (h("tttx-button_1_5_0", { 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_5_0", { 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() {
     if (!this.data)
       return;
-    this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
     return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node) => this.renderNode(node)))));
   }
-  static get is() { return "tttx-tree-view_1_4_2"; }
+  static get is() { return "tttx-tree-view_1_5_0"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -1,6 +1,4 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-//import fs from 'fs';
-//import path from 'path';
 export default {
   title: 'molecules/Tree View',
   component: 'tttx-tree-view',
@@ -12,7 +10,7 @@ export default {
   decorators: [withActions],
 };
 const TttxTreeViewStory = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewDefault"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewDefault"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewDefault) {
       const treeViewDefault = document.getElementById('treeViewDefault');
@@ -27,7 +25,6 @@ Default.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: true,
       checked: false,
       icon: 'check_circle',
@@ -37,7 +34,6 @@ Default.args = {
           id: 'second',
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           icon: 'check_circle',
           iconColor: 'green',
           child: [
@@ -54,7 +50,6 @@ Default.args = {
           id: 3,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasIcon: true,
           icon: 'check_circle',
           iconColor: 'green',
@@ -65,7 +60,6 @@ Default.args = {
       id: 3,
       title: 'second route',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       icon: 'help',
       iconColor: 'gray',
       child: [
@@ -90,7 +84,7 @@ Default.args = {
   ],
 };
 const TttxTreeViewSimple = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewSimple"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewSimple"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewSimple) {
       const treeViewSimple = document.getElementById('treeViewSimple');
@@ -105,7 +99,6 @@ Simple.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: false,
       hasIcon: false,
       child: [
@@ -113,7 +106,6 @@ Simple.args = {
           id: 'second',
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           child: [
             {
               id: 'third',
@@ -126,7 +118,6 @@ Simple.args = {
           id: 3,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasIcon: false,
         },
       ],
@@ -135,7 +126,6 @@ Simple.args = {
       id: 3,
       title: 'second route',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasIcon: false,
       hasCheckbox: false,
       child: [
@@ -152,7 +142,7 @@ Simple.args = {
   ],
 };
 const TttxTreeViewHTML = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewHTML"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewHTML"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewHTML) {
       const treeViewHTML = document.getElementById('treeViewHTML');
@@ -168,7 +158,6 @@ HTML.args = {
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
       html: '<div>This is html </div>',
-      openOrClosed: 'arrow_right',
       hasCheckbox: false,
       hasIcon: false,
       child: [
@@ -177,7 +166,6 @@ HTML.args = {
           title: 'Boop',
           isOpen: false,
           html: '<div>This is html </div>',
-          openOrClosed: 'arrow_right',
           child: [
             {
               id: 2,
@@ -191,7 +179,6 @@ HTML.args = {
           id: 3,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasIcon: false,
           html: '<div>This is html </div>',
         },
@@ -201,7 +188,6 @@ HTML.args = {
       id: 3,
       title: 'second route',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasIcon: false,
       hasCheckbox: false,
       html: '<div>This is html </div>',
@@ -221,7 +207,7 @@ HTML.args = {
   ],
 };
 const TttxTreeViewCheckbox = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewCheckbox"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewCheckbox"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewCheckbox) {
       const treeViewCheckbox = document.getElementById('treeViewCheckbox');
@@ -236,7 +222,6 @@ Checkbox.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: true,
       checked: false,
       hasIcon: false,
@@ -245,7 +230,6 @@ Checkbox.args = {
           id: 2,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasCheckbox: true,
           checked: false,
           child: [
@@ -262,7 +246,6 @@ Checkbox.args = {
           id: 3,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasIcon: false,
           hasCheckbox: true,
           checked: false,
@@ -273,7 +256,6 @@ Checkbox.args = {
       id: 3,
       title: 'second route',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasIcon: false,
       hasCheckbox: true,
       checked: false,
@@ -295,7 +277,7 @@ Checkbox.args = {
   ],
 };
 const TttxTreeViewIcons = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewIcons"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewIcons"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewIcons) {
       const treeViewIcons = document.getElementById('treeViewIcons');
@@ -310,7 +292,6 @@ Icons.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: false,
       hasIcon: true,
       icon: 'check_circle',
@@ -323,7 +304,6 @@ Icons.args = {
           hasIcon: true,
           icon: 'check_circle',
           iconColor: 'green',
-          openOrClosed: 'arrow_right',
           child: [
             {
               id: 2,
@@ -338,7 +318,6 @@ Icons.args = {
           id: 3,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasIcon: true,
           icon: 'check_circle',
           iconColor: 'green',
@@ -349,7 +328,6 @@ Icons.args = {
       id: 3,
       title: 'second route',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasIcon: true,
       icon: 'help',
       iconColor: 'gray',
@@ -374,7 +352,7 @@ Icons.args = {
   ],
 };
 const TttxTreeViewCheckBoxAndIcons = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewCheckBoxAndIcons"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewCheckBoxAndIcons"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewCheckBoxAndIcons) {
       const treeViewCheckBoxAndIcons = document.getElementById('treeViewCheckBoxAndIcons');
@@ -389,7 +367,6 @@ CheckBoxAndIcons.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: true,
       checked: false,
       hasIcon: true,
@@ -405,7 +382,6 @@ CheckBoxAndIcons.args = {
           checked: false,
           icon: 'check_circle',
           iconColor: 'green',
-          openOrClosed: 'arrow_right',
           child: [
             {
               id: 2,
@@ -422,7 +398,6 @@ CheckBoxAndIcons.args = {
           id: 3,
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasCheckbox: true,
           checked: false,
           hasIcon: true,
@@ -435,7 +410,6 @@ CheckBoxAndIcons.args = {
       id: 3,
       title: 'second route',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: true,
       checked: false,
       hasIcon: true,
@@ -508,7 +482,7 @@ RequirementsList2.args = {
   data: [convertedData2],
 };
 const TttxTreeViewEmptyGroup = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewEmptyGroup"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewEmptyGroup"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewEmptyGroup) {
       const treeViewEmptyGroup = document.getElementById('treeViewEmptyGroup');
@@ -523,7 +497,6 @@ EmptyGroup.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: true,
       checked: false,
       hasIcon: true,
@@ -534,7 +507,7 @@ EmptyGroup.args = {
   ],
 };
 const TttxTreeViewselectable = ({ data }) => `
-    <tttx-tree-view_1_4_2 id="treeViewselectable"></tttx-tree-view_1_4_2>
+    <tttx-tree-view_1_5_0 id="treeViewselectable"></tttx-tree-view_1_5_0>
     <script>
     if(!treeViewselectable) {
       const treeViewselectable = document.getElementById('treeViewselectable');
@@ -550,7 +523,6 @@ SelectableAndHover.args = {
       id: 'First',
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      openOrClosed: 'arrow_right',
       hasCheckbox: false,
       hasIcon: false,
       hasHover: true,
@@ -563,7 +535,6 @@ SelectableAndHover.args = {
           isOpen: false,
           hasCheckbox: false,
           hasIcon: false,
-          openOrClosed: 'arrow_right',
           hasHover: true,
           selectable: true,
           selected: false,
@@ -583,7 +554,6 @@ SelectableAndHover.args = {
           id: 'fouth',
           title: 'Boop',
           isOpen: false,
-          openOrClosed: 'arrow_right',
           hasCheckbox: false,
           hasIcon: false,
           hasHover: true,

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

@@ -7,9 +7,9 @@ export class TttxDataPattern {
     this.filterheader = 'Filter';
   }
   render() {
-    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_4_2", { border: true }, h("span", { slot: "before" }, h("tttx-sorter_1_4_2", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorteroptions, defaultOption: "Sort by" }), h("tttx-filter_1_4_2", { "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_4_2", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: "Search", type: "text", maxlength: 30 }))), h("tttx-toolbar_1_4_2", { border: false }, h("span", { slot: "before" }, h("tttx-button_1_4_2", { design: "primary", icon: "add" }, "Add"))), h("tttx-list_1_4_2", { data: this.data }))));
+    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_5_0", { border: true }, h("span", { slot: "before" }, h("tttx-sorter_1_5_0", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorteroptions, defaultOption: "Sort by" }), h("tttx-filter_1_5_0", { "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_5_0", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: "Search", type: "text", maxlength: 30 }))), h("tttx-toolbar_1_5_0", { border: false }, h("span", { slot: "before" }, h("tttx-button_1_5_0", { design: "primary", icon: "add" }, "Add"))), h("tttx-list_1_5_0", { data: this.data }))));
   }
-  static get is() { return "tttx-data-pattern_1_4_2"; }
+  static get is() { return "tttx-data-pattern_1_5_0"; }
   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_4_2 id="datapatternlist"></tttx-data-pattern_1_4_2>
+    <tttx-data-pattern_1_5_0 id="datapatternlist"></tttx-data-pattern_1_5_0>
     <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_4_2 icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_4_2 icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_4_2 icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_4_2 icon="egg" /></span> Ben' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_5_0 icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_5_0 icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_5_0 icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_5_0 icon="egg" /></span> Ben' },
   ],
   sorterOptions: {
     sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Age' }],

package/dist/components/index.d.ts

@@ -1,30 +1,30 @@
 /* tttx custom elements */
-export { TttxButton as TttxButton_1_4_2 } from '../types/components/atoms/tttx-button/tttx-button';
-export { TttxCheckboxGroupCaption as TttxCheckboxGroupCaption_1_4_2 } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption';
-export { TttxCheckboxGroupHeading as TttxCheckboxGroupHeading_1_4_2 } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading';
-export { TttxCheckboxGroup as TttxCheckboxGroup_1_4_2 } from '../types/components/molecules/tttx-checkbox-group/tttx-checkbox-group';
-export { TttxCheckbox as TttxCheckbox_1_4_2 } from '../types/components/atoms/tttx-checkbox/tttx-checkbox';
-export { TttxDataPattern as TttxDataPattern_1_4_2 } from '../types/components/organisms/tttx-data-pattern/tttx-data-pattern';
-export { TttxDialogBox as TttxDialogBox_1_4_2 } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
-export { TttxDialog as TttxDialog_1_4_2 } from '../types/components/molecules/tttx-dialog/tttx-dialog';
-export { TttxExpander as TttxExpander_1_4_2 } from '../types/components/molecules/tttx-expander/tttx-expander';
-export { TttxFilter as TttxFilter_1_4_2 } from '../types/components/molecules/tttx-filter/tttx-filter';
-export { TttxForm as TttxForm_1_4_2 } from '../types/components/molecules/tttx-form/tttx-form';
-export { TttxIcon as TttxIcon_1_4_2 } from '../types/components/atoms/tttx-icon/tttx-icon';
-export { TttxKeyvalueBlock as TttxKeyvalueBlock_1_4_2 } from '../types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block';
-export { TttxList as TttxList_1_4_2 } from '../types/components/molecules/tttx-list/tttx-list';
-export { TttxLoadingSpinner as TttxLoadingSpinner_1_4_2 } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
-export { TttxMultiselectBox as TttxMultiselectBox_1_4_2 } from '../types/components/molecules/tttx-multiselect-box/tttx-multiselect-box';
-export { TttxPercentageBar as TttxPercentageBar_1_4_2 } from '../types/components/atoms/tttx-percentage-bar/tttx-percentage-bar';
-export { TttxQrCode as TttxQrcode_1_4_2 } from '../types/components/atoms/tttx-qrcode/tttx-qrcode';
-export { TttxSelectBox as TttxSelectBox_1_4_2 } from '../types/components/molecules/tttx-select-box/tttx-select-box';
-export { TttxSorter as TttxSorter_1_4_2 } from '../types/components/molecules/tttx-sorter/tttx-sorter';
-export { TttxInput as TttxStandaloneInput_1_4_2 } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
-export { TttxTabs as TttxTabs_1_4_2 } from '../types/components/molecules/tttx-tabs/tttx-tabs';
-export { TttxTag as TttxTag_1_4_2 } from '../types/components/atoms/tttx-tag/tttx-tag';
-export { TttxTextarea as TttxTextarea_1_4_2 } from '../types/components/molecules/tttx-textarea/tttx-textarea';
-export { TttxToolbar as TttxToolbar_1_4_2 } from '../types/components/molecules/tttx-toolbar/tttx-toolbar';
-export { TttxTreeView as TttxTreeView_1_4_2 } from '../types/components/molecules/tttx-tree-view/tttx-tree-view';
+export { TttxButton as TttxButton_1_5_0 } from '../types/components/atoms/tttx-button/tttx-button';
+export { TttxCheckboxGroupCaption as TttxCheckboxGroupCaption_1_5_0 } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption';
+export { TttxCheckboxGroupHeading as TttxCheckboxGroupHeading_1_5_0 } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading';
+export { TttxCheckboxGroup as TttxCheckboxGroup_1_5_0 } from '../types/components/molecules/tttx-checkbox-group/tttx-checkbox-group';
+export { TttxCheckbox as TttxCheckbox_1_5_0 } from '../types/components/atoms/tttx-checkbox/tttx-checkbox';
+export { TttxDataPattern as TttxDataPattern_1_5_0 } from '../types/components/organisms/tttx-data-pattern/tttx-data-pattern';
+export { TttxDialogBox as TttxDialogBox_1_5_0 } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
+export { TttxDialog as TttxDialog_1_5_0 } from '../types/components/molecules/tttx-dialog/tttx-dialog';
+export { TttxExpander as TttxExpander_1_5_0 } from '../types/components/molecules/tttx-expander/tttx-expander';
+export { TttxFilter as TttxFilter_1_5_0 } from '../types/components/molecules/tttx-filter/tttx-filter';
+export { TttxForm as TttxForm_1_5_0 } from '../types/components/molecules/tttx-form/tttx-form';
+export { TttxIcon as TttxIcon_1_5_0 } from '../types/components/atoms/tttx-icon/tttx-icon';
+export { TttxKeyvalueBlock as TttxKeyvalueBlock_1_5_0 } from '../types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block';
+export { TttxList as TttxList_1_5_0 } from '../types/components/molecules/tttx-list/tttx-list';
+export { TttxLoadingSpinner as TttxLoadingSpinner_1_5_0 } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
+export { TttxMultiselectBox as TttxMultiselectBox_1_5_0 } from '../types/components/molecules/tttx-multiselect-box/tttx-multiselect-box';
+export { TttxPercentageBar as TttxPercentageBar_1_5_0 } from '../types/components/atoms/tttx-percentage-bar/tttx-percentage-bar';
+export { TttxQrCode as TttxQrcode_1_5_0 } from '../types/components/atoms/tttx-qrcode/tttx-qrcode';
+export { TttxSelectBox as TttxSelectBox_1_5_0 } from '../types/components/molecules/tttx-select-box/tttx-select-box';
+export { TttxSorter as TttxSorter_1_5_0 } from '../types/components/molecules/tttx-sorter/tttx-sorter';
+export { TttxInput as TttxStandaloneInput_1_5_0 } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
+export { TttxTabs as TttxTabs_1_5_0 } from '../types/components/molecules/tttx-tabs/tttx-tabs';
+export { TttxTag as TttxTag_1_5_0 } from '../types/components/atoms/tttx-tag/tttx-tag';
+export { TttxTextarea as TttxTextarea_1_5_0 } from '../types/components/molecules/tttx-textarea/tttx-textarea';
+export { TttxToolbar as TttxToolbar_1_5_0 } from '../types/components/molecules/tttx-toolbar/tttx-toolbar';
+export { TttxTreeView as TttxTreeView_1_5_0 } from '../types/components/molecules/tttx-tree-view/tttx-tree-view';
 
 /**
  * Used to manually set the base path where assets can be found.