@3t-transform/threeteeui 0.1.70 → 0.2.70
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.
- package/dist/cjs/tttx-select-box.cjs.entry.js +5 -4
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.css +4 -3
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.js +4 -3
- package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.stories.js +57 -2
- package/dist/components/tttx-select-box.js +5 -4
- package/dist/esm/tttx-select-box.entry.js +5 -4
- package/dist/tttx/p-0c6e39c5.entry.js +1 -0
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/molecules/tttx-select-box/tttx-select-box.d.ts +2 -1
- package/dist/types/components/molecules/tttx-select-box/tttx-select-box.stories.d.ts +1 -0
- package/package.json +1 -1
- package/dist/tttx/p-3597dea7.entry.js +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-4cfa8e25.js');
|
|
|
6
6
|
const domsanitiser_options = require('./domsanitiser.options-1dfa7205.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-body{display:flex;
|
|
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-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.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:#9e9e9e}.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) {
|
|
@@ -29,10 +29,11 @@ const TttxSelectBox = class {
|
|
|
29
29
|
this.open = false;
|
|
30
30
|
this.toggleOpen.emit(false);
|
|
31
31
|
}
|
|
32
|
-
onDropdownClicked() {
|
|
32
|
+
onDropdownClicked(event) {
|
|
33
33
|
this.open = !this.open;
|
|
34
34
|
this.searchTerm = '';
|
|
35
35
|
this.toggleOpen.emit(this.open);
|
|
36
|
+
this.dropDownWidth = event.target.offsetWidth;
|
|
36
37
|
}
|
|
37
38
|
onItemSelected(option) {
|
|
38
39
|
this.selectedItem = option;
|
|
@@ -42,7 +43,7 @@ const TttxSelectBox = class {
|
|
|
42
43
|
dropdownSelectorContent() {
|
|
43
44
|
if (!this.selectedItem)
|
|
44
45
|
return index.h("div", { class: "placeholder" }, this.placeholder);
|
|
45
|
-
return index.h("div", null, this.selectedItem.label);
|
|
46
|
+
return this.selectedItem.html ? index.h("div", { innerHTML: this.selectedItem.html }) : index.h("div", null, this.selectedItem.label);
|
|
46
47
|
}
|
|
47
48
|
dropdownOption(option) {
|
|
48
49
|
/* istanbul ignore next */
|
|
@@ -66,7 +67,7 @@ const TttxSelectBox = class {
|
|
|
66
67
|
return;
|
|
67
68
|
const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
|
|
68
69
|
const chevronIcon = this.open ? 'expand_less' : 'expand_more';
|
|
69
|
-
return (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), index.h("div", { class: "dropdown-selector-chevron" }, index.h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (index.h("div", { class: "dropdown-body" }, this.searchEnabled &&
|
|
70
|
+
return (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), index.h("div", { class: "dropdown-selector-chevron" }, index.h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (index.h("div", { class: "dropdown-body", style: { 'width': `${this.dropDownWidth}px` } }, this.searchEnabled &&
|
|
70
71
|
/* istanbul ignore next */
|
|
71
72
|
index.h("div", { class: "searchbox" }, index.h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), index.h("div", { class: "dropdown-options-list" }, parsedOptionsData.map((option) => {
|
|
72
73
|
return this.dropdownOption(option);
|
|
@@ -56,13 +56,14 @@
|
|
|
56
56
|
|
|
57
57
|
.dropdown-body {
|
|
58
58
|
display: flex;
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
position: fixed;
|
|
60
|
+
z-index: 1000;
|
|
61
61
|
flex-direction: column;
|
|
62
|
+
top: inherit;
|
|
63
|
+
margin-top: 45px;
|
|
62
64
|
box-shadow: 0px 1px 5px #1111114D;
|
|
63
65
|
padding-bottom: 8px;
|
|
64
66
|
border: 1px solid #d5d5d5;
|
|
65
|
-
top: 42px;
|
|
66
67
|
}
|
|
67
68
|
.dropdown-body.search {
|
|
68
69
|
max-height: 410px;
|
|
@@ -20,10 +20,11 @@ export class TttxSelectBox {
|
|
|
20
20
|
this.open = false;
|
|
21
21
|
this.toggleOpen.emit(false);
|
|
22
22
|
}
|
|
23
|
-
onDropdownClicked() {
|
|
23
|
+
onDropdownClicked(event) {
|
|
24
24
|
this.open = !this.open;
|
|
25
25
|
this.searchTerm = '';
|
|
26
26
|
this.toggleOpen.emit(this.open);
|
|
27
|
+
this.dropDownWidth = event.target.offsetWidth;
|
|
27
28
|
}
|
|
28
29
|
onItemSelected(option) {
|
|
29
30
|
this.selectedItem = option;
|
|
@@ -33,7 +34,7 @@ export class TttxSelectBox {
|
|
|
33
34
|
dropdownSelectorContent() {
|
|
34
35
|
if (!this.selectedItem)
|
|
35
36
|
return h("div", { class: "placeholder" }, this.placeholder);
|
|
36
|
-
return h("div", null, this.selectedItem.label);
|
|
37
|
+
return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
|
|
37
38
|
}
|
|
38
39
|
dropdownOption(option) {
|
|
39
40
|
/* istanbul ignore next */
|
|
@@ -57,7 +58,7 @@ export class TttxSelectBox {
|
|
|
57
58
|
return;
|
|
58
59
|
const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
|
|
59
60
|
const chevronIcon = this.open ? 'expand_less' : 'expand_more';
|
|
60
|
-
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 &&
|
|
61
|
+
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", style: { 'width': `${this.dropDownWidth}px` } }, this.searchEnabled &&
|
|
61
62
|
/* istanbul ignore next */
|
|
62
63
|
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) => {
|
|
63
64
|
return this.dropdownOption(option);
|
|
@@ -43,7 +43,7 @@ BasicHTMLSelectBox.args = {
|
|
|
43
43
|
label: 'Label',
|
|
44
44
|
placeholder: 'Placeholder',
|
|
45
45
|
searchEnabled: true,
|
|
46
|
-
inline: false
|
|
46
|
+
inline: false,
|
|
47
47
|
};
|
|
48
48
|
const TemplateJSXSelectBox = args => `
|
|
49
49
|
<tttx-select-box
|
|
@@ -65,5 +65,60 @@ BasicJSXSelectBox.args = {
|
|
|
65
65
|
label: 'Label',
|
|
66
66
|
placeholder: 'Placeholder',
|
|
67
67
|
searchEnabled: true,
|
|
68
|
-
inline: false
|
|
68
|
+
inline: false,
|
|
69
|
+
};
|
|
70
|
+
const tagOptions = [
|
|
71
|
+
{ value: '1', label: 'Client', html: '<tttx-tag text="Client" color="#f2bebe"></tttx-tag>' },
|
|
72
|
+
{ value: '2', label: 'Job Role', html: '<tttx-tag text="Job Role" color="#f9e1be"></tttx-tag>' },
|
|
73
|
+
{ value: '3', label: 'Project', html: '<tttx-tag text="Project" color="#e4ebc9"></tttx-tag>' },
|
|
74
|
+
];
|
|
75
|
+
const TttxDialogBoxStory = ({ data }) => `
|
|
76
|
+
<button onclick="openDialog()">Open</button>
|
|
77
|
+
<tttx-dialog-box
|
|
78
|
+
id='dialogBox'
|
|
79
|
+
></tttx-dialog-box>
|
|
80
|
+
<script>
|
|
81
|
+
if(!dialogBox) {
|
|
82
|
+
const dialogBox = document.getElementById('dialogBox');
|
|
83
|
+
}
|
|
84
|
+
if(!openDialog) {
|
|
85
|
+
function openDialog() {
|
|
86
|
+
const dialogBox = document.getElementById('dialogBox');
|
|
87
|
+
dialogBox.open = true;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
dialogBox.data = ${JSON.stringify(data)};
|
|
91
|
+
</script>
|
|
92
|
+
`;
|
|
93
|
+
export const DialogBoxWithDropdown = TttxDialogBoxStory.bind({});
|
|
94
|
+
DialogBoxWithDropdown.args = {
|
|
95
|
+
data: {
|
|
96
|
+
header: {
|
|
97
|
+
title: 'Dialog Title',
|
|
98
|
+
hasIcon: false,
|
|
99
|
+
hasClose: true,
|
|
100
|
+
},
|
|
101
|
+
body: {
|
|
102
|
+
isCustomHtml: true,
|
|
103
|
+
customHtml: `
|
|
104
|
+
<div style="padding: 5px;">
|
|
105
|
+
<tttx-select-box
|
|
106
|
+
id="htmlSelectBox"
|
|
107
|
+
options-data='${JSON.stringify(tagOptions)}'
|
|
108
|
+
label='Label'
|
|
109
|
+
placeholder='Placeholder'
|
|
110
|
+
search-enabled='${true}'
|
|
111
|
+
inline='${false}'
|
|
112
|
+
></tttx-select-box>
|
|
113
|
+
</div>
|
|
114
|
+
`,
|
|
115
|
+
},
|
|
116
|
+
footer: {
|
|
117
|
+
buttons: [
|
|
118
|
+
{ name: 'primary', type: 'primary' },
|
|
119
|
+
{ name: 'default', type: 'default' },
|
|
120
|
+
{ name: 'No border', type: 'borderless' },
|
|
121
|
+
],
|
|
122
|
+
},
|
|
123
|
+
},
|
|
69
124
|
};
|
|
@@ -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-body{display:flex;
|
|
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-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.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:#9e9e9e}.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() {
|
|
@@ -28,10 +28,11 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
|
|
|
28
28
|
this.open = false;
|
|
29
29
|
this.toggleOpen.emit(false);
|
|
30
30
|
}
|
|
31
|
-
onDropdownClicked() {
|
|
31
|
+
onDropdownClicked(event) {
|
|
32
32
|
this.open = !this.open;
|
|
33
33
|
this.searchTerm = '';
|
|
34
34
|
this.toggleOpen.emit(this.open);
|
|
35
|
+
this.dropDownWidth = event.target.offsetWidth;
|
|
35
36
|
}
|
|
36
37
|
onItemSelected(option) {
|
|
37
38
|
this.selectedItem = option;
|
|
@@ -41,7 +42,7 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
|
|
|
41
42
|
dropdownSelectorContent() {
|
|
42
43
|
if (!this.selectedItem)
|
|
43
44
|
return h("div", { class: "placeholder" }, this.placeholder);
|
|
44
|
-
return h("div", null, this.selectedItem.label);
|
|
45
|
+
return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
|
|
45
46
|
}
|
|
46
47
|
dropdownOption(option) {
|
|
47
48
|
/* istanbul ignore next */
|
|
@@ -65,7 +66,7 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
|
|
|
65
66
|
return;
|
|
66
67
|
const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
|
|
67
68
|
const chevronIcon = this.open ? 'expand_less' : 'expand_more';
|
|
68
|
-
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 &&
|
|
69
|
+
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", style: { 'width': `${this.dropDownWidth}px` } }, this.searchEnabled &&
|
|
69
70
|
/* istanbul ignore next */
|
|
70
71
|
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) => {
|
|
71
72
|
return this.dropdownOption(option);
|
|
@@ -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-97a33389.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-body{display:flex;
|
|
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-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.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:#9e9e9e}.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) {
|
|
@@ -25,10 +25,11 @@ const TttxSelectBox = class {
|
|
|
25
25
|
this.open = false;
|
|
26
26
|
this.toggleOpen.emit(false);
|
|
27
27
|
}
|
|
28
|
-
onDropdownClicked() {
|
|
28
|
+
onDropdownClicked(event) {
|
|
29
29
|
this.open = !this.open;
|
|
30
30
|
this.searchTerm = '';
|
|
31
31
|
this.toggleOpen.emit(this.open);
|
|
32
|
+
this.dropDownWidth = event.target.offsetWidth;
|
|
32
33
|
}
|
|
33
34
|
onItemSelected(option) {
|
|
34
35
|
this.selectedItem = option;
|
|
@@ -38,7 +39,7 @@ const TttxSelectBox = class {
|
|
|
38
39
|
dropdownSelectorContent() {
|
|
39
40
|
if (!this.selectedItem)
|
|
40
41
|
return h("div", { class: "placeholder" }, this.placeholder);
|
|
41
|
-
return h("div", null, this.selectedItem.label);
|
|
42
|
+
return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
|
|
42
43
|
}
|
|
43
44
|
dropdownOption(option) {
|
|
44
45
|
/* istanbul ignore next */
|
|
@@ -62,7 +63,7 @@ const TttxSelectBox = class {
|
|
|
62
63
|
return;
|
|
63
64
|
const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
|
|
64
65
|
const chevronIcon = this.open ? 'expand_less' : 'expand_more';
|
|
65
|
-
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 &&
|
|
66
|
+
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", style: { 'width': `${this.dropDownWidth}px` } }, this.searchEnabled &&
|
|
66
67
|
/* istanbul ignore next */
|
|
67
68
|
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) => {
|
|
68
69
|
return this.dropdownOption(option);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as t,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as d,d as n}from"./p-5ed38d61.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.open=!1,this.selectedItem=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(o){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open),this.dropDownWidth=o.target.offsetWidth}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=d.sanitize(o.html,n);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.dropDownWidth}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-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.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:#9e9e9e}.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/tttx.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-d77e74fd",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-d77e74fd",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-0c6e39c5",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-75c31e23",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-c714f7c0",[[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"]]]]],["p-750cf31b",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[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"]]]]],["p-895526aa",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-6fe0af4e",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a6582ab0",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-818574fe",[[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-5b7b8539",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
|
|
@@ -14,7 +14,8 @@ export declare class TttxSelectBox {
|
|
|
14
14
|
toggleOpen: EventEmitter<boolean>;
|
|
15
15
|
handleCloseSelectBox(): void;
|
|
16
16
|
handleBlur(): void;
|
|
17
|
-
|
|
17
|
+
dropDownWidth: any;
|
|
18
|
+
onDropdownClicked(event: Event): void;
|
|
18
19
|
onItemSelected(option: SelectItem): void;
|
|
19
20
|
dropdownSelectorContent(): any;
|
|
20
21
|
dropdownOption(option: SelectItem): any;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as t,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as d,d as n}from"./p-5ed38d61.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.open=!1,this.selectedItem=void 0,this.searchTerm=""}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?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=d.sanitize(o.html,n);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"},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-body{display:flex;width:inherit;position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;top:42px}.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:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_box}
|