@3t-transform/threeteeui 1.9.71 → 1.9.73

package/dist/components/tttx-tree-view_1_9_71.js

@@ -1,235 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Fragment } from '@stencil/core/internal/client';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
-import { d as defineCustomElement$3 } from './tttx-button.js';
-import { d as defineCustomElement$2 } from './tttx-icon.js';
-
-const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element>ul{margin:0;padding:0}.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}.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}.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}.tree-view-element ul li.inline-tree-item.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.tree-node::before{background-color:#fafafa;height:51px;z-index:1}.tree-view-element ul li.inline-tree-item.element-row.tree-node *{z-index:2}.tree-view-element ul li.inline-tree-item.element-row .treeNode{width:100%;font-weight:500;color:#212121}.tree-view-element ul li.inline-tree-item.element-row .treeLeaf{width:100%;font-weight:400}.tree-view-element ul li.inline-tree-item.element-row .drag-handle{margin-right:10px}.tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed{border-color:red;border-style:dashed;cursor:not-allowed;opacity:0.7}";
-
-const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.clickEvent = createEvent(this, "clickEvent", 7);
-    this.expandNode = createEvent(this, "expandNode", 7);
-    this.checkboxChange = createEvent(this, "checkboxChange", 7);
-    this.moveNode = createEvent(this, "moveNode", 7);
-    this.dragIcon = getAssetPath('assets/img/drag-icon.svg');
-    this.dragGhost = {
-      el: null,
-    };
-    this.createGhostImage = (label) => {
-      const ghost = document.createElement('div');
-      ghost.textContent = label;
-      Object.assign(ghost.style, {
-        position: 'absolute',
-        top: '-9999px',
-        left: '-9999px',
-        padding: '6px 20px',
-        background: 'white',
-        border: '1px solid #ccc',
-        fontSize: '14px',
-        pointerEvents: 'none',
-      });
-      document.body.appendChild(ghost);
-      setTimeout(() => document.body.removeChild(ghost), 0);
-      return ghost;
-    };
-    this.handleDragStart = (event, node, index, parentId) => {
-      if (!event.dataTransfer)
-        return;
-      this.draggedNodeParentId = parentId;
-      const payload = JSON.stringify({ parentId, index, node });
-      event.dataTransfer.setData('text/plain', payload);
-      const ghostImg = this.createGhostImage(node.title);
-      this.dragGhost.el = ghostImg;
-      event.dataTransfer.setDragImage(ghostImg, 0, 0);
-    };
-    this.handleDragDrop = (event, node, targetIndex, parentId) => {
-      var _a;
-      event.preventDefault();
-      const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
-      if (!nodeData)
-        return;
-      const { parentId: sourceParentId, index: sourceParentIndex, node: sourceNode } = JSON.parse(nodeData);
-      if (node.id === sourceNode.id || sourceParentId !== parentId)
-        return;
-      const updatedTree = [...this.treeData];
-      const parent = this.findNodeById(updatedTree, parentId);
-      const children = [...parent.child];
-      const [moved] = children.splice(sourceParentIndex, 1);
-      children.splice(targetIndex, 0, moved);
-      parent.child = children;
-      this.treeData = updatedTree;
-      this.draggedNodeParentId = undefined;
-      if (this.dragGhost.el) {
-        this.dragGhost.el.remove();
-        this.dragGhost.el = null;
-      }
-      this.moveNode.emit(this.treeData);
-    };
-    this.handleDragOver = (event, parentId) => {
-      event.preventDefault();
-      if (!event.dataTransfer)
-        return;
-      const validDrag = this.draggedNodeParentId === parentId;
-      event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
-    };
-    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);
-  }
-  toggleNode(node, event) {
-    event.stopPropagation();
-    node.isOpen = !node.isOpen;
-    this.treeData = [...this.treeData];
-    this.expandNode.emit({ node: node, treeViewData: this.treeData });
-  }
-  handleCheckboxChange(node, event) {
-    event.stopPropagation();
-    node.checked = !node.checked;
-    this.updateChildrenCheckStatus(node);
-    this.updateParentCheckStatus();
-    this.treeData = [...this.treeData];
-    this.checkboxChange.emit(this.treeData);
-  }
-  updateChildrenCheckStatus(node) {
-    if (node.child) {
-      node.child.forEach(childNode => {
-        if (childNode.hasCheckbox && childNode.checked !== undefined) {
-          // don't set checked on a child that doesn't have a checkbox
-          // makes it impossible to unselect a parent as child can never be unchecked in frontend
-          childNode.checked = node.checked;
-        }
-        this.updateChildrenCheckStatus(childNode);
-      });
-    }
-  }
-  /**
-   * Update the checkbox status of parent nodes when children have been updated.
-   * Called recursively to traverse the tree for parents.
-   * First call with no params to automatically start at the top of the tree.
-   *
-   * Any children checked -> parent is checked.
-   *
-   * All children unchecked -> parent is unchecked.
-   */
-  updateParentCheckStatus(parent = undefined, children = undefined) {
-    if (parent === undefined) {
-      this.treeData.forEach(node => this.updateParentCheckStatus(node, node.child));
-      return;
-    }
-    let childrenCheckedStatuses = [];
-    // set status relative to children if we have some
-    if (children && children.length > 0) {
-      childrenCheckedStatuses = children.map(node => this.updateParentCheckStatus(node, node.child)).flat(1);
-      // parent checked if any children are checked
-      if (childrenCheckedStatuses.some(checked => checked)) {
-        parent.checked = true;
-      }
-      // parent unchecked if all children are unchecked
-      if (childrenCheckedStatuses.every(checked => !checked)) {
-        parent.checked = false;
-      }
-    }
-    // return the gathered checked statuses so nodes above can make check choices
-    return [...childrenCheckedStatuses, parent.checked];
-  }
-  treeConfigs(node) {
-    let checkboxIcon, checkboxColor;
-    if (node.checked) {
-      checkboxIcon = 'check_box';
-      checkboxColor = 'blue';
-    }
-    else {
-      checkboxIcon = 'check_box_outline_blank';
-      checkboxColor = 'grey';
-    }
-    const rowHoverActive = node.hasHover ? 'rowHover' : '';
-    const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
-    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
-    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive };
-  }
-  findNodeById(nodes, id) {
-    for (const node of nodes) {
-      if (node.id === id)
-        return node;
-      if (node.child) {
-        const found = this.findNodeById(node.child, id);
-        if (found)
-          return found;
-      }
-    }
-    return undefined;
-  }
-  renderNode(node, index, parentId = undefined) {
-    var _a, _b;
-    const options = this.treeConfigs(node);
-    if (node.child) {
-      return (h(Fragment, null, h("li", Object.assign({ "data-id": node.id, draggable: (_a = node.draggable) !== null && _a !== void 0 ? _a : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
-          if (node.hasHover) {
-            this.onClickHandler(event, node);
-          }
-        } }), h("tttx-button_1_9_71", { 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, index, parentId)), node.isOpen ? (h("li", null, h("ul", null, node.child.map((childNode, index) => {
-        return this.renderNode(childNode, index, node.id);
-      })))) : null));
-    }
-    else {
-      return (h("li", Object.assign({ "data-id": node.id, draggable: (_b = node.draggable) !== null && _b !== void 0 ? _b : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
-          if (node.hasHover) {
-            this.onClickHandler(event, node);
-          }
-        } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
-    }
-  }
-  htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_71", { 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_9_71", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) })));
-    return htmlcode;
-  }
-  render() {
-    if (!this.data)
-      return;
-    return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
-  }
-  get el() { return this; }
-  static get style() { return tttxTreeViewCss; }
-}, [1, "tttx-tree-view_1_9_71", {
-    "data": [1040],
-    "treeData": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-tree-view_1_9_71", "tttx-button_1_9_71", "tttx-icon_1_9_71"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-tree-view_1_9_71":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxTreeView);
-      }
-      break;
-    case "tttx-button_1_9_71":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "tttx-icon_1_9_71":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const TttxTreeView_1_9_71 = TttxTreeView;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxTreeView_1_9_71, defineCustomElement };

