@3t-transform/threeteeui 0.2.90 → 0.2.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/tttx-select-box.cjs.entry.js +2 -2
  2. package/dist/cjs/tttx-tree-view.cjs.entry.js +1 -1
  3. package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.css +6 -0
  4. package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.js +1 -1
  5. package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.css +5 -6
  6. package/dist/components/tttx-select-box.js +2 -2
  7. package/dist/components/tttx-tree-view.js +1 -1
  8. package/dist/esm/tttx-select-box.entry.js +2 -2
  9. package/dist/esm/tttx-tree-view.entry.js +1 -1
  10. package/dist/tttx/p-d3a9fc42.entry.js +1 -0
  11. package/dist/tttx/p-d5b6dd17.entry.js +1 -0
  12. package/dist/tttx/tttx.esm.js +1 -1
  13. package/package.json +2 -2
  14. package/dist/tttx/p-177a760d.entry.js +0 -1
  15. package/dist/tttx/p-22738f43.entry.js +0 -1
package/dist/cjs/tttx-select-box.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-992a9fb3.js');
6
6
  const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
7
7
  require('./_commonjsHelpers-537d719a.js');
8
8
 
9
- const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
9
+ const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.truncated-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
10
10
 
11
11
  const TttxSelectBox = class {
12
12
  constructor(hostRef) {
@@ -51,7 +51,7 @@ const TttxSelectBox = class {
51
51
  dropdownSelectorContent() {
52
52
  if (!this.selectedItem)
53
53
  return index.h("div", { class: "placeholder" }, this.placeholder);
54
- return this.selectedItem.html ? index.h("div", { innerHTML: this.selectedItem.html }) : index.h("div", null, this.selectedItem.label);
54
+ return this.selectedItem.html ? index.h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html }) : index.h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label);
55
55
  }
56
56
  dropdownOption(option) {
57
57
  /* istanbul ignore next */
package/dist/cjs/tttx-tree-view.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-992a9fb3.js');
6
6
  const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
7
7
  require('./_commonjsHelpers-537d719a.js');
8
8
 
9
- const tttxTreeViewCss = ".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;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}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){.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;z-index:-1}}";
9
+ const tttxTreeViewCss = ".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;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.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}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{width:100%;font-weight:500}.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}}";
10
10
 
11
11
  const TttxTreeView = class {
12
12
  constructor(hostRef) {
package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.css CHANGED
@@ -49,6 +49,12 @@
49
49
  border: 1px solid #d5d5d5;
50
50
  }
51
51
 
52
+ .truncated-text {
53
+ white-space: nowrap;
54
+ overflow-x: hidden;
55
+ text-overflow: ellipsis;
56
+ }
57
+
52
58
  .dropdown-selector-chevron {
53
59
  margin-left: auto;
54
60
  height: 24px;
package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.js CHANGED
@@ -42,7 +42,7 @@ export class TttxSelectBox {
42
42
  dropdownSelectorContent() {
43
43
  if (!this.selectedItem)
44
44
  return h("div", { class: "placeholder" }, this.placeholder);
45
- return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
45
+ return this.selectedItem.html ? h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html }) : h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label);
46
46
  }
47
47
  dropdownOption(option) {
48
48
  /* istanbul ignore next */
package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.css CHANGED
@@ -34,6 +34,7 @@
34
34
  bottom: 0;
35
35
  right: 0;
36
36
  border-bottom: 1px solid #d5d5d5;
37
+ pointer-events: none;
37
38
  }
38
39
 
39
40
  .element-row.rowSelected::before {
@@ -44,6 +45,7 @@
44
45
  bottom: 0;
45
46
  right: 0;
46
47
  background-color: rgba(17, 17, 17, 0.1);
48
+ pointer-events: none;
47
49
  }
48
50
 
49
51
  li {
@@ -64,18 +66,15 @@ li {
64
66
  }
65
67
 
66
68
  .treeNode {
69
+ width: 100%;
67
70
  font-weight: 500;
68
71
  }
69
72
 
70
73
  .treeLeaf {
74
+ width: 100%;
71
75
  font-weight: 400;
72
76
  }
73
77
 
74
- .right-buttons-container {
75
- margin-left: auto;
76
- display: flex;
77
- }
78
-
79
78
  .borderless:active {
80
79
  outline-style: none;
81
80
  }
@@ -94,6 +93,6 @@ li {
94
93
  background-color: rgba(17, 17, 17, 0.05);
95
94
  opacity: 0.5;
96
95
  right: 0;
97
- z-index: -1;
96
+ pointer-events: none;
98
97
  }
99
98
  }
package/dist/components/tttx-select-box.js CHANGED
@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
3
3
  import { d as defineCustomElement$3 } from './tttx-icon2.js';
4
4
  import { d as defineCustomElement$2 } from './tttx-standalone-input2.js';
5
5
 
6
- const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
6
+ const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.truncated-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
7
7
 
8
8
  const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
9
9
  constructor() {
@@ -50,7 +50,7 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
50
50
  dropdownSelectorContent() {
51
51
  if (!this.selectedItem)
52
52
  return h("div", { class: "placeholder" }, this.placeholder);
53
- return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
53
+ return this.selectedItem.html ? h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html }) : h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label);
54
54
  }
