@3t-transform/threeteeui 0.2.87 → 0.2.89

package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.css

@@ -0,0 +1,24 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.tttx-checkbox-group {
+  display: flex;
+  flex-direction: column;
+}
+.tttx-checkbox-group__caption {
+  color: #757575;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 19px;
+  margin-bottom: 4px;
+}
+.tttx-checkbox-group__heading {
+  color: #212121;
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 16px;
+  margin-bottom: 4px;
+}

package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.js

@@ -0,0 +1,18 @@
+import { Host, h } from '@stencil/core';
+export class TttxCheckboxGroup {
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group' }, h("slot", null))));
+  }
+  static get is() { return "tttx-checkbox-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-checkbox-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-checkbox-group.css"]
+    };
+  }
+}

package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.stories.js

@@ -0,0 +1,83 @@
+export default {
+  title: 'Molecules/CheckboxGroup',
+  component: 'tttx-checkbox-group',
+  argTypes: {
+    checkboxGroupHeading: {
+      control: { type: 'text' },
+      default: 'Checkbox Group',
+    },
+  },
+};
+const CheckboxGroupTemplate = ({ heading, checkboxData, captionTop, captionBottom }) => {
+  return `
+        <tttx-checkbox-group >           
+             ${heading ? `
+                <tttx-checkbox-group-heading>
+                    ${heading}
+                </tttx-checkbox-group-heading>
+            ` : ''}
+
+            ${captionTop ? `
+                <tttx-checkbox-group-caption>
+                    ${captionTop}
+                </tttx-checkbox-group-caption>
+            ` : ''}
+
+            ${checkboxData.map(checkboxInfo => {
+    const { label, checked, inline, indeterminate } = checkboxInfo;
+    return `
+                        <tttx-checkbox 
+                            checkbox-id="checkbox" 
+                            label="${label}" 
+                            ${inline && 'inline'} 
+                            ${indeterminate && 'indeterminate'} 
+                            ${checked && 'checked'} 
+                        >
+                        </tttx-checkbox> `;
+  }).join('')}
+
+            ${captionBottom ? `
+                <tttx-checkbox-group-caption>
+                    ${captionBottom}
+                </tttx-checkbox-group-caption>
+            ` : ''}       
+        </tttx-checkbox-group>
+    `;
+};
+export const singleCheckbox = CheckboxGroupTemplate.bind({});
+singleCheckbox.args = {
+  heading: 'Safety-critical',
+  captionTop: 'This tags selected activities as safety-critical and can be changed indivudually once added',
+  checkboxData: [
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Tag as safety-critical',
+    }
+  ]
+};
+export const multipleCheckboxes = CheckboxGroupTemplate.bind({});
+multipleCheckboxes.args = {
+  heading: 'Favorite Cartoon Dad',
+  captionTop: 'This is a primary judge of character',
+  checkboxData: [
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Homer Sampson',
+      checked: true
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Fred Flinrock',
+      indeterminate: true
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'George Aeroplanesone',
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Other',
+    }
+  ],
+  captionBottom: 'Only messing',
+};

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

@@ -31,7 +31,6 @@
   content: "";
   position: absolute;
   left: -50%;
-  right: -50%;
   bottom: 0;
   right: 0;
   border-bottom: 1px solid #d5d5d5;
@@ -41,12 +40,10 @@
   content: "";
   position: absolute;
   left: -50%;
-  right: -50%;
   top: 0;
   bottom: 0;
   right: 0;
   background-color: rgba(17, 17, 17, 0.1);
-  z-index: -1;
 }
 
 li {
@@ -92,12 +89,11 @@ li {
     content: "";
     position: absolute;
     left: -50%;
-    right: -50%;
     top: 0;
     bottom: 0;
     background-color: rgba(17, 17, 17, 0.05);
     opacity: 0.5;
-    z-index: -1;
     right: 0;
+    z-index: -1;
   }
 }

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/components/index.d.ts

@@ -1,5 +1,9 @@
 /* tttx custom elements */
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
+export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/tttx-checkbox/tttx-checkbox';
+export { TttxCheckboxGroup as TttxCheckboxGroup } from '../types/components/molecules/tttx-checkbox-group/tttx-checkbox-group';
+export { TttxCheckboxGroupCaption as TttxCheckboxGroupCaption } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption';
+export { TttxCheckboxGroupHeading as TttxCheckboxGroupHeading } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading';
 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';

package/dist/components/index.js

@@ -1,5 +1,9 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
+export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox } from './tttx-checkbox.js';
+export { TttxCheckboxGroup, defineCustomElement as defineCustomElementTttxCheckboxGroup } from './tttx-checkbox-group.js';
+export { TttxCheckboxGroupCaption, defineCustomElement as defineCustomElementTttxCheckboxGroupCaption } from './tttx-checkbox-group-caption.js';
+export { TttxCheckboxGroupHeading, defineCustomElement as defineCustomElementTttxCheckboxGroupHeading } from './tttx-checkbox-group-heading.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';

package/dist/components/tttx-checkbox-group-caption.d.ts

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

package/dist/components/tttx-checkbox-group-caption.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const TttxCheckboxGroupCaption$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group__caption' }, h("slot", null))));
+  }
+}, [4, "tttx-checkbox-group-caption"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox-group-caption"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox-group-caption":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckboxGroupCaption$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckboxGroupCaption = TttxCheckboxGroupCaption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckboxGroupCaption, defineCustomElement };