package/dist/esm/tttx-tree-view_1_9_71.entry.js

@@ -1,203 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getAssetPath, h, F as Fragment, g as getElement } from './index-9f3e16ad.js';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-38a67458.js';
-import './_commonjsHelpers-9943807e.js';
-
-const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element>ul{margin:0;padding:0}.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}.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}.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}.tree-view-element ul li.inline-tree-item.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.tree-node::before{background-color:#fafafa;height:51px;z-index:1}.tree-view-element ul li.inline-tree-item.element-row.tree-node *{z-index:2}.tree-view-element ul li.inline-tree-item.element-row .treeNode{width:100%;font-weight:500;color:#212121}.tree-view-element ul li.inline-tree-item.element-row .treeLeaf{width:100%;font-weight:400}.tree-view-element ul li.inline-tree-item.element-row .drag-handle{margin-right:10px}.tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed{border-color:red;border-style:dashed;cursor:not-allowed;opacity:0.7}";
-
-const TttxTreeView = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.clickEvent = createEvent(this, "clickEvent", 7);
-    this.expandNode = createEvent(this, "expandNode", 7);
-    this.checkboxChange = createEvent(this, "checkboxChange", 7);
-    this.moveNode = createEvent(this, "moveNode", 7);
-    this.dragIcon = getAssetPath('assets/img/drag-icon.svg');
-    this.dragGhost = {
-      el: null,
-    };
-    this.createGhostImage = (label) => {
-      const ghost = document.createElement('div');
-      ghost.textContent = label;
-      Object.assign(ghost.style, {
-        position: 'absolute',
-        top: '-9999px',
-        left: '-9999px',
-        padding: '6px 20px',
-        background: 'white',
-        border: '1px solid #ccc',
-        fontSize: '14px',
-        pointerEvents: 'none',
-      });
-      document.body.appendChild(ghost);
-      setTimeout(() => document.body.removeChild(ghost), 0);
-      return ghost;
-    };
-    this.handleDragStart = (event, node, index, parentId) => {
-      if (!event.dataTransfer)
-        return;
-      this.draggedNodeParentId = parentId;
-      const payload = JSON.stringify({ parentId, index, node });
-      event.dataTransfer.setData('text/plain', payload);
-      const ghostImg = this.createGhostImage(node.title);
-      this.dragGhost.el = ghostImg;
-      event.dataTransfer.setDragImage(ghostImg, 0, 0);
-    };
-    this.handleDragDrop = (event, node, targetIndex, parentId) => {
-      var _a;
-      event.preventDefault();
-      const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
-      if (!nodeData)
-        return;
-      const { parentId: sourceParentId, index: sourceParentIndex, node: sourceNode } = JSON.parse(nodeData);
-      if (node.id === sourceNode.id || sourceParentId !== parentId)
-        return;
-      const updatedTree = [...this.treeData];
-      const parent = this.findNodeById(updatedTree, parentId);
-      const children = [...parent.child];
-      const [moved] = children.splice(sourceParentIndex, 1);
-      children.splice(targetIndex, 0, moved);
-      parent.child = children;
-      this.treeData = updatedTree;
-      this.draggedNodeParentId = undefined;
-      if (this.dragGhost.el) {
-        this.dragGhost.el.remove();
-        this.dragGhost.el = null;
-      }
-      this.moveNode.emit(this.treeData);
-    };
-    this.handleDragOver = (event, parentId) => {
-      event.preventDefault();
-      if (!event.dataTransfer)
-        return;
-      const validDrag = this.draggedNodeParentId === parentId;
-      event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
-    };
-    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);
-  }
-  toggleNode(node, event) {
-    event.stopPropagation();
-    node.isOpen = !node.isOpen;
-    this.treeData = [...this.treeData];
-    this.expandNode.emit({ node: node, treeViewData: this.treeData });
-  }
-  handleCheckboxChange(node, event) {
-    event.stopPropagation();
-    node.checked = !node.checked;
-    this.updateChildrenCheckStatus(node);
-    this.updateParentCheckStatus();
-    this.treeData = [...this.treeData];
-    this.checkboxChange.emit(this.treeData);
-  }
-  updateChildrenCheckStatus(node) {
-    if (node.child) {
-      node.child.forEach(childNode => {
-        if (childNode.hasCheckbox && childNode.checked !== undefined) {
-          // don't set checked on a child that doesn't have a checkbox
-          // makes it impossible to unselect a parent as child can never be unchecked in frontend
-          childNode.checked = node.checked;
-        }
-        this.updateChildrenCheckStatus(childNode);
-      });
-    }
-  }
-  /**
-   * Update the checkbox status of parent nodes when children have been updated.
-   * Called recursively to traverse the tree for parents.
-   * First call with no params to automatically start at the top of the tree.
-   *
-   * Any children checked -> parent is checked.
-   *
-   * All children unchecked -> parent is unchecked.
-   */
-  updateParentCheckStatus(parent = undefined, children = undefined) {
-    if (parent === undefined) {
-      this.treeData.forEach(node => this.updateParentCheckStatus(node, node.child));
-      return;
-    }
-    let childrenCheckedStatuses = [];
-    // set status relative to children if we have some
-    if (children && children.length > 0) {
-      childrenCheckedStatuses = children.map(node => this.updateParentCheckStatus(node, node.child)).flat(1);
-      // parent checked if any children are checked
-      if (childrenCheckedStatuses.some(checked => checked)) {
-        parent.checked = true;
-      }
-      // parent unchecked if all children are unchecked
-      if (childrenCheckedStatuses.every(checked => !checked)) {
-        parent.checked = false;
-      }
-    }
-    // return the gathered checked statuses so nodes above can make check choices
-    return [...childrenCheckedStatuses, parent.checked];
-  }
-  treeConfigs(node) {
-    let checkboxIcon, checkboxColor;
-    if (node.checked) {
-      checkboxIcon = 'check_box';
-      checkboxColor = 'blue';
-    }
-    else {
-      checkboxIcon = 'check_box_outline_blank';
-      checkboxColor = 'grey';
-    }
-    const rowHoverActive = node.hasHover ? 'rowHover' : '';
-    const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
-    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
-    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive };
-  }
-  findNodeById(nodes, id) {
-    for (const node of nodes) {
-      if (node.id === id)
-        return node;
-      if (node.child) {
-        const found = this.findNodeById(node.child, id);
-        if (found)
-          return found;
-      }
-    }
-    return undefined;
-  }
-  renderNode(node, index, parentId = undefined) {
-    var _a, _b;
-    const options = this.treeConfigs(node);
-    if (node.child) {
-      return (h(Fragment, null, h("li", Object.assign({ "data-id": node.id, draggable: (_a = node.draggable) !== null && _a !== void 0 ? _a : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
-          if (node.hasHover) {
-            this.onClickHandler(event, node);
-          }
-        } }), h("tttx-button_1_9_71", { 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, index, parentId)), node.isOpen ? (h("li", null, h("ul", null, node.child.map((childNode, index) => {
-        return this.renderNode(childNode, index, node.id);
-      })))) : null));
-    }
-    else {
-      return (h("li", Object.assign({ "data-id": node.id, draggable: (_b = node.draggable) !== null && _b !== void 0 ? _b : false }, (node.draggable ? { onDragOver: event => this.handleDragOver(event, parentId) } : {}), (node.draggable ? { onDrop: event => this.handleDragDrop(event, node, index, parentId) } : {}), { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: event => {
-          if (node.hasHover) {
-            this.onClickHandler(event, node);
-          }
-        } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
-    }
-  }
-  htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_71", { 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_9_71", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: purify.sanitize(node.html, domSanitiserOptions) })));
-    return htmlcode;
-  }
-  render() {
-    if (!this.data)
-      return;
-    return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
-  }
-  get el() { return getElement(this); }
-};
-TttxTreeView.style = tttxTreeViewCss;
-
-export { TttxTreeView as tttx_tree_view_1_9_71 };