55
55
  dropdownOption(option) {
56
56
  /* istanbul ignore next */
package/dist/components/tttx-tree-view.js CHANGED
@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
3
3
  import { d as defineCustomElement$3 } from './tttx-button2.js';
4
4
  import { d as defineCustomElement$2 } from './tttx-icon2.js';
5
5
 
6
- const tttxTreeViewCss = ".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;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}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){.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;z-index:-1}}";
6
+ const tttxTreeViewCss = ".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;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.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}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{width:100%;font-weight:500}.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}}";
7
7
 
8
8
  const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
9
9
  constructor() {
package/dist/esm/tttx-select-box.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
2
2
  import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-68752a19.js';
3
3
  import './_commonjsHelpers-9943807e.js';
4
4
 
5
- const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
5
+ const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.truncated-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
6
6
 
7
7
  const TttxSelectBox = class {
8
8
  constructor(hostRef) {
@@ -47,7 +47,7 @@ const TttxSelectBox = class {
47
47
  dropdownSelectorContent() {
48
48
  if (!this.selectedItem)
49
49
  return h("div", { class: "placeholder" }, this.placeholder);
50
- return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
50
+ return this.selectedItem.html ? h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html }) : h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label);
51
51
  }
52
52
  dropdownOption(option) {
53
53
  /* istanbul ignore next */
package/dist/esm/tttx-tree-view.entry.js CHANGED
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h } from './index-b11965d8.js'
2
2
  import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-68752a19.js';
3
3
  import './_commonjsHelpers-9943807e.js';
4
4
 
5
- const tttxTreeViewCss = ".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;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}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){.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;z-index:-1}}";
5
+ const tttxTreeViewCss = ".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;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.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}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{width:100%;font-weight:500}.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}}";
6
6
 
7
7
  const TttxTreeView = class {
8
8
  constructor(hostRef) {
package/dist/tttx/p-d3a9fc42.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as o,h as i,H as s,g as e}from"./p-65bb4035.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",3),this.toggleOpen=o(this,"toggleOpen",3),this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){const t=("string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData).filter((t=>t.value==this.selectedValue));this.selectedItem=t.length>0?t[0]:void 0}}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open)}onItemSelected(t){this.selectedItem=t,this.selectItemEvent.emit(this.selectedItem),this.el.blur()}dropdownSelectorContent(){return this.selectedItem?this.selectedItem.html?i("div",{title:this.selectedItem.label,class:"truncated-text",innerHTML:this.selectedItem.html}):i("div",{title:this.selectedItem.label,class:"truncated-text"},this.selectedItem.label):i("div",{class:"placeholder"},this.placeholder)}dropdownOption(t){const o=this.searchEnabled&&-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=this.selectedItem&&t.value===this.selectedItem.value;if(t.html){const e=n.sanitize(t.html,d);return i("div",{class:`dropdown-option ${o?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label,innerHTML:e})}return i("div",{class:`dropdown-option ${o?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},t.label)}handleSearchInput(t){this.searchTerm=t.target.value}render(){if(!this.optionsData)return;const t="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,o=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:o,color:"black"}))),this.open&&i("div",{class:"dropdown-body",style:{width:`${this.el.offsetWidth}px`}},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},t.map((t=>this.dropdownOption(t)))))))}get el(){return e(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.truncated-text{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_box}
package/dist/tttx/p-d5b6dd17.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as e,c as t,h as o}from"./p-65bb4035.js";import{p as i,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(o){e(this,o),this.clickEvent=t(this,"clickEvent",7),this.expandNode=t(this,"expandNode",7),this.data=void 0,this.treeData=void 0,this.selectedId=void 0}onClickHandler(e,t,o){t.stopPropagation();const i=JSON.stringify(o);this.clickEvent.emit({eventName:e,returnJsonObject:i}),"row"===e&&this.selectedElement(t,o)}updateSelectedId(e){this.selectedId=e}selectedElement(e,t){e.stopPropagation(),this.selectedId=t.id,this.treeData=[...this.treeData]}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.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}updateSelected(e){let t=!1;return e.id===this.selectedId&&(t=!0),t}treeConfigs(e){let t,o;return e.checked?(t="check_box",o="blue"):(t="check_box_outline_blank",o="grey"),{checkboxColor:o,checkboxIcon:t,rowHoverActive:e.hasHover?"rowHover":"",expanderIcon:e.isOpen?"arrow_drop_down":"arrow_right",selectedActive:e.selectable&&e.selected?"rowSelected":""}}renderNode(e){e.selectable&&(e.selected=this.updateSelected(e));const t=this.treeConfigs(e);return e.child?o("li",null,o("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},o("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:t.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t.checkboxIcon,t.checkboxColor)),e.isOpen?o("ul",null,o("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):o("li",null,o("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t.checkboxIcon,t.checkboxColor)))}htmlcode(e,t,r,s){return o("div",{class:"inline-tree-item element"},t.hasCheckbox&&o("tttx-button",{design:"borderless-circle",notext:!0,icon:r,iconcolor:s,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&o("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&o("div",{class:e},t.title),t.html&&o("div",{class:e,innerHTML:i.sanitize(t.html,n)}))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,o("div",{class:"tree-view-element"},o("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};r.style='.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;position:relative}.element-row::before{content:"";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.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}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{width:100%;font-weight:500}.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}}';export{r as tttx_tree_view}
package/dist/tttx/tttx.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as t}from"./p-65bb4035.js";export{s as setNonce}from"./p-65bb4035.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-7f1452fb",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-9ad58b75",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-bc363141",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-22738f43",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-177a760d",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-61ef7773",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-87b6e5a9",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-b189ca0f",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-67f24d17",[[1,"tttx-checkbox-group"]]],["p-a64c9910",[[4,"tttx-checkbox-group-caption"]]],["p-80e3bd36",[[4,"tttx-checkbox-group-heading"]]],["p-e2dda35e",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15b7a577",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-fe6c321b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-be16cf2d",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-69642b71",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-e7b7d2e2",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-34f328f9",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-a94f7efc",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-93e63568",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-f27adb48",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-61741832",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
1
+ import{p as e,b as t}from"./p-65bb4035.js";export{s as setNonce}from"./p-65bb4035.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-7f1452fb",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-9ad58b75",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-bc363141",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d3a9fc42",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-d5b6dd17",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-61ef7773",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-87b6e5a9",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-b189ca0f",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-67f24d17",[[1,"tttx-checkbox-group"]]],["p-a64c9910",[[4,"tttx-checkbox-group-caption"]]],["p-80e3bd36",[[4,"tttx-checkbox-group-heading"]]],["p-e2dda35e",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15b7a577",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-fe6c321b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-be16cf2d",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-69642b71",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-e7b7d2e2",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-34f328f9",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-a94f7efc",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-93e63568",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-f27adb48",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-61741832",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@3t-transform/threeteeui",
3
- "version": "0.2.90",
3
+ "version": "0.2.92",
4
4
  "description": "3t Design System",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -76,4 +76,4 @@
76
76
  "storybook": "^7.4.0",
77
77
  "ts-qrcode": "^0.0.4"
78
78
  }
79
- }
79
+ }
package/dist/tttx/p-177a760d.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as e,c as t,h as i}from"./p-65bb4035.js";import{p as o,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){e(this,i),this.clickEvent=t(this,"clickEvent",7),this.expandNode=t(this,"expandNode",7),this.data=void 0,this.treeData=void 0,this.selectedId=void 0}onClickHandler(e,t,i){t.stopPropagation();const o=JSON.stringify(i);this.clickEvent.emit({eventName:e,returnJsonObject:o}),"row"===e&&this.selectedElement(t,i)}updateSelectedId(e){this.selectedId=e}selectedElement(e,t){e.stopPropagation(),this.selectedId=t.id,this.treeData=[...this.treeData]}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.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}updateSelected(e){let t=!1;return e.id===this.selectedId&&(t=!0),t}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":""}}renderNode(e){e.selectable&&(e.selected=this.updateSelected(e));const t=this.treeConfigs(e);return e.child?i("li",null,i("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},i("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:t.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t.checkboxIcon,t.checkboxColor)),e.isOpen?i("ul",null,i("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):i("li",null,i("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t.checkboxIcon,t.checkboxColor)))}htmlcode(e,t,r,s){return i("div",{class:"inline-tree-item element"},t.hasCheckbox&&i("tttx-button",{design:"borderless-circle",notext:!0,icon:r,iconcolor:s,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&i("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&i("div",{class:e},t.title),t.html&&i("div",{class:e,innerHTML:o.sanitize(t.html,n)}))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,i("div",{class:"tree-view-element"},i("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};r.style='.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;position:relative}.element-row::before{content:"";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:"";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}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){.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;z-index:-1}}';export{r as tttx_tree_view}
package/dist/tttx/p-22738f43.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as o,c as t,h as i,H as s,g as e}from"./p-65bb4035.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",3),this.toggleOpen=t(this,"toggleOpen",3),this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){const o=("string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData).filter((o=>o.value==this.selectedValue));this.selectedItem=o.length>0?o[0]:void 0}}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open)}onItemSelected(o){this.selectedItem=o,this.selectItemEvent.emit(this.selectedItem),this.el.blur()}dropdownSelectorContent(){return this.selectedItem?this.selectedItem.html?i("div",{innerHTML:this.selectedItem.html}):i("div",null,this.selectedItem.label):i("div",{class:"placeholder"},this.placeholder)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=this.selectedItem&&o.value===this.selectedItem.value;if(o.html){const e=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label,innerHTML:e})}return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},o.label)}handleSearchInput(o){this.searchTerm=o.target.value}render(){if(!this.optionsData)return;const o="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,t=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body",style:{width:`${this.el.offsetWidth}px`}},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},o.map((o=>this.dropdownOption(o)))))))}get el(){return e(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_box}