selectyc 0.0.22 → 0.0.23
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/selectyc.css +1 -1
- package/dist/selectyc.js +40 -42
- package/dist/selectyc.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/selectyc.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.custom-multiselect{position:relative;width:100%}.selected-items{display:flex;gap:5px;padding:0 8px;border:1px solid;cursor:pointer;align-items:center;@apply bg-gray-50 border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-[2px] focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;}.horizontal-overflow{flex-wrap:nowrap;height:42px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.vertical-overflow{flex-wrap:wrap;min-height:42px;height:auto;max-height:120px;white-space:nowrap;overflow-x:auto;overflow-y:auto}.round{@apply rounded-lg;}.roundt{@apply rounded-t-lg;}.round-l{@apply rounded-l-lg;}.round-r{@apply rounded-r-lg;}.round-lt{@apply rounded-tl-lg;}.round-rt{@apply rounded-tr-lg;}.selected-items::-webkit-scrollbar{height:6px;width:8px}.selected-items::-webkit-scrollbar-thumb{border-radius:1rem;@apply bg-cyan-400 dark:bg-cyan-700;}.selected-items::-webkit-scrollbar-thumb:hover{@apply bg-cyan-500 dark:bg-cyan-600;}.custom-single-select{width:
|
|
1
|
+
.custom-multiselect{position:relative;width:100%}.selected-items{display:flex;gap:5px;padding:0 8px;border:1px solid;cursor:pointer;align-items:center;@apply bg-gray-50 border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-[2px] focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;}.horizontal-overflow{flex-wrap:nowrap;height:42px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.vertical-overflow{flex-wrap:wrap;min-height:42px;height:auto;max-height:120px;white-space:nowrap;overflow-x:auto;overflow-y:auto}.round{@apply rounded-lg;}.roundt{@apply rounded-t-lg;}.round-l{@apply rounded-l-lg;}.round-r{@apply rounded-r-lg;}.round-lt{@apply rounded-tl-lg;}.round-rt{@apply rounded-tr-lg;}.selected-items::-webkit-scrollbar{height:6px;width:8px}.selected-items::-webkit-scrollbar-thumb{border-radius:1rem;@apply bg-cyan-400 dark:bg-cyan-700;}.selected-items::-webkit-scrollbar-thumb:hover{@apply bg-cyan-500 dark:bg-cyan-600;}.custom-single-select{width:100%;padding-left:.2rem;border:0px solid;background:transparent;font-size:.9rem;cursor:pointer;white-space:nowrap;text-overflow:ellipsis}.custom-single-select:focus{border:0px solid transparent;outline:none;box-shadow:none}.custom-single-select::placeholder{opacity:.7;font-style:italic;font-size:14px}.selected-tag{background-color:#007bff;color:#fff;padding:4px 8px;border-radius:12px;display:inline-flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap;flex:0 0 auto}.remove-tag{cursor:pointer;font-weight:700;border:solid 0px;border-radius:.5rem;padding:1px 6px;@apply hover:bg-blue-400 dark:hover:bg-sky-800;}.global-dropdown{background-color:#374151;max-height:200px;overflow-y:auto;display:none;z-index:999;box-shadow:0 2px 8px #0003;border-bottom-left-radius:.6rem;border-bottom-right-radius:.6rem;@apply bg-gray-50 dark:bg-gray-700;}.global-dropdown::-webkit-scrollbar{width:10px;border-radius:.6rem;@apply bg-gray-200 dark:bg-gray-400;}.global-dropdown::-webkit-scrollbar-thumb{border-radius:.6rem;@apply bg-gray-400 dark:bg-gray-600;}.search-input{width:100%;padding:3px 10px;border:1px solid;display:none;z-index:999;outline:none;color:#000;font-size:.9rem;@apply bg-white dark:bg-gray-600 dark:border-gray-500 dark:text-white border-blue-500;}.search-input:focus{@apply dark:border-gray-500 border-blue-500;}.search-input::placeholder{@apply text-gray-700 dark:text-gray-400;}.select-option{padding:3px 10px;cursor:pointer;font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.select-option:hover{background-color:#3777de;color:#fff;white-space:normal;text-overflow:ellipsis}
|
package/dist/selectyc.js
CHANGED
|
@@ -54,17 +54,15 @@ class h {
|
|
|
54
54
|
#f;
|
|
55
55
|
#s;
|
|
56
56
|
#e;
|
|
57
|
-
#
|
|
57
|
+
#i;
|
|
58
58
|
#l;
|
|
59
59
|
#m;
|
|
60
60
|
#o;
|
|
61
|
-
#
|
|
62
|
-
#x;
|
|
63
|
-
#i = !1;
|
|
61
|
+
#n = !1;
|
|
64
62
|
#w = !1;
|
|
65
63
|
#g = !1;
|
|
66
|
-
#
|
|
67
|
-
#
|
|
64
|
+
#S = "";
|
|
65
|
+
#x = '<svg class="w-5 h-5 text-gray-900 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';
|
|
68
66
|
constructor(t) {
|
|
69
67
|
if (window.selects === void 0 && (window.selects = []), window.selects[t] !== void 0)
|
|
70
68
|
return window.selects[t];
|
|
@@ -131,77 +129,77 @@ class h {
|
|
|
131
129
|
setDisableSelect(t) {
|
|
132
130
|
return this.disabled = t, this;
|
|
133
131
|
}
|
|
134
|
-
#
|
|
135
|
-
this.#
|
|
132
|
+
#D() {
|
|
133
|
+
this.#E(), this.#s.addEventListener("click", (t) => {
|
|
136
134
|
if (!this.disabled) {
|
|
137
135
|
if (t.target.classList.contains("remove-tag")) {
|
|
138
|
-
this.#
|
|
136
|
+
this.#B(t.target.getAttribute("data-value")), this.onUnselect !== void 0 && this.onUnselect(t.target.getAttribute("data-value"), this), this.#n && this.#a(), this.#y();
|
|
139
137
|
return;
|
|
140
138
|
}
|
|
141
|
-
this.#
|
|
139
|
+
this.#n ? this.#a() : this.#y();
|
|
142
140
|
}
|
|
143
141
|
}), document.addEventListener("click", (t) => {
|
|
144
|
-
!this.#r.contains(t.target) && !this.#e.contains(t.target) && !t.target.classList.contains("remove-tag") && this.#
|
|
142
|
+
!this.#r.contains(t.target) && !this.#e.contains(t.target) && !t.target.classList.contains("remove-tag") && this.#a();
|
|
145
143
|
}), window.onresize = () => {
|
|
146
|
-
this.#
|
|
144
|
+
this.#a();
|
|
147
145
|
}, window.addEventListener("scroll", () => {
|
|
148
|
-
this.#
|
|
146
|
+
this.#a();
|
|
149
147
|
}), this.isMultiple && this.#C();
|
|
150
148
|
}
|
|
151
149
|
// Draw functions
|
|
152
|
-
#
|
|
153
|
-
this.#
|
|
150
|
+
#E() {
|
|
151
|
+
this.#M();
|
|
154
152
|
const t = document.createElement("div");
|
|
155
153
|
t.className = "main-div-selectyc", t.style.width = this.width, t.id = `selectyc_main_div_${this.id}`;
|
|
156
154
|
const e = document.createElement("div");
|
|
157
155
|
e.className = "custom-multiselect";
|
|
158
156
|
let s = document.createElement("div");
|
|
159
|
-
s.className = "selected-items round" + this.bodyRound, s.tabIndex = 0, s.classList.add(this.boxOverflow === "horizontal" ? "horizontal-overflow" : "vertical-overflow"), this.isMultiple || (s = this.#
|
|
157
|
+
s.className = "selected-items round" + this.bodyRound, s.tabIndex = 0, s.classList.add(this.boxOverflow === "horizontal" ? "horizontal-overflow" : "vertical-overflow"), this.isMultiple || (s = this.#L(s)), e.appendChild(s), e.appendChild(this.#O()), t.appendChild(e);
|
|
160
158
|
const i = document.getElementById(this.id), n = document.createElement("input");
|
|
161
159
|
n.name = i.name, n.setAttribute("data-id", i.id), this.rootClassName !== "" && (n.className = i.className), n.style.display = "none";
|
|
162
160
|
let a = i.parentNode;
|
|
163
161
|
t.appendChild(n), a.replaceChild(t, i), this.#u = n, this.#f = s, this.#r = e, this.#s = this.#r.querySelector(".selected-items"), !this.isMultiple && this.#t.length > 0 && (this.#u.value = this.#t[0].value);
|
|
164
162
|
}
|
|
165
|
-
#
|
|
163
|
+
#L(t) {
|
|
166
164
|
const e = document.createElement("input");
|
|
167
165
|
e.className = "custom-single-select", e.id = `selectyc_text_box_${this.id}`, e.placeholder = this.singleLabel, e.value = this.#t.length === 0 ? null : this.#t[0].text, e.readOnly = !0;
|
|
168
166
|
const s = document.createElement("div");
|
|
169
|
-
return s.innerHTML = this.#
|
|
167
|
+
return s.innerHTML = this.#x, t.appendChild(this.#N()), t.appendChild(e), t.appendChild(s), this.#l = e, t;
|
|
170
168
|
}
|
|
171
|
-
#
|
|
169
|
+
#N() {
|
|
172
170
|
const t = document.createElement("input");
|
|
173
171
|
return t.type = "text", t.required = this.#w, t.tabIndex = -1, t.style.position = "absolute", t.style.opacity = "0", t.style.pointerEvents = "none", t.style.height = "0", t.style.width = "0", t.style.left = "50%", t.value = this.#t.length === 0 ? "" : this.#t[0].text, this.#m = t, t;
|
|
174
172
|
}
|
|
175
|
-
#
|
|
173
|
+
#O() {
|
|
176
174
|
const t = document.createElement("div");
|
|
177
175
|
t.setAttribute("style", "position:fixed; z-index:999;");
|
|
178
176
|
const e = document.createElement("div");
|
|
179
177
|
e.setAttribute("style", "position:absolute;");
|
|
180
178
|
const s = document.createElement("div");
|
|
181
|
-
s.className = "global-dropdown", this.searchInputActive && e.appendChild(this.#
|
|
179
|
+
s.className = "global-dropdown", this.searchInputActive && e.appendChild(this.#I());
|
|
182
180
|
let i;
|
|
183
181
|
return s.addEventListener("scroll", (n) => {
|
|
184
182
|
i && clearTimeout(i), i = setTimeout(() => {
|
|
185
|
-
this.#
|
|
183
|
+
this.#k(n);
|
|
186
184
|
}, 70);
|
|
187
185
|
}), e.appendChild(s), this.#e = s, this.#o = e, t.appendChild(e), t;
|
|
188
186
|
}
|
|
189
|
-
#
|
|
187
|
+
#I() {
|
|
190
188
|
const t = document.createElement("input");
|
|
191
189
|
return t.type = "text", t.id = "selectyc_search_input", t.className = "search-input", t.placeholder = "Buscar...", t.addEventListener("input", () => {
|
|
192
|
-
this.filter = t.value, this.#e.innerHTML = "", this
|
|
193
|
-
}), this.#
|
|
190
|
+
this.filter = t.value, this.#e.innerHTML = "", this.#b();
|
|
191
|
+
}), this.#i = t, t;
|
|
194
192
|
}
|
|
195
193
|
#h(t) {
|
|
196
194
|
const e = document.createElement("div");
|
|
197
195
|
e.className = "select-option", e.setAttribute("data-value", t.id), e.textContent = t.text, this.#e.appendChild(e), e.addEventListener("click", () => {
|
|
198
|
-
t.id !== "sin_resultados" && (this.#
|
|
196
|
+
t.id !== "sin_resultados" && (this.#T(t.text, t.id), this.onSelect !== void 0 && this.onSelect(t.id, this), this.#a());
|
|
199
197
|
});
|
|
200
198
|
}
|
|
201
199
|
// Functions
|
|
202
|
-
#
|
|
200
|
+
#M() {
|
|
203
201
|
const t = document.getElementById(this.id);
|
|
204
|
-
this.name = t.name, this.#w = t.required, this.rootClassName = t.className, this
|
|
202
|
+
this.name = t.name, this.#w = t.required, this.rootClassName = t.className, this.disabled = t.disabled, Array.from(t.options).forEach((e) => {
|
|
205
203
|
if (e.outerHTML.includes("selected")) {
|
|
206
204
|
const s = e.text, i = this.#c(e.value);
|
|
207
205
|
this.isMultiple ? this.#t.push({ value: i, text: s }) : this.#t[0] = { value: i, text: s };
|
|
@@ -210,14 +208,14 @@ class h {
|
|
|
210
208
|
});
|
|
211
209
|
}
|
|
212
210
|
#y() {
|
|
213
|
-
if (this.filter = null, this.#i)
|
|
211
|
+
if (this.filter = null, this.#i.value = null, this.#n)
|
|
214
212
|
return;
|
|
215
|
-
this.#
|
|
213
|
+
this.#n = !0, this.#s.classList.remove(`round${this.bodyRound}`), this.#s.classList.add(`round${this.bodyRound}t`);
|
|
216
214
|
const t = this.#r.getBoundingClientRect();
|
|
217
|
-
this.#o.style.position = "fixed", this.#o.style.top = t.bottom + "px", this.#o.style.left = t.left + "px", this.#e.style.width = t.width + "px", this.#e.style.display = "block", this.searchInputActive && (this.#
|
|
215
|
+
this.#o.style.position = "fixed", this.#o.style.top = t.bottom + "px", this.#o.style.left = t.left + "px", this.#e.style.width = t.width + "px", this.#e.style.display = "block", this.searchInputActive && (this.#i.style.display = "block", this.#i.style.width = t.width + "px", this.#i.focus()), this.#b();
|
|
218
216
|
}
|
|
219
|
-
#
|
|
220
|
-
this.#
|
|
217
|
+
#a() {
|
|
218
|
+
this.#n && (this.#n = !1, this.#e.innerHTML = "", this.#e.style.display = "none", this.searchInputActive && (this.#i.style.display = "none"), this.#s.classList.add(`round${this.bodyRound}`));
|
|
221
219
|
}
|
|
222
220
|
async #v() {
|
|
223
221
|
if (this.RS === void 0)
|
|
@@ -235,10 +233,10 @@ class h {
|
|
|
235
233
|
let t = await this.#v();
|
|
236
234
|
const e = this.#t.map((s) => s.value);
|
|
237
235
|
this.#e.lastChild.dataset.value === "loading" && this.#e.removeChild(this.#e.lastChild), t.forEach((s) => {
|
|
238
|
-
s.text.toLowerCase().includes(this.#
|
|
236
|
+
s.text.toLowerCase().includes(this.#S.toLowerCase()) && !e.includes(s.id) && this.#h(s);
|
|
239
237
|
}), this.#e.hasChildNodes() || this.#h({ id: "sin_resultados", text: "sin resultados ..." });
|
|
240
238
|
}
|
|
241
|
-
async #
|
|
239
|
+
async #R() {
|
|
242
240
|
const t = this.#t.map((a) => a.value);
|
|
243
241
|
let e = this.filter === null ? "" : this.filter, s = this.data.map((a) => a.id);
|
|
244
242
|
this.records = this.records + 10 + this.#t.length;
|
|
@@ -249,13 +247,13 @@ class h {
|
|
|
249
247
|
a.text.toLowerCase().includes(e.toLowerCase()) && !t.includes(a.id) && !s.includes(a.id) && this.#h(a);
|
|
250
248
|
}), this.#g = n === this.#e.lastChild.dataset.value;
|
|
251
249
|
}
|
|
252
|
-
#
|
|
250
|
+
#T(t, e) {
|
|
253
251
|
this.#t.find((i) => i.value === e) || (this.isMultiple || (this.#t = []), this.#t.push({ text: t, value: e })), this.#d(e);
|
|
254
252
|
}
|
|
255
253
|
#d(t) {
|
|
256
|
-
this.onChange !== void 0 && this.onChange(t, this), this.isMultiple ? this.#C() : this.#
|
|
254
|
+
this.onChange !== void 0 && this.onChange(t, this), this.isMultiple ? this.#C() : this.#A();
|
|
257
255
|
}
|
|
258
|
-
#
|
|
256
|
+
#A() {
|
|
259
257
|
this.#l.value = null, this.#m.value = null, this.#l.value = this.#t.length > 0 ? this.#t[0].text : null, this.#m.value = this.#t.length > 0 ? this.#t[0].text : null, this.#l.placeholder = this.singleLabel, this.#u.value = this.#t.length > 0 ? this.#t[0].value : null;
|
|
260
258
|
const t = this.#l.parentNode, e = t.firstChild;
|
|
261
259
|
if (e.className === "remove-tag" && e.remove(), !this.clearButton || this.#t.length <= 0)
|
|
@@ -273,19 +271,19 @@ class h {
|
|
|
273
271
|
s.className = "selected-tag", s.innerHTML = `${t} <span class="remove-tag" data-value="${e}">x</span>`, this.#s.appendChild(s);
|
|
274
272
|
});
|
|
275
273
|
}
|
|
276
|
-
#
|
|
274
|
+
#B(t) {
|
|
277
275
|
this.#t = this.#t.filter((e) => this.#c(e.value) !== this.#c(t)), this.#d(t);
|
|
278
276
|
}
|
|
279
|
-
#
|
|
277
|
+
#k(t) {
|
|
280
278
|
const { scrollTop: e, scrollHeight: s, clientHeight: i } = this.#e;
|
|
281
|
-
t.target.lastChild !== null && (t.target.lastChild.dataset.value === "loading" || this.#g || e + (i + 1) >= s && (this.#h({ id: "loading", text: "cargando ..." }), this.#
|
|
279
|
+
t.target.lastChild !== null && (t.target.lastChild.dataset.value === "loading" || this.#g || e + (i + 1) >= s && (this.#h({ id: "loading", text: "cargando ..." }), this.#R()));
|
|
282
280
|
}
|
|
283
281
|
#c(t) {
|
|
284
282
|
return !isNaN(t) && !isNaN(parseFloat(t)) ? parseInt(t) : t;
|
|
285
283
|
}
|
|
286
284
|
async render() {
|
|
287
285
|
const t = document.getElementById(this.id), e = t === null ? !1 : t.outerHTML.includes("<select");
|
|
288
|
-
this.#f === void 0 && t !== null || e ? this.#
|
|
286
|
+
this.#f === void 0 && t !== null || e ? this.#D() : this.#f !== void 0 && this.#d();
|
|
289
287
|
}
|
|
290
288
|
}
|
|
291
289
|
export {
|
package/dist/selectyc.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(h,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(h=typeof globalThis<"u"?globalThis:h||self,a(h.selectyc={}))})(this,function(h){"use strict";class a{constructor(t){this.route=t}static make(t){return new a(t)}setMethod(t){return this.method=t,this}getMethod(){return this.method===void 0?"POST":this.method}setData(t){return this.data=t,this}addData(t){if(this.data===void 0)return this.setData(t);for(const e in t)this.data[e]=t[e];return this}setFun(t){return this.fun=t,this}async go(){try{const t={method:this.getMethod(),headers:{"X-CSRF-TOKEN":window.CSRF_TOKEN,Accept:"application/json"}};this.data!==void 0&&(t.body=this.data,Object.prototype.toString.call(this.data)!=="[object FormData]"&&(t.body=JSON.stringify(this.data),t.headers["Content-Type"]="application/json"));const e=await fetch(this.route,t);if(!e.ok){const s=await e.json();throw new Error(s.message)}return this.fun===void 0?await e.json():await this.fun(e)}catch(t){window.toastNotification.setType(!1).show(t.message)}}}class d{#t=[];#u;#p=[];#r;#f;#s;#e;#
|
|
1
|
+
(function(h,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(h=typeof globalThis<"u"?globalThis:h||self,a(h.selectyc={}))})(this,function(h){"use strict";class a{constructor(t){this.route=t}static make(t){return new a(t)}setMethod(t){return this.method=t,this}getMethod(){return this.method===void 0?"POST":this.method}setData(t){return this.data=t,this}addData(t){if(this.data===void 0)return this.setData(t);for(const e in t)this.data[e]=t[e];return this}setFun(t){return this.fun=t,this}async go(){try{const t={method:this.getMethod(),headers:{"X-CSRF-TOKEN":window.CSRF_TOKEN,Accept:"application/json"}};this.data!==void 0&&(t.body=this.data,Object.prototype.toString.call(this.data)!=="[object FormData]"&&(t.body=JSON.stringify(this.data),t.headers["Content-Type"]="application/json"));const e=await fetch(this.route,t);if(!e.ok){const s=await e.json();throw new Error(s.message)}return this.fun===void 0?await e.json():await this.fun(e)}catch(t){window.toastNotification.setType(!1).show(t.message)}}}class d{#t=[];#u;#p=[];#r;#f;#s;#e;#i;#a;#m;#o;#n=!1;#y=!1;#g=!1;#S="";#x='<svg class="w-5 h-5 text-gray-900 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';constructor(t){if(window.selects===void 0&&(window.selects=[]),window.selects[t]!==void 0)return window.selects[t];this.id=t,this.name,this.data=[],this.isMultiple=!1,this.clearButton=!1,this.singleLabel=" ",this.records=10,this.filter=null,this.bodyRound="",this.width="100%",this.searchInputActive=!0,this.bodyData=null,this.boxOverflow="horizontal",this.disabled=!1,window.selects[t]=this}static set(t){return new d(t)}setData(t){return this.data=t,this}setMultiple(t="horizontal"){return this.isMultiple=!0,this.boxOverflow=t,this}setClearButton(){return this.clearButton=!0,this}setSelectedOptions(t){this.#t=t,this.#d(t)}getSelectedOptions(){return this.#t}getSelectedOption(){return this.#t[0]}getOptions(){return this.data}setSingleLabel(t){return this.singleLabel=t,this}setBodyRound(t){return this.bodyRound=`-${t}`,this}setRS(t){return this.RS=t,this}setBodyData(t){return this.bodyData=t,this}desactiveSearchInput(){return this.searchInputActive=!1,this}addOption(t){this.data.push(t)}setWidth(t){return this.width=t,this}setOnSelect(t){return this.onSelect=t,this}setOnUnselect(t){return this.onUnselect=t,this}setOnChange(t){return this.onChange=t,this}cleanSelection(){const t=this.#t;this.#t=[],this.#d(t)}setDisableSelect(t){return this.disabled=t,this}#D(){this.#E(),this.#s.addEventListener("click",t=>{if(!this.disabled){if(t.target.classList.contains("remove-tag")){this.#B(t.target.getAttribute("data-value")),this.onUnselect!==void 0&&this.onUnselect(t.target.getAttribute("data-value"),this),this.#n&&this.#l(),this.#v();return}this.#n?this.#l():this.#v()}}),document.addEventListener("click",t=>{!this.#r.contains(t.target)&&!this.#e.contains(t.target)&&!t.target.classList.contains("remove-tag")&&this.#l()}),window.onresize=()=>{this.#l()},window.addEventListener("scroll",()=>{this.#l()}),this.isMultiple&&this.#C()}#E(){this.#I();const t=document.createElement("div");t.className="main-div-selectyc",t.style.width=this.width,t.id=`selectyc_main_div_${this.id}`;const e=document.createElement("div");e.className="custom-multiselect";let s=document.createElement("div");s.className="selected-items round"+this.bodyRound,s.tabIndex=0,s.classList.add(this.boxOverflow==="horizontal"?"horizontal-overflow":"vertical-overflow"),this.isMultiple||(s=this.#L(s)),e.appendChild(s),e.appendChild(this.#O()),t.appendChild(e);const i=document.getElementById(this.id),n=document.createElement("input");n.name=i.name,n.setAttribute("data-id",i.id),this.rootClassName!==""&&(n.className=i.className),n.style.display="none";let l=i.parentNode;t.appendChild(n),l.replaceChild(t,i),this.#u=n,this.#f=s,this.#r=e,this.#s=this.#r.querySelector(".selected-items"),!this.isMultiple&&this.#t.length>0&&(this.#u.value=this.#t[0].value)}#L(t){const e=document.createElement("input");e.className="custom-single-select",e.id=`selectyc_text_box_${this.id}`,e.placeholder=this.singleLabel,e.value=this.#t.length===0?null:this.#t[0].text,e.readOnly=!0;const s=document.createElement("div");return s.innerHTML=this.#x,t.appendChild(this.#N()),t.appendChild(e),t.appendChild(s),this.#a=e,t}#N(){const t=document.createElement("input");return t.type="text",t.required=this.#y,t.tabIndex=-1,t.style.position="absolute",t.style.opacity="0",t.style.pointerEvents="none",t.style.height="0",t.style.width="0",t.style.left="50%",t.value=this.#t.length===0?"":this.#t[0].text,this.#m=t,t}#O(){const t=document.createElement("div");t.setAttribute("style","position:fixed; z-index:999;");const e=document.createElement("div");e.setAttribute("style","position:absolute;");const s=document.createElement("div");s.className="global-dropdown",this.searchInputActive&&e.appendChild(this.#M());let i;return s.addEventListener("scroll",n=>{i&&clearTimeout(i),i=setTimeout(()=>{this.#k(n)},70)}),e.appendChild(s),this.#e=s,this.#o=e,t.appendChild(e),t}#M(){const t=document.createElement("input");return t.type="text",t.id="selectyc_search_input",t.className="search-input",t.placeholder="Buscar...",t.addEventListener("input",()=>{this.filter=t.value,this.#e.innerHTML="",this.#b()}),this.#i=t,t}#h(t){const e=document.createElement("div");e.className="select-option",e.setAttribute("data-value",t.id),e.textContent=t.text,this.#e.appendChild(e),e.addEventListener("click",()=>{t.id!=="sin_resultados"&&(this.#R(t.text,t.id),this.onSelect!==void 0&&this.onSelect(t.id,this),this.#l())})}#I(){const t=document.getElementById(this.id);this.name=t.name,this.#y=t.required,this.rootClassName=t.className,this.disabled=t.disabled,Array.from(t.options).forEach(e=>{if(e.outerHTML.includes("selected")){const s=e.text,i=this.#c(e.value);this.isMultiple?this.#t.push({value:i,text:s}):this.#t[0]={value:i,text:s}}this.#p.push({id:this.#c(e.value),text:e.text}),this.data=this.#p})}#v(){if(this.filter=null,this.#i.value=null,this.#n)return;this.#n=!0,this.#s.classList.remove(`round${this.bodyRound}`),this.#s.classList.add(`round${this.bodyRound}t`);const t=this.#r.getBoundingClientRect();this.#o.style.position="fixed",this.#o.style.top=t.bottom+"px",this.#o.style.left=t.left+"px",this.#e.style.width=t.width+"px",this.#e.style.display="block",this.searchInputActive&&(this.#i.style.display="block",this.#i.style.width=t.width+"px",this.#i.focus()),this.#b()}#l(){this.#n&&(this.#n=!1,this.#e.innerHTML="",this.#e.style.display="none",this.searchInputActive&&(this.#i.style.display="none"),this.#s.classList.add(`round${this.bodyRound}`))}async#w(){if(this.RS===void 0)return this.data;let t={records:this.records,filter:this.filter};if(typeof this.bodyData=="function"){const i=this.bodyData();t={...t,...i}}else this.bodyData!==null&&(t={...t,...this.bodyData});const e=await a.make(this.RS).addData(t).setMethod("POST").go(),s=Array.isArray(e)?e:e.data;return this.data=Array.from(new Map([...this.#p,...s].map(i=>[i.id,i])).values()),this.data}async#b(){this.#h({id:"loading",text:"cargando ..."}),this.records=10+this.#t.length,this.#g=!1;let t=await this.#w();const e=this.#t.map(s=>s.value);this.#e.lastChild.dataset.value==="loading"&&this.#e.removeChild(this.#e.lastChild),t.forEach(s=>{s.text.toLowerCase().includes(this.#S.toLowerCase())&&!e.includes(s.id)&&this.#h(s)}),this.#e.hasChildNodes()||this.#h({id:"sin_resultados",text:"sin resultados ..."})}async#T(){const t=this.#t.map(l=>l.value);let e=this.filter===null?"":this.filter,s=this.data.map(l=>l.id);this.records=this.records+10+this.#t.length;let i=await this.#w();this.#e.lastChild.dataset.value==="loading"&&this.#e.removeChild(this.#e.lastChild);const n=this.#e.lastChild.dataset.value;i.forEach(l=>{l.text.toLowerCase().includes(e.toLowerCase())&&!t.includes(l.id)&&!s.includes(l.id)&&this.#h(l)}),this.#g=n===this.#e.lastChild.dataset.value}#R(t,e){this.#t.find(i=>i.value===e)||(this.isMultiple||(this.#t=[]),this.#t.push({text:t,value:e})),this.#d(e)}#d(t){this.onChange!==void 0&&this.onChange(t,this),this.isMultiple?this.#C():this.#A()}#A(){this.#a.value=null,this.#m.value=null,this.#a.value=this.#t.length>0?this.#t[0].text:null,this.#m.value=this.#t.length>0?this.#t[0].text:null,this.#a.placeholder=this.singleLabel,this.#u.value=this.#t.length>0?this.#t[0].value:null;const t=this.#a.parentNode,e=t.firstChild;if(e.className==="remove-tag"&&e.remove(),!this.clearButton||this.#t.length<=0)return;const s=document.createElement("span");s.dataset.value=this.#t[0].value,s.innerHTML="x",s.className="remove-tag",t.insertBefore(s,t.firstChild)}#C(){if(this.#s.innerHTML="",this.#t.length<=0){this.#s.appendChild(document.createElement("div"));return}this.#t.forEach(({text:t,value:e})=>{const s=document.createElement("div");s.className="selected-tag",s.innerHTML=`${t} <span class="remove-tag" data-value="${e}">x</span>`,this.#s.appendChild(s)})}#B(t){this.#t=this.#t.filter(e=>this.#c(e.value)!==this.#c(t)),this.#d(t)}#k(t){const{scrollTop:e,scrollHeight:s,clientHeight:i}=this.#e;t.target.lastChild!==null&&(t.target.lastChild.dataset.value==="loading"||this.#g||e+(i+1)>=s&&(this.#h({id:"loading",text:"cargando ..."}),this.#T()))}#c(t){return!isNaN(t)&&!isNaN(parseFloat(t))?parseInt(t):t}async render(){const t=document.getElementById(this.id),e=t===null?!1:t.outerHTML.includes("<select");this.#f===void 0&&t!==null||e?this.#D():this.#f!==void 0&&this.#d()}}h.selectyc=d,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|