package/dist/tttx/p-8392774e.entry.js

@@ -1 +0,0 @@
-import{r as t,c as a,h as o,H as i}from"./p-5c9beaf9.js";import{p as s,d as n}from"./p-55799798.js";import"./p-112455b1.js";const e=class{constructor(o){t(this,o),this.tabClick=a(this,"tabClick",7),this.leftNavigation=a(this,"leftNavigation",7),this.rightNavigation=a(this,"rightNavigation",7),this.tabFocus=0,this.tabsName=void 0,this.navigation=void 0,this.wide=void 0,this.tabs=void 0,this._tabs=void 0}onDataChange(){this.tabs&&(this._tabs="string"==typeof this.tabs?JSON.parse(this.tabs):[...this.tabs],this.tabFocus=this._tabs.findIndex((t=>-1!==t.tabIndex)))}componentWillLoad(){this.onDataChange()}handleTabClick(t){this.tabClick.emit({tabId:t.id})}handleLeftNavigation(){this.leftNavigation.emit()}handleRightNavigation(){this.rightNavigation.emit()}handleKeyDown(t){const a=this.tabList.getAttribute("aria-orientation"),o=a&&"vertical"===a?"ArrowUp":"ArrowLeft",i=a&&"vertical"===a?"ArrowDown":"ArrowRight",s=t.target;(null==s?void 0:s.tagName.toLowerCase().startsWith("tttx-comments"))||(t.key===o||t.key===i?(this._tabs[this.tabFocus].tabIndex=-1,t.key===o?(this.tabFocus--,this.tabFocus<0&&(this.tabFocus=this._tabs.length-1)):t.key===i&&(this.tabFocus++,this.tabFocus>=this._tabs.length&&(this.tabFocus=0)),this._tabs[this.tabFocus].tabIndex=0,this.tabList.querySelectorAll('[role="tab"]')[this.tabFocus].focus(),this._tabs=[...this._tabs]):"Space"!==t.code&&"Enter"!==t.code||this.tabClick.emit({tabId:this._tabs[this.tabFocus].id}))}generateTab(t){var a,i;const s=null!==(a=t.tabName)&&void 0!==a?a:o("tttx-icon_1_9_71",{style:{pointerEvents:"none",marginTop:"-2px"},icon:t.tabIcon,color:"gray",size:null!==(i=t.tabIconSize)&&void 0!==i?i:24});return o("a",{key:t.id,id:t.id,role:"tab","aria-controls":t.controls,tabindex:t.tabIndex,"aria-selected":t.selected,onClick:()=>{this.handleTabClick(t)}},s)}renderSelectedTab(t){return"string"==typeof t.pageContent?o("article",{key:t.id,id:t.controls,role:"tabpanel",tabindex:"0","aria-labelledby":t.id,"aria-expanded":t.selected,innerHTML:s.sanitize(t.pageContent,n),hidden:!t.selected}):o("article",{key:t.id,id:t.controls,role:"tabpanel",tabindex:"0","aria-labelledby":t.id,"aria-expanded":t.selected,hidden:!t.selected},t.pageContent)}render(){if(!this.tabs||0==this.tabs.length)return;const t=this._tabs.find((t=>t.selected));return o(i,null,o("div",null,o("div",{class:"tab-bar",role:"tablist","aria-label":this.tabsName,ref:t=>this.tabList=t},this.navigation&&o("div",{class:"left-navigation",tabindex:"0",onClick:this.handleLeftNavigation.bind(this)},o("tttx-icon_1_9_71",{icon:"navigate_before",color:"black"})),o("div",{class:"tabs-container"+(this.wide?" wide":"")},this._tabs.map(this.generateTab.bind(this))),this.navigation&&o("div",{class:"right-navigation",tabindex:"0",onClick:this.handleRightNavigation.bind(this)},o("tttx-icon_1_9_71",{icon:"navigate_next",color:"black"}))),t&&this.renderSelectedTab(t)))}static get watchers(){return{tabs:["onDataChange"]}}};e.style='.material-symbols-rounded.sc-tttx-tabs_1_9_71{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.sc-tttx-tabs_1_9_71-h{display:block}.tab-bar.sc-tttx-tabs_1_9_71{display:flex;height:52px}.tab-bar.sc-tttx-tabs_1_9_71>.left-navigation.sc-tttx-tabs_1_9_71,.tab-bar.sc-tttx-tabs_1_9_71>.right-navigation.sc-tttx-tabs_1_9_71{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_71>.left-navigation.sc-tttx-tabs_1_9_71>*.sc-tttx-tabs_1_9_71,.tab-bar.sc-tttx-tabs_1_9_71>.right-navigation.sc-tttx-tabs_1_9_71>*.sc-tttx-tabs_1_9_71{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_71>.tabs-container.sc-tttx-tabs_1_9_71{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs_1_9_71>.tabs-container.wide.sc-tttx-tabs_1_9_71{flex-grow:1}.tab-bar.sc-tttx-tabs_1_9_71>.tabs-container.sc-tttx-tabs_1_9_71>*[role=tab].sc-tttx-tabs_1_9_71{padding:18px 16px;line-height:16.408px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs_1_9_71>.tabs-container.sc-tttx-tabs_1_9_71>*[role=tab].sc-tttx-tabs_1_9_71:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs_1_9_71>.tabs-container.sc-tttx-tabs_1_9_71>*[role=tab][aria-selected].sc-tttx-tabs_1_9_71{color:#212121;cursor:default;border-bottom:3px solid #1579c6}';export{e as tttx_tabs_1_9_71}

