@3t-transform/threeteeui 0.1.59 → 0.1.61

package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.js

@@ -0,0 +1,235 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxSelectBox {
+  constructor() {
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.open = false;
+    this.selectedItem = undefined;
+    this.searchTerm = '';
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  onDropdownClicked() {
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.toggleOpen.emit(this.open);
+  }
+  onItemSelected(option) {
+    this.selectedItem = option;
+    this.selectItemEvent.emit(this.selectedItem);
+    this.el.blur();
+  }
+  dropdownSelectorContent() {
+    if (!this.selectedItem)
+      return h("div", { class: "placeholder" }, this.placeholder);
+    return h("div", null, this.selectedItem.label);
+  }
+  dropdownOption(option) {
+    /* istanbul ignore next */
+    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
+    const selected = this.selectedItem && option.value === this.selectedItem.value;
+    if (option.html) {
+      const sanitisedHTML = DOMPurify.sanitize(option.html, domSanitiserOptions);
+      /* istanbul ignore next */
+      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
+    }
+    /* istanbul ignore next */
+    return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
+  }
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
+    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body" }, this.searchEnabled &&
+      /* istanbul ignore next */
+      h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), h("div", { class: "dropdown-options-list" }, parsedOptionsData.map((option) => {
+      return this.dropdownOption(option);
+    })))))));
+  }
+  static get is() { return "tttx-select-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-select-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-select-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "optionsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | SelectItem[]",
+          "resolved": "SelectItem[] | string",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options-data",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "searchEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-enabled",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "selectedItem": {},
+      "searchTerm": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectItemEvent",
+        "name": "selectItemEvent",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem",
+          "resolved": "SelectItem",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleOpen",
+        "name": "toggleOpen",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "closeSelectBox",
+        "method": "handleCloseSelectBox",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.stories.js

@@ -0,0 +1,69 @@
+export default {
+  title: 'molecules/Select Box',
+  component: 'tttx-select-box',
+};
+const options = [
+  { value: 'Bonnie', label: 'Steuber' },
+  { value: 'Priscilla', label: 'Lowe' },
+  { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
+  { value: 'egg', label: 'egg', html: '<tttx-icon icon="egg" />' },
+  { value: 'Terence', label: 'Hyatt' },
+  { value: 'Ruben', label: 'Toy' },
+  { value: 'Rhiannon', label: 'Hills' },
+  { value: 'Trent', label: 'Mueller' },
+  { value: 'Penelope', label: 'Mann' },
+  { value: 'Oswaldo', label: 'Klocko' },
+  { value: 'Jorge', label: 'Lockman' },
+  { value: 'Conner', label: 'Feeney' },
+  { value: 'Dorian', label: 'Fay' },
+  { value: 'Estrella', label: 'Predovic' },
+  { value: 'Heidi', label: 'McClure' },
+  { value: 'Ronaldo', label: 'Mann' },
+];
+const TemplateHTMLSelectBox = args => `
+    <tttx-select-box
+        id="htmlSelectBox"
+        options-data='${JSON.stringify(args.optionsData)}'
+        label='${args.label}'
+        placeholder='${args.placeholder}'
+        search-enabled='${args.searchEnabled}'
+        inline='${args.inline}'
+    ></tttx-select-box>
+    <script>
+      // Handle case where storybook renders this story twice
+      if (!htmlSelectBox.length) {
+        htmlSelectBox.addEventListener('toggleOpen', (ev) => { console.log(ev) })
+        htmlSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
+      }
+    </script>
+`;
+export const BasicHTMLSelectBox = TemplateHTMLSelectBox.bind({});
+BasicHTMLSelectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false
+};
+const TemplateJSXSelectBox = args => `
+    <tttx-select-box
+        id='objectSelectBox'
+        label='${args.label}'
+        placeholder='${args.placeholder}'
+        search-enabled='${args.searchEnabled}'
+        inline='${args.inline}'
+    ></tttx-select-box>
+    <script>
+      objectSelectBox.optionsData = ${JSON.stringify(args.optionsData)}
+      objectSelectBox.addEventListener('toggleOpen', (ev) => { console.log(ev) })
+      objectSelectBox.addEventListener('selectItemEvent', (ev) => { console.log(ev) })
+    </script>
+`;
+export const BasicJSXSelectBox = TemplateJSXSelectBox.bind({});
+BasicJSXSelectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,72 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.tree-view-element {
+  margin-left: -50px;
+}
+
+.inline-tree-item {
+  display: flex;
+  align-items: center;
+}
+
+.element {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+}
+
+.element-row {
+  min-height: 36px;
+  font-family: "Roboto", serif;
+  font-size: 16px;
+  padding: 8px 0px;
+  border-bottom: 1px solid #d5d5d5;
+}
+
+.rowHover {
+  cursor: pointer;
+}
+
+li {
+  list-style-type: none;
+}
+
+.toggleNode {
+  padding-right: 3px;
+}
+
+.padding-icon {
+  padding: 6px 6px;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.treeNode {
+  font-weight: 500;
+}
+
+.treeLeaf {
+  font-weight: 400;
+}
+
+.right-buttons-container {
+  margin-left: auto;
+  display: flex;
+}
+
+.borderless:active {
+  outline-style: none;
+}
+
+@media (hover: hover) {
+  .rowHover:hover {
+    background-color: rgba(17, 17, 17, 0.05);
+  }
+}

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

@@ -0,0 +1,140 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxTreeView {
+  constructor() {
+    this.data = undefined;
+    this.treeData = undefined;
+  }
+  onClickHandler(clickName, event, node) {
+    event.stopPropagation();
+    const returnJsonObject = JSON.stringify(node);
+    this.clickEvent.emit({ eventName: clickName, returnJsonObject });
+  }
+  toggleNode(node, event) {
+    event.stopPropagation();
+    node.isOpen = !node.isOpen;
+    this.treeData = [...this.treeData];
+  }
+  handleCheckboxChange(node, event) {
+    event.stopPropagation();
+    node.checked = !node.checked;
+    this.updateChildrenCheckStatus(node);
+    this.treeData = [...this.treeData];
+  }
+  updateChildrenCheckStatus(node) {
+    if (node.child) {
+      node.child.forEach(childNode => {
+        childNode.checked = node.checked;
+        this.updateChildrenCheckStatus(childNode);
+      });
+    }
+  }
+  renderNode(node) {
+    let checkboxIcon, checkboxColor;
+    if (node.checked) {
+      checkboxIcon = 'check_box';
+      checkboxColor = 'blue';
+    }
+    else {
+      checkboxIcon = 'check_box_outline_blank';
+      checkboxColor = 'grey';
+    }
+    const rowHoverActive = node.chevronActive ? 'rowHover' : '';
+    const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
+    if (node.child && node.child.length > 0) {
+      return (h("li", null, h("div", { class: `inline-tree-item element-row ${rowHoverActive}`, onClick: (event) => {
+          if (node.chevronActive) {
+            event.stopPropagation();
+            this.onClickHandler('row', event, node);
+          }
+        } }, h("tttx-button", { class: "toggleNode", design: "borderless-circle", notext: true, icon: expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, checkboxIcon, checkboxColor)), node.isOpen ? (h("ul", null, h("div", { class: "child-node" }, node.child.map(childNode => {
+        return this.renderNode(childNode);
+      })))) : null));
+    }
+    else {
+      return (h("li", null, h("div", { class: `inline-tree-item element-row ${rowHoverActive}`, onClick: (event) => {
+          if (node.chevronActive) {
+            event.stopPropagation();
+            this.onClickHandler('row', event, node);
+          }
+        } }, this.htmlcode('treeLeaf', node, checkboxIcon, checkboxColor))));
+    }
+  }
+  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);
+      } }))))));
+    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"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tree-view.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tree-view.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./helper/helper"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "treeData": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickEvent",
+        "name": "clickEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}