treeselectjs 0.8.6 → 0.9.1
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/README.md +8 -4
- package/dist/treeselectjs.d.ts +11 -1
- package/dist/treeselectjs.mjs +448 -419
- package/dist/treeselectjs.umd.js +1 -1
- package/package.json +1 -1
package/dist/treeselectjs.mjs
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var c = (l, e, t) => (
|
|
1
|
+
var li = Object.defineProperty;
|
|
2
|
+
var ni = (l, e, t) => e in l ? li(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
|
|
3
|
+
var c = (l, e, t) => (ni(l, typeof e != "symbol" ? e + "" : e, t), t), gt = (l, e, t) => {
|
|
4
4
|
if (!e.has(l))
|
|
5
5
|
throw TypeError("Cannot " + t);
|
|
6
6
|
};
|
|
7
|
-
var n = (l, e, t) => (
|
|
7
|
+
var n = (l, e, t) => (gt(l, e, "read from private field"), t ? t.call(l) : e.get(l)), r = (l, e, t) => {
|
|
8
8
|
if (e.has(l))
|
|
9
9
|
throw TypeError("Cannot add the same private member more than once");
|
|
10
10
|
e instanceof WeakSet ? e.add(l) : e.set(l, t);
|
|
11
|
-
}, m = (l, e, t, s) => (
|
|
12
|
-
var
|
|
13
|
-
const
|
|
11
|
+
}, m = (l, e, t, s) => (gt(l, e, "write to private field"), s ? s.call(l, t) : e.set(l, t), t);
|
|
12
|
+
var o = (l, e, t) => (gt(l, e, "access private method"), t);
|
|
13
|
+
const It = {
|
|
14
14
|
arrowUp: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>',
|
|
15
15
|
arrowDown: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>',
|
|
16
16
|
arrowRight: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
|
|
@@ -19,53 +19,53 @@ const At = {
|
|
|
19
19
|
cross: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
|
|
20
20
|
check: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',
|
|
21
21
|
partialCheck: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>'
|
|
22
|
-
},
|
|
22
|
+
}, O = (l, e) => {
|
|
23
23
|
if (e.innerHTML = "", typeof l == "string")
|
|
24
24
|
e.innerHTML = l;
|
|
25
25
|
else {
|
|
26
26
|
const t = l.cloneNode(!0);
|
|
27
27
|
e.appendChild(t);
|
|
28
28
|
}
|
|
29
|
-
},
|
|
29
|
+
}, Pt = (l) => {
|
|
30
30
|
const e = l ? { ...l } : {};
|
|
31
|
-
return Object.keys(
|
|
32
|
-
e[t] || (e[t] =
|
|
31
|
+
return Object.keys(It).forEach((t) => {
|
|
32
|
+
e[t] || (e[t] = It[t]);
|
|
33
33
|
}), e;
|
|
34
|
-
},
|
|
35
|
-
var
|
|
36
|
-
class
|
|
34
|
+
}, ai = (l) => l.reduce((e, { name: t }, s) => (e += t, s < l.length - 1 && (e += ", "), e), "");
|
|
35
|
+
var T, E, D, v, ue, Dt, H, R, pe, Ht, me, Gt, G, U, N, V, fe, Mt, be, Ft, Ce, qt, ge, jt, we, $t, ke, Wt, Ee, Rt, ve, Ut, Le, zt, ye, Yt, xe, Kt, Se, Xt, _e, Jt, Ae, Zt, Te, Qt, Ne, es, z, wt;
|
|
36
|
+
class oi {
|
|
37
37
|
constructor({
|
|
38
38
|
value: e,
|
|
39
39
|
showTags: t,
|
|
40
40
|
tagsCountText: s,
|
|
41
41
|
clearable: i,
|
|
42
|
-
isAlwaysOpened:
|
|
43
|
-
searchable:
|
|
44
|
-
placeholder:
|
|
42
|
+
isAlwaysOpened: a,
|
|
43
|
+
searchable: h,
|
|
44
|
+
placeholder: p,
|
|
45
45
|
disabled: f,
|
|
46
|
-
isSingleSelect:
|
|
47
|
-
id:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
46
|
+
isSingleSelect: b,
|
|
47
|
+
id: C,
|
|
48
|
+
ariaLabel: g,
|
|
49
|
+
iconElements: w,
|
|
50
|
+
inputCallback: k,
|
|
51
|
+
searchCallback: y,
|
|
52
|
+
openCallback: I,
|
|
53
|
+
closeCallback: W,
|
|
54
|
+
keydownCallback: ae,
|
|
55
|
+
focusCallback: bt,
|
|
56
|
+
blurCallback: Ct,
|
|
56
57
|
nameChangeCallback: oe
|
|
57
58
|
}) {
|
|
58
59
|
// Private methods
|
|
59
|
-
r(this, he);
|
|
60
|
-
r(this, H);
|
|
61
60
|
r(this, ue);
|
|
61
|
+
r(this, H);
|
|
62
62
|
r(this, pe);
|
|
63
|
-
r(this, G);
|
|
64
|
-
r(this, T);
|
|
65
63
|
r(this, me);
|
|
64
|
+
r(this, G);
|
|
65
|
+
r(this, N);
|
|
66
66
|
r(this, fe);
|
|
67
|
-
r(this, Ce);
|
|
68
67
|
r(this, be);
|
|
68
|
+
r(this, Ce);
|
|
69
69
|
r(this, ge);
|
|
70
70
|
r(this, we);
|
|
71
71
|
r(this, ke);
|
|
@@ -78,8 +78,9 @@ class ei {
|
|
|
78
78
|
r(this, _e);
|
|
79
79
|
r(this, Ae);
|
|
80
80
|
r(this, Te);
|
|
81
|
+
r(this, Ne);
|
|
81
82
|
// Emits
|
|
82
|
-
r(this,
|
|
83
|
+
r(this, z);
|
|
83
84
|
// Props
|
|
84
85
|
c(this, "value");
|
|
85
86
|
c(this, "showTags");
|
|
@@ -91,15 +92,16 @@ class ei {
|
|
|
91
92
|
c(this, "disabled");
|
|
92
93
|
c(this, "isSingleSelect");
|
|
93
94
|
c(this, "id");
|
|
95
|
+
c(this, "ariaLabel");
|
|
94
96
|
c(this, "iconElements");
|
|
95
97
|
// InnerState
|
|
96
98
|
c(this, "isOpened");
|
|
97
99
|
c(this, "searchText");
|
|
98
100
|
c(this, "srcElement");
|
|
99
101
|
// PrivateInnerState
|
|
100
|
-
r(this,
|
|
102
|
+
r(this, T, void 0);
|
|
101
103
|
r(this, E, void 0);
|
|
102
|
-
r(this,
|
|
104
|
+
r(this, D, void 0);
|
|
103
105
|
r(this, v, void 0);
|
|
104
106
|
// Callbacks
|
|
105
107
|
c(this, "inputCallback");
|
|
@@ -110,93 +112,93 @@ class ei {
|
|
|
110
112
|
c(this, "focusCallback");
|
|
111
113
|
c(this, "blurCallback");
|
|
112
114
|
c(this, "nameChangeCallback");
|
|
113
|
-
this.value = e, this.showTags = t, this.tagsCountText = s, this.searchable =
|
|
115
|
+
this.value = e, this.showTags = t, this.tagsCountText = s, this.searchable = h, this.placeholder = p, this.clearable = i, this.isAlwaysOpened = a, this.disabled = f, this.isSingleSelect = b, this.id = C, this.ariaLabel = g, this.iconElements = w, this.isOpened = !1, this.searchText = "", m(this, T, o(this, Ce, qt).call(this)), m(this, E, o(this, Le, zt).call(this)), m(this, D, o(this, Se, Xt).call(this)), m(this, v, null), this.inputCallback = k, this.searchCallback = y, this.openCallback = I, this.closeCallback = W, this.keydownCallback = ae, this.focusCallback = bt, this.blurCallback = Ct, this.nameChangeCallback = oe, this.srcElement = o(this, fe, Mt).call(this, n(this, T), n(this, E), n(this, D)), o(this, ue, Dt).call(this);
|
|
114
116
|
}
|
|
115
117
|
// Public methods
|
|
116
118
|
focus() {
|
|
117
119
|
setTimeout(() => n(this, E).focus(), 0);
|
|
118
120
|
}
|
|
119
121
|
blur() {
|
|
120
|
-
this.isOpened &&
|
|
122
|
+
this.isOpened && o(this, N, V).call(this), this.clearSearch(), n(this, E).blur();
|
|
121
123
|
}
|
|
122
124
|
updateValue(e) {
|
|
123
|
-
this.value = e,
|
|
125
|
+
this.value = e, o(this, H, R).call(this), o(this, G, U).call(this);
|
|
124
126
|
}
|
|
125
127
|
removeItem(e) {
|
|
126
|
-
this.value = this.value.filter((t) => t.id !== e),
|
|
128
|
+
this.value = this.value.filter((t) => t.id !== e), o(this, z, wt).call(this), o(this, H, R).call(this), o(this, G, U).call(this);
|
|
127
129
|
}
|
|
128
130
|
clear() {
|
|
129
|
-
this.value = [],
|
|
131
|
+
this.value = [], o(this, z, wt).call(this), o(this, H, R).call(this), this.clearSearch();
|
|
130
132
|
}
|
|
131
133
|
openClose() {
|
|
132
|
-
|
|
134
|
+
o(this, N, V).call(this);
|
|
133
135
|
}
|
|
134
136
|
clearSearch() {
|
|
135
|
-
this.searchText = "", this.searchCallback(""),
|
|
137
|
+
this.searchText = "", this.searchCallback(""), o(this, G, U).call(this);
|
|
136
138
|
}
|
|
137
139
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}, H = new WeakSet(),
|
|
141
|
-
if (n(this,
|
|
142
|
-
n(this,
|
|
143
|
-
const e =
|
|
140
|
+
T = new WeakMap(), E = new WeakMap(), D = new WeakMap(), v = new WeakMap(), ue = new WeakSet(), Dt = function() {
|
|
141
|
+
o(this, H, R).call(this), o(this, G, U).call(this), o(this, pe, Ht).call(this);
|
|
142
|
+
}, H = new WeakSet(), R = function() {
|
|
143
|
+
if (n(this, T).innerHTML = "", this.showTags) {
|
|
144
|
+
n(this, T).append(...o(this, ge, jt).call(this));
|
|
145
|
+
const e = ai(this.value);
|
|
144
146
|
this.nameChangeCallback(e);
|
|
145
147
|
} else {
|
|
146
|
-
const e =
|
|
147
|
-
n(this,
|
|
148
|
+
const e = o(this, ve, Ut).call(this);
|
|
149
|
+
n(this, T).appendChild(e), this.nameChangeCallback(e.innerText);
|
|
148
150
|
}
|
|
149
|
-
n(this,
|
|
150
|
-
},
|
|
151
|
+
n(this, T).appendChild(n(this, E));
|
|
152
|
+
}, pe = new WeakSet(), Ht = function() {
|
|
151
153
|
const e = [];
|
|
152
|
-
n(this,
|
|
153
|
-
},
|
|
154
|
+
n(this, D).innerHTML = "", this.clearable && e.push(o(this, _e, Jt).call(this)), this.isAlwaysOpened || e.push(o(this, Te, Qt).call(this, this.isOpened)), e.length && n(this, D).append(...e);
|
|
155
|
+
}, me = new WeakSet(), Gt = function() {
|
|
154
156
|
if (!this.isAlwaysOpened && n(this, v)) {
|
|
155
157
|
const e = this.isOpened ? this.iconElements.arrowUp : this.iconElements.arrowDown;
|
|
156
|
-
|
|
158
|
+
O(e, n(this, v));
|
|
157
159
|
}
|
|
158
|
-
}, G = new WeakSet(),
|
|
160
|
+
}, G = new WeakSet(), U = function() {
|
|
159
161
|
var e;
|
|
160
162
|
(e = this.value) != null && e.length ? (n(this, E).removeAttribute("placeholder"), this.srcElement.classList.remove("treeselect-input--value-not-selected")) : (n(this, E).setAttribute("placeholder", this.placeholder), this.srcElement.classList.add("treeselect-input--value-not-selected")), this.searchable ? this.srcElement.classList.remove("treeselect-input--unsearchable") : this.srcElement.classList.add("treeselect-input--unsearchable"), this.isSingleSelect ? this.srcElement.classList.add("treeselect-input--is-single-select") : this.srcElement.classList.remove("treeselect-input--is-single-select"), n(this, E).value = this.searchText;
|
|
161
|
-
},
|
|
162
|
-
this.isOpened = !this.isOpened,
|
|
163
|
-
},
|
|
163
|
+
}, N = new WeakSet(), V = function() {
|
|
164
|
+
this.isOpened = !this.isOpened, o(this, me, Gt).call(this), this.isOpened ? this.openCallback() : this.closeCallback();
|
|
165
|
+
}, fe = new WeakSet(), Mt = function(e, t, s) {
|
|
164
166
|
const i = document.createElement("div");
|
|
165
|
-
return i.classList.add("treeselect-input"), i.setAttribute("tabindex", "-1"), i.addEventListener("mousedown", (
|
|
166
|
-
},
|
|
167
|
-
e.stopPropagation(), this.isOpened ||
|
|
168
|
-
}, Ce = new WeakSet(),
|
|
167
|
+
return i.classList.add("treeselect-input"), i.setAttribute("tabindex", "-1"), i.addEventListener("mousedown", (a) => o(this, be, Ft).call(this, a)), i.addEventListener("focus", () => this.focusCallback(), !0), i.addEventListener("blur", () => this.blurCallback(), !0), e.appendChild(t), i.append(e, s), i;
|
|
168
|
+
}, be = new WeakSet(), Ft = function(e) {
|
|
169
|
+
e.stopPropagation(), this.isOpened || o(this, N, V).call(this), this.focus();
|
|
170
|
+
}, Ce = new WeakSet(), qt = function() {
|
|
169
171
|
const e = document.createElement("div");
|
|
170
172
|
return e.classList.add("treeselect-input__tags"), e;
|
|
171
|
-
},
|
|
173
|
+
}, ge = new WeakSet(), jt = function() {
|
|
172
174
|
return this.value.map((e) => {
|
|
173
175
|
const t = document.createElement("div");
|
|
174
176
|
t.classList.add("treeselect-input__tags-element"), t.setAttribute("tabindex", "-1"), t.setAttribute("tag-id", e.id.toString()), t.setAttribute("title", e.name);
|
|
175
|
-
const s =
|
|
176
|
-
return t.addEventListener("mousedown", (
|
|
177
|
+
const s = o(this, ke, Wt).call(this, e.name), i = o(this, Ee, Rt).call(this);
|
|
178
|
+
return t.addEventListener("mousedown", (a) => o(this, we, $t).call(this, a, e.id)), t.append(s, i), t;
|
|
177
179
|
});
|
|
178
|
-
},
|
|
180
|
+
}, we = new WeakSet(), $t = function(e, t) {
|
|
179
181
|
e.preventDefault(), e.stopPropagation(), this.removeItem(t), this.focus();
|
|
180
|
-
},
|
|
182
|
+
}, ke = new WeakSet(), Wt = function(e) {
|
|
181
183
|
const t = document.createElement("span");
|
|
182
184
|
return t.classList.add("treeselect-input__tags-name"), t.textContent = e, t;
|
|
183
|
-
},
|
|
185
|
+
}, Ee = new WeakSet(), Rt = function() {
|
|
184
186
|
const e = document.createElement("span");
|
|
185
|
-
return e.classList.add("treeselect-input__tags-cross"),
|
|
186
|
-
},
|
|
187
|
+
return e.classList.add("treeselect-input__tags-cross"), O(this.iconElements.cross, e), e;
|
|
188
|
+
}, ve = new WeakSet(), Ut = function() {
|
|
187
189
|
const e = document.createElement("span");
|
|
188
190
|
if (e.classList.add("treeselect-input__tags-count"), !this.value.length)
|
|
189
191
|
return e.textContent = "", e.setAttribute("title", ""), e;
|
|
190
192
|
const t = this.value.length === 1 ? this.value[0].name : `${this.value.length} ${this.tagsCountText}`;
|
|
191
193
|
return e.textContent = t, e.setAttribute("title", t), e;
|
|
192
|
-
},
|
|
194
|
+
}, Le = new WeakSet(), zt = function() {
|
|
193
195
|
const e = document.createElement("input");
|
|
194
|
-
return e.classList.add("treeselect-input__edit"), this.id && e.setAttribute("id", this.id), (!this.searchable || this.disabled) && e.setAttribute("readonly", "readonly"), this.disabled && e.setAttribute("tabindex", "-1"), e.addEventListener("keydown", (t) =>
|
|
195
|
-
},
|
|
196
|
+
return e.classList.add("treeselect-input__edit"), this.id && e.setAttribute("id", this.id), (!this.searchable || this.disabled) && e.setAttribute("readonly", "readonly"), this.disabled && e.setAttribute("tabindex", "-1"), this.ariaLabel && e.setAttribute("aria-label", this.ariaLabel), e.addEventListener("keydown", (t) => o(this, ye, Yt).call(this, t)), e.addEventListener("input", (t) => o(this, xe, Kt).call(this, t, e)), e;
|
|
197
|
+
}, ye = new WeakSet(), Yt = function(e) {
|
|
196
198
|
e.stopPropagation();
|
|
197
199
|
const t = e.key;
|
|
198
|
-
t === "Backspace" && !this.searchText.length && this.value.length && !this.showTags && this.clear(), t === "Backspace" && !this.searchText.length && this.value.length && this.removeItem(this.value[this.value.length - 1].id), e.code === "Space" && (!this.searchText || !this.searchable) &&
|
|
199
|
-
},
|
|
200
|
+
t === "Backspace" && !this.searchText.length && this.value.length && !this.showTags && this.clear(), t === "Backspace" && !this.searchText.length && this.value.length && this.removeItem(this.value[this.value.length - 1].id), e.code === "Space" && (!this.searchText || !this.searchable) && o(this, N, V).call(this), (t === "Enter" || t === "ArrowDown" || t === "ArrowUp") && e.preventDefault(), this.keydownCallback(e), t !== "Tab" && this.focus();
|
|
201
|
+
}, xe = new WeakSet(), Kt = function(e, t) {
|
|
200
202
|
e.stopPropagation();
|
|
201
203
|
const s = this.searchText, i = t.value.trim();
|
|
202
204
|
if (s.length === 0 && i.length === 0) {
|
|
@@ -204,145 +206,149 @@ A = new WeakMap(), E = new WeakMap(), I = new WeakMap(), v = new WeakMap(), he =
|
|
|
204
206
|
return;
|
|
205
207
|
}
|
|
206
208
|
if (this.searchable) {
|
|
207
|
-
const
|
|
208
|
-
this.searchCallback(
|
|
209
|
+
const a = e.target.value;
|
|
210
|
+
this.searchCallback(a), this.isOpened || o(this, N, V).call(this);
|
|
209
211
|
} else
|
|
210
212
|
t.value = "";
|
|
211
213
|
this.searchText = t.value;
|
|
212
|
-
},
|
|
214
|
+
}, Se = new WeakSet(), Xt = function() {
|
|
213
215
|
const e = document.createElement("div");
|
|
214
216
|
return e.classList.add("treeselect-input__operators"), e;
|
|
215
|
-
},
|
|
217
|
+
}, _e = new WeakSet(), Jt = function() {
|
|
216
218
|
const e = document.createElement("span");
|
|
217
|
-
return e.classList.add("treeselect-input__clear"), e.setAttribute("tabindex", "-1"),
|
|
218
|
-
},
|
|
219
|
+
return e.classList.add("treeselect-input__clear"), e.setAttribute("tabindex", "-1"), O(this.iconElements.clear, e), e.addEventListener("mousedown", (t) => o(this, Ae, Zt).call(this, t)), e;
|
|
220
|
+
}, Ae = new WeakSet(), Zt = function(e) {
|
|
219
221
|
e.preventDefault(), e.stopPropagation(), (this.searchText.length || this.value.length) && this.clear(), this.focus();
|
|
220
|
-
},
|
|
222
|
+
}, Te = new WeakSet(), Qt = function(e) {
|
|
221
223
|
m(this, v, document.createElement("span")), n(this, v).classList.add("treeselect-input__arrow");
|
|
222
224
|
const t = e ? this.iconElements.arrowUp : this.iconElements.arrowDown;
|
|
223
|
-
return
|
|
224
|
-
},
|
|
225
|
-
e.stopPropagation(), e.preventDefault(), this.focus(),
|
|
226
|
-
},
|
|
225
|
+
return O(t, n(this, v)), n(this, v).addEventListener("mousedown", (s) => o(this, Ne, es).call(this, s)), n(this, v);
|
|
226
|
+
}, Ne = new WeakSet(), es = function(e) {
|
|
227
|
+
e.stopPropagation(), e.preventDefault(), this.focus(), o(this, N, V).call(this);
|
|
228
|
+
}, z = new WeakSet(), wt = function() {
|
|
227
229
|
this.inputCallback(this.value);
|
|
228
230
|
};
|
|
229
|
-
const
|
|
230
|
-
|
|
231
|
-
const
|
|
232
|
-
if (t &&
|
|
233
|
-
|
|
231
|
+
const ts = (l, e, t, s) => {
|
|
232
|
+
di(e);
|
|
233
|
+
const i = e.filter((a) => !a.disabled && l.some((h) => h === a.id));
|
|
234
|
+
if (t && i.length) {
|
|
235
|
+
i[0].checked = !0;
|
|
234
236
|
return;
|
|
235
237
|
}
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
const
|
|
239
|
-
|
|
238
|
+
i.forEach((a) => {
|
|
239
|
+
a.checked = !0;
|
|
240
|
+
const h = Ot(a, e, s);
|
|
241
|
+
a.checked = h;
|
|
240
242
|
});
|
|
241
|
-
},
|
|
242
|
-
const
|
|
243
|
-
if (!
|
|
243
|
+
}, Ot = ({ id: l, checked: e }, t, s) => {
|
|
244
|
+
const i = t.find((h) => h.id === l);
|
|
245
|
+
if (!i)
|
|
244
246
|
return !1;
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
247
|
+
if (s)
|
|
248
|
+
return i.checked = i.disabled ? !1 : !!e, i.checked;
|
|
249
|
+
const a = ss(!!e, i, t);
|
|
250
|
+
return is(i, t), a;
|
|
251
|
+
}, ss = (l, e, t) => {
|
|
248
252
|
if (!e.isGroup)
|
|
249
253
|
return e.checked = e.disabled ? !1 : !!l, e.isPartialChecked = !1, e.checked;
|
|
250
|
-
const s = t.filter((
|
|
251
|
-
return !l || e.disabled || e.isPartialChecked ? (e.checked = !1, e.isPartialChecked = !1,
|
|
252
|
-
|
|
253
|
-
}), e.checked) : (e.checked = !0, e.isPartialChecked = !1,
|
|
254
|
-
},
|
|
254
|
+
const s = t.filter((p) => p.childOf === e.id);
|
|
255
|
+
return !l || e.disabled || e.isPartialChecked ? (e.checked = !1, e.isPartialChecked = !1, kt(e, s, t), e.checked) : ls(s, t) ? ns(s) ? (e.checked = !1, e.isPartialChecked = !1, e.disabled = !0, e.checked) : (e.checked = !1, e.isPartialChecked = !0, s.forEach((p) => {
|
|
256
|
+
ss(l, p, t);
|
|
257
|
+
}), e.checked) : (e.checked = !0, e.isPartialChecked = !1, kt(e, s, t), e.checked);
|
|
258
|
+
}, is = (l, e) => {
|
|
255
259
|
const t = e.find((s) => s.id === l.childOf);
|
|
256
|
-
t && (
|
|
257
|
-
},
|
|
258
|
-
const t =
|
|
259
|
-
if (
|
|
260
|
+
t && (ri(t, e), is(t, e));
|
|
261
|
+
}, ri = (l, e) => {
|
|
262
|
+
const t = mt(l, e);
|
|
263
|
+
if (ns(t)) {
|
|
260
264
|
l.checked = !1, l.isPartialChecked = !1, l.disabled = !0;
|
|
261
265
|
return;
|
|
262
266
|
}
|
|
263
|
-
if (
|
|
267
|
+
if (ci(t)) {
|
|
264
268
|
l.checked = !0, l.isPartialChecked = !1;
|
|
265
269
|
return;
|
|
266
270
|
}
|
|
267
|
-
if (
|
|
271
|
+
if (hi(t)) {
|
|
268
272
|
l.checked = !1, l.isPartialChecked = !0;
|
|
269
273
|
return;
|
|
270
274
|
}
|
|
271
275
|
l.checked = !1, l.isPartialChecked = !1;
|
|
272
|
-
},
|
|
276
|
+
}, kt = ({ checked: l, disabled: e }, t, s) => {
|
|
273
277
|
t.forEach((i) => {
|
|
274
278
|
i.disabled = !!e || !!i.disabled, i.checked = !!l && !i.disabled, i.isPartialChecked = !1;
|
|
275
|
-
const
|
|
276
|
-
|
|
279
|
+
const a = mt(i, s);
|
|
280
|
+
kt({ checked: l, disabled: e }, a, s);
|
|
277
281
|
});
|
|
278
|
-
},
|
|
282
|
+
}, ls = (l, e) => l.some((i) => i.disabled) ? !0 : l.some((i) => {
|
|
279
283
|
if (i.isGroup) {
|
|
280
|
-
const
|
|
281
|
-
return
|
|
284
|
+
const a = mt(i, e);
|
|
285
|
+
return ls(a, e);
|
|
282
286
|
}
|
|
283
287
|
return !1;
|
|
284
|
-
}),
|
|
288
|
+
}), ns = (l) => l.every((e) => !!e.disabled), ci = (l) => l.every((e) => !!e.checked), hi = (l) => l.some((e) => !!e.checked || !!e.isPartialChecked), di = (l) => {
|
|
285
289
|
l.forEach((e) => {
|
|
286
290
|
e.checked = !1, e.isPartialChecked = !1;
|
|
287
291
|
});
|
|
288
|
-
},
|
|
289
|
-
const i =
|
|
290
|
-
return
|
|
291
|
-
},
|
|
292
|
-
var
|
|
293
|
-
const
|
|
292
|
+
}, ui = (l, e, t) => {
|
|
293
|
+
const s = { level: 0, groupId: "" }, i = as(l, e, s.groupId, s.level);
|
|
294
|
+
return mi(i, t);
|
|
295
|
+
}, as = (l, e, t, s) => l.reduce((i, a) => {
|
|
296
|
+
var b;
|
|
297
|
+
const h = !!((b = a.children) != null && b.length), p = s >= e && h, f = s > e;
|
|
294
298
|
if (i.push({
|
|
295
|
-
id:
|
|
296
|
-
name:
|
|
299
|
+
id: a.value,
|
|
300
|
+
name: a.name,
|
|
297
301
|
childOf: t,
|
|
298
|
-
isGroup:
|
|
302
|
+
isGroup: h,
|
|
299
303
|
checked: !1,
|
|
300
304
|
isPartialChecked: !1,
|
|
301
305
|
level: s,
|
|
302
|
-
isClosed:
|
|
306
|
+
isClosed: p,
|
|
303
307
|
hidden: f,
|
|
304
|
-
disabled:
|
|
305
|
-
}),
|
|
306
|
-
const
|
|
307
|
-
i.push(...
|
|
308
|
+
disabled: a.disabled ?? !1
|
|
309
|
+
}), h) {
|
|
310
|
+
const C = as(a.children, e, a.value, s + 1);
|
|
311
|
+
i.push(...C);
|
|
308
312
|
}
|
|
309
313
|
return i;
|
|
310
|
-
}, []),
|
|
314
|
+
}, []), mt = ({ id: l }, e) => e.filter((t) => t.childOf === l), pi = (l) => {
|
|
311
315
|
const { ungroupedNodes: e, allGroupedNodes: t, allNodes: s } = l.reduce(
|
|
312
|
-
(
|
|
316
|
+
(a, h) => (h.checked && (a.allNodes.push(h), h.isGroup ? a.allGroupedNodes.push(h) : a.ungroupedNodes.push(h)), a),
|
|
313
317
|
{
|
|
314
318
|
ungroupedNodes: [],
|
|
315
319
|
allGroupedNodes: [],
|
|
316
320
|
allNodes: []
|
|
317
321
|
}
|
|
318
|
-
), i = s.filter((
|
|
322
|
+
), i = s.filter((a) => !t.some(({ id: h }) => h === a.childOf));
|
|
319
323
|
return { ungroupedNodes: e, groupedNodes: i, allNodes: s };
|
|
320
|
-
},
|
|
321
|
-
|
|
322
|
-
|
|
324
|
+
}, mi = (l, e) => (l.filter((s) => !!s.disabled).forEach(
|
|
325
|
+
({ id: s }) => Ot({ id: s, checked: !1 }, l, e)
|
|
326
|
+
), l), ft = (l, { id: e, isClosed: t }) => {
|
|
327
|
+
mt({ id: e }, l).forEach((i) => {
|
|
328
|
+
i.hidden = t ?? !1, i.isGroup && !i.isClosed && ft(l, { id: i.id, isClosed: t });
|
|
323
329
|
});
|
|
324
|
-
},
|
|
330
|
+
}, fi = (l) => {
|
|
325
331
|
l.filter((e) => e.isGroup && !e.disabled && (e.checked || e.isPartialChecked)).forEach((e) => {
|
|
326
|
-
e.isClosed = !1,
|
|
332
|
+
e.isClosed = !1, ft(l, e);
|
|
327
333
|
});
|
|
328
|
-
},
|
|
329
|
-
const t =
|
|
334
|
+
}, bi = (l, e) => {
|
|
335
|
+
const t = Ci(l, e);
|
|
330
336
|
l.forEach((s) => {
|
|
331
|
-
t.some(({ id:
|
|
337
|
+
t.some(({ id: a }) => a === s.id) ? (s.isGroup && (s.isClosed = !1, ft(l, s)), s.hidden = !1) : s.hidden = !0;
|
|
332
338
|
});
|
|
333
|
-
},
|
|
339
|
+
}, Ci = (l, e) => l.reduce((t, s) => {
|
|
334
340
|
if (s.name.toLowerCase().includes(e.toLowerCase())) {
|
|
335
341
|
if (t.push(s), s.isGroup) {
|
|
336
|
-
const
|
|
337
|
-
t.push(...
|
|
342
|
+
const a = os(s.id, l);
|
|
343
|
+
t.push(...a);
|
|
338
344
|
}
|
|
339
345
|
if (s.childOf) {
|
|
340
|
-
const
|
|
341
|
-
t.push(...
|
|
346
|
+
const a = rs(s.childOf, l);
|
|
347
|
+
t.push(...a);
|
|
342
348
|
}
|
|
343
349
|
}
|
|
344
350
|
return t;
|
|
345
|
-
}, []),
|
|
351
|
+
}, []), os = (l, e) => e.reduce((t, s) => (s.childOf === l && (t.push(s), s.isGroup && t.push(...os(s.id, e))), t), []), rs = (l, e) => e.reduce((t, s) => (s.id === l && (t.push(s), s.childOf && t.push(...rs(s.childOf, e))), t), []), gi = (l) => {
|
|
346
352
|
const { duplications: e } = l.reduce(
|
|
347
353
|
(t, s) => (t.allItems.some((i) => i.toString() === s.id.toString()) && t.duplications.push(s.id), t.allItems.push(s.id), t),
|
|
348
354
|
{
|
|
@@ -351,76 +357,76 @@ const Jt = (l, e, t) => {
|
|
|
351
357
|
}
|
|
352
358
|
);
|
|
353
359
|
e.length && console.error(`Validation: You have duplicated values: ${e.join(", ")}! You should use unique values.`);
|
|
354
|
-
},
|
|
355
|
-
|
|
356
|
-
},
|
|
360
|
+
}, wi = (l, e, t, s, i, a, h, p, f) => {
|
|
361
|
+
ts(l, e, i, f), p && h && fi(e), ce(e, t, s, a);
|
|
362
|
+
}, ce = (l, e, t, s) => {
|
|
357
363
|
l.forEach((i) => {
|
|
358
|
-
const
|
|
359
|
-
|
|
360
|
-
}),
|
|
361
|
-
},
|
|
364
|
+
const a = e.querySelector(`[input-id="${i.id}"]`), h = A(a);
|
|
365
|
+
a.checked = i.checked, ki(i, h, s), Ei(i, h), vi(i, h), Li(i, h, t), yi(i, h), Si(i, h, l), xi(i, a, t);
|
|
366
|
+
}), _i(l, e);
|
|
367
|
+
}, ki = (l, e, t) => {
|
|
362
368
|
l.checked ? e.classList.add("treeselect-list__item--checked") : e.classList.remove("treeselect-list__item--checked"), Array.isArray(t) && t[0] === l.id && !l.disabled ? e.classList.add("treeselect-list__item--single-selected") : e.classList.remove("treeselect-list__item--single-selected");
|
|
363
|
-
},
|
|
369
|
+
}, Ei = (l, e) => {
|
|
364
370
|
l.isPartialChecked ? e.classList.add("treeselect-list__item--partial-checked") : e.classList.remove("treeselect-list__item--partial-checked");
|
|
365
|
-
},
|
|
371
|
+
}, vi = (l, e) => {
|
|
366
372
|
l.disabled ? e.classList.add("treeselect-list__item--disabled") : e.classList.remove("treeselect-list__item--disabled");
|
|
367
|
-
},
|
|
373
|
+
}, Li = (l, e, t) => {
|
|
368
374
|
if (l.isGroup) {
|
|
369
375
|
const s = e.querySelector(".treeselect-list__item-icon"), i = l.isClosed ? t.arrowRight : t.arrowDown;
|
|
370
|
-
|
|
376
|
+
O(i, s), l.isClosed ? e.classList.add("treeselect-list__item--closed") : e.classList.remove("treeselect-list__item--closed");
|
|
371
377
|
}
|
|
372
|
-
},
|
|
378
|
+
}, yi = (l, e) => {
|
|
373
379
|
l.hidden ? e.classList.add("treeselect-list__item--hidden") : e.classList.remove("treeselect-list__item--hidden");
|
|
374
|
-
},
|
|
380
|
+
}, xi = (l, e, t) => {
|
|
375
381
|
const i = e.parentNode.querySelector(".treeselect-list__item-checkbox-icon");
|
|
376
|
-
l.checked ?
|
|
377
|
-
},
|
|
378
|
-
const s = l.level === 0, i = 20,
|
|
382
|
+
l.checked ? O(t.check, i) : l.isPartialChecked ? O(t.partialCheck, i) : i.innerHTML = "";
|
|
383
|
+
}, Si = (l, e, t) => {
|
|
384
|
+
const s = l.level === 0, i = 20, a = 5;
|
|
379
385
|
if (s) {
|
|
380
|
-
const
|
|
381
|
-
e.style.paddingLeft = l.isGroup ? "0" :
|
|
386
|
+
const h = t.some((f) => f.isGroup && f.level === l.level), p = !l.isGroup && h ? `${i}px` : `${a}px`;
|
|
387
|
+
e.style.paddingLeft = l.isGroup ? "0" : p;
|
|
382
388
|
} else
|
|
383
389
|
e.style.paddingLeft = l.isGroup ? `${l.level * i}px` : `${l.level * i + i}px`;
|
|
384
390
|
e.setAttribute("level", l.level.toString()), e.setAttribute("group", l.isGroup.toString());
|
|
385
|
-
},
|
|
391
|
+
}, _i = (l, e) => {
|
|
386
392
|
const t = l.some((i) => !i.hidden), s = e.querySelector(".treeselect-list__empty");
|
|
387
393
|
t ? s.classList.add("treeselect-list__empty--hidden") : s.classList.remove("treeselect-list__empty--hidden");
|
|
388
|
-
},
|
|
394
|
+
}, A = (l) => l.parentNode.parentNode, Bt = (l, e) => e.find((t) => t.id.toString() === l), Ai = (l) => A(l).querySelector(".treeselect-list__item-icon"), Ti = (l, e) => {
|
|
389
395
|
e && Object.keys(e).forEach((t) => {
|
|
390
396
|
const s = e[t];
|
|
391
397
|
typeof s == "string" && l.setAttribute(t, s);
|
|
392
398
|
});
|
|
393
399
|
};
|
|
394
|
-
var M,
|
|
395
|
-
class
|
|
400
|
+
var M, P, x, Y, Oe, cs, Ie, hs, Pe, ds, Be, us, Ve, ps, De, ms, K, Et, He, fs, Ge, bs, Me, Cs, X, vt, Fe, gs, qe, ws, je, ks, $e, Es, We, vs, Re, Ls, Ue, ys, ze, xs, Ye, Ss, Ke, _s, Xe, As, J, Lt, Z, yt, Je, Ts;
|
|
401
|
+
class Ni {
|
|
396
402
|
constructor({
|
|
397
403
|
options: e,
|
|
398
404
|
value: t,
|
|
399
405
|
openLevel: s,
|
|
400
406
|
listSlotHtmlComponent: i,
|
|
401
|
-
emptyText:
|
|
402
|
-
isSingleSelect:
|
|
403
|
-
iconElements:
|
|
407
|
+
emptyText: a,
|
|
408
|
+
isSingleSelect: h,
|
|
409
|
+
iconElements: p,
|
|
404
410
|
showCount: f,
|
|
405
|
-
disabledBranchNode:
|
|
406
|
-
expandSelected:
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
411
|
+
disabledBranchNode: b,
|
|
412
|
+
expandSelected: C,
|
|
413
|
+
isIndependentNodes: g,
|
|
414
|
+
inputCallback: w,
|
|
415
|
+
arrowClickCallback: k,
|
|
416
|
+
mouseupCallback: y
|
|
410
417
|
}) {
|
|
411
418
|
// Private methods
|
|
412
|
-
r(this, Ne);
|
|
413
419
|
r(this, Oe);
|
|
420
|
+
r(this, Ie);
|
|
414
421
|
r(this, Pe);
|
|
415
422
|
r(this, Be);
|
|
416
423
|
r(this, Ve);
|
|
417
424
|
r(this, De);
|
|
418
|
-
r(this,
|
|
419
|
-
r(this, Ie);
|
|
425
|
+
r(this, K);
|
|
420
426
|
r(this, He);
|
|
421
427
|
r(this, Ge);
|
|
422
|
-
r(this, J);
|
|
423
428
|
r(this, Me);
|
|
429
|
+
r(this, X);
|
|
424
430
|
r(this, Fe);
|
|
425
431
|
r(this, qe);
|
|
426
432
|
r(this, je);
|
|
@@ -429,13 +435,14 @@ class Li {
|
|
|
429
435
|
r(this, Re);
|
|
430
436
|
r(this, Ue);
|
|
431
437
|
r(this, ze);
|
|
432
|
-
// Actions
|
|
433
438
|
r(this, Ye);
|
|
439
|
+
// Actions
|
|
434
440
|
r(this, Ke);
|
|
441
|
+
r(this, Xe);
|
|
442
|
+
r(this, J);
|
|
435
443
|
r(this, Z);
|
|
436
|
-
r(this, Q);
|
|
437
444
|
// Emits
|
|
438
|
-
r(this,
|
|
445
|
+
r(this, Je);
|
|
439
446
|
// Props
|
|
440
447
|
c(this, "options");
|
|
441
448
|
c(this, "value");
|
|
@@ -446,6 +453,7 @@ class Li {
|
|
|
446
453
|
c(this, "showCount");
|
|
447
454
|
c(this, "disabledBranchNode");
|
|
448
455
|
c(this, "expandSelected");
|
|
456
|
+
c(this, "isIndependentNodes");
|
|
449
457
|
c(this, "iconElements");
|
|
450
458
|
// InnerState
|
|
451
459
|
c(this, "searchText");
|
|
@@ -459,84 +467,85 @@ class Li {
|
|
|
459
467
|
c(this, "mouseupCallback");
|
|
460
468
|
// PrivateInnerState
|
|
461
469
|
r(this, M, null);
|
|
462
|
-
r(this,
|
|
463
|
-
r(this,
|
|
464
|
-
r(this,
|
|
465
|
-
this.options = e, this.value = t, this.openLevel = s ?? 0, this.listSlotHtmlComponent = i ?? null, this.emptyText =
|
|
470
|
+
r(this, P, !0);
|
|
471
|
+
r(this, x, []);
|
|
472
|
+
r(this, Y, !0);
|
|
473
|
+
this.options = e, this.value = t, this.openLevel = s ?? 0, this.listSlotHtmlComponent = i ?? null, this.emptyText = a ?? "No results found...", this.isSingleSelect = h ?? !1, this.showCount = f ?? !1, this.disabledBranchNode = b ?? !1, this.expandSelected = C ?? !1, this.isIndependentNodes = g ?? !1, this.iconElements = p, this.searchText = "", this.flattedOptions = ui(this.options, this.openLevel, this.isIndependentNodes), this.flattedOptionsBeforeSearch = this.flattedOptions, this.selectedNodes = { nodes: [], groupedNodes: [], allNodes: [] }, this.srcElement = o(this, Pe, ds).call(this), this.inputCallback = w, this.arrowClickCallback = k, this.mouseupCallback = y, gi(this.flattedOptions);
|
|
466
474
|
}
|
|
467
475
|
// Public methods
|
|
468
476
|
updateValue(e) {
|
|
469
|
-
this.value = e, m(this,
|
|
477
|
+
this.value = e, m(this, x, this.isSingleSelect ? this.value : []), wi(
|
|
470
478
|
e,
|
|
471
479
|
this.flattedOptions,
|
|
472
480
|
this.srcElement,
|
|
473
481
|
this.iconElements,
|
|
474
482
|
this.isSingleSelect,
|
|
475
|
-
n(this,
|
|
483
|
+
n(this, x),
|
|
476
484
|
this.expandSelected,
|
|
477
|
-
n(this,
|
|
478
|
-
|
|
485
|
+
n(this, Y),
|
|
486
|
+
this.isIndependentNodes
|
|
487
|
+
), m(this, Y, !1), o(this, Z, yt).call(this);
|
|
479
488
|
}
|
|
480
489
|
updateSearchValue(e) {
|
|
481
490
|
if (e === this.searchText)
|
|
482
491
|
return;
|
|
483
492
|
const t = this.searchText === "" && e !== "";
|
|
484
493
|
this.searchText = e, t && (this.flattedOptionsBeforeSearch = JSON.parse(JSON.stringify(this.flattedOptions))), this.searchText === "" && (this.flattedOptions = this.flattedOptionsBeforeSearch.map((s) => {
|
|
485
|
-
const i = this.flattedOptions.find((
|
|
494
|
+
const i = this.flattedOptions.find((a) => a.id === s.id);
|
|
486
495
|
return i.isClosed = s.isClosed, i.hidden = s.hidden, i;
|
|
487
|
-
}), this.flattedOptionsBeforeSearch = []), this.searchText &&
|
|
496
|
+
}), this.flattedOptionsBeforeSearch = []), this.searchText && bi(this.flattedOptions, e), ce(this.flattedOptions, this.srcElement, this.iconElements, n(this, x)), this.focusFirstListElement();
|
|
488
497
|
}
|
|
489
498
|
callKeyAction(e) {
|
|
490
|
-
m(this,
|
|
499
|
+
m(this, P, !1);
|
|
491
500
|
const t = this.srcElement.querySelector(".treeselect-list__item--focused");
|
|
492
501
|
if (t == null ? void 0 : t.classList.contains("treeselect-list__item--hidden"))
|
|
493
502
|
return;
|
|
494
503
|
const i = e.key;
|
|
495
|
-
i === "Enter" && t && t.dispatchEvent(new Event("mousedown")), (i === "ArrowLeft" || i === "ArrowRight") &&
|
|
504
|
+
i === "Enter" && t && t.dispatchEvent(new Event("mousedown")), (i === "ArrowLeft" || i === "ArrowRight") && o(this, Oe, cs).call(this, t, e), (i === "ArrowDown" || i === "ArrowUp") && o(this, Ie, hs).call(this, t, i);
|
|
496
505
|
}
|
|
497
506
|
focusFirstListElement() {
|
|
498
507
|
const e = "treeselect-list__item--focused", t = this.srcElement.querySelector(`.${e}`), s = Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(
|
|
499
|
-
(
|
|
508
|
+
(a) => window.getComputedStyle(A(a)).display !== "none"
|
|
500
509
|
);
|
|
501
510
|
if (!s.length)
|
|
502
511
|
return;
|
|
503
|
-
t && t.classList.remove(e),
|
|
512
|
+
t && t.classList.remove(e), A(s[0]).classList.add(e);
|
|
504
513
|
}
|
|
505
514
|
isLastFocusedElementExist() {
|
|
506
515
|
return !!n(this, M);
|
|
507
516
|
}
|
|
508
517
|
}
|
|
509
|
-
M = new WeakMap(),
|
|
518
|
+
M = new WeakMap(), P = new WeakMap(), x = new WeakMap(), Y = new WeakMap(), Oe = new WeakSet(), cs = function(e, t) {
|
|
510
519
|
if (!e)
|
|
511
520
|
return;
|
|
512
|
-
const s = t.key,
|
|
513
|
-
s === "ArrowLeft" && !
|
|
514
|
-
},
|
|
521
|
+
const s = t.key, a = e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"), h = Bt(a, this.flattedOptions), p = e.querySelector(".treeselect-list__item-icon");
|
|
522
|
+
s === "ArrowLeft" && !h.isClosed && h.isGroup && (p.dispatchEvent(new Event("mousedown")), t.preventDefault()), s === "ArrowRight" && h.isClosed && h.isGroup && (p.dispatchEvent(new Event("mousedown")), t.preventDefault());
|
|
523
|
+
}, Ie = new WeakSet(), hs = function(e, t) {
|
|
515
524
|
var i;
|
|
516
525
|
const s = Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(
|
|
517
|
-
(
|
|
526
|
+
(a) => window.getComputedStyle(A(a)).display !== "none"
|
|
518
527
|
);
|
|
519
528
|
if (s.length)
|
|
520
529
|
if (!e)
|
|
521
|
-
|
|
530
|
+
A(s[0]).classList.add("treeselect-list__item--focused");
|
|
522
531
|
else {
|
|
523
|
-
const
|
|
524
|
-
(
|
|
532
|
+
const a = s.findIndex(
|
|
533
|
+
(I) => A(I).classList.contains("treeselect-list__item--focused")
|
|
525
534
|
);
|
|
526
|
-
|
|
527
|
-
const
|
|
535
|
+
A(s[a]).classList.remove("treeselect-list__item--focused");
|
|
536
|
+
const p = t === "ArrowDown" ? a + 1 : a - 1, f = t === "ArrowDown" ? 0 : s.length - 1, b = s[p] ?? s[f], C = !s[p], g = A(b);
|
|
528
537
|
g.classList.add("treeselect-list__item--focused");
|
|
529
538
|
const w = this.srcElement.getBoundingClientRect(), k = g.getBoundingClientRect();
|
|
530
|
-
if (
|
|
539
|
+
if (C && t === "ArrowDown") {
|
|
531
540
|
this.srcElement.scroll(0, 0);
|
|
532
541
|
return;
|
|
533
542
|
}
|
|
534
|
-
if (
|
|
543
|
+
if (C && t === "ArrowUp") {
|
|
535
544
|
this.srcElement.scroll(0, this.srcElement.scrollHeight);
|
|
536
545
|
return;
|
|
537
546
|
}
|
|
538
|
-
const
|
|
539
|
-
if (w.y + w.height < k.y + k.height +
|
|
547
|
+
const y = ((i = this.listSlotHtmlComponent) == null ? void 0 : i.clientHeight) ?? 0;
|
|
548
|
+
if (w.y + w.height < k.y + k.height + y) {
|
|
540
549
|
this.srcElement.scroll(0, this.srcElement.scrollTop + k.height);
|
|
541
550
|
return;
|
|
542
551
|
}
|
|
@@ -545,199 +554,204 @@ M = new WeakMap(), B = new WeakMap(), y = new WeakMap(), K = new WeakMap(), Ne =
|
|
|
545
554
|
return;
|
|
546
555
|
}
|
|
547
556
|
}
|
|
548
|
-
}, Pe = new WeakSet(),
|
|
549
|
-
const e =
|
|
557
|
+
}, Pe = new WeakSet(), ds = function() {
|
|
558
|
+
const e = o(this, Be, us).call(this), t = o(this, K, Et).call(this, this.options);
|
|
550
559
|
e.append(...t);
|
|
551
|
-
const s =
|
|
560
|
+
const s = o(this, Ge, bs).call(this);
|
|
552
561
|
e.append(s);
|
|
553
|
-
const i =
|
|
562
|
+
const i = o(this, He, fs).call(this);
|
|
554
563
|
return i && e.append(i), e;
|
|
555
|
-
}, Be = new WeakSet(),
|
|
564
|
+
}, Be = new WeakSet(), us = function() {
|
|
556
565
|
const e = document.createElement("div");
|
|
557
|
-
return e.classList.add("treeselect-list"), this.isSingleSelect && e.classList.add("treeselect-list--single-select"), this.disabledBranchNode && e.classList.add("treeselect-list--disabled-branch-node"), e.addEventListener("mouseout", (t) =>
|
|
558
|
-
}, Ve = new WeakSet(),
|
|
559
|
-
e.stopPropagation(), n(this, M) && n(this,
|
|
560
|
-
}, De = new WeakSet(),
|
|
561
|
-
m(this,
|
|
562
|
-
},
|
|
566
|
+
return e.classList.add("treeselect-list"), this.isSingleSelect && e.classList.add("treeselect-list--single-select"), this.disabledBranchNode && e.classList.add("treeselect-list--disabled-branch-node"), e.addEventListener("mouseout", (t) => o(this, Ve, ps).call(this, t)), e.addEventListener("mousemove", () => o(this, De, ms).call(this)), e.addEventListener("mouseup", () => this.mouseupCallback(), !0), e;
|
|
567
|
+
}, Ve = new WeakSet(), ps = function(e) {
|
|
568
|
+
e.stopPropagation(), n(this, M) && n(this, P) && n(this, M).classList.add("treeselect-list__item--focused");
|
|
569
|
+
}, De = new WeakSet(), ms = function() {
|
|
570
|
+
m(this, P, !0);
|
|
571
|
+
}, K = new WeakSet(), Et = function(e) {
|
|
563
572
|
return e.reduce((t, s) => {
|
|
564
|
-
var
|
|
565
|
-
if ((
|
|
566
|
-
const
|
|
567
|
-
return
|
|
573
|
+
var a;
|
|
574
|
+
if ((a = s.children) != null && a.length) {
|
|
575
|
+
const h = o(this, Me, Cs).call(this, s), p = o(this, K, Et).call(this, s.children);
|
|
576
|
+
return h.append(...p), t.push(h), t;
|
|
568
577
|
}
|
|
569
|
-
const i =
|
|
578
|
+
const i = o(this, X, vt).call(this, s, !1);
|
|
570
579
|
return t.push(i), t;
|
|
571
580
|
}, []);
|
|
572
|
-
},
|
|
581
|
+
}, He = new WeakSet(), fs = function() {
|
|
573
582
|
if (!this.listSlotHtmlComponent)
|
|
574
583
|
return null;
|
|
575
584
|
const e = document.createElement("div");
|
|
576
585
|
return e.classList.add("treeselect-list__slot"), e.appendChild(this.listSlotHtmlComponent), e;
|
|
577
|
-
},
|
|
586
|
+
}, Ge = new WeakSet(), bs = function() {
|
|
578
587
|
const e = document.createElement("div");
|
|
579
588
|
e.classList.add("treeselect-list__empty"), e.setAttribute("title", this.emptyText);
|
|
580
589
|
const t = document.createElement("span");
|
|
581
|
-
t.classList.add("treeselect-list__empty-icon"),
|
|
590
|
+
t.classList.add("treeselect-list__empty-icon"), O(this.iconElements.attention, t);
|
|
582
591
|
const s = document.createElement("span");
|
|
583
592
|
return s.classList.add("treeselect-list__empty-text"), s.textContent = this.emptyText, e.append(t, s), e;
|
|
584
|
-
},
|
|
593
|
+
}, Me = new WeakSet(), Cs = function(e) {
|
|
585
594
|
const t = document.createElement("div");
|
|
586
595
|
t.setAttribute("group-container-id", e.value.toString()), t.classList.add("treeselect-list__group-container");
|
|
587
|
-
const s =
|
|
596
|
+
const s = o(this, X, vt).call(this, e, !0);
|
|
588
597
|
return t.appendChild(s), t;
|
|
589
|
-
},
|
|
590
|
-
const s =
|
|
598
|
+
}, X = new WeakSet(), vt = function(e, t) {
|
|
599
|
+
const s = o(this, Fe, gs).call(this, e);
|
|
591
600
|
if (t) {
|
|
592
|
-
const
|
|
593
|
-
s.appendChild(
|
|
601
|
+
const h = o(this, We, vs).call(this);
|
|
602
|
+
s.appendChild(h), s.classList.add("treeselect-list__item--group");
|
|
594
603
|
}
|
|
595
|
-
const i =
|
|
596
|
-
return s.append(i,
|
|
597
|
-
},
|
|
604
|
+
const i = o(this, Ue, ys).call(this, e), a = o(this, ze, xs).call(this, e, t);
|
|
605
|
+
return s.append(i, a), s;
|
|
606
|
+
}, Fe = new WeakSet(), gs = function(e) {
|
|
598
607
|
const t = document.createElement("div");
|
|
599
|
-
return
|
|
600
|
-
},
|
|
601
|
-
n(this,
|
|
602
|
-
},
|
|
603
|
-
n(this,
|
|
604
|
-
},
|
|
605
|
-
var
|
|
606
|
-
if (e.preventDefault(), e.stopPropagation(), (
|
|
608
|
+
return Ti(t, e.htmlAttr), t.setAttribute("tabindex", "-1"), t.setAttribute("title", e.name), t.classList.add("treeselect-list__item"), t.addEventListener("mouseover", () => o(this, qe, ws).call(this, t), !0), t.addEventListener("mouseout", () => o(this, je, ks).call(this, t), !0), t.addEventListener("mousedown", (s) => o(this, $e, Es).call(this, s, e)), t;
|
|
609
|
+
}, qe = new WeakSet(), ws = function(e) {
|
|
610
|
+
n(this, P) && o(this, J, Lt).call(this, !0, e);
|
|
611
|
+
}, je = new WeakSet(), ks = function(e) {
|
|
612
|
+
n(this, P) && (o(this, J, Lt).call(this, !1, e), m(this, M, e));
|
|
613
|
+
}, $e = new WeakSet(), Es = function(e, t) {
|
|
614
|
+
var a;
|
|
615
|
+
if (e.preventDefault(), e.stopPropagation(), (a = this.flattedOptions.find((h) => h.id === t.value)) == null ? void 0 : a.disabled)
|
|
607
616
|
return;
|
|
608
617
|
const i = e.target.querySelector(".treeselect-list__item-checkbox");
|
|
609
|
-
i.checked = !i.checked,
|
|
610
|
-
},
|
|
618
|
+
i.checked = !i.checked, o(this, Ke, _s).call(this, i, t);
|
|
619
|
+
}, We = new WeakSet(), vs = function() {
|
|
611
620
|
const e = document.createElement("span");
|
|
612
|
-
return e.setAttribute("tabindex", "-1"), e.classList.add("treeselect-list__item-icon"),
|
|
613
|
-
},
|
|
614
|
-
e.preventDefault(), e.stopPropagation(),
|
|
615
|
-
},
|
|
621
|
+
return e.setAttribute("tabindex", "-1"), e.classList.add("treeselect-list__item-icon"), O(this.iconElements.arrowDown, e), e.addEventListener("mousedown", (t) => o(this, Re, Ls).call(this, t)), e;
|
|
622
|
+
}, Re = new WeakSet(), Ls = function(e) {
|
|
623
|
+
e.preventDefault(), e.stopPropagation(), o(this, Xe, As).call(this, e);
|
|
624
|
+
}, Ue = new WeakSet(), ys = function(e) {
|
|
616
625
|
const t = document.createElement("div");
|
|
617
626
|
t.classList.add("treeselect-list__item-checkbox-container");
|
|
618
627
|
const s = document.createElement("span");
|
|
619
628
|
s.classList.add("treeselect-list__item-checkbox-icon"), s.innerHTML = "";
|
|
620
629
|
const i = document.createElement("input");
|
|
621
630
|
return i.setAttribute("tabindex", "-1"), i.setAttribute("type", "checkbox"), i.setAttribute("input-id", e.value.toString()), i.classList.add("treeselect-list__item-checkbox"), t.append(s, i), t;
|
|
622
|
-
},
|
|
631
|
+
}, ze = new WeakSet(), xs = function(e, t) {
|
|
623
632
|
const s = document.createElement("label");
|
|
624
633
|
if (s.textContent = e.name, s.classList.add("treeselect-list__item-label"), t && this.showCount) {
|
|
625
|
-
const i =
|
|
634
|
+
const i = o(this, Ye, Ss).call(this, e);
|
|
626
635
|
s.appendChild(i);
|
|
627
636
|
}
|
|
628
637
|
return s;
|
|
629
|
-
},
|
|
638
|
+
}, Ye = new WeakSet(), Ss = function(e) {
|
|
630
639
|
const t = document.createElement("span"), s = this.flattedOptions.filter((i) => i.childOf === e.value);
|
|
631
640
|
return t.textContent = `(${s.length})`, t.classList.add("treeselect-list__item-label-counter"), t;
|
|
632
|
-
},
|
|
641
|
+
}, Ke = new WeakSet(), _s = function(e, t) {
|
|
633
642
|
const s = this.flattedOptions.find((i) => i.id === t.value);
|
|
634
643
|
if (s) {
|
|
635
644
|
if (s != null && s.isGroup && this.disabledBranchNode) {
|
|
636
|
-
const i =
|
|
645
|
+
const i = Ai(e);
|
|
637
646
|
i == null || i.dispatchEvent(new Event("mousedown"));
|
|
638
647
|
return;
|
|
639
648
|
}
|
|
640
649
|
if (this.isSingleSelect) {
|
|
641
|
-
const [i] = n(this,
|
|
650
|
+
const [i] = n(this, x);
|
|
642
651
|
if (s.id === i)
|
|
643
652
|
return;
|
|
644
|
-
m(this,
|
|
653
|
+
m(this, x, [s.id]), ts([s.id], this.flattedOptions, this.isSingleSelect, this.isIndependentNodes);
|
|
645
654
|
} else {
|
|
646
655
|
s.checked = e.checked;
|
|
647
|
-
const i =
|
|
656
|
+
const i = Ot(s, this.flattedOptions, this.isIndependentNodes);
|
|
648
657
|
e.checked = i;
|
|
649
658
|
}
|
|
650
|
-
|
|
659
|
+
ce(this.flattedOptions, this.srcElement, this.iconElements, n(this, x)), o(this, Je, Ts).call(this);
|
|
651
660
|
}
|
|
652
|
-
},
|
|
653
|
-
var
|
|
654
|
-
const t = (
|
|
655
|
-
i && (i.isClosed = !i.isClosed,
|
|
656
|
-
},
|
|
661
|
+
}, Xe = new WeakSet(), As = function(e) {
|
|
662
|
+
var a, h;
|
|
663
|
+
const t = (h = (a = e.target) == null ? void 0 : a.parentNode) == null ? void 0 : h.querySelector("[input-id]"), s = (t == null ? void 0 : t.getAttribute("input-id")) ?? null, i = Bt(s, this.flattedOptions);
|
|
664
|
+
i && (i.isClosed = !i.isClosed, ft(this.flattedOptions, i), ce(this.flattedOptions, this.srcElement, this.iconElements, n(this, x)), this.arrowClickCallback());
|
|
665
|
+
}, J = new WeakSet(), Lt = function(e, t) {
|
|
657
666
|
const s = "treeselect-list__item--focused";
|
|
658
667
|
if (e) {
|
|
659
668
|
const i = Array.from(this.srcElement.querySelectorAll(`.${s}`));
|
|
660
|
-
i.length && i.forEach((
|
|
669
|
+
i.length && i.forEach((a) => a.classList.remove(s)), t.classList.add(s);
|
|
661
670
|
} else
|
|
662
671
|
t.classList.remove(s);
|
|
663
|
-
},
|
|
664
|
-
const { ungroupedNodes: e, groupedNodes: t } =
|
|
665
|
-
this.selectedNodes = { nodes: e, groupedNodes: t };
|
|
666
|
-
},
|
|
667
|
-
|
|
672
|
+
}, Z = new WeakSet(), yt = function() {
|
|
673
|
+
const { ungroupedNodes: e, groupedNodes: t, allNodes: s } = pi(this.flattedOptions);
|
|
674
|
+
this.selectedNodes = { nodes: e, groupedNodes: t, allNodes: s };
|
|
675
|
+
}, Je = new WeakSet(), Ts = function() {
|
|
676
|
+
o(this, Z, yt).call(this), this.inputCallback(this.selectedNodes), this.value = this.selectedNodes.nodes.map((e) => e.id);
|
|
668
677
|
};
|
|
669
|
-
const
|
|
678
|
+
const Vt = ({
|
|
670
679
|
parentHtmlContainer: l,
|
|
671
680
|
staticList: e,
|
|
672
681
|
appendToBody: t,
|
|
673
682
|
isSingleSelect: s,
|
|
674
683
|
value: i,
|
|
675
|
-
direction:
|
|
684
|
+
direction: a
|
|
676
685
|
}) => {
|
|
677
|
-
l || console.error("Validation: parentHtmlContainer prop is required!"), e && t && console.error("Validation: You should set staticList to false if you use appendToBody!"), s && Array.isArray(i) && console.error("Validation: if you use isSingleSelect prop, you should pass a single value!"), !s && !Array.isArray(i) && console.error("Validation: you should pass an array as a value!"),
|
|
678
|
-
},
|
|
686
|
+
l || console.error("Validation: parentHtmlContainer prop is required!"), e && t && console.error("Validation: You should set staticList to false if you use appendToBody!"), s && Array.isArray(i) && console.error("Validation: if you use isSingleSelect prop, you should pass a single value!"), !s && !Array.isArray(i) && console.error("Validation: you should pass an array as a value!"), a && a !== "auto" && a !== "bottom" && a !== "top" && console.error("Validation: you should pass (auto | top | bottom | undefined) as a value for the direction prop!");
|
|
687
|
+
}, re = (l) => l.map((e) => e.id), Oi = (l) => l ? Array.isArray(l) ? l : [l] : [], Ii = (l, e) => {
|
|
679
688
|
if (e) {
|
|
680
689
|
const [t] = l;
|
|
681
690
|
return t ?? null;
|
|
682
691
|
}
|
|
683
692
|
return l;
|
|
684
693
|
};
|
|
685
|
-
var
|
|
686
|
-
class
|
|
694
|
+
var d, u, F, Q, q, S, _, L, B, ee, xt, te, St, Ze, Ns, Qe, Os, et, Is, tt, Ps, st, Bs, it, Vs, se, _t, lt, Ds, nt, Hs, at, Gs, ot, Ms, ie, At, rt, Fs, j, he, le, Tt, $, de, ct, qs, ne, Nt, ht, js, dt, $s, ut, Ws, pt, Rs;
|
|
695
|
+
class Bi {
|
|
687
696
|
constructor({
|
|
688
697
|
parentHtmlContainer: e,
|
|
689
698
|
value: t,
|
|
690
699
|
options: s,
|
|
691
700
|
openLevel: i,
|
|
692
|
-
appendToBody:
|
|
693
|
-
alwaysOpen:
|
|
694
|
-
showTags:
|
|
701
|
+
appendToBody: a,
|
|
702
|
+
alwaysOpen: h,
|
|
703
|
+
showTags: p,
|
|
695
704
|
tagsCountText: f,
|
|
696
|
-
clearable:
|
|
697
|
-
searchable:
|
|
705
|
+
clearable: b,
|
|
706
|
+
searchable: C,
|
|
698
707
|
placeholder: g,
|
|
699
708
|
grouped: w,
|
|
700
709
|
isGroupedValue: k,
|
|
701
|
-
listSlotHtmlComponent:
|
|
702
|
-
disabled:
|
|
703
|
-
emptyText:
|
|
704
|
-
staticList:
|
|
705
|
-
id:
|
|
710
|
+
listSlotHtmlComponent: y,
|
|
711
|
+
disabled: I,
|
|
712
|
+
emptyText: W,
|
|
713
|
+
staticList: ae,
|
|
714
|
+
id: bt,
|
|
715
|
+
ariaLabel: Ct,
|
|
706
716
|
isSingleSelect: oe,
|
|
707
|
-
showCount:
|
|
708
|
-
disabledBranchNode:
|
|
709
|
-
direction:
|
|
710
|
-
expandSelected:
|
|
711
|
-
saveScrollPosition:
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
+
showCount: Us,
|
|
718
|
+
disabledBranchNode: zs,
|
|
719
|
+
direction: Ys,
|
|
720
|
+
expandSelected: Ks,
|
|
721
|
+
saveScrollPosition: Xs,
|
|
722
|
+
isIndependentNodes: Js,
|
|
723
|
+
iconElements: Zs,
|
|
724
|
+
inputCallback: Qs,
|
|
725
|
+
openCallback: ei,
|
|
726
|
+
closeCallback: ti,
|
|
727
|
+
nameChangeCallback: si,
|
|
728
|
+
searchCallback: ii
|
|
717
729
|
}) {
|
|
730
|
+
r(this, ee);
|
|
718
731
|
r(this, te);
|
|
719
|
-
r(this, j);
|
|
720
|
-
r(this, Je);
|
|
721
732
|
r(this, Ze);
|
|
722
733
|
r(this, Qe);
|
|
723
734
|
r(this, et);
|
|
724
735
|
r(this, tt);
|
|
725
736
|
r(this, st);
|
|
726
737
|
r(this, it);
|
|
738
|
+
r(this, se);
|
|
727
739
|
r(this, lt);
|
|
728
740
|
r(this, nt);
|
|
729
|
-
r(this, ot);
|
|
730
|
-
r(this, se);
|
|
731
741
|
r(this, at);
|
|
732
|
-
r(this,
|
|
742
|
+
r(this, ot);
|
|
733
743
|
r(this, ie);
|
|
734
|
-
r(this, W);
|
|
735
744
|
r(this, rt);
|
|
736
|
-
|
|
745
|
+
r(this, j);
|
|
737
746
|
r(this, le);
|
|
747
|
+
r(this, $);
|
|
738
748
|
r(this, ct);
|
|
739
|
-
|
|
749
|
+
// Emits
|
|
750
|
+
r(this, ne);
|
|
740
751
|
r(this, ht);
|
|
752
|
+
r(this, dt);
|
|
753
|
+
r(this, ut);
|
|
754
|
+
r(this, pt);
|
|
741
755
|
// Props
|
|
742
756
|
c(this, "parentHtmlContainer");
|
|
743
757
|
c(this, "value");
|
|
@@ -757,122 +771,125 @@ class _i {
|
|
|
757
771
|
c(this, "emptyText");
|
|
758
772
|
c(this, "staticList");
|
|
759
773
|
c(this, "id");
|
|
774
|
+
c(this, "ariaLabel");
|
|
760
775
|
c(this, "isSingleSelect");
|
|
761
776
|
c(this, "showCount");
|
|
762
777
|
c(this, "disabledBranchNode");
|
|
763
778
|
c(this, "direction");
|
|
764
779
|
c(this, "expandSelected");
|
|
765
780
|
c(this, "saveScrollPosition");
|
|
781
|
+
c(this, "isIndependentNodes");
|
|
766
782
|
c(this, "iconElements");
|
|
767
783
|
c(this, "inputCallback");
|
|
768
784
|
c(this, "openCallback");
|
|
769
785
|
c(this, "closeCallback");
|
|
770
786
|
c(this, "nameChangeCallback");
|
|
787
|
+
c(this, "searchCallback");
|
|
771
788
|
// InnerState
|
|
772
789
|
c(this, "ungroupedValue");
|
|
773
790
|
c(this, "groupedValue");
|
|
791
|
+
c(this, "allValue");
|
|
774
792
|
c(this, "isListOpened");
|
|
775
793
|
c(this, "selectedName");
|
|
776
794
|
c(this, "srcElement");
|
|
777
795
|
// Components
|
|
778
|
-
r(this,
|
|
779
|
-
r(this,
|
|
796
|
+
r(this, d, null);
|
|
797
|
+
r(this, u, null);
|
|
780
798
|
// Resize props
|
|
781
799
|
r(this, F, null);
|
|
782
800
|
// List position scroll
|
|
783
|
-
r(this,
|
|
801
|
+
r(this, Q, 0);
|
|
784
802
|
// Timer for search text
|
|
785
803
|
r(this, q, 0);
|
|
786
804
|
// Outside listeners
|
|
787
|
-
r(this, x, null);
|
|
788
805
|
r(this, S, null);
|
|
806
|
+
r(this, _, null);
|
|
789
807
|
r(this, L, null);
|
|
790
|
-
r(this,
|
|
791
|
-
|
|
808
|
+
r(this, B, null);
|
|
809
|
+
Vt({
|
|
792
810
|
parentHtmlContainer: e,
|
|
793
811
|
value: t,
|
|
794
|
-
staticList:
|
|
795
|
-
appendToBody:
|
|
812
|
+
staticList: ae,
|
|
813
|
+
appendToBody: a,
|
|
796
814
|
isSingleSelect: oe
|
|
797
|
-
}), this.parentHtmlContainer = e, this.value = [], this.options = s ?? [], this.openLevel = i ?? 0, this.appendToBody =
|
|
815
|
+
}), this.parentHtmlContainer = e, this.value = [], this.options = s ?? [], this.openLevel = i ?? 0, this.appendToBody = a ?? !1, this.alwaysOpen = !!(h && !I), this.showTags = p ?? !0, this.tagsCountText = f ?? "elements selected", this.clearable = b ?? !0, this.searchable = C ?? !0, this.placeholder = g ?? "Search...", this.grouped = w ?? !0, this.isGroupedValue = k ?? !1, this.listSlotHtmlComponent = y ?? null, this.disabled = I ?? !1, this.emptyText = W ?? "No results found...", this.staticList = !!(ae && !this.appendToBody), this.id = bt ?? "", this.ariaLabel = Ct ?? this.placeholder, this.isSingleSelect = oe ?? !1, this.showCount = Us ?? !1, this.disabledBranchNode = zs ?? !1, this.direction = Ys ?? "auto", this.expandSelected = Ks ?? !1, this.saveScrollPosition = Xs ?? !0, this.isIndependentNodes = Js ?? !1, this.iconElements = Pt(Zs), this.inputCallback = Qs, this.openCallback = ei, this.closeCallback = ti, this.nameChangeCallback = si, this.searchCallback = ii, this.ungroupedValue = [], this.groupedValue = [], this.allValue = [], this.isListOpened = !1, this.selectedName = "", this.srcElement = null, o(this, ee, xt).call(this, t);
|
|
798
816
|
}
|
|
799
817
|
mount() {
|
|
800
|
-
|
|
818
|
+
Vt({
|
|
801
819
|
parentHtmlContainer: this.parentHtmlContainer,
|
|
802
820
|
value: this.value,
|
|
803
821
|
staticList: this.staticList,
|
|
804
822
|
appendToBody: this.appendToBody,
|
|
805
823
|
isSingleSelect: this.isSingleSelect
|
|
806
|
-
}), this.iconElements =
|
|
824
|
+
}), this.iconElements = Pt(this.iconElements), o(this, ee, xt).call(this, this.value);
|
|
807
825
|
}
|
|
808
826
|
updateValue(e) {
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
if (t) {
|
|
812
|
-
const i = yi(e);
|
|
813
|
-
t.updateValue(i);
|
|
814
|
-
const { groupedNodes: o, nodes: d } = t.selectedNodes, u = this.grouped || this.isSingleSelect ? o : d;
|
|
815
|
-
(s = n(this, p)) == null || s.updateValue(u), a(this, j, re).call(this, { groupedNodes: o, nodes: d });
|
|
816
|
-
}
|
|
827
|
+
const t = Oi(e), s = n(this, d);
|
|
828
|
+
s && (s.updateValue(t), o(this, se, _t).call(this, s == null ? void 0 : s.selectedNodes));
|
|
817
829
|
}
|
|
818
830
|
destroy() {
|
|
819
|
-
this.srcElement && (
|
|
831
|
+
this.srcElement && (o(this, ie, At).call(this), this.srcElement.innerHTML = "", this.srcElement = null, o(this, $, de).call(this, !0));
|
|
820
832
|
}
|
|
821
833
|
focus() {
|
|
822
|
-
n(this,
|
|
834
|
+
n(this, u) && n(this, u).focus();
|
|
823
835
|
}
|
|
824
836
|
toggleOpenClose() {
|
|
825
|
-
n(this,
|
|
837
|
+
n(this, u) && (n(this, u).openClose(), n(this, u).focus());
|
|
826
838
|
}
|
|
827
839
|
// Outside Listeners
|
|
828
840
|
scrollWindowHandler() {
|
|
829
841
|
this.updateListPosition();
|
|
830
842
|
}
|
|
831
843
|
focusWindowHandler(e) {
|
|
832
|
-
var s, i,
|
|
833
|
-
((s = this.srcElement) == null ? void 0 : s.contains(e.target)) || ((i = n(this,
|
|
844
|
+
var s, i, a;
|
|
845
|
+
((s = this.srcElement) == null ? void 0 : s.contains(e.target)) || ((i = n(this, d)) == null ? void 0 : i.srcElement.contains(e.target)) || ((a = n(this, u)) == null || a.blur(), o(this, $, de).call(this, !1), o(this, j, he).call(this, !1));
|
|
834
846
|
}
|
|
835
847
|
blurWindowHandler() {
|
|
836
848
|
var e;
|
|
837
|
-
(e = n(this,
|
|
849
|
+
(e = n(this, u)) == null || e.blur(), o(this, $, de).call(this, !1), o(this, j, he).call(this, !1);
|
|
838
850
|
}
|
|
839
851
|
// Update direction of the list. Support appendToBody and standard mode with absolute
|
|
840
852
|
updateListPosition() {
|
|
841
|
-
var
|
|
842
|
-
const e = this.srcElement, t = (
|
|
853
|
+
var y;
|
|
854
|
+
const e = this.srcElement, t = (y = n(this, d)) == null ? void 0 : y.srcElement;
|
|
843
855
|
if (!e || !t)
|
|
844
856
|
return;
|
|
845
857
|
const { height: s } = t.getBoundingClientRect(), {
|
|
846
858
|
x: i,
|
|
847
|
-
y:
|
|
848
|
-
height:
|
|
849
|
-
width:
|
|
850
|
-
} = e.getBoundingClientRect(), f = window.innerHeight,
|
|
851
|
-
let g =
|
|
859
|
+
y: a,
|
|
860
|
+
height: h,
|
|
861
|
+
width: p
|
|
862
|
+
} = e.getBoundingClientRect(), f = window.innerHeight, b = a, C = f - a - h;
|
|
863
|
+
let g = b > C && b >= s && C < s;
|
|
852
864
|
if (this.direction !== "auto" && (g = this.direction === "top"), this.appendToBody) {
|
|
853
865
|
(t.style.top !== "0px" || t.style.left !== "0px") && (t.style.top = "0px", t.style.left = "0px");
|
|
854
|
-
const
|
|
855
|
-
t.style.transform = `translate(${
|
|
866
|
+
const I = i + window.scrollX, W = g ? a + window.scrollY - s : a + window.scrollY + h;
|
|
867
|
+
t.style.transform = `translate(${I}px,${W}px)`, t.style.width = `${p}px`;
|
|
856
868
|
}
|
|
857
869
|
const w = g ? "top" : "bottom";
|
|
858
|
-
t.getAttribute("direction") !== w && (t.setAttribute("direction", w),
|
|
870
|
+
t.getAttribute("direction") !== w && (t.setAttribute("direction", w), o(this, rt, Fs).call(this, g, this.appendToBody));
|
|
859
871
|
}
|
|
860
872
|
}
|
|
861
|
-
|
|
862
|
-
var
|
|
873
|
+
d = new WeakMap(), u = new WeakMap(), F = new WeakMap(), Q = new WeakMap(), q = new WeakMap(), S = new WeakMap(), _ = new WeakMap(), L = new WeakMap(), B = new WeakMap(), ee = new WeakSet(), xt = function(e) {
|
|
874
|
+
var a;
|
|
863
875
|
this.destroy();
|
|
864
|
-
const { container: t, list: s, input: i } =
|
|
865
|
-
this.srcElement = t, m(this,
|
|
866
|
-
},
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
}
|
|
876
|
+
const { container: t, list: s, input: i } = o(this, Ze, Ns).call(this);
|
|
877
|
+
this.srcElement = t, m(this, d, s), m(this, u, i), m(this, S, this.scrollWindowHandler.bind(this)), m(this, _, this.scrollWindowHandler.bind(this)), m(this, L, this.focusWindowHandler.bind(this)), m(this, B, this.blurWindowHandler.bind(this)), this.alwaysOpen && ((a = n(this, u)) == null || a.openClose()), this.disabled ? this.srcElement.classList.add("treeselect--disabled") : this.srcElement.classList.remove("treeselect--disabled"), this.updateValue(e ?? this.value);
|
|
878
|
+
}, te = new WeakSet(), St = function({
|
|
879
|
+
groupedNodes: e,
|
|
880
|
+
nodes: t,
|
|
881
|
+
allNodes: s
|
|
882
|
+
}) {
|
|
883
|
+
this.ungroupedValue = t ? re(t) : [], this.groupedValue = e ? re(e) : [], this.allValue = s ? re(s) : [];
|
|
884
|
+
let i = [];
|
|
885
|
+
this.isIndependentNodes || this.isSingleSelect ? i = this.allValue : this.isGroupedValue ? i = this.groupedValue : i = this.ungroupedValue, this.value = Ii(i, this.isSingleSelect);
|
|
886
|
+
}, Ze = new WeakSet(), Ns = function() {
|
|
871
887
|
const e = this.parentHtmlContainer;
|
|
872
888
|
e.classList.add("treeselect");
|
|
873
|
-
const t = new
|
|
889
|
+
const t = new Ni({
|
|
890
|
+
value: [],
|
|
891
|
+
// updateValue method calls in initMount method to set actual value
|
|
874
892
|
options: this.options,
|
|
875
|
-
value: this.ungroupedValue,
|
|
876
893
|
openLevel: this.openLevel,
|
|
877
894
|
listSlotHtmlComponent: this.listSlotHtmlComponent,
|
|
878
895
|
emptyText: this.emptyText,
|
|
@@ -880,15 +897,17 @@ h = new WeakMap(), p = new WeakMap(), F = new WeakMap(), ee = new WeakMap(), q =
|
|
|
880
897
|
showCount: this.showCount,
|
|
881
898
|
disabledBranchNode: this.disabledBranchNode,
|
|
882
899
|
expandSelected: this.expandSelected,
|
|
900
|
+
isIndependentNodes: this.isIndependentNodes,
|
|
883
901
|
iconElements: this.iconElements,
|
|
884
|
-
inputCallback: (
|
|
885
|
-
arrowClickCallback: () =>
|
|
902
|
+
inputCallback: (i) => o(this, lt, Ds).call(this, i),
|
|
903
|
+
arrowClickCallback: () => o(this, nt, Hs).call(this),
|
|
886
904
|
mouseupCallback: () => {
|
|
887
|
-
var
|
|
888
|
-
return (
|
|
905
|
+
var i;
|
|
906
|
+
return (i = n(this, u)) == null ? void 0 : i.focus();
|
|
889
907
|
}
|
|
890
|
-
}),
|
|
891
|
-
value:
|
|
908
|
+
}), s = new oi({
|
|
909
|
+
value: [],
|
|
910
|
+
// updateValue method calls in initMount method to set actual value
|
|
892
911
|
showTags: this.showTags,
|
|
893
912
|
tagsCountText: this.tagsCountText,
|
|
894
913
|
clearable: this.clearable,
|
|
@@ -898,83 +917,93 @@ h = new WeakMap(), p = new WeakMap(), F = new WeakMap(), ee = new WeakMap(), q =
|
|
|
898
917
|
disabled: this.disabled,
|
|
899
918
|
isSingleSelect: this.isSingleSelect,
|
|
900
919
|
id: this.id,
|
|
920
|
+
ariaLabel: this.ariaLabel,
|
|
901
921
|
iconElements: this.iconElements,
|
|
902
|
-
inputCallback: (
|
|
903
|
-
searchCallback: (
|
|
904
|
-
openCallback: () =>
|
|
905
|
-
closeCallback: () =>
|
|
906
|
-
keydownCallback: (
|
|
907
|
-
focusCallback: () =>
|
|
908
|
-
blurCallback: () =>
|
|
909
|
-
nameChangeCallback: (
|
|
922
|
+
inputCallback: (i) => o(this, Qe, Os).call(this, i),
|
|
923
|
+
searchCallback: (i) => o(this, tt, Ps).call(this, i),
|
|
924
|
+
openCallback: () => o(this, ot, Ms).call(this),
|
|
925
|
+
closeCallback: () => o(this, ie, At).call(this),
|
|
926
|
+
keydownCallback: (i) => o(this, et, Is).call(this, i),
|
|
927
|
+
focusCallback: () => o(this, st, Bs).call(this),
|
|
928
|
+
blurCallback: () => o(this, it, Vs).call(this),
|
|
929
|
+
nameChangeCallback: (i) => o(this, at, Gs).call(this, i)
|
|
910
930
|
});
|
|
911
|
-
return this.appendToBody && m(this, F, new ResizeObserver(() => this.updateListPosition())), e.append(
|
|
912
|
-
},
|
|
913
|
-
var
|
|
914
|
-
const t =
|
|
915
|
-
(
|
|
916
|
-
const s = (
|
|
917
|
-
|
|
918
|
-
},
|
|
931
|
+
return this.appendToBody && m(this, F, new ResizeObserver(() => this.updateListPosition())), e.append(s.srcElement), { container: e, list: t, input: s };
|
|
932
|
+
}, Qe = new WeakSet(), Os = function(e) {
|
|
933
|
+
var i, a;
|
|
934
|
+
const t = re(e);
|
|
935
|
+
(i = n(this, d)) == null || i.updateValue(t);
|
|
936
|
+
const s = ((a = n(this, d)) == null ? void 0 : a.selectedNodes) ?? {};
|
|
937
|
+
o(this, te, St).call(this, s), o(this, ne, Nt).call(this);
|
|
938
|
+
}, et = new WeakSet(), Is = function(e) {
|
|
919
939
|
var t;
|
|
920
|
-
this.isListOpened && ((t = n(this,
|
|
921
|
-
},
|
|
922
|
-
n(this, q) && clearTimeout(n(this, q)), m(this, q, setTimeout(() => {
|
|
940
|
+
this.isListOpened && ((t = n(this, d)) == null || t.callKeyAction(e));
|
|
941
|
+
}, tt = new WeakSet(), Ps = function(e) {
|
|
942
|
+
n(this, q) && clearTimeout(n(this, q)), m(this, q, window.setTimeout(() => {
|
|
923
943
|
var t;
|
|
924
|
-
(t = n(this,
|
|
925
|
-
}, 350));
|
|
926
|
-
},
|
|
927
|
-
|
|
928
|
-
},
|
|
944
|
+
(t = n(this, d)) == null || t.updateSearchValue(e), this.updateListPosition();
|
|
945
|
+
}, 350)), o(this, pt, Rs).call(this, e);
|
|
946
|
+
}, st = new WeakSet(), Bs = function() {
|
|
947
|
+
o(this, j, he).call(this, !0), n(this, L) && n(this, L) && n(this, B) && (document.addEventListener("mousedown", n(this, L), !0), document.addEventListener("focus", n(this, L), !0), window.addEventListener("blur", n(this, B)));
|
|
948
|
+
}, it = new WeakSet(), Vs = function() {
|
|
929
949
|
setTimeout(() => {
|
|
930
950
|
var s, i;
|
|
931
|
-
const e = (s = n(this,
|
|
951
|
+
const e = (s = n(this, u)) == null ? void 0 : s.srcElement.contains(document.activeElement), t = (i = n(this, d)) == null ? void 0 : i.srcElement.contains(document.activeElement);
|
|
932
952
|
!e && !t && this.blurWindowHandler();
|
|
933
953
|
}, 1);
|
|
934
|
-
},
|
|
935
|
-
var
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
954
|
+
}, se = new WeakSet(), _t = function(e) {
|
|
955
|
+
var s;
|
|
956
|
+
if (!e)
|
|
957
|
+
return;
|
|
958
|
+
let t = [];
|
|
959
|
+
this.isIndependentNodes || this.isSingleSelect ? t = e.allNodes : this.grouped ? t = e.groupedNodes : t = e.nodes, (s = n(this, u)) == null || s.updateValue(t), o(this, te, St).call(this, e);
|
|
960
|
+
}, lt = new WeakSet(), Ds = function(e) {
|
|
961
|
+
var t, s, i;
|
|
962
|
+
o(this, se, _t).call(this, e), this.isSingleSelect && !this.alwaysOpen && ((t = n(this, u)) == null || t.openClose(), (s = n(this, u)) == null || s.clearSearch()), (i = n(this, u)) == null || i.focus(), o(this, ne, Nt).call(this);
|
|
963
|
+
}, nt = new WeakSet(), Hs = function() {
|
|
939
964
|
var e;
|
|
940
|
-
(e = n(this,
|
|
941
|
-
},
|
|
942
|
-
this.selectedName !== e && (this.selectedName = e,
|
|
943
|
-
}, ot = new WeakSet(),
|
|
965
|
+
(e = n(this, u)) == null || e.focus(), this.updateListPosition();
|
|
966
|
+
}, at = new WeakSet(), Gs = function(e) {
|
|
967
|
+
this.selectedName !== e && (this.selectedName = e, o(this, ht, js).call(this));
|
|
968
|
+
}, ot = new WeakSet(), Ms = function() {
|
|
944
969
|
var e;
|
|
945
|
-
this.isListOpened = !0, n(this,
|
|
946
|
-
},
|
|
970
|
+
this.isListOpened = !0, n(this, S) && n(this, _) && (window.addEventListener("scroll", n(this, S), !0), window.addEventListener("resize", n(this, _))), !(!n(this, d) || !this.srcElement) && (this.appendToBody ? (document.body.appendChild(n(this, d).srcElement), (e = n(this, F)) == null || e.observe(this.srcElement)) : this.srcElement.appendChild(n(this, d).srcElement), this.updateListPosition(), o(this, le, Tt).call(this, !0), o(this, ct, qs).call(this), o(this, dt, $s).call(this));
|
|
971
|
+
}, ie = new WeakSet(), At = function() {
|
|
947
972
|
var t;
|
|
948
|
-
this.alwaysOpen || (this.isListOpened = !1, n(this,
|
|
949
|
-
},
|
|
950
|
-
if (!n(this,
|
|
973
|
+
this.alwaysOpen || (this.isListOpened = !1, n(this, S) && n(this, _) && (window.removeEventListener("scroll", n(this, S), !0), window.removeEventListener("resize", n(this, _))), !n(this, d) || !this.srcElement) || !(this.appendToBody ? document.body.contains(n(this, d).srcElement) : this.srcElement.contains(n(this, d).srcElement)) || (m(this, Q, n(this, d).srcElement.scrollTop), this.appendToBody ? (document.body.removeChild(n(this, d).srcElement), (t = n(this, F)) == null || t.disconnect()) : this.srcElement.removeChild(n(this, d).srcElement), o(this, le, Tt).call(this, !1), o(this, ut, Ws).call(this));
|
|
974
|
+
}, rt = new WeakSet(), Fs = function(e, t) {
|
|
975
|
+
if (!n(this, d) || !n(this, u))
|
|
951
976
|
return;
|
|
952
977
|
const s = t ? "treeselect-list--top-to-body" : "treeselect-list--top", i = t ? "treeselect-list--bottom-to-body" : "treeselect-list--bottom";
|
|
953
|
-
e ? (n(this,
|
|
954
|
-
},
|
|
955
|
-
!n(this,
|
|
956
|
-
},
|
|
957
|
-
var t, s, i,
|
|
958
|
-
e ? (t = n(this,
|
|
959
|
-
},
|
|
960
|
-
!n(this,
|
|
961
|
-
},
|
|
978
|
+
e ? (n(this, d).srcElement.classList.add(s), n(this, d).srcElement.classList.remove(i), n(this, u).srcElement.classList.add("treeselect-input--top"), n(this, u).srcElement.classList.remove("treeselect-input--bottom")) : (n(this, d).srcElement.classList.remove(s), n(this, d).srcElement.classList.add(i), n(this, u).srcElement.classList.remove("treeselect-input--top"), n(this, u).srcElement.classList.add("treeselect-input--bottom"));
|
|
979
|
+
}, j = new WeakSet(), he = function(e) {
|
|
980
|
+
!n(this, u) || !n(this, d) || (e ? (n(this, u).srcElement.classList.add("treeselect-input--focused"), n(this, d).srcElement.classList.add("treeselect-list--focused")) : (n(this, u).srcElement.classList.remove("treeselect-input--focused"), n(this, d).srcElement.classList.remove("treeselect-list--focused")));
|
|
981
|
+
}, le = new WeakSet(), Tt = function(e) {
|
|
982
|
+
var t, s, i, a;
|
|
983
|
+
e ? (t = n(this, u)) == null || t.srcElement.classList.add("treeselect-input--opened") : (s = n(this, u)) == null || s.srcElement.classList.remove("treeselect-input--opened"), this.staticList ? (i = n(this, d)) == null || i.srcElement.classList.add("treeselect-list--static") : (a = n(this, d)) == null || a.srcElement.classList.remove("treeselect-list--static");
|
|
984
|
+
}, $ = new WeakSet(), de = function(e) {
|
|
985
|
+
!n(this, S) || !n(this, _) || !n(this, L) || !n(this, B) || ((!this.alwaysOpen || e) && (window.removeEventListener("scroll", n(this, S), !0), window.removeEventListener("resize", n(this, _))), document.removeEventListener("mousedown", n(this, L), !0), document.removeEventListener("focus", n(this, L), !0), window.removeEventListener("blur", n(this, B)));
|
|
986
|
+
}, ct = new WeakSet(), qs = function() {
|
|
962
987
|
var t, s, i;
|
|
963
|
-
const e = (t = n(this,
|
|
964
|
-
this.saveScrollPosition && e ? (s = n(this,
|
|
965
|
-
},
|
|
988
|
+
const e = (t = n(this, d)) == null ? void 0 : t.isLastFocusedElementExist();
|
|
989
|
+
this.saveScrollPosition && e ? (s = n(this, d)) == null || s.srcElement.scroll(0, n(this, Q)) : (i = n(this, d)) == null || i.focusFirstListElement();
|
|
990
|
+
}, ne = new WeakSet(), Nt = function() {
|
|
966
991
|
var e;
|
|
967
992
|
(e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("input", { detail: this.value })), this.inputCallback && this.inputCallback(this.value);
|
|
968
|
-
},
|
|
993
|
+
}, ht = new WeakSet(), js = function() {
|
|
969
994
|
var e;
|
|
970
995
|
(e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("name-change", { detail: this.selectedName })), this.nameChangeCallback && this.nameChangeCallback(this.selectedName);
|
|
971
|
-
}, dt = new WeakSet(),
|
|
996
|
+
}, dt = new WeakSet(), $s = function() {
|
|
972
997
|
var e;
|
|
973
998
|
this.alwaysOpen || ((e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("open", { detail: this.value })), this.openCallback && this.openCallback(this.value));
|
|
974
|
-
},
|
|
999
|
+
}, ut = new WeakSet(), Ws = function() {
|
|
975
1000
|
var e;
|
|
976
1001
|
this.alwaysOpen || ((e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("close", { detail: this.value })), this.closeCallback && this.closeCallback(this.value));
|
|
1002
|
+
}, pt = new WeakSet(), Rs = function(e) {
|
|
1003
|
+
var s;
|
|
1004
|
+
const t = (e == null ? void 0 : e.trim()) ?? "";
|
|
1005
|
+
(s = this.srcElement) == null || s.dispatchEvent(new CustomEvent("search", { detail: t })), this.searchCallback && this.searchCallback(t);
|
|
977
1006
|
};
|
|
978
1007
|
export {
|
|
979
|
-
|
|
1008
|
+
Bi as default
|
|
980
1009
|
};
|