package/dist/tttx/p-d1ee41dd.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,a as i,h as n,F as o,g as r}from"./p-5c9beaf9.js";import{p as l,d as s}from"./p-55799798.js";import"./p-112455b1.js";const d=class{constructor(n){e(this,n),this.clickEvent=t(this,"clickEvent",7),this.expandNode=t(this,"expandNode",7),this.checkboxChange=t(this,"checkboxChange",7),this.moveNode=t(this,"moveNode",7),this.dragIcon=i("assets/img/drag-icon.svg"),this.dragGhost={el:null},this.createGhostImage=e=>{const t=document.createElement("div");return t.textContent=e,Object.assign(t.style,{position:"absolute",top:"-9999px",left:"-9999px",padding:"6px 20px",background:"white",border:"1px solid #ccc",fontSize:"14px",pointerEvents:"none"}),document.body.appendChild(t),setTimeout((()=>document.body.removeChild(t)),0),t},this.handleDragStart=(e,t,i,n)=>{if(!e.dataTransfer)return;this.draggedNodeParentId=n;const o=JSON.stringify({parentId:n,index:i,node:t});e.dataTransfer.setData("text/plain",o);const r=this.createGhostImage(t.title);this.dragGhost.el=r,e.dataTransfer.setDragImage(r,0,0)},this.handleDragDrop=(e,t,i,n)=>{var o;e.preventDefault();const r=null===(o=e.dataTransfer)||void 0===o?void 0:o.getData("text/plain");if(!r)return;const{parentId:l,index:s,node:d}=JSON.parse(r);if(t.id===d.id||l!==n)return;const a=[...this.treeData],c=this.findNodeById(a,n),h=[...c.child],[m]=h.splice(s,1);h.splice(i,0,m),c.child=h,this.treeData=a,this.draggedNodeParentId=void 0,this.dragGhost.el&&(this.dragGhost.el.remove(),this.dragGhost.el=null),this.moveNode.emit(this.treeData)},this.handleDragOver=(e,t)=>{e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=this.draggedNodeParentId===t?"move":"none")},this.data=void 0,this.treeData=void 0}componentWillRender(){this.data&&(this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data)}onClickHandler(e,t){e.stopPropagation(),this.clickEvent.emit(t)}toggleNode(e,t){t.stopPropagation(),e.isOpen=!e.isOpen,this.treeData=[...this.treeData],this.expandNode.emit({node:e,treeViewData:this.treeData})}handleCheckboxChange(e,t){t.stopPropagation(),e.checked=!e.checked,this.updateChildrenCheckStatus(e),this.updateParentCheckStatus(),this.treeData=[...this.treeData],this.checkboxChange.emit(this.treeData)}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.hasCheckbox&&void 0!==t.checked&&(t.checked=e.checked),this.updateChildrenCheckStatus(t)}))}updateParentCheckStatus(e,t){if(void 0===e)return void this.treeData.forEach((e=>this.updateParentCheckStatus(e,e.child)));let i=[];return t&&t.length>0&&(i=t.map((e=>this.updateParentCheckStatus(e,e.child))).flat(1),i.some((e=>e))&&(e.checked=!0),i.every((e=>!e))&&(e.checked=!1)),[...i,e.checked]}treeConfigs(e){let t,i;return e.checked?(t="check_box",i="blue"):(t="check_box_outline_blank",i="grey"),{checkboxColor:i,checkboxIcon:t,rowHoverActive:e.hasHover?"rowHover":"",expanderIcon:e.isOpen?"arrow_drop_down":"arrow_right",selectedActive:e.selectable&&e.selected?"rowSelected":""}}findNodeById(e,t){for(const i of e){if(i.id===t)return i;if(i.child){const e=this.findNodeById(i.child,t);if(e)return e}}}renderNode(e,t,i){var r,l;const s=this.treeConfigs(e);return e.child?n(o,null,n("li",Object.assign({"data-id":e.id,draggable:null!==(r=e.draggable)&&void 0!==r&&r},e.draggable?{onDragOver:e=>this.handleDragOver(e,i)}:{},e.draggable?{onDrop:n=>this.handleDragDrop(n,e,t,i)}:{},{class:`inline-tree-item element-row tree-node ${s.rowHoverActive} ${s.selectedActive}`,onClick:t=>{e.hasHover&&this.onClickHandler(t,e)}}),n("tttx-button_1_9_71",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:s.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,s.checkboxIcon,s.checkboxColor,t,i)),e.isOpen?n("li",null,n("ul",null,e.child.map(((t,i)=>this.renderNode(t,i,e.id))))):null):n("li",Object.assign({"data-id":e.id,draggable:null!==(l=e.draggable)&&void 0!==l&&l},e.draggable?{onDragOver:e=>this.handleDragOver(e,i)}:{},e.draggable?{onDrop:n=>this.handleDragDrop(n,e,t,i)}:{},{class:`inline-tree-item element-row ${s.rowHoverActive} ${s.selectedActive}`,onClick:t=>{e.hasHover&&this.onClickHandler(t,e)}}),this.htmlcode("treeLeaf",e,s.checkboxIcon,s.checkboxColor,t,i))}htmlcode(e,t,i,o,r,d){return n("div",{class:"inline-tree-item element"},t.draggable&&n("img",{src:this.dragIcon,alt:"drag",class:"drag-handle",draggable:!0,onDragStart:e=>this.handleDragStart(e,t,r,d)}),t.hasCheckbox&&n("tttx-button_1_9_71",{design:"borderless-circle",notext:!0,icon:i,iconcolor:o,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&n("tttx-icon_1_9_71",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&n("div",{class:e},t.title),t.html&&n("div",{class:e,innerHTML:l.sanitize(t.html,s)}))}render(){if(this.data)return n("div",{class:"tree-view-element"},n("ul",null,this.treeData.map(((e,t)=>this.renderNode(e,t)))))}get el(){return r(this)}};d.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.tree-view-element>ul{margin:0;padding:0}.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}.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}.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}.tree-view-element ul li.inline-tree-item.element-row::before{content:"";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before{content:"";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.tree-node::before{background-color:#fafafa;height:51px;z-index:1}.tree-view-element ul li.inline-tree-item.element-row.tree-node *{z-index:2}.tree-view-element ul li.inline-tree-item.element-row .treeNode{width:100%;font-weight:500;color:#212121}.tree-view-element ul li.inline-tree-item.element-row .treeLeaf{width:100%;font-weight:400}.tree-view-element ul li.inline-tree-item.element-row .drag-handle{margin-right:10px}.tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed{border-color:red;border-style:dashed;cursor:not-allowed;opacity:0.7}';export{d as tttx_tree_view_1_9_71}