+
`;
}
- _createStagedItemPillElement(t) {
+ _createStagedItemPillElement(e) {
const s = this.stagedPlacePillTemplate.content.cloneNode(!0).firstElementChild;
- return s.querySelector('[data-ref="nameEl"]').textContent = t.name, s;
+ return s.querySelector('[data-ref="nameEl"]').textContent = e.name, s;
}
- _createStagedRoleSelectElement(t, e) {
+ _createStagedRoleSelectElement(e, t) {
const n = this.stagedRoleSelectTemplate.content.cloneNode(!0).firstElementChild;
- let a = `
`;
- return t.length === 0 && !this._roles.includes(e) ? (a += "
", n.disabled = !0) : (t.forEach((r) => {
- a += `
`;
- }), n.disabled = t.length === 0 && e === ""), n.innerHTML = a, n.addEventListener("change", this._handleStagedRoleChange), n;
+ let l = `
`;
+ return e.length === 0 && !this._roles.includes(t) ? (l += "
", n.disabled = !0) : (e.forEach((r) => {
+ l += `
`;
+ }), n.disabled = e.length === 0 && t === ""), n.innerHTML = l, n.addEventListener("change", this._handleStagedRoleChange), n;
}
- _createStagedCancelButtonElement(t) {
+ _createStagedCancelButtonElement(e) {
const s = this.stagedCancelBtnTemplate.content.cloneNode(!0).firstElementChild;
- return s.setAttribute("aria-label", `Auswahl von ${t} abbrechen`), s.addEventListener("click", this._handleCancelStagedItem), s;
+ return s.setAttribute("aria-label", `Auswahl von ${e} abbrechen`), s.addEventListener("click", this._handleCancelStagedItem), s;
}
_renderStagedPillOrInput() {
if (!(!this.stagedItemPillContainer || !this.inputElement || !this.inputAreaWrapper)) {
if (this.stagedItemPillContainer.innerHTML = "", this._stagedItem && this._stagedItem.item) {
- this.inputAreaWrapper.classList.remove(v), this.inputAreaWrapper.classList.add(y);
- const t = this._createStagedItemPillElement(this._stagedItem.item);
- this.stagedItemPillContainer.appendChild(t);
- const e = this._getAvailableRolesForItem(this._stagedItem.item.id), s = this._createStagedRoleSelectElement(
- e,
+ this.inputAreaWrapper.classList.remove(S), this.inputAreaWrapper.classList.add(y);
+ const e = this._createStagedItemPillElement(this._stagedItem.item);
+ this.stagedItemPillContainer.appendChild(e);
+ const t = this._getAvailableRolesForItem(this._stagedItem.item.id), s = this._createStagedRoleSelectElement(
+ t,
this._stagedItem.currentRole
);
this.stagedItemPillContainer.appendChild(s);
const n = this._createStagedCancelButtonElement(this._stagedItem.item.name);
this.stagedItemPillContainer.appendChild(n), this.inputElement.classList.add("hidden"), this.inputElement.value = "", this.inputElement.removeAttribute("aria-activedescendant"), this.inputElement.setAttribute("aria-expanded", "false");
} else
- this.inputAreaWrapper.classList.add(v), this.inputAreaWrapper.classList.remove(y), this.inputElement.classList.remove("hidden");
+ this.inputAreaWrapper.classList.add(S), this.inputAreaWrapper.classList.remove(y), this.inputElement.classList.remove("hidden");
this._updateAddButtonState(), this._updatePreAddButtonVisibility(), this._updateRootElementStateClasses();
}
}
_updatePreAddButtonVisibility() {
if (!this.preAddButtonElement) return;
- const t = this.hasAttribute("disabled"), e = !this._stagedItem, s = this.showAddButton && e && !t;
- this.preAddButtonElement.classList.toggle("hidden", !s), this.preAddButtonElement.disabled = t;
+ const e = this.hasAttribute("disabled"), t = !this._stagedItem, s = this.showAddButton && t && !e;
+ this.preAddButtonElement.classList.toggle("hidden", !s), this.preAddButtonElement.disabled = e;
}
- _handleStagedRoleChange(t) {
- this._stagedItem && (this._stagedItem.currentRole = t.target.value, this._updateAddButtonState());
+ _handleStagedRoleChange(e) {
+ this._stagedItem && (this._stagedItem.currentRole = e.target.value, this._updateAddButtonState());
}
- _handleCancelStagedItem(t) {
- t && t.stopPropagation(), this._stagedItem = null, this._renderStagedPillOrInput(), this.inputElement && (this.inputElement.value = "", this.inputElement.focus()), this._hideOptionsList();
+ _handleCancelStagedItem(e) {
+ e && e.stopPropagation(), this._stagedItem = null, this._renderStagedPillOrInput(), this.inputElement && (this.inputElement.value = "", this.inputElement.focus()), this._hideOptionsList();
}
- _createSelectedItemElement(t) {
- const e = this._getItemById(t.itemId);
- if (!e) return null;
- const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="textEl"]');
- let r = `
${e.name}`, o = e.additional_data ? `
(${e.additional_data})` : "", c = `
${t.role}`;
- a.innerHTML = `${r}${o}${c}`;
+ _createSelectedItemElement(e) {
+ const t = this._getItemById(e.itemId);
+ if (!t) return null;
+ const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, l = n.querySelector('[data-ref="textEl"]');
+ let r = `
${t.name}`, o = t.additional_data ? `
(${t.additional_data})` : "", c = `
${e.role}`;
+ l.innerHTML = `${r}${o}${c}`;
const u = n.querySelector('[data-ref="deleteBtn"]');
- return u.setAttribute("aria-label", `Entferne ${e.name} als ${t.role}`), u.dataset.instanceId = t.instanceId, u.disabled = this.hasAttribute("disabled"), u.addEventListener("click", (ct) => {
- ct.stopPropagation(), this._handleDeleteSelectedItem(t.instanceId);
+ return u.setAttribute("aria-label", `Entferne ${t.name} als ${e.role}`), u.dataset.instanceId = e.instanceId, u.disabled = this.hasAttribute("disabled"), u.addEventListener("click", (ce) => {
+ ce.stopPropagation(), this._handleDeleteSelectedItem(e.instanceId);
}), n;
}
_renderSelectedItems() {
- this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `
${this.placeholderNoSelection}` : this._value.forEach((t) => {
- const e = this._createSelectedItemElement(t);
- e && this.selectedItemsContainer.appendChild(e);
+ this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `
${this.placeholderNoSelection}` : this._value.forEach((e) => {
+ const t = this._createSelectedItemElement(e);
+ t && this.selectedItemsContainer.appendChild(t);
}), this._updateRootElementStateClasses());
}
_updateAddButtonState() {
if (this.addButtonElement) {
- const t = this.hasAttribute("disabled"), e = this._stagedItem && this._stagedItem.currentRole && this._roles.includes(this._stagedItem.currentRole), s = !this._stagedItem || !e || t;
+ const e = this.hasAttribute("disabled"), t = this._stagedItem && this._stagedItem.currentRole && this._roles.includes(this._stagedItem.currentRole), s = !this._stagedItem || !t || e;
this.addButtonElement.classList.toggle("hidden", s), this.addButtonElement.disabled = s;
}
}
- _createOptionElement(t, e) {
+ _createOptionElement(e, t) {
const n = this.optionTemplate.content.cloneNode(!0).firstElementChild;
- return n.querySelector('[data-ref="nameEl"]').textContent = t.name, n.querySelector('[data-ref="detailEl"]').textContent = t.additional_data ? `(${t.additional_data})` : "", n.dataset.id = t.id, n.setAttribute("aria-selected", String(e === this._highlightedIndex)), n.id = `${this.id || "msr"}-option-${t.id}`, e === this._highlightedIndex && n.classList.add(W), n;
+ return n.querySelector('[data-ref="nameEl"]').textContent = e.name, n.querySelector('[data-ref="detailEl"]').textContent = e.additional_data ? `(${e.additional_data})` : "", n.dataset.id = e.id, n.setAttribute("aria-selected", String(t === this._highlightedIndex)), n.id = `${this.id || "msr"}-option-${e.id}`, t === this._highlightedIndex && n.classList.add(V), n;
}
_renderOptionsList() {
if (!(!this.optionsListElement || !this.inputElement)) {
if (this.optionsListElement.innerHTML = "", this._filteredOptions.length === 0 || !this._isOptionsListVisible)
this.optionsListElement.classList.add("hidden"), this.inputElement.setAttribute("aria-expanded", "false"), this.inputElement.removeAttribute("aria-activedescendant"), this.inputElement.removeAttribute("aria-controls");
else {
- this.optionsListElement.classList.remove("hidden"), this.inputElement.setAttribute("aria-expanded", "true"), this.inputElement.setAttribute("aria-controls", this.optionsListElement.id), this._filteredOptions.forEach((e, s) => {
- const n = this._createOptionElement(e, s);
+ this.optionsListElement.classList.remove("hidden"), this.inputElement.setAttribute("aria-expanded", "true"), this.inputElement.setAttribute("aria-controls", this.optionsListElement.id), this._filteredOptions.forEach((t, s) => {
+ const n = this._createOptionElement(t, s);
this.optionsListElement.appendChild(n);
});
- const t = this.optionsListElement.querySelector(
- `.${W}`
+ const e = this.optionsListElement.querySelector(
+ `.${V}`
);
- t ? (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id)) : this.inputElement.removeAttribute("aria-activedescendant");
+ e ? (e.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", e.id)) : this.inputElement.removeAttribute("aria-activedescendant");
}
this._updateRootElementStateClasses();
}
}
- _stageItem(t) {
- if (this._getAvailableRolesForItem(t.id).length === 0)
+ _stageItem(e) {
+ if (this._getAvailableRolesForItem(e.id).length === 0)
return;
- this._stagedItem = { item: t, currentRole: "" }, this.inputElement && (this.inputElement.value = "", this.inputElement.setAttribute("aria-expanded", "false"), this.inputElement.removeAttribute("aria-activedescendant")), this._renderStagedPillOrInput(), this._hideOptionsList();
+ this._stagedItem = { item: e, currentRole: "" }, this.inputElement && (this.inputElement.value = "", this.inputElement.setAttribute("aria-expanded", "false"), this.inputElement.removeAttribute("aria-activedescendant")), this._renderStagedPillOrInput(), this._hideOptionsList();
const s = this.stagedItemPillContainer.querySelector(
`.${w}`
);
@@ -1092,66 +1092,66 @@ class lt extends HTMLElement {
}
_handleAddButtonClick() {
if (!this.hasAttribute("disabled") && this._stagedItem && this._stagedItem.item && this._stagedItem.currentRole && this._roles.includes(this._stagedItem.currentRole)) {
- const t = {
+ const e = {
itemId: this._stagedItem.item.id,
role: this._stagedItem.currentRole,
instanceId: crypto.randomUUID()
};
if (this._value.find(
- (s) => s.itemId === t.itemId && s.role === t.role
+ (s) => s.itemId === e.itemId && s.role === e.role
)) {
this._handleCancelStagedItem();
return;
}
- this._value.push(t), this._updateFormValue(), this._renderSelectedItems(), this._stagedItem = null, this._renderStagedPillOrInput(), this.inputElement && (this.inputElement.value = "", this.inputElement.focus()), this._hideOptionsList();
+ this._value.push(e), this._updateFormValue(), this._renderSelectedItems(), this._stagedItem = null, this._renderStagedPillOrInput(), this.inputElement && (this.inputElement.value = "", this.inputElement.focus()), this._hideOptionsList();
}
}
- _handleInput(t) {
+ _handleInput(e) {
if (this.hasAttribute("disabled")) return;
this._stagedItem ? (this._stagedItem = null, this._renderStagedPillOrInput()) : this._updatePreAddButtonVisibility();
- const e = t.target.value;
- if (e.length === 0)
+ const t = e.target.value;
+ if (t.length === 0)
this._filteredOptions = [], this._isOptionsListVisible = !1;
else {
- const s = e.toLowerCase();
+ const s = t.toLowerCase();
this._filteredOptions = this._options.filter((n) => this._getAvailableRolesForItem(n.id).length === 0 || this._stagedItem && this._stagedItem.item.id === n.id ? !1 : n.name.toLowerCase().includes(s) || n.additional_data && n.additional_data.toLowerCase().includes(s)), this._isOptionsListVisible = this._filteredOptions.length > 0;
}
this._highlightedIndex = this._filteredOptions.length > 0 ? 0 : -1, this._renderOptionsList();
}
- _handleKeyDown(t) {
- var e;
+ _handleKeyDown(e) {
+ var t;
if (!this.hasAttribute("disabled")) {
- if (t.key === "Enter" && this._stagedItem && this._stagedItem.item) {
- const s = document.activeElement, n = (e = this.stagedItemPillContainer) == null ? void 0 : e.querySelector(
+ if (e.key === "Enter" && this._stagedItem && this._stagedItem.item) {
+ const s = document.activeElement, n = (t = this.stagedItemPillContainer) == null ? void 0 : t.querySelector(
`.${q}`
);
if (s === n) {
- t.preventDefault(), this._handleCancelStagedItem(t);
+ e.preventDefault(), this._handleCancelStagedItem(e);
return;
} else if (this._stagedItem.currentRole && this._roles.includes(this._stagedItem.currentRole)) {
- t.preventDefault(), this._handleAddButtonClick();
+ e.preventDefault(), this._handleAddButtonClick();
return;
}
}
- t.key === "Escape" && (this._isOptionsListVisible ? (t.preventDefault(), this._hideOptionsList(), this.inputElement && this.inputElement.focus()) : this._stagedItem && (t.preventDefault(), this._handleCancelStagedItem(t)));
+ e.key === "Escape" && (this._isOptionsListVisible ? (e.preventDefault(), this._hideOptionsList(), this.inputElement && this.inputElement.focus()) : this._stagedItem && (e.preventDefault(), this._handleCancelStagedItem(e)));
}
}
- _handleInputKeyDown(t) {
+ _handleInputKeyDown(e) {
if (!(this.hasAttribute("disabled") || this.inputElement && this.inputElement.disabled)) {
if (!this._isOptionsListVisible || this._filteredOptions.length === 0) {
- t.key === "Enter" && this.inputElement && this.inputElement.value === "" && t.preventDefault();
+ e.key === "Enter" && this.inputElement && this.inputElement.value === "" && e.preventDefault();
return;
}
- switch (t.key) {
+ switch (e.key) {
case "ArrowDown":
- t.preventDefault(), this._highlightedIndex = (this._highlightedIndex + 1) % this._filteredOptions.length, this._renderOptionsList();
+ e.preventDefault(), this._highlightedIndex = (this._highlightedIndex + 1) % this._filteredOptions.length, this._renderOptionsList();
break;
case "ArrowUp":
- t.preventDefault(), this._highlightedIndex = (this._highlightedIndex - 1 + this._filteredOptions.length) % this._filteredOptions.length, this._renderOptionsList();
+ e.preventDefault(), this._highlightedIndex = (this._highlightedIndex - 1 + this._filteredOptions.length) % this._filteredOptions.length, this._renderOptionsList();
break;
case "Enter":
case "Tab":
- this._highlightedIndex > -1 && this._filteredOptions[this._highlightedIndex] ? (t.preventDefault(), this._stageItem(this._filteredOptions[this._highlightedIndex])) : t.key === "Tab" && this._hideOptionsList();
+ this._highlightedIndex > -1 && this._filteredOptions[this._highlightedIndex] ? (e.preventDefault(), this._stageItem(this._filteredOptions[this._highlightedIndex])) : e.key === "Tab" && this._hideOptionsList();
break;
}
}
@@ -1161,194 +1161,352 @@ class lt extends HTMLElement {
}
_handleFocus() {
if (!(this.hasAttribute("disabled") || this.inputElement && this.inputElement.disabled || this._stagedItem)) {
- if (!this._stagedItem && this.inputAreaWrapper && (this.inputAreaWrapper.classList.add(v), this.inputAreaWrapper.classList.remove(y)), this.inputElement && this.inputElement.value.length > 0) {
- const t = this.inputElement.value.toLowerCase();
- this._filteredOptions = this._options.filter((e) => this._getAvailableRolesForItem(e.id).length === 0 ? !1 : e.name.toLowerCase().includes(t) || e.additional_data && e.additional_data.toLowerCase().includes(t)), this._filteredOptions.length > 0 ? (this._isOptionsListVisible = !0, this._highlightedIndex = 0, this._renderOptionsList()) : this._hideOptionsList();
+ if (!this._stagedItem && this.inputAreaWrapper && (this.inputAreaWrapper.classList.add(S), this.inputAreaWrapper.classList.remove(y)), this.inputElement && this.inputElement.value.length > 0) {
+ const e = this.inputElement.value.toLowerCase();
+ this._filteredOptions = this._options.filter((t) => this._getAvailableRolesForItem(t.id).length === 0 ? !1 : t.name.toLowerCase().includes(e) || t.additional_data && t.additional_data.toLowerCase().includes(e)), this._filteredOptions.length > 0 ? (this._isOptionsListVisible = !0, this._highlightedIndex = 0, this._renderOptionsList()) : this._hideOptionsList();
} else
this._hideOptionsList();
this._updateRootElementStateClasses(), this._updatePreAddButtonVisibility();
}
}
- _handleBlur(t) {
+ _handleBlur(e) {
this._blurTimeout = setTimeout(() => {
- const e = document.activeElement;
- e !== this.addButtonElement && e !== this.preAddButtonElement && !(this.stagedItemPillContainer && this.stagedItemPillContainer.contains(e)) && !(this.optionsListElement && this.optionsListElement.contains(e)) && !this.contains(e) && this._hideOptionsList();
+ const t = document.activeElement;
+ t !== this.addButtonElement && t !== this.preAddButtonElement && !(this.stagedItemPillContainer && this.stagedItemPillContainer.contains(t)) && !(this.optionsListElement && this.optionsListElement.contains(t)) && !this.contains(t) && this._hideOptionsList();
}, 150);
}
- _handleOptionMouseDown(t) {
- t.preventDefault();
+ _handleOptionMouseDown(e) {
+ e.preventDefault();
}
- _handleOptionClick(t) {
+ _handleOptionClick(e) {
if (this.hasAttribute("disabled")) return;
- const e = t.target.closest(`li[data-id].${z}`);
- if (e) {
- const s = e.dataset.id, n = this._filteredOptions.find((a) => a.id === s);
+ const t = e.target.closest(`li[data-id].${z}`);
+ if (t) {
+ const s = t.dataset.id, n = this._filteredOptions.find((l) => l.id === s);
n && this._stageItem(n);
}
}
- _handleDeleteSelectedItem(t) {
- this.hasAttribute("disabled") || (this._value = this._value.filter((e) => e.instanceId !== t), this._updateFormValue(), this._renderSelectedItems(), this._stagedItem && this._stagedItem.item && this._renderStagedPillOrInput(), this.inputElement && this.inputElement.focus(), this._updatePreAddButtonVisibility());
+ _handleDeleteSelectedItem(e) {
+ this.hasAttribute("disabled") || (this._value = this._value.filter((t) => t.instanceId !== e), this._updateFormValue(), this._renderSelectedItems(), this._stagedItem && this._stagedItem.item && this._renderStagedPillOrInput(), this.inputElement && this.inputElement.focus(), this._updatePreAddButtonVisibility());
}
}
-p(lt, "formAssociated", !0);
-const Ht = "mss-component-wrapper", G = "mss-selected-items-container", qt = "mss-selected-item-pill", Ut = "mss-selected-item-text", Ft = "mss-selected-item-pill-detail", K = "mss-selected-item-delete-btn", j = "mss-input-controls-container", Q = "mss-input-wrapper", J = "mss-input-wrapper-focused", X = "mss-text-input", Y = "mss-create-new-button", Z = "mss-options-list", Vt = "mss-option-item", zt = "mss-option-item-name", Wt = "mss-option-item-detail", tt = "mss-option-item-highlighted", M = "mss-hidden-select", Gt = "mss-no-items-text", Kt = "mss-state-no-selection", jt = "mss-state-has-selection", Qt = "mss-state-list-open";
-class at extends HTMLElement {
+m(ae, "formAssociated", !0);
+const He = "mss-component-wrapper", G = "mss-selected-items-container", qe = "mss-selected-item-pill", Ue = "mss-selected-item-text", Fe = "mss-selected-item-pill-detail", W = "mss-selected-item-delete-btn", j = "mss-input-controls-container", Q = "mss-input-wrapper", J = "mss-input-wrapper-focused", X = "mss-text-input", Y = "mss-create-new-button", Z = "mss-options-list", Ke = "mss-option-item", ze = "mss-option-item-name", Ve = "mss-option-item-detail", ee = "mss-option-item-highlighted", k = "mss-hidden-select", Ge = "mss-no-items-text", We = "mss-state-no-selection", je = "mss-state-has-selection", Qe = "mss-state-list-open";
+class le extends HTMLElement {
constructor() {
super();
- p(this, "_blurTimeout", null);
+ m(this, "_blurTimeout", null);
this.internals_ = this.attachInternals(), this._value = [], this._options = [
- { id: "marie_curie", name: "Marie Curie", additional_data: "Physicist and Chemist" },
- { id: "leonardo_da_vinci", name: "Leonardo da Vinci", additional_data: "Polymath" },
- { id: "albert_einstein", name: "Albert Einstein", additional_data: "Theoretical Physicist" },
- { id: "ada_lovelace", name: "Ada Lovelace", additional_data: "Mathematician and Writer" },
- { id: "isaac_newton", name: "Isaac Newton", additional_data: "Mathematician and Physicist" },
- {
- id: "galileo_galilei",
- name: "Galileo Galilei",
- additional_data: "Astronomer and Physicist"
- },
- { id: "charles_darwin", name: "Charles Darwin", additional_data: "Naturalist" },
- { id: "nikola_tesla", name: "Nikola Tesla", additional_data: "Inventor and Engineer" },
- { id: "jane_austen", name: "Jane Austen", additional_data: "Novelist" },
- {
- id: "william_shakespeare",
- name: "William Shakespeare",
- additional_data: "Playwright and Poet"
- }
+ { id: "abk", name: "Abchasisch" },
+ { id: "aar", name: "Afar" },
+ { id: "afr", name: "Afrikaans" },
+ { id: "aka", name: "Akan" },
+ { id: "alb", name: "Albanisch" },
+ { id: "amh", name: "Amharisch" },
+ { id: "ara", name: "Arabisch" },
+ { id: "arg", name: "Aragonesisch" },
+ { id: "arm", name: "Armenisch" },
+ { id: "asm", name: "Assamesisch" },
+ { id: "ava", name: "Awarisch" },
+ { id: "ave", name: "Avestisch" },
+ { id: "aym", name: "Aymara" },
+ { id: "aze", name: "Aserbaidschanisch" },
+ { id: "bam", name: "Bambara" },
+ { id: "bak", name: "Baschkirisch" },
+ { id: "baq", name: "Baskisch" },
+ { id: "bel", name: "Belarussisch" },
+ { id: "ben", name: "Bengalisch" },
+ { id: "bis", name: "Bislama" },
+ { id: "bos", name: "Bosnisch" },
+ { id: "bre", name: "Bretonisch" },
+ { id: "bul", name: "Bulgarisch" },
+ { id: "bur", name: "Birmanisch" },
+ { id: "cat", name: "Katalanisch" },
+ { id: "cha", name: "Chamorro" },
+ { id: "che", name: "Tschetschenisch" },
+ { id: "nya", name: "Nyanja" },
+ { id: "chi", name: "Chinesisch" },
+ { id: "chu", name: "Kirchenslawisch" },
+ { id: "chv", name: "Tschuwaschisch" },
+ { id: "cor", name: "Kornisch" },
+ { id: "cos", name: "Korsisch" },
+ { id: "cre", name: "Cree" },
+ { id: "hrv", name: "Kroatisch" },
+ { id: "cze", name: "Tschechisch" },
+ { id: "dan", name: "Dänisch" },
+ { id: "div", name: "Dhivehi" },
+ { id: "dut", name: "Niederländisch" },
+ { id: "dzo", name: "Dzongkha" },
+ { id: "eng", name: "Englisch" },
+ { id: "epo", name: "Esperanto" },
+ { id: "est", name: "Estnisch" },
+ { id: "ewe", name: "Ewe" },
+ { id: "fao", name: "Färöisch" },
+ { id: "fij", name: "Fidschianisch" },
+ { id: "fin", name: "Finnisch" },
+ { id: "fre", name: "Französisch" },
+ { id: "fry", name: "Westfriesisch" },
+ { id: "ful", name: "Ful" },
+ { id: "gla", name: "Schottisch-Gälisch" },
+ { id: "glg", name: "Galicisch" },
+ { id: "lug", name: "Ganda" },
+ { id: "geo", name: "Georgisch" },
+ { id: "ger", name: "Deutsch" },
+ { id: "gre", name: "Griechisch" },
+ { id: "kal", name: "Kalaallisut" },
+ { id: "grn", name: "Guaraní" },
+ { id: "guj", name: "Gujarati" },
+ { id: "hat", name: "Haitianisch-Kreolisch" },
+ { id: "hau", name: "Hausa" },
+ { id: "heb", name: "Hebräisch" },
+ { id: "her", name: "Herero" },
+ { id: "hin", name: "Hindi" },
+ { id: "hmo", name: "Hiri Motu" },
+ { id: "hun", name: "Ungarisch" },
+ { id: "ice", name: "Isländisch" },
+ { id: "ido", name: "Ido" },
+ { id: "ibo", name: "Igbo" },
+ { id: "ind", name: "Indonesisch" },
+ { id: "ina", name: "Interlingua" },
+ { id: "ile", name: "Interlingue" },
+ { id: "iku", name: "Inuktitut" },
+ { id: "ipk", name: "Inupiaq" },
+ { id: "gle", name: "Irisch" },
+ { id: "ita", name: "Italienisch" },
+ { id: "jpn", name: "Japanisch" },
+ { id: "jav", name: "Javanisch" },
+ { id: "kan", name: "Kannada" },
+ { id: "kau", name: "Kanuri" },
+ { id: "kas", name: "Kashmiri" },
+ { id: "kaz", name: "Kasachisch" },
+ { id: "khm", name: "Khmer" },
+ { id: "kik", name: "Kikuyu" },
+ { id: "kin", name: "Kinyarwanda" },
+ { id: "kir", name: "Kirgisisch" },
+ { id: "kom", name: "Komi" },
+ { id: "kon", name: "Kongo" },
+ { id: "kor", name: "Koreanisch" },
+ { id: "kua", name: "Kwanyama" },
+ { id: "kur", name: "Kurdisch" },
+ { id: "lao", name: "Laotisch" },
+ { id: "lat", name: "Latein" },
+ { id: "lav", name: "Lettisch" },
+ { id: "lim", name: "Limburgisch" },
+ { id: "lin", name: "Lingala" },
+ { id: "lit", name: "Litauisch" },
+ { id: "lub", name: "Luba-Katanga" },
+ { id: "ltz", name: "Luxemburgisch" },
+ { id: "mac", name: "Mazedonisch" },
+ { id: "mlg", name: "Malagasy" },
+ { id: "may", name: "Malaiisch" },
+ { id: "mal", name: "Malayalam" },
+ { id: "mlt", name: "Maltesisch" },
+ { id: "glv", name: "Manx" },
+ { id: "mao", name: "Maori" },
+ { id: "mar", name: "Marathi" },
+ { id: "mah", name: "Marshallesisch" },
+ { id: "mon", name: "Mongolisch" },
+ { id: "nau", name: "Nauruisch" },
+ { id: "nav", name: "Navajo" },
+ { id: "nde", name: "Nord-Ndebele" },
+ { id: "nbl", name: "Süd-Ndebele" },
+ { id: "ndo", name: "Ndonga" },
+ { id: "nep", name: "Nepali" },
+ { id: "nor", name: "Norwegisch" },
+ { id: "nob", name: "Norwegisch Bokmål" },
+ { id: "nno", name: "Norwegisch Nynorsk" },
+ { id: "oci", name: "Okzitanisch" },
+ { id: "oji", name: "Ojibwa" },
+ { id: "ori", name: "Oriya" },
+ { id: "orm", name: "Oromo" },
+ { id: "oss", name: "Ossetisch" },
+ { id: "pli", name: "Pali" },
+ { id: "pus", name: "Paschtu" },
+ { id: "per", name: "Persisch" },
+ { id: "pol", name: "Polnisch" },
+ { id: "por", name: "Portugiesisch" },
+ { id: "pan", name: "Panjabi" },
+ { id: "que", name: "Quechua" },
+ { id: "rum", name: "Rumänisch" },
+ { id: "roh", name: "Rätoromanisch" },
+ { id: "run", name: "Rundi" },
+ { id: "rus", name: "Russisch" },
+ { id: "sme", name: "Nordsamisch" },
+ { id: "smo", name: "Samoanisch" },
+ { id: "sag", name: "Sango" },
+ { id: "san", name: "Sanskrit" },
+ { id: "srd", name: "Sardisch" },
+ { id: "srp", name: "Serbisch" },
+ { id: "sna", name: "Shona" },
+ { id: "snd", name: "Sindhi" },
+ { id: "sin", name: "Singhalesisch" },
+ { id: "slo", name: "Slowakisch" },
+ { id: "slv", name: "Slowenisch" },
+ { id: "som", name: "Somali" },
+ { id: "sot", name: "Süd-Sotho" },
+ { id: "spa", name: "Spanisch" },
+ { id: "sun", name: "Sundanesisch" },
+ { id: "swa", name: "Swahili" },
+ { id: "ssw", name: "Swazi" },
+ { id: "swe", name: "Schwedisch" },
+ { id: "tgl", name: "Tagalog" },
+ { id: "tah", name: "Tahitisch" },
+ { id: "tgk", name: "Tadschikisch" },
+ { id: "tam", name: "Tamil" },
+ { id: "tat", name: "Tatarisch" },
+ { id: "tel", name: "Telugu" },
+ { id: "tha", name: "Thailändisch" },
+ { id: "tib", name: "Tibetisch" },
+ { id: "tir", name: "Tigrinya" },
+ { id: "ton", name: "Tongaisch" },
+ { id: "tso", name: "Tsonga" },
+ { id: "tsn", name: "Tswana" },
+ { id: "tur", name: "Türkisch" },
+ { id: "tuk", name: "Turkmenisch" },
+ { id: "twi", name: "Twi" },
+ { id: "uig", name: "Uigurisch" },
+ { id: "ukr", name: "Ukrainisch" },
+ { id: "urd", name: "Urdu" },
+ { id: "uzb", name: "Usbekisch" },
+ { id: "ven", name: "Venda" },
+ { id: "vie", name: "Vietnamesisch" },
+ { id: "vol", name: "Volapük" },
+ { id: "wln", name: "Wallonisch" },
+ { id: "wel", name: "Walisisch" },
+ { id: "wol", name: "Wolof" },
+ { id: "xho", name: "Xhosa" },
+ { id: "iii", name: "Sichuan Yi" },
+ { id: "yid", name: "Jiddisch" },
+ { id: "yor", name: "Yoruba" },
+ { id: "zha", name: "Zhuang" },
+ { id: "zul", name: "Zulu" }
], this._filteredOptions = [], this._highlightedIndex = -1, this._isOptionsListVisible = !1, this._placeholder = this.getAttribute("placeholder") || "Search items...", this._showCreateButton = this.getAttribute("show-create-button") !== "false", this._setupTemplates(), this._bindEventHandlers();
}
_setupTemplates() {
this.optionTemplate = document.createElement("template"), this.optionTemplate.innerHTML = `
-
-
-
+
+
+
`, this.selectedItemTemplate = document.createElement("template"), this.selectedItemTemplate.innerHTML = `
-
-
-
-
+
+
+
+
`;
}
_bindEventHandlers() {
this._handleInput = this._handleInput.bind(this), this._handleKeyDown = this._handleKeyDown.bind(this), this._handleFocus = this._handleFocus.bind(this), this._handleBlur = this._handleBlur.bind(this), this._handleOptionMouseDown = this._handleOptionMouseDown.bind(this), this._handleOptionClick = this._handleOptionClick.bind(this), this._handleCreateNewButtonClick = this._handleCreateNewButtonClick.bind(this), this._handleSelectedItemsContainerClick = this._handleSelectedItemsContainerClick.bind(this);
}
- _getItemById(t) {
- return this._options.find((e) => e.id === t);
+ _getItemById(e) {
+ return this._options.find((t) => t.id === e);
}
get placeholder() {
return this._placeholder;
}
- set placeholder(t) {
- this._placeholder = t, this.inputElement && (this.inputElement.placeholder = this._placeholder), this.setAttribute("placeholder", t);
+ set placeholder(e) {
+ this._placeholder = e, this.inputElement && (this.inputElement.placeholder = this._placeholder), this.setAttribute("placeholder", e);
}
get showCreateButton() {
return this._showCreateButton;
}
- set showCreateButton(t) {
- const e = String(t).toLowerCase() !== "false" && t !== !1;
- this._showCreateButton !== e && (this._showCreateButton = e, this.createNewButton && this.createNewButton.classList.toggle("hidden", !this._showCreateButton), this.setAttribute("show-create-button", this._showCreateButton ? "true" : "false"));
+ set showCreateButton(e) {
+ const t = String(e).toLowerCase() !== "false" && e !== !1;
+ this._showCreateButton !== t && (this._showCreateButton = t, this.createNewButton && this.createNewButton.classList.toggle("hidden", !this._showCreateButton), this.setAttribute("show-create-button", this._showCreateButton ? "true" : "false"));
}
- setOptions(t) {
- if (Array.isArray(t) && t.every((e) => e && typeof e.id == "string" && typeof e.name == "string")) {
- this._options = [...t];
- const e = this._value.filter((s) => this._getItemById(s));
- e.length !== this._value.length ? this.value = e : this.selectedItemsContainer && this._renderSelectedItems(), this._filteredOptions = [], this._highlightedIndex = -1, this.inputElement && this.inputElement.value ? this._handleInput({ target: this.inputElement }) : this._hideOptionsList();
+ setOptions(e) {
+ if (Array.isArray(e) && e.every((t) => t && typeof t.id == "string" && typeof t.name == "string")) {
+ this._options = [...e];
+ const t = this._value.filter((s) => this._getItemById(s));
+ t.length !== this._value.length ? this.value = t : this.selectedItemsContainer && this._renderSelectedItems(), this._filteredOptions = [], this._highlightedIndex = -1, this.inputElement && this.inputElement.value ? this._handleInput({ target: this.inputElement }) : this._hideOptionsList();
} else console.error("setOptions expects an array of objects with id and name properties.");
}
get value() {
return this._value;
}
- set value(t) {
- const e = JSON.stringify(this._value.sort());
- if (Array.isArray(t))
- this._value = [
- ...new Set(t.filter((n) => typeof n == "string" && this._getItemById(n)))
- ];
- else if (typeof t == "string" && t.trim() !== "") {
- const n = t.trim();
- this._getItemById(n) && !this._value.includes(n) ? this._value = [n] : this._getItemById(n) || (this._value = this._value.filter((a) => a !== n));
+ set value(e) {
+ const t = JSON.stringify(this._value.sort());
+ if (Array.isArray(e))
+ this._value = [...new Set(e.filter((n) => typeof n == "string" && this._getItemById(n)))];
+ else if (typeof e == "string" && e.trim() !== "") {
+ const n = e.trim();
+ this._getItemById(n) && !this._value.includes(n) ? this._value = [n] : this._getItemById(n) || (this._value = this._value.filter((l) => l !== n));
} else this._value = [];
const s = JSON.stringify(this._value.sort());
- e !== s && (this._updateFormValue(), this.selectedItemsContainer && this._renderSelectedItems(), this._updateRootElementStateClasses(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+ t !== s && (this._updateFormValue(), this.selectedItemsContainer && this._renderSelectedItems(), this._updateRootElementStateClasses(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
}
get name() {
return this.getAttribute("name");
}
- set name(t) {
- this.setAttribute("name", t), this.hiddenSelect && (this.hiddenSelect.name = t);
+ set name(e) {
+ this.setAttribute("name", e), this.hiddenSelect && (this.hiddenSelect.name = e);
}
connectedCallback() {
- if (this._render(), this.inputControlsContainer = this.querySelector(`.${j}`), this.inputWrapper = this.querySelector(`.${Q}`), this.inputElement = this.querySelector(`.${X}`), this.createNewButton = this.querySelector(`.${Y}`), this.optionsListElement = this.querySelector(`.${Z}`), this.selectedItemsContainer = this.querySelector(`.${G}`), this.hiddenSelect = this.querySelector(`.${M}`), this.placeholder = this.getAttribute("placeholder") || "Search items...", this.showCreateButton = this.getAttribute("show-create-button") !== "false", this.name && this.hiddenSelect && (this.hiddenSelect.name = this.name), this.inputElement.addEventListener("input", this._handleInput), this.inputElement.addEventListener("keydown", this._handleKeyDown), this.inputElement.addEventListener("focus", this._handleFocus), this.inputElement.addEventListener("blur", this._handleBlur), this.optionsListElement.addEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.addEventListener("click", this._handleOptionClick), this.createNewButton.addEventListener("click", this._handleCreateNewButtonClick), this.selectedItemsContainer.addEventListener("click", this._handleSelectedItemsContainerClick), this._updateRootElementStateClasses(), this.hasAttribute("value")) {
- const t = this.getAttribute("value");
+ if (this._render(), this.inputControlsContainer = this.querySelector(`.${j}`), this.inputWrapper = this.querySelector(`.${Q}`), this.inputElement = this.querySelector(`.${X}`), this.createNewButton = this.querySelector(`.${Y}`), this.optionsListElement = this.querySelector(`.${Z}`), this.selectedItemsContainer = this.querySelector(`.${G}`), this.hiddenSelect = this.querySelector(`.${k}`), this.placeholder = this.getAttribute("placeholder") || "Search items...", this.showCreateButton = this.getAttribute("show-create-button") !== "false", this.name && this.hiddenSelect && (this.hiddenSelect.name = this.name), this.inputElement.addEventListener("input", this._handleInput), this.inputElement.addEventListener("keydown", this._handleKeyDown), this.inputElement.addEventListener("focus", this._handleFocus), this.inputElement.addEventListener("blur", this._handleBlur), this.optionsListElement.addEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.addEventListener("click", this._handleOptionClick), this.createNewButton.addEventListener("click", this._handleCreateNewButtonClick), this.selectedItemsContainer.addEventListener("click", this._handleSelectedItemsContainerClick), this._updateRootElementStateClasses(), this.hasAttribute("value")) {
+ const e = this.getAttribute("value");
try {
- this.value = JSON.parse(t);
+ this.value = JSON.parse(e);
} catch {
- this.value = t.split(",").map((s) => s.trim()).filter(Boolean);
+ this.value = e.split(",").map((s) => s.trim()).filter(Boolean);
}
} else
this._renderSelectedItems(), this._synchronizeHiddenSelect();
this.hasAttribute("disabled") && this.disabledCallback(!0);
}
disconnectedCallback() {
- this.inputElement && (this.inputElement.removeEventListener("input", this._handleInput), this.inputElement.removeEventListener("keydown", this._handleKeyDown), this.inputElement.removeEventListener("focus", this._handleFocus), this.inputElement.removeEventListener("blur", this._handleBlur)), this.optionsListElement && (this.optionsListElement.removeEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.removeEventListener("click", this._handleOptionClick)), this.createNewButton && this.createNewButton.removeEventListener("click", this._handleCreateNewButtonClick), this.selectedItemsContainer && this.selectedItemsContainer.removeEventListener(
- "click",
- this._handleSelectedItemsContainerClick
- ), clearTimeout(this._blurTimeout);
+ this.inputElement && (this.inputElement.removeEventListener("input", this._handleInput), this.inputElement.removeEventListener("keydown", this._handleKeyDown), this.inputElement.removeEventListener("focus", this._handleFocus), this.inputElement.removeEventListener("blur", this._handleBlur)), this.optionsListElement && (this.optionsListElement.removeEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.removeEventListener("click", this._handleOptionClick)), this.createNewButton && this.createNewButton.removeEventListener("click", this._handleCreateNewButtonClick), this.selectedItemsContainer && this.selectedItemsContainer.removeEventListener("click", this._handleSelectedItemsContainerClick), clearTimeout(this._blurTimeout);
}
static get observedAttributes() {
return ["disabled", "name", "value", "placeholder", "show-create-button"];
}
- attributeChangedCallback(t, e, s) {
- if (e !== s)
- if (t === "disabled") this.disabledCallback(this.hasAttribute("disabled"));
- else if (t === "name" && this.hiddenSelect) this.hiddenSelect.name = s;
- else if (t === "value" && this.inputElement)
+ attributeChangedCallback(e, t, s) {
+ if (t !== s)
+ if (e === "disabled") this.disabledCallback(this.hasAttribute("disabled"));
+ else if (e === "name" && this.hiddenSelect) this.hiddenSelect.name = s;
+ else if (e === "value" && this.inputElement)
try {
this.value = JSON.parse(s);
} catch {
- this.value = s.split(",").map((a) => a.trim()).filter(Boolean);
+ this.value = s.split(",").map((l) => l.trim()).filter(Boolean);
}
- else t === "placeholder" ? this.placeholder = s : t === "show-create-button" && (this.showCreateButton = s);
+ else e === "placeholder" ? this.placeholder = s : e === "show-create-button" && (this.showCreateButton = s);
}
- formAssociatedCallback(t) {
+ formAssociatedCallback(e) {
}
- formDisabledCallback(t) {
- this.disabledCallback(t);
+ formDisabledCallback(e) {
+ this.disabledCallback(e);
}
formResetCallback() {
this.value = [], this._hideOptionsList(), this.inputElement && (this.inputElement.value = ""), this.placeholder = this.getAttribute("placeholder") || "Search items...", this.showCreateButton = this.getAttribute("show-create-button") !== "false", this._updateRootElementStateClasses(), this._renderSelectedItems();
}
- formStateRestoreCallback(t, e) {
- this.value = Array.isArray(t) ? t : [], this._updateRootElementStateClasses();
+ formStateRestoreCallback(e, t) {
+ this.value = Array.isArray(e) ? e : [], this._updateRootElementStateClasses();
}
_synchronizeHiddenSelect() {
- this.hiddenSelect && (this.hiddenSelect.innerHTML = "", this._value.forEach((t) => {
- const e = document.createElement("option");
- e.value = t;
- const s = this._getItemById(t);
- e.textContent = s ? s.name : t, e.selected = !0, this.hiddenSelect.appendChild(e);
+ this.hiddenSelect && (this.hiddenSelect.innerHTML = "", this._value.forEach((e) => {
+ const t = document.createElement("option");
+ t.value = e;
+ const s = this._getItemById(e);
+ t.textContent = s ? s.name : e, t.selected = !0, this.hiddenSelect.appendChild(t);
}));
}
_updateFormValue() {
this.internals_.setFormValue(null), this._synchronizeHiddenSelect();
}
- disabledCallback(t) {
- this.inputElement && (this.inputElement.disabled = t), this.createNewButton && (this.createNewButton.disabled = t), this.toggleAttribute("disabled", t), this.querySelectorAll(`.${K}`).forEach(
- (e) => e.disabled = t
- ), this.hiddenSelect && (this.hiddenSelect.disabled = t), t && this._hideOptionsList();
+ disabledCallback(e) {
+ this.inputElement && (this.inputElement.disabled = e), this.createNewButton && (this.createNewButton.disabled = e), this.toggleAttribute("disabled", e), this.querySelectorAll(`.${W}`).forEach((t) => t.disabled = e), this.hiddenSelect && (this.hiddenSelect.disabled = e), e && this._hideOptionsList();
}
_updateRootElementStateClasses() {
- this.classList.toggle(Kt, this._value.length === 0), this.classList.toggle(jt, this._value.length > 0), this.classList.toggle(Qt, this._isOptionsListVisible);
+ this.classList.toggle(We, this._value.length === 0), this.classList.toggle(je, this._value.length > 0), this.classList.toggle(Qe, this._isOptionsListVisible);
}
_render() {
- const t = this.id || `mss-${crypto.randomUUID().slice(0, 8)}`;
- this.id || this.setAttribute("id", t), this.innerHTML = `
+ const e = this.id || `mss-${crypto.randomUUID().slice(0, 8)}`;
+ this.id || this.setAttribute("id", e), this.innerHTML = `
-
+
@@ -1357,99 +1515,97 @@ class at extends HTMLElement {
placeholder="${this.placeholder}"
aria-autocomplete="list"
aria-expanded="${this._isOptionsListVisible}"
- aria-controls="options-list-${t}"
+ aria-controls="options-list-${e}"
autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="combobox" />
-
-
+
+
`;
}
- _createSelectedItemElement(t) {
- const e = this._getItemById(t);
- if (!e) return null;
- const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="textEl"]'), r = n.querySelector('[data-ref="detailEl"]'), o = n.querySelector('[data-ref="deleteBtn"]');
- return a.textContent = e.name, e.additional_data ? (r.textContent = `(${e.additional_data})`, r.classList.remove("hidden")) : r.classList.add("hidden"), o.setAttribute("aria-label", `Remove ${e.name}`), o.dataset.id = t, o.disabled = this.hasAttribute("disabled"), o.addEventListener("click", (c) => {
- c.stopPropagation(), this._handleDeleteSelectedItem(t);
+ _createSelectedItemElement(e) {
+ const t = this._getItemById(e);
+ if (!t) return null;
+ const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, l = n.querySelector('[data-ref="textEl"]'), r = n.querySelector('[data-ref="detailEl"]'), o = n.querySelector('[data-ref="deleteBtn"]');
+ return l.textContent = t.name, t.additional_data ? (r.textContent = `(${t.additional_data})`, r.classList.remove("hidden")) : r.classList.add("hidden"), o.setAttribute("aria-label", `Remove ${t.name}`), o.dataset.id = e, o.disabled = this.hasAttribute("disabled"), o.addEventListener("click", (c) => {
+ c.stopPropagation(), this._handleDeleteSelectedItem(e);
}), n;
}
_renderSelectedItems() {
- this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `
No items selected` : this._value.forEach((t) => {
- const e = this._createSelectedItemElement(t);
- e && this.selectedItemsContainer.appendChild(e);
+ this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `
Keine Sprachen ausgewählt...` : this._value.forEach((e) => {
+ const t = this._createSelectedItemElement(e);
+ t && this.selectedItemsContainer.appendChild(t);
}), this._updateRootElementStateClasses());
}
- _createOptionElement(t, e) {
- const n = this.optionTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="nameEl"]'), r = n.querySelector('[data-ref="detailEl"]');
- a.textContent = t.name, r.textContent = t.additional_data ? `(${t.additional_data})` : "", n.dataset.id = t.id, n.setAttribute("aria-selected", String(e === this._highlightedIndex));
- const o = `option-${this.id || "mss"}-${t.id}`;
- return n.id = o, e === this._highlightedIndex && (n.classList.add(tt), this.inputElement && this.inputElement.setAttribute("aria-activedescendant", o)), n;
+ _createOptionElement(e, t) {
+ const n = this.optionTemplate.content.cloneNode(!0).firstElementChild, l = n.querySelector('[data-ref="nameEl"]'), r = n.querySelector('[data-ref="detailEl"]');
+ l.textContent = e.name, r.textContent = e.additional_data ? `(${e.additional_data})` : "", n.dataset.id = e.id, n.setAttribute("aria-selected", String(t === this._highlightedIndex));
+ const o = `option-${this.id || "mss"}-${e.id}`;
+ return n.id = o, t === this._highlightedIndex && (n.classList.add(ee), this.inputElement && this.inputElement.setAttribute("aria-activedescendant", o)), n;
}
_renderOptionsList() {
if (!(!this.optionsListElement || !this.inputElement)) {
if (this.optionsListElement.innerHTML = "", this.inputElement.removeAttribute("aria-activedescendant"), this._filteredOptions.length === 0 || !this._isOptionsListVisible)
this.optionsListElement.classList.add("hidden"), this.inputElement.setAttribute("aria-expanded", "false");
else {
- this.optionsListElement.classList.remove("hidden"), this.inputElement.setAttribute("aria-expanded", "true"), this._filteredOptions.forEach((e, s) => {
- const n = this._createOptionElement(e, s);
+ this.optionsListElement.classList.remove("hidden"), this.inputElement.setAttribute("aria-expanded", "true"), this._filteredOptions.forEach((t, s) => {
+ const n = this._createOptionElement(t, s);
this.optionsListElement.appendChild(n);
});
- const t = this.optionsListElement.querySelector(
- `.${tt}`
- );
- t && (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id));
+ const e = this.optionsListElement.querySelector(`.${ee}`);
+ e && (e.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", e.id));
}
this._updateRootElementStateClasses();
}
}
- _handleSelectedItemsContainerClick(t) {
- t.target === this.selectedItemsContainer && this.inputElement && !this.inputElement.disabled && this.inputElement.focus();
+ _handleSelectedItemsContainerClick(e) {
+ e.target === this.selectedItemsContainer && this.inputElement && !this.inputElement.disabled && this.inputElement.focus();
}
_handleCreateNewButtonClick() {
if (this.hasAttribute("disabled") || !this.showCreateButton) return;
- const t = this.inputElement ? this.inputElement.value.trim() : "";
+ const e = this.inputElement ? this.inputElement.value.trim() : "";
this.dispatchEvent(
new CustomEvent("createnew", {
- detail: { value: t },
+ detail: { value: e },
bubbles: !0,
composed: !0
})
);
}
- _handleInput(t) {
- const e = t.target.value;
- if (e.length === 0)
+ _handleInput(e) {
+ const t = e.target.value;
+ if (t.length === 0)
this._filteredOptions = [], this._isOptionsListVisible = !1;
else {
- const s = e.toLowerCase();
+ const s = t.toLowerCase();
this._filteredOptions = this._options.filter((n) => {
if (this._value.includes(n.id)) return !1;
- const a = n.name.toLowerCase().includes(s), r = n.additional_data && n.additional_data.toLowerCase().includes(s);
- return a || r;
+ const l = n.name.toLowerCase().includes(s), r = n.additional_data && n.additional_data.toLowerCase().includes(s);
+ return l || r;
}), this._isOptionsListVisible = this._filteredOptions.length > 0;
}
this._highlightedIndex = this._filteredOptions.length > 0 ? 0 : -1, this._renderOptionsList();
}
- _handleKeyDown(t) {
+ _handleKeyDown(e) {
if (!this.inputElement.disabled) {
if (!this._isOptionsListVisible || this._filteredOptions.length === 0) {
- t.key === "Escape" && this._hideOptionsList(), (t.key === "ArrowDown" || t.key === "ArrowUp") && this.inputElement.value.length > 0 && this._handleInput({ target: this.inputElement });
+ e.key === "Enter" && this.inputElement.value.length > 0 && e.preventDefault(), e.key === "Escape" && this._hideOptionsList(), (e.key === "ArrowDown" || e.key === "ArrowUp") && this.inputElement.value.length > 0 && this._handleInput({ target: this.inputElement });
return;
}
- switch (t.key) {
+ switch (e.key) {
case "ArrowDown":
- t.preventDefault(), this._highlightedIndex = (this._highlightedIndex + 1) % this._filteredOptions.length, this._renderOptionsList();
+ e.preventDefault(), this._highlightedIndex = (this._highlightedIndex + 1) % this._filteredOptions.length, this._renderOptionsList();
break;
case "ArrowUp":
- t.preventDefault(), this._highlightedIndex = (this._highlightedIndex - 1 + this._filteredOptions.length) % this._filteredOptions.length, this._renderOptionsList();
+ e.preventDefault(), this._highlightedIndex = (this._highlightedIndex - 1 + this._filteredOptions.length) % this._filteredOptions.length, this._renderOptionsList();
break;
case "Enter":
- t.preventDefault(), this._highlightedIndex > -1 && this._filteredOptions[this._highlightedIndex] && this._selectItem(this._filteredOptions[this._highlightedIndex].id);
+ e.stopPropagation(), e.preventDefault(), this._highlightedIndex > -1 && this._filteredOptions[this._highlightedIndex] && this._selectItem(this._filteredOptions[this._highlightedIndex].id);
break;
case "Escape":
- t.preventDefault(), this._hideOptionsList();
+ e.preventDefault(), this._hideOptionsList();
break;
case "Tab":
this._hideOptionsList();
@@ -1468,23 +1624,23 @@ class at extends HTMLElement {
this.contains(document.activeElement) || this._hideOptionsList();
}, 150);
}
- _handleOptionMouseDown(t) {
- t.preventDefault();
+ _handleOptionMouseDown(e) {
+ e.preventDefault();
}
- _handleOptionClick(t) {
- const e = t.target.closest("li[data-id]");
- e && e.dataset.id && this._selectItem(e.dataset.id);
+ _handleOptionClick(e) {
+ const t = e.target.closest("li[data-id]");
+ t && t.dataset.id && this._selectItem(t.dataset.id);
}
- _selectItem(t) {
- t && !this._value.includes(t) && (this.value = [...this._value, t]), this.inputElement && (this.inputElement.value = ""), this._filteredOptions = [], this._hideOptionsList(), this.inputElement && !this.hasAttribute("disabled") && this.inputElement.focus();
+ _selectItem(e) {
+ e && !this._value.includes(e) && (this.value = [...this._value, e]), this.inputElement && (this.inputElement.value = ""), this._filteredOptions = [], this._hideOptionsList(), this.inputElement && !this.hasAttribute("disabled") && this.inputElement.focus();
}
- _handleDeleteSelectedItem(t) {
- this.value = this._value.filter((e) => e !== t), this.inputElement && this.inputElement.value && this._handleInput({ target: this.inputElement }), this.inputElement && !this.hasAttribute("disabled") && this.inputElement.focus();
+ _handleDeleteSelectedItem(e) {
+ this.value = this._value.filter((t) => t !== e), this.inputElement && this.inputElement.value && this._handleInput({ target: this.inputElement }), this.inputElement && !this.hasAttribute("disabled") && this.inputElement.focus();
}
}
-p(at, "formAssociated", !0);
-const Jt = "rbi-button", Xt = "rbi-icon";
-class Yt extends HTMLElement {
+m(le, "formAssociated", !0);
+const Je = "rbi-button", Xe = "rbi-icon";
+class Ye extends HTMLElement {
constructor() {
super(), this.initialStates = /* @__PURE__ */ new Map(), this._controlledElements = [], this.button = null, this.lastOverallModifiedState = null, this.handleInputChange = this.handleInputChange.bind(this), this.handleReset = this.handleReset.bind(this);
}
@@ -1493,10 +1649,10 @@ class Yt extends HTMLElement {
}
connectedCallback() {
const i = `
-