slim-select
Version:
Slim advanced select dropdown
1,125 lines • 93 kB
JavaScript
import { forwardRef as e, useEffect as t, useImperativeHandle as n, useRef as r, useState as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/slim-select/classes.ts
var o = class {
main;
placeholder;
values;
single;
multiString;
max;
value;
valueText;
valueDelete;
valueOut;
deselect;
deselectPath;
arrow;
arrowClose;
arrowOpen;
content;
contentOpen;
dirAbove;
dirBelow;
search;
searchHighlighter;
searching;
status;
addable;
addablePath;
list;
optgroup;
optgroupLabel;
optgroupLabelText;
optgroupActions;
optgroupSelectAll;
optgroupSelectAllBox;
optgroupSelectAllCheck;
optgroupClosable;
option;
optionDelete;
highlighted;
modalOverlay;
modalDialog;
modalTitle;
modalClose;
modalContent;
mainOpen;
close;
selected;
error;
disabled;
hide;
constructor(e) {
e ||= {};
let t = (e = "", t = "") => `${e} ${t}`.trim();
this.main = t("ss-main", e.main), this.placeholder = t("ss-placeholder", e.placeholder), this.values = t("ss-values", e.values), this.single = t("ss-single", e.single), this.multiString = t("ss-multi-string", e.multiString), this.max = t("ss-max", e.max), this.value = t("ss-value", e.value), this.valueText = t("ss-value-text", e.valueText), this.valueDelete = t("ss-value-delete", e.valueDelete), this.valueOut = t("ss-value-out", e.valueOut), this.deselect = t("ss-deselect", e.deselect), this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = t("ss-arrow", e.arrow), this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = t("ss-content", e.content), this.contentOpen = t("ss-open", e.contentOpen), this.dirAbove = t("ss-dir-above", e.dirAbove), this.dirBelow = t("ss-dir-below", e.dirBelow), this.search = t("ss-search", e.search), this.searchHighlighter = t("ss-search-highlight", e.searchHighlighter), this.searching = t("ss-searching", e.searching), this.status = t("ss-status", e.status), this.addable = t("ss-addable", e.addable), this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = t("ss-list", e.list), this.optgroup = t("ss-optgroup", e.optgroup), this.optgroupLabel = t("ss-optgroup-label", e.optgroupLabel), this.optgroupLabelText = t("ss-optgroup-label-text", e.optgroupLabelText), this.optgroupActions = t("ss-optgroup-actions", e.optgroupActions), this.optgroupSelectAll = t("ss-selectall", e.optgroupSelectAll), this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = t("ss-closable", e.optgroupClosable), this.option = t("ss-option", e.option), this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = t("ss-highlighted", e.highlighted), this.modalOverlay = t("ss-modal-overlay", e.modalOverlay), this.modalDialog = t("ss-modal-dialog", e.modalDialog), this.modalTitle = t("ss-modal-title", e.modalTitle), this.modalClose = t("ss-modal-close", e.modalClose), this.modalContent = t("ss-modal-content", e.modalContent), this.mainOpen = t("ss-open", e.mainOpen), this.close = t("ss-close", e.close), this.selected = t("ss-selected", e.selected), this.error = t("ss-error", e.error), this.disabled = t("ss-disabled", e.disabled), this.hide = t("ss-hide", e.hide);
}
getFirst(e) {
return this[e].split(" ")[0];
}
}, s = 200, c = ["transform", "opacity"];
function l(e, t = s) {
let n = e.trim();
if (!n) return t;
if (n.endsWith("ms")) {
let e = parseFloat(n);
return Number.isNaN(e) ? t : e;
}
if (n.endsWith("s")) {
let e = parseFloat(n);
return Number.isNaN(e) ? t : e * 1e3;
}
let r = parseFloat(n);
return Number.isNaN(r) ? t : r;
}
function u(e, t = s) {
return l(getComputedStyle(e).getPropertyValue("--ss-animation-timing").trim(), t);
}
function d(e, t, n = s) {
let r = u(e, n) + 50;
return t === void 0 ? r : Math.max(r, t);
}
function f() {
return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}
function p(e) {
return e === void 0 ? null : new Set(Array.isArray(e) ? e : [e]);
}
function m(e, t, n = s, r) {
if (f() || r?.aborted) return Promise.resolve();
let i = p(t);
return new Promise((t) => {
let a = null, o = !1, s = () => {
o || (o = !0, e.removeEventListener("transitionend", l), r?.removeEventListener("abort", c), a && clearTimeout(a), t());
}, c = () => s(), l = (t) => {
t.target === e && (i && (!i.has(t.propertyName) || (i.delete(t.propertyName), i.size > 0)) || s());
};
r?.addEventListener("abort", c, { once: !0 }), e.addEventListener("transitionend", l), a = setTimeout(s, n);
});
}
function h(e, t, n = s, r) {
return f() || r?.aborted ? Promise.resolve() : new Promise((i) => {
let a = null, o = !1, s = () => {
o || (o = !0, e.removeEventListener("animationend", l), r?.removeEventListener("abort", c), a && clearTimeout(a), i());
}, c = () => s(), l = (n) => {
n.target === e && (t && n.animationName !== t || s());
};
r?.addEventListener("abort", c, { once: !0 }), e.addEventListener("animationend", l), a = setTimeout(s, n);
});
}
//#endregion
//#region src/slim-select/settings.ts
var g = class {
id = "";
style = "";
class = [];
isMultiple = !1;
isOpen = !1;
isFullOpen = !1;
disabled;
alwaysOpen;
showSearch;
focusSearch;
keepSearch;
ariaLabel;
searchPlaceholder;
searchText;
searchingText;
resultsText;
deselectText;
removeText;
searchHighlight;
closeOnSelect;
contentLocation;
contentPosition;
contentWidth;
openPosition;
placeholderText;
allowDeselect;
hideSelected;
multiString;
keepOrder;
showOptionTooltips;
minSelected;
maxSelected;
timeoutDelay;
maxValuesShown;
maxValuesMessage;
addableText;
modal;
modalTitle;
constructor(e) {
e ||= {}, this.id = "ss-" + b(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled !== void 0 && e.disabled, this.alwaysOpen = e.alwaysOpen !== void 0 && e.alwaysOpen, this.showSearch = e.showSearch === void 0 || e.showSearch, this.focusSearch = e.focusSearch === void 0 || e.focusSearch, this.keepSearch = e.keepSearch !== void 0 && e.keepSearch, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search...", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.resultsText = e.resultsText || "{count} results available", this.deselectText = e.deselectText || "Clear", this.removeText = e.removeText || "Remove", this.searchHighlight = e.searchHighlight !== void 0 && e.searchHighlight, this.closeOnSelect = e.closeOnSelect === void 0 || e.closeOnSelect, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.contentWidth = e.contentWidth || "", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText === void 0 ? "Select Value" : e.placeholderText, this.allowDeselect = e.allowDeselect !== void 0 && e.allowDeselect, this.hideSelected = e.hideSelected !== void 0 && e.hideSelected, this.multiString = e.multiString !== void 0 && e.multiString, this.keepOrder = e.keepOrder !== void 0 && e.keepOrder, this.showOptionTooltips = e.showOptionTooltips !== void 0 && e.showOptionTooltips, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || "Press \"Enter\" to add {value}", this.modal = e.modal || "mobile", this.modalTitle = e.modalTitle || "";
}
};
//#endregion
//#region src/slim-select/helpers.ts
function _(e) {
if (!e) return {};
let t = {};
for (let n of Object.keys(e)) {
let r = e[n];
r !== void 0 && (t[n] = r);
}
return t;
}
function v(e) {
let t = e.cloneNode(!0);
return t.querySelectorAll("select, option, optgroup, textarea, input, button").forEach((e) => e.remove()), t.textContent?.replace(/\s+/g, " ").trim() || "";
}
function y(e) {
if (e.labels && e.labels.length > 0) {
let t = Array.from(e.labels).map(v).filter(Boolean);
if (t.length > 0) return [...new Set(t)].join(" ");
}
return e.getAttribute("aria-label")?.trim() || "";
}
function b() {
return Math.random().toString(36).substring(2, 10);
}
function x(e, t) {
function n(e, n) {
return n && e && e.classList && e.classList.contains(n) || n && e && e.dataset && e.dataset.id && e.dataset.id === t ? e : null;
}
function r(e, t) {
return !e || e === document ? null : n(e, t) ? e : r(e.parentNode, t);
}
return n(e, t) || r(e, t);
}
function S(e, t = 50, n = !1) {
let r;
return function(...i) {
let a = self, o = () => {
r = null, n || e.apply(a, i);
}, s = n && !r;
clearTimeout(r), r = setTimeout(o, t), s && e.apply(a, i);
};
}
function C(e, t) {
if (e.length !== t.length) return !1;
let n = [...e].sort(), r = [...t].sort();
return n.every((e, t) => e === r[t]);
}
var w = [
"id",
"value",
"text",
"html",
"defaultSelected",
"selected",
"display",
"disabled",
"placeholder",
"class",
"style",
"mandatory"
];
function T(e, t) {
let n = Object.keys(e), r = Object.keys(t);
if (n.length !== r.length) return !1;
for (let r of n) if (e[r] !== t[r]) return !1;
return !0;
}
function E(e, t) {
switch (t) {
case "id": return e.id || "";
case "value": return e.value === void 0 ? e.text || "" : e.value || "";
case "text": return e.text || "";
case "html": return e.html || "";
case "defaultSelected": return e.defaultSelected ?? !1;
case "selected": return e.selected ?? !1;
case "display": return e.display ?? !0;
case "disabled": return e.disabled ?? !1;
case "placeholder": return e.placeholder ?? !1;
case "class": return e.class || "";
case "style": return e.style || "";
case "mandatory": return e.mandatory ?? !1;
default: return e.data || {};
}
}
function D(e) {
return !!e && typeof e == "object" && "label" in e && "options" in e;
}
function O(e, t) {
for (let n of w) if (E(e, n) !== E(t, n)) return !1;
return T(e.data || {}, t.data || {});
}
function k(e, t) {
let n = (e) => ({
id: e.id || "",
label: e.label || "",
selectAll: e.selectAll ?? !1,
closable: e.closable || "off"
}), r = n(e), i = n(t);
if (r.id !== i.id || r.label !== i.label || r.selectAll !== i.selectAll || r.closable !== i.closable) return !1;
let a = e.options || [], o = t.options || [];
if (a.length !== o.length) return !1;
for (let e = 0; e < a.length; e++) if (!O(a[e], o[e])) return !1;
return !0;
}
function A(e, t) {
if (e === t) return !0;
if (e.length !== t.length) return !1;
for (let n = 0; n < e.length; n++) {
let r = e[n], i = t[n], a = D(r);
if (a !== D(i)) return !1;
if (a) {
if (!k(r, i)) return !1;
continue;
}
if (!O(r, i)) return !1;
}
return !0;
}
function j(e) {
let t = e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (e) => "-" + e.toLowerCase());
return e[0] === e[0].toUpperCase() ? t.substring(1) : t;
}
function M(e, t = typeof window < "u" ? window.innerWidth : 768) {
return e === "on" || e === "mobile" && t < 768;
}
//#endregion
//#region src/slim-select/events.ts
var N = class {
handlers;
attached = !1;
constructor(e) {
this.handlers = e;
}
attach(e) {
this.attached || (this.attached = !0, window.addEventListener("resize", this.resizeHandler, !1), e.listenScroll && window.addEventListener("scroll", this.scrollHandler, !1), document.addEventListener("visibilitychange", this.visibilityHandler));
}
attachDocumentClick() {
document.addEventListener("click", this.handlers.onDocumentClick);
}
detachDocumentClick() {
document.removeEventListener("click", this.handlers.onDocumentClick);
}
detach(e) {
this.attached && (this.attached = !1, this.detachDocumentClick(), window.removeEventListener("resize", this.resizeHandler, !1), e.listenScroll && window.removeEventListener("scroll", this.scrollHandler, !1), document.removeEventListener("visibilitychange", this.visibilityHandler));
}
resizeHandler = S(() => {
this.handlers.onWindowResize();
});
scrollHandler = S(() => {
this.handlers.onWindowScroll();
});
visibilityHandler = () => {
this.handlers.onVisibilityChange();
};
}, P = class {
handlers;
options;
state = "closed";
pendingTimer = null;
waitResolvers = [];
generation = 0;
animationAbort = null;
constructor(e, t) {
this.handlers = e, this.options = t;
}
get isOpen() {
return this.state === "opening" || this.state === "open";
}
get isFullOpen() {
return this.state === "open";
}
async requestOpen() {
if (this.state === "opening" || this.state === "open") return;
this.cancelPending();
let e = ++this.generation;
if (this.handlers.beforeOpen && this.handlers.beforeOpen(), this.state = "opening", await this.waitForPhase("open", e), e !== this.generation) {
this.state === "opening" && (this.state = "closed");
return;
}
this.state = "open", this.handlers.afterOpen && this.handlers.afterOpen(), this.handlers.onOpenReady && this.handlers.onOpenReady();
}
async requestClose(e = {
source: "api",
selectionChanged: !1
}) {
if (this.state === "closed" || this.state === "closing" || this.handlers.beforeClose && this.handlers.beforeClose(e) === !1) return !1;
this.cancelPending();
let t = ++this.generation;
return this.handlers.onClose && this.handlers.onClose(e), this.state = "closing", await this.waitForPhase("close", t), t === this.generation ? (this.state = "closed", this.handlers.afterClose && this.handlers.afterClose(), this.handlers.onCloseReady && this.handlers.onCloseReady(), !0) : !1;
}
cancelPending() {
this.generation++, this.animationAbort?.abort(), this.animationAbort = null, this.pendingTimer &&= (clearTimeout(this.pendingTimer), null);
let e = this.waitResolvers.splice(0);
for (let t of e) t();
}
destroy() {
this.cancelPending(), this.state = "closed";
}
waitForPhase(e, t) {
return new Promise((t) => {
let n = !1, r = () => {
if (n) return;
n = !0;
let e = this.waitResolvers.indexOf(r);
e !== -1 && this.waitResolvers.splice(e, 1), t();
};
if (this.waitResolvers.push(r), this.options.waitForAnimation) {
let t = new AbortController();
this.animationAbort = t, this.options.waitForAnimation(e, t.signal).catch(() => void 0).finally(() => {
this.animationAbort === t && (this.animationAbort = null), r();
});
} else this.pendingTimer = setTimeout(() => {
this.pendingTimer = null, r();
}, this.options.timeoutDelay);
}).then(() => {
this.generation;
});
}
}, F = class {
id;
value;
text;
html;
defaultSelected;
selected;
display;
disabled;
placeholder;
class;
style;
data;
mandatory;
constructor(e) {
this.id = !e.id || e.id === "" ? b() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected !== void 0 && e.defaultSelected, this.selected = e.selected !== void 0 && e.selected, this.display = e.display === void 0 || e.display, this.disabled = e.disabled !== void 0 && e.disabled, this.mandatory = e.mandatory !== void 0 && e.mandatory, this.placeholder = e.placeholder !== void 0 && e.placeholder, this.class = e.class || "", this.style = e.style || "", this.data = _(e.data);
}
}, I = class {
id;
label;
selectAll;
closable;
options;
constructor(e) {
if (this.id = !e.id || e.id === "" ? b() : e.id, this.label = e.label || "", this.selectAll = e.selectAll !== void 0 && e.selectAll, this.closable = e.closable || "off", this.options = [], e.options) for (let t of e.options) this.options.push(new F(t));
}
}, L = class {
selectType = "single";
data = [];
selectedOrder = [];
catalog = null;
constructor(e, t) {
this.selectType = e, this.setData(t), this.snapshotCatalog();
}
validateDataArray(e) {
if (!Array.isArray(e)) return /* @__PURE__ */ Error("Data must be an array");
for (let t of e) if (t) if (t instanceof I || "label" in t) {
if (!("label" in t)) return /* @__PURE__ */ Error("Optgroup must have a label");
if ("options" in t && t.options) for (let e of t.options) {
let t = this.validateOption(e);
if (t) return t;
}
} else if (t instanceof F || "text" in t) {
let e = this.validateOption(t);
if (e) return e;
} else return /* @__PURE__ */ Error("Data object must be a valid optgroup or option");
return null;
}
validateOption(e) {
return "text" in e ? null : /* @__PURE__ */ Error("Option must have a text");
}
partialToFullData(e) {
let t = [];
return e.forEach((e) => {
if (e) {
if (e instanceof I || "label" in e) {
let n = [];
"options" in e && e.options && e.options.forEach((e) => {
n.push(new F(e));
}), n.length > 0 && t.push(new I(e));
}
(e instanceof F || "text" in e) && t.push(new F(e));
}
}), t;
}
snapshotCatalog() {
this.catalog = this.cloneData(this.data);
}
getCatalogData() {
return this.cloneData(this.catalog ?? this.data);
}
cloneData(e) {
return e.map((e) => e instanceof I ? new I({
id: e.id,
label: e.label,
selectAll: e.selectAll,
closable: e.closable,
options: e.options.map((e) => new F(e instanceof F ? { ...e } : e))
}) : new F({ ...e }));
}
optionMatchesSelected(e, t) {
return e.id === t.id || t.value !== "" && e.value !== "" && e.value === t.value;
}
findOptionInData(e, t) {
for (let n of e) {
if (n instanceof F) {
if (this.optionMatchesSelected(n, t)) return n;
continue;
}
for (let e of n.options) if (this.optionMatchesSelected(e, t)) return e;
}
return null;
}
setData(e, t = !1) {
let n = this.partialToFullData(e), r = [];
if (t) {
r = this.getSelectedOptions();
let e = [];
r.forEach((t) => {
this.findOptionInData(n, t) || e.push(t);
}), this.data = [...e, ...n];
let t = this.selectType === "single" && r.length === 0, i = r.map((e) => {
let t = this.findOptionInData(this.data, e);
return t ? t.id : e.id;
});
this.setSelectedBy("id", i, t);
} else this.data = n;
!t && this.selectType === "single" && this.setSelectedBy("id", this.getSelected(), !1);
}
getData(e = !0) {
return this.filter(null, !0, e);
}
getDataOptions(e = !0) {
return this.filter(null, !1, e);
}
addOption(e, t = !1) {
if (t) {
let t = [new F(e)];
this.setData(t.concat(this.getData()));
} else this.setData(this.getData().concat(new F(e)));
}
setSelectedBy(e, t, n = !1) {
let r = null, i = !1, a = [];
for (let n of this.data) {
if (n instanceof I) for (let o of n.options) {
r ||= o;
let n = o[e] || "";
o.selected = !i && t.includes(n), o.selected && (a.push(o), this.selectType === "single" && (i = !0));
}
n instanceof F && (r ||= n, n.selected = !i && t.includes(n[e]), n.selected && (a.push(n), this.selectType === "single" && (i = !0)));
}
this.selectType === "single" && r && !i && !n && (r.selected = !0, a.push(r));
let o = t.map((t) => a.find((n) => n[e] === t)?.id || "");
this.selectedOrder = o;
}
getSelected() {
return this.getSelectedOptions().map((e) => e.id);
}
getSelectedValues() {
return this.getSelectedOptions().map((e) => e.value);
}
getSelectedOptions() {
let e = [];
for (let t of this.data) if (t instanceof I) for (let n of t.options) n.selected && e.push(n);
else t.selected && e.push(t);
return e;
}
getOptgroupByID(e) {
for (let t of this.data) if (t instanceof I && t.id === e) return t;
return null;
}
getOptionByID(e) {
for (let t of this.data) if (t instanceof I) {
for (let n of t.options) if (n.id === e) return n;
} else if (t.id === e) return t;
return null;
}
getSelectType() {
return this.selectType;
}
getFirstOption() {
let e = null;
for (let t of this.data) if (t instanceof I ? e = t.options[0] : t instanceof F && (e = t), e) break;
return e;
}
search(e, t) {
return e = e.trim(), e === "" ? this.getData(!1) : this.filter((n) => t(n, e), !0, !1);
}
createOptgroupView(e, t) {
let n = new I({
id: e.id,
label: e.label,
selectAll: e.selectAll,
closable: e.closable,
options: []
});
return n.options = t, n;
}
filter(e, t, n = !0) {
let r = [];
return this.data.forEach((i) => {
if (i instanceof I) {
let a = [];
if (i.options.forEach((i) => {
(!e || e(i)) && (t ? a.push(n ? new F(i) : i) : r.push(n ? new F(i) : i));
}), a.length > 0) if (n) {
let e = new I(i);
e.options = a, r.push(e);
} else r.push(this.createOptgroupView(i, a));
}
i instanceof F && (!e || e(i)) && r.push(n ? new F(i) : i);
}), r;
}
selectedOrderOptions(e) {
let t = [];
return this.selectedOrder.forEach((n) => {
let r = e.find((e) => e.id === n);
r && t.push(r);
}), e.forEach((e) => {
let n = !1;
t.forEach((t) => {
if (e.id === t.id) {
n = !0;
return;
}
}), n || t.push(e);
}), t;
}
}, R = class {
settings;
store;
callbacks;
lastSelectedOption;
lastRenderedOptions;
optionsListIsFullData = !1;
lastSearchFilterTerm = "";
main;
content;
classes;
positionObserver = null;
positionObserverRaf = 0;
overflowShiftRaf = 0;
modalElements = null;
modalSessionActive = null;
bodyScrollLocked = !1;
savedBodyOverflow = "";
constructor(e, t, n, r) {
this.store = n, this.settings = e, this.classes = t, this.callbacks = r, this.lastSelectedOption = null, this.lastRenderedOptions = [], this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main), this.settings.modal !== "off" && !this.settings.alwaysOpen && (this.modalElements = this.createModalElements(), document.body.appendChild(this.modalElements.overlay));
}
requestClose(e, t) {
this.callbacks.close({
source: e,
option: t?.option,
selectionChanged: t?.selectionChanged ?? !1
});
}
selectionChanged(e, t) {
if (e.length !== t.length) return !0;
let n = e.map((e) => e.id).sort(), r = t.map((e) => e.id).sort();
return n.some((e, t) => e !== r[t]);
}
closeOnSingleSelectReclick(e) {
this.settings.closeOnSelect && this.requestClose("select", {
option: e,
selectionChanged: !1
});
}
addClasses(e, t) {
if (!t || t.trim() === "") return;
let n = t.split(" ").filter((e) => e.trim() !== "");
for (let t of n) e.classList.add(t.trim());
}
removeClasses(e, t) {
if (!t || t.trim() === "") return;
let n = t.split(" ").filter((e) => e.trim() !== "");
for (let t of n) e.classList.remove(t.trim());
}
enable() {
this.removeClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "false"), this.content.search.input.disabled = !1;
}
disable() {
this.addClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "true"), this.content.search.input.disabled = !0;
}
open() {
this.main.arrow.path.setAttribute("d", this.classes.arrowOpen), this.main.main.setAttribute("aria-expanded", "true");
let e = this.resolveModalView();
if (!e) {
let e = this.settings.openPosition === "up" ? this.classes.dirAbove : this.classes.dirBelow;
this.addClasses(this.main.main, e), this.addClasses(this.content.main, e);
}
this.addClasses(this.content.main, this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), e ? this.showModal() : this.moveContent();
let t = this.store.getSelectedOptions();
if (t.length) {
let e = t[t.length - 1].id, n = this.content.list.querySelector("[data-id=\"" + e + "\"]");
n && this.ensureElementInView(this.content.list, n);
}
}
isModalViewActive() {
return this.modalSessionActive === !0;
}
resolveModalView() {
return this.settings.alwaysOpen || this.settings.modal === "off" || !this.modalElements ? !1 : (this.modalSessionActive === null && (this.modalSessionActive = M(this.settings.modal)), this.modalSessionActive);
}
createModalElements() {
let e = document.createElement("div");
this.addClasses(e, this.classes.modalOverlay), this.addClasses(e, this.classes.hide), e.dataset.id = this.settings.id;
let t = document.createElement("div");
this.addClasses(t, this.classes.modalDialog), t.setAttribute("role", "dialog"), t.setAttribute("aria-modal", "true");
let n = null;
this.settings.modalTitle ? (n = document.createElement("div"), this.addClasses(n, this.classes.modalTitle), n.id = `${this.settings.id}-modal-title`, n.textContent = this.settings.modalTitle, t.setAttribute("aria-labelledby", n.id)) : t.setAttribute("aria-label", this.settings.ariaLabel);
let r = document.createElement("button");
r.type = "button", this.addClasses(r, this.classes.modalClose), r.setAttribute("aria-label", "Close"), r.onclick = (e) => {
e.stopPropagation(), this.requestClose("modal");
};
let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
i.setAttribute("viewBox", "0 0 100 100");
let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
return a.setAttribute("d", this.classes.deselectPath), i.appendChild(a), r.appendChild(i), e.onclick = (t) => {
t.target === e && this.requestClose("modal");
}, n && t.appendChild(n), e.appendChild(t), {
overlay: e,
dialog: t,
closeButton: r,
title: n
};
}
showModal() {
this.modalElements && (this.modalElements.dialog.appendChild(this.content.main), this.addClasses(this.content.main, this.classes.modalContent), this.content.main.appendChild(this.modalElements.closeButton), this.content.main.style.top = "", this.content.main.style.left = "", this.content.main.style.margin = "", this.content.main.style.width = "", this.removeClasses(this.modalElements.overlay, this.classes.hide), requestAnimationFrame(() => {
this.modalElements && this.addClasses(this.modalElements.overlay, this.classes.contentOpen);
}), this.lockBodyScroll());
}
lockBodyScroll() {
this.bodyScrollLocked ||= (this.savedBodyOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", !0);
}
unlockBodyScroll() {
this.bodyScrollLocked && (document.body.style.overflow = this.savedBodyOverflow, this.bodyScrollLocked = !1, this.savedBodyOverflow = "");
}
restoreContentOffscreen() {
this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto");
}
finalizeModalClose() {
this.modalElements && this.content.main.parentElement === this.modalElements.dialog && (this.addClasses(this.modalElements.overlay, this.classes.hide), this.removeClasses(this.modalElements.overlay, this.classes.contentOpen), this.removeClasses(this.content.main, this.classes.modalContent), this.modalElements.closeButton.remove(), this.restoreContentOffscreen(), this.unlockBodyScroll());
}
waitForAnimation(e, t) {
let n = d(this.content.main, this.settings.timeoutDelay);
return m(this.content.main, c, n, t);
}
close() {
this.main.main.setAttribute("aria-expanded", "false"), this.main.arrow.path.setAttribute("d", this.classes.arrowClose);
let e = this.modalSessionActive === !0;
this.removeClasses(this.content.main, this.classes.contentOpen), e || (this.removeClasses(this.main.main, this.classes.dirAbove), this.removeClasses(this.main.main, this.classes.dirBelow)), e && this.modalElements && this.removeClasses(this.modalElements.overlay, this.classes.contentOpen), this.modalSessionActive = null, this.content.search.input.setAttribute("aria-hidden", "true"), this.main.main.removeAttribute("aria-activedescendant");
}
clearDirectionClasses() {
this.removeClasses(this.main.main, this.classes.dirAbove), this.removeClasses(this.main.main, this.classes.dirBelow), this.removeClasses(this.content.main, this.classes.dirAbove), this.removeClasses(this.content.main, this.classes.dirBelow);
}
updateClassStyles() {
if (this.main.main.className = "", this.main.main.removeAttribute("style"), this.content.main.className = "", this.content.main.removeAttribute("style"), this.addClasses(this.main.main, this.classes.main), this.addClasses(this.content.main, this.classes.content), this.settings.style !== "" && (this.main.main.style.cssText = this.settings.style, this.content.main.style.cssText = this.settings.style), this.settings.class.length) for (let e of this.settings.class) e.trim() !== "" && (this.main.main.classList.add(e.trim()), this.content.main.classList.add(e.trim()));
(this.settings.contentPosition === "relative" || this.settings.contentPosition === "fixed") && this.content.main.classList.add("ss-" + this.settings.contentPosition);
}
updateAriaAttributes() {
let e = this.content.list.id;
this.main.main.role = "combobox", this.main.main.setAttribute("aria-haspopup", "listbox"), this.main.main.setAttribute("aria-controls", e), this.main.main.setAttribute("aria-expanded", "false"), this.content.list.setAttribute("role", "listbox"), this.content.list.setAttribute("aria-label", this.settings.ariaLabel + " listbox"), this.settings.isMultiple && this.content.list.setAttribute("aria-multiselectable", "true"), this.content.search.input.setAttribute("aria-controls", e);
}
mainDiv() {
let e = document.createElement("div");
e.dataset.id = this.settings.id, e.setAttribute("aria-label", this.settings.ariaLabel), e.tabIndex = 0, e.onkeydown = (e) => {
switch (e.key) {
case "ArrowUp":
case "ArrowDown": return this.callbacks.open(), e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
case "Tab": return this.requestClose("tab"), !0;
case "Enter":
case " ":
this.callbacks.open();
let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
return t && t.click(), !1;
case "Escape": return this.requestClose("escape"), !1;
}
return e.key.length === 1 && this.callbacks.open(), !0;
}, e.onclick = (e) => {
this.settings.disabled || (this.settings.isOpen ? this.requestClose("toggle") : this.callbacks.open());
};
let t = document.createElement("div");
this.addClasses(t, this.classes.values), e.appendChild(t);
let n = document.createElement("div");
this.addClasses(n, this.classes.deselect), n.setAttribute("role", "button"), n.setAttribute("aria-label", this.settings.deselectText), n.setAttribute("tabindex", "0");
let r = this.store?.getSelectedOptions();
!this.settings.allowDeselect || this.settings.isMultiple && r && r.length <= 0 || this.isAtMinSelected() ? this.addClasses(n, this.classes.hide) : this.removeClasses(n, this.classes.hide), n.onclick = (e) => {
if (e.stopPropagation(), this.settings.disabled || this.settings.isMultiple && this.isAtMinSelected()) return;
let t = !0, n = this.store.getSelectedOptions(), r = [], i = "";
if (this.settings.isMultiple) {
let e = this.settings.minSelected, t = this.store.getSelected();
if (e > 0 && t.length > e) i = this.getMinimumSelectionIds(), r = n.filter((e) => i.includes(e.id));
else if (e <= 0) i = [];
else return;
}
if (this.callbacks.beforeChange && (t = this.callbacks.beforeChange(r, n) === !0), t) {
if (this.settings.isMultiple) this.callbacks.setSelected(i, !1), this.updateDeselectAll();
else {
let e = this.store.getFirstOption(), t = e ? e.id : "";
this.callbacks.setSelected(t, !1);
}
this.settings.closeOnSelect && this.requestClose("deselect", { selectionChanged: !0 }), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
}
}, n.onkeydown = (e) => {
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n.click());
};
let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
i.setAttribute("viewBox", "0 0 100 100");
let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
a.setAttribute("d", this.classes.deselectPath), i.appendChild(a), n.appendChild(i), e.appendChild(n);
let o = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.addClasses(o, this.classes.arrow), o.setAttribute("viewBox", "0 0 100 100");
let s = document.createElementNS("http://www.w3.org/2000/svg", "path");
return s.setAttribute("d", this.classes.arrowClose), this.settings.alwaysOpen && this.addClasses(o, this.classes.hide), o.appendChild(s), e.appendChild(o), {
main: e,
values: t,
deselect: {
main: n,
svg: i,
path: a
},
arrow: {
main: o,
path: s
}
};
}
mainFocus(e) {
e !== "click" && this.main.main.focus({ preventScroll: !0 });
}
placeholder() {
let e = this.store.filter((e) => e.placeholder, !1, !1), t = this.settings.placeholderText;
e.length && (e[0].html === "" ? e[0].text !== "" && (t = e[0].text) : t = e[0].html);
let n = document.createElement("div");
return this.addClasses(n, this.classes.placeholder), n.innerHTML = t, n;
}
renderValues() {
if (!this.settings.isMultiple) {
this.renderSingleValue();
return;
}
this.renderMultipleValues(), this.updateDeselectAll();
}
renderSingleValue() {
let e = this.store.filter((e) => e.selected && !e.placeholder, !1, !1), t = e.length > 0 ? e[0] : null;
if (!t) this.main.values.innerHTML = this.placeholder().outerHTML;
else {
let e = document.createElement("div");
this.addClasses(e, this.classes.single), t.html ? e.innerHTML = t.html : e.innerText = t.text, this.main.values.innerHTML = e.outerHTML;
}
!this.settings.allowDeselect || !e.length ? this.addClasses(this.main.deselect.main, this.classes.hide) : this.removeClasses(this.main.deselect.main, this.classes.hide);
}
renderMultipleValues() {
let e = this.main.values.childNodes, t = this.store.filter((e) => e.selected && e.display, !1, !1);
if (t.length === 0) {
this.main.values.innerHTML = this.placeholder().outerHTML;
return;
} else {
let e = this.main.values.querySelector("." + this.classes.getFirst("placeholder"));
e && e.remove();
}
if (this.settings.multiString) {
let e = t;
this.settings.keepOrder && (e = this.store.selectedOrderOptions(e));
let n = document.createElement("div");
this.addClasses(n, this.classes.multiString), n.textContent = e.map((e) => e.text).join(", "), this.settings.showOptionTooltips && n.setAttribute("title", n.textContent), this.main.values.innerHTML = n.outerHTML;
return;
}
if (t.length > this.settings.maxValuesShown) {
let e = document.createElement("div");
this.addClasses(e, this.classes.max), e.textContent = this.settings.maxValuesMessage.replace("{number}", t.length.toString()), this.main.values.innerHTML = e.outerHTML;
return;
} else {
let e = this.main.values.querySelector("." + this.classes.getFirst("max"));
e && e.remove();
}
this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
let n = [];
for (let r = 0; r < e.length; r++) {
let i = e[r], a = i.getAttribute("data-id");
a && (t.filter((e) => e.id === a, !1).length || n.push(i));
}
let r = d(this.content.main, this.settings.timeoutDelay);
for (let e of n) this.addClasses(e, this.classes.valueOut), h(e, "ss-valueOut", r).then(() => {
this.main.values.hasChildNodes() && this.main.values.contains(e) && this.main.values.removeChild(e);
});
e = this.main.values.childNodes;
for (let n = 0; n < t.length; n++) {
let r = !0;
for (let i = 0; i < e.length; i++) t[n].id === String(e[i].dataset.id) && (r = !1);
r && (this.settings.keepOrder || e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[n])) : n === 0 ? this.main.values.insertBefore(this.multipleValue(t[n]), e[n]) : e[n - 1].insertAdjacentElement("afterend", this.multipleValue(t[n])));
}
this.updateMultipleValueDeleteVisibility();
}
isAtMinSelected() {
return this.settings.isMultiple && this.settings.minSelected > 0 && this.store.getSelectedOptions().length <= this.settings.minSelected;
}
getMinimumSelectionIds() {
let e = this.store.getSelectedOptions();
return this.settings.keepOrder && (e = this.store.selectedOrderOptions(e)), e.slice(0, this.settings.minSelected).map((e) => e.id);
}
updateMultipleValueDeleteVisibility() {
if (!this.settings.isMultiple || this.settings.multiString) return;
let e = !this.isAtMinSelected(), t = this.main.values.querySelectorAll("." + this.classes.getFirst("valueDelete"));
for (let n of t) e ? this.removeClasses(n, this.classes.hide) : this.addClasses(n, this.classes.hide);
}
multipleValue(e) {
let t = document.createElement("div");
this.addClasses(t, this.classes.value), t.dataset.id = e.id;
let n = document.createElement("div");
if (this.addClasses(n, this.classes.valueText), n.textContent = e.text, t.appendChild(n), !e.mandatory) {
let n = document.createElement("div");
this.addClasses(n, this.classes.valueDelete), n.setAttribute("tabindex", "0"), n.setAttribute("role", "button"), n.setAttribute("aria-label", `${this.settings.removeText} ${e.text}`), this.isAtMinSelected() && this.addClasses(n, this.classes.hide), n.onclick = (t) => {
if (t.preventDefault(), t.stopPropagation(), this.settings.disabled) return;
let n = !0, r = this.store.getSelectedOptions(), i = r.filter((t) => t.selected && t.id !== e.id, !0);
if (!(this.settings.minSelected && i.length < this.settings.minSelected) && (this.callbacks.beforeChange && (n = this.callbacks.beforeChange(i, r) === !0), n)) {
let e = [];
for (let t of i) {
if (t instanceof I) for (let n of t.options) n.id && e.push(n.id);
t instanceof F && e.push(t.id);
}
this.callbacks.setSelected(e, !1), this.settings.closeOnSelect && this.requestClose("deselect", { selectionChanged: !0 }), this.callbacks.afterChange && this.callbacks.afterChange(i), this.updateDeselectAll(), this.updateMultipleValueDeleteVisibility();
}
};
let r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
r.setAttribute("viewBox", "0 0 100 100");
let i = document.createElementNS("http://www.w3.org/2000/svg", "path");
i.setAttribute("d", this.classes.optionDelete), r.appendChild(i), n.appendChild(r), t.appendChild(n), n.onkeydown = (e) => {
e.key === "Enter" && n.click();
};
}
return t;
}
contentDiv() {
let e = document.createElement("div");
e.dataset.id = this.settings.id;
let t = this.searchDiv();
e.appendChild(t.main);
let n = document.createElement("div");
this.addClasses(n, this.classes.status), n.setAttribute("aria-live", "polite"), n.setAttribute("aria-atomic", "true"), n.setAttribute("role", "status"), e.appendChild(n);
let r = this.listDiv();
return e.appendChild(r), {
main: e,
search: t,
status: n,
list: r
};
}
announce(e) {
this.settings.showSearch && (this.content.status.textContent = e);
}
moveContent() {
if (!this.isModalViewActive()) {
if (this.settings.contentPosition === "relative") {
this.moveContentBelow();
return;
}
if (this.settings.openPosition === "down") {
this.moveContentBelow();
return;
} else if (this.settings.openPosition === "up") {
this.moveContentAbove();
return;
}
this.putContent() === "up" ? this.moveContentAbove() : this.moveContentBelow();
}
}
startPositionTracking() {
this.settings.contentPosition !== "absolute" || this.isModalViewActive() || (this.stopPositionTracking(), !(typeof ResizeObserver > "u") && (this.positionObserver = new ResizeObserver(() => {
this.settings.isOpen && (cancelAnimationFrame(this.positionObserverRaf), this.positionObserverRaf = requestAnimationFrame(() => {
this.moveContent();
}));
}), this.observePositionTargets()));
}
stopPositionTracking() {
cancelAnimationFrame(this.positionObserverRaf), this.positionObserver?.disconnect(), this.positionObserver = null, this.cancelOverflowShift();
}
observePositionTargets() {
if (!this.positionObserver) return;
let e = /* @__PURE__ */ new Set(), t = (t) => {
!t || e.has(t) || (e.add(t), this.positionObserver.observe(t));
};
t(this.main.main);
let n = this.main.main.parentElement, r = this.settings.contentLocation;
for (let e = 0; n && e < 8 && (t(n), n !== r); e++) n = n.parentElement;
}
searchDiv() {
let e = document.createElement("div"), t = document.createElement("input"), n = document.createElement("div");
this.addClasses(e, this.classes.search);
let r = {
main: e,
input: t
};
if (this.settings.showSearch || (this.addClasses(e, this.classes.hide), t.readOnly = !0), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = S((e) => {
this.callbacks.search(e.target.value);
}, 100), t.onkeydown = (e) => {
switch (e.key) {
case "ArrowUp":
case "ArrowDown": return e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
case "Tab": return this.requestClose("tab"), !0;
case "Escape": return this.requestClose("escape"), !1;
case "Enter":
let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
return t ? (t.click(), !1) : this.callbacks.addable ? (n.click(), !1) : !0;
}
return !0;
}, e.appendChild(t), this.callbacks.addable) {
this.addClasses(n, this.classes.addable);
let t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
t.setAttribute("viewBox", "0 0 100 100");
let i = document.createElementNS("http://www.w3.org/2000/svg", "path");
i.setAttribute("d", this.classes.addablePath), t.appendChild(i), n.appendChild(t), n.onclick = (e) => {
if (e.preventDefault(), e.stopPropagation(), !this.callbacks.addable) return;
let t = this.content.search.input.value.trim();
if (t === "") {
this.content.search.input.focus();
return;
}
let n = (e) => {
let t = new F(e);
if (this.callbacks.addOption(t), this.settings.isMultiple) {
let e = this.store.getSelected();
e.push(t.id), this.callbacks.setSelected(e, !0);
} else this.callbacks.setSelected([t.id], !0);
if (this.callbacks.search(""), this.settings.closeOnSelect) {
let e = u(this.content.main);
setTimeout(() => {
this.requestClose("select", { selectionChanged: !0 });
}, e);
}
}, r = this.callbacks.addable(t);
r === !1 || r == null || (r instanceof Promise ? r.then((e) => {
typeof e == "string" ? n({
text: e,
value: e
}) : r instanceof Error ? this.renderError(r.message) : n(e);
}) : typeof r == "string" ? n({
text: r,
value: r
}) : r instanceof Error ? this.renderError(r.message) : n(r));
}, e.appendChild(n), r.addable = {
main: n,
svg: t,
path: i
};
}
return r;
}
searchFocus() {
this.content.search.input.focus({ preventScroll: !0 });
}
getOptions(e = !1, t = !1, n = !1) {
let r = "." + this.classes.getFirst("option");
return e && (r += ":not(." + this.classes.getFirst("placeholder") + ")"), t && (r += ":not(." + this.classes.getFirst("disabled") + ")"), n && (r += ":not(." + this.classes.getFirst("hide") + ")"), Array.from(this.content.list.querySelectorAll(r));
}
highlight(e) {
let t = this.getOptions(!0, !0, !0);
if (t.length === 0) return;
if (t.length === 1 && !t[0].classList.contains(this.classes.getFirst("highlighted"))) {
this.addClasses(t[0], this.classes.highlighted);
return;
}
let n = !1;
for (let e of t) e.classList.contains(this.classes.getFirst("highlighted")) && (n = !0);
if (!n) {
for (let e of t) if (e.classList.contains(this.classes.getFirst("selected"))) {
this.addClasses(e, this.classes.highlighted);
break;
}
}
for (let n = 0; n < t.length; n++) if (t[n].classList.contains(this.classes.getFirst("highlighted"))) {
let r = t[n];
this.removeClasses(r, this.classes.highlighted);
let i = r.parentElement;
if (i && i.classList.contains(this.classes.getFirst("mainOpen"))) {
let e = i.querySelector("." + this.classes.getFirst("optgroupLabel"));
e && e.click();
}
let a = t[e === "down" ? n + 1 < t.length ? n + 1 : 0 : n - 1 >= 0 ? n - 1 : t.length - 1];
this.addClasses(a, this.classes.highlighted), this.ensureElementInView(this.content.list, a), a.id && this.main.main.setAttribute("aria-activedescendant", a.id);
let o = a.parentElement;
if (o && o.classList.contains(this.classes.getFirst("close"))) {
let e = o.querySelector("." + this.classes.getFirst("optgroupLabel"));
e && e.click();
}
return;
}
let r = t[e === "down" ? 0 : t.length - 1];
this.addClasses(r, this.classes.highlighted), r.id && this.main.main.setAttribute("aria-activedescendant", r.id), this.ensureElementInView(this.content.list, r);
}
listDiv() {
let e = document.createElement("div");
this.addClasses(e, this.classes.list);
let t = this.settings.id + "-list";
return e.id = t, e.dataset.id = t, e;
}
renderError(e) {
this.optionsListIsFullData = !1, this.content.list.innerHTML = "";
let t = document.createElement("div");
this.addClasses(t, this.classes.error), t.textContent = e, this.content.list.appendChild(t);
}
renderSearching() {
this.optionsListIsFullData = !1, this.content.list.innerHTML = "";
let e = document.createElement("div");
this.addClasses(e, this.classes.searching), e.textContent = this.settings.searchingText, this.content.list.appendChild(e), this.announce(this.settings.searchingText);
}
renderOptions(e) {
if (this.lastSearchFilterTerm = "", this.lastRenderedOptions = e.map((e) => e instanceof F ? [e] : e.options.map((e) => new F(e))).flat(), this.content.list.innerHTML = "", e.length === 0) {
this.optionsListIsFullData = !1;
let e = document.createElement("div");
if (this.addClasses(e, this.classes.search), this.callbacks.addable) {
let t = this.settings.addableText.replace("{value}", this.content.search.input.value);
e.innerHTML = t, this.announce(t);
} else e.innerHTML = this.settings.searchText, this.announce(this.settings.searchText);
this.content.list.appendChild(e);
return;
}
this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((e) => e.placeholder, !1, !1).length || this.store.addOption(new F({
text: "",
value: "",
selected: !1,
placeholder: !0
}), !0));
let t = document.createDocumentFragment();
for (let n of e) {
if (n instanceof I) {
let e = document.createElement("div");
this.addClasses(e, this.classes.optgroup);
let r = document.createElement("div");
this.addClasses(r, this.classes.optgroupLabel), e.appendChild(r);
let i = document.createElement("div");
this.addClasses(i, this.classes.optgroupLabelText), i.textContent = n.label, r.appendChild(i);
let a = document.createElement("div");
if (this.addClasses(a, this.classes.optgroupActions), r.appendChild(a), this.settings.isMultiple && n.selectAll) {
let e = document.createElement("div");
this.addClasses(e, this.classes.optgroupSelectAll);
let t = this.isOptgroupAllSelected(n.options);
t && this.addClasses(e, this.classes.selected);
let r = document.createElement("span");
r.textContent = this.optgroupSelectAllLabel(t), e.appendChild(r);
let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
i.setAttribute("viewBox", "0 0 100 100"), e.appendChild(i);
let o = document.createElementNS("http://www.w3.org/2000/svg", "path");
o.setAttribute("d", this.classes.optgroupSelectAllBox), i.appendChild(o);
let s = document.createElementNS("http://www.w3.org/2000/svg", "path");
s.setAttribute("d", this.classes.optgroupSelectAllCheck), i.appendChild(s), e.addEventListener("click", (e) => {
e.preventDefault(), e.stopPropagation();
let t = this.store.getSelected();
if (this.isOptgroupAllSelected(n.options, new Set(t))) {
let e = t.filter((e) => {
for (let t of n.options) if (e === t.id) return !1;
return !0;
});
this.callbacks.setSelected(e, !0);
return;
} else {
let e = n.options.map((e) => e.id).filter((e) => e !== void 0), r = t.concat(e);
for (let e of n.options) e.id && !this.store.getOptionByID(e.id) && this.callbacks.addOption(new F(e));
this.callbacks.setSelected(r, !0);
return;
}
}), a.appendChild(e);
}
if (n.closable !== "off") {
let t = document.createElement("div");
this.addClasses(t, this.classes.optgroupClosable);
let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
i.setAttribute("viewBox", "0 0 100 100"), this.addClasses(i, this.classes.arrow), t.appendChild(i);
let o = document.createElementNS("http://www.w3.org/2000/svg", "path");
i.appendChild(o), n.options.some((e) => e.selected) || this.content.search.input.value.trim() !== "" ? (this.addClasses(t, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : n.closable === "open" ? (this.addClasses(e, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : n.closable === "close" && (this.addClasses(e, this.classes.close), o.setAttribute("d", this.classes.arrowClose)), r.addEventListener("click", (n) => {
n.preventDefault(), n.stopPropagation(), this.isClosableOptgroupOpen(e, t) ? (this.removeClasses(e, this.classes.mainOpen), this.removeCl