-
-
+
+
+
-
+
-
-
+
+
`;
}
@@ -1011,7 +1011,7 @@ class nt extends HTMLElement {
_renderStagedPillOrInput() {
if (!(!this.stagedItemPillContainer || !this.inputElement || !this.inputAreaWrapper)) {
if (this.stagedItemPillContainer.innerHTML = "", this._stagedItem && this._stagedItem.item) {
- this.inputAreaWrapper.classList.remove(S), this.inputAreaWrapper.classList.add(C);
+ 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(
@@ -1022,7 +1022,7 @@ class nt extends HTMLElement {
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(S), this.inputAreaWrapper.classList.remove(C), this.inputElement.classList.remove("hidden");
+ this.inputAreaWrapper.classList.add(v), this.inputAreaWrapper.classList.remove(y), this.inputElement.classList.remove("hidden");
this._updateAddButtonState(), this._updatePreAddButtonVisibility(), this._updateRootElementStateClasses();
}
}
@@ -1041,15 +1041,15 @@ class nt extends HTMLElement {
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}`;
+ let r = `
${e.name}`, o = e.additional_data ? `
(${e.additional_data})` : "", c = `
${t.role}`;
a.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", (ot) => {
- ot.stopPropagation(), this._handleDeleteSelectedItem(t.instanceId);
+ 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);
}), n;
}
_renderSelectedItems() {
- this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `
${this.placeholderNoSelection}` : this._value.forEach((t) => {
+ 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._updateRootElementStateClasses());
@@ -1086,7 +1086,7 @@ class nt extends HTMLElement {
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();
const s = this.stagedItemPillContainer.querySelector(
- `.${y}`
+ `.${w}`
);
s && !s.disabled ? s.focus() : this.addButtonElement && !this.addButtonElement.disabled && this.addButtonElement.focus();
}
@@ -1123,7 +1123,7 @@ class nt extends HTMLElement {
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(
- `.${H}`
+ `.${q}`
);
if (s === n) {
t.preventDefault(), this._handleCancelStagedItem(t);
@@ -1161,7 +1161,7 @@ class nt extends HTMLElement {
}
_handleFocus() {
if (!(this.hasAttribute("disabled") || this.inputElement && this.inputElement.disabled || this._stagedItem)) {
- if (!this._stagedItem && this.inputAreaWrapper && (this.inputAreaWrapper.classList.add(S), this.inputAreaWrapper.classList.remove(C)), this.inputElement && this.inputElement.value.length > 0) {
+ 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();
} else
@@ -1180,7 +1180,7 @@ class nt extends HTMLElement {
}
_handleOptionClick(t) {
if (this.hasAttribute("disabled")) return;
- const e = t.target.closest(`li[data-id].${V}`);
+ const e = t.target.closest(`li[data-id].${z}`);
if (e) {
const s = e.dataset.id, n = this._filteredOptions.find((a) => a.id === s);
n && this._stageItem(n);
@@ -1190,9 +1190,9 @@ class nt extends HTMLElement {
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());
}
}
-p(nt, "formAssociated", !0);
-const Nt = "mss-component-wrapper", G = "mss-selected-items-container", Pt = "mss-selected-item-pill", Dt = "mss-selected-item-text", Ht = "mss-selected-item-pill-detail", z = "mss-selected-item-delete-btn", K = "mss-input-controls-container", j = "mss-input-wrapper", Q = "mss-input-wrapper-focused", J = "mss-text-input", X = "mss-create-new-button", Y = "mss-options-list", qt = "mss-option-item", Ut = "mss-option-item-name", Ft = "mss-option-item-detail", Z = "mss-option-item-highlighted", x = "mss-hidden-select", Vt = "mss-no-items-text", Wt = "mss-state-no-selection", Gt = "mss-state-has-selection", zt = "mss-state-list-open";
-class lt extends HTMLElement {
+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 {
constructor() {
super();
p(this, "_blurTimeout", null);
@@ -1219,15 +1219,15 @@ class lt extends HTMLElement {
}
_setupTemplates() {
this.optionTemplate = document.createElement("template"), this.optionTemplate.innerHTML = `
-
-
-
+
+
+
`, this.selectedItemTemplate = document.createElement("template"), this.selectedItemTemplate.innerHTML = `
-
-
-
-
+
+
+
+
`;
}
@@ -1280,7 +1280,7 @@ class lt extends HTMLElement {
this.setAttribute("name", t), this.hiddenSelect && (this.hiddenSelect.name = t);
}
connectedCallback() {
- if (this._render(), this.inputControlsContainer = this.querySelector(`.${K}`), this.inputWrapper = this.querySelector(`.${j}`), this.inputElement = this.querySelector(`.${J}`), this.createNewButton = this.querySelector(`.${X}`), this.optionsListElement = this.querySelector(`.${Y}`), this.selectedItemsContainer = this.querySelector(`.${G}`), this.hiddenSelect = this.querySelector(`.${x}`), 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")) {
+ 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");
try {
this.value = JSON.parse(t);
@@ -1335,35 +1335,35 @@ class lt extends HTMLElement {
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(`.${z}`).forEach(
+ 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();
}
_updateRootElementStateClasses() {
- this.classList.toggle(Wt, this._value.length === 0), this.classList.toggle(Gt, this._value.length > 0), this.classList.toggle(zt, this._isOptionsListVisible);
+ this.classList.toggle(Kt, this._value.length === 0), this.classList.toggle(jt, this._value.length > 0), this.classList.toggle(Qt, this._isOptionsListVisible);
}
_render() {
const t = this.id || `mss-${crypto.randomUUID().slice(0, 8)}`;
this.id || this.setAttribute("id", t), this.innerHTML = `
-
+
-
-
`;
}
@@ -1376,7 +1376,7 @@ class lt extends HTMLElement {
}), n;
}
_renderSelectedItems() {
- this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `
No items selected` : this._value.forEach((t) => {
+ 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._updateRootElementStateClasses());
@@ -1385,7 +1385,7 @@ class lt extends HTMLElement {
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(Z), this.inputElement && this.inputElement.setAttribute("aria-activedescendant", o)), n;
+ return n.id = o, e === this._highlightedIndex && (n.classList.add(tt), this.inputElement && this.inputElement.setAttribute("aria-activedescendant", o)), n;
}
_renderOptionsList() {
if (!(!this.optionsListElement || !this.inputElement)) {
@@ -1397,7 +1397,7 @@ class lt extends HTMLElement {
this.optionsListElement.appendChild(n);
});
const t = this.optionsListElement.querySelector(
- `.${Z}`
+ `.${tt}`
);
t && (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id));
}
@@ -1461,10 +1461,10 @@ class lt extends HTMLElement {
this._isOptionsListVisible = !1, this._highlightedIndex = -1, this.optionsListElement && this._renderOptionsList();
}
_handleFocus() {
- this.inputElement.disabled || (this.inputWrapper && this.inputWrapper.classList.add(Q), this.inputElement.value.length > 0 && this._handleInput({ target: this.inputElement }), this._updateRootElementStateClasses());
+ this.inputElement.disabled || (this.inputWrapper && this.inputWrapper.classList.add(J), this.inputElement.value.length > 0 && this._handleInput({ target: this.inputElement }), this._updateRootElementStateClasses());
}
_handleBlur() {
- this.inputWrapper && this.inputWrapper.classList.remove(Q), this._blurTimeout = setTimeout(() => {
+ this.inputWrapper && this.inputWrapper.classList.remove(J), this._blurTimeout = setTimeout(() => {
this.contains(document.activeElement) || this._hideOptionsList();
}, 150);
}
@@ -1482,9 +1482,9 @@ class lt extends HTMLElement {
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();
}
}
-p(lt, "formAssociated", !0);
-const Kt = "rbi-button", jt = "rbi-icon";
-class Qt extends HTMLElement {
+p(at, "formAssociated", !0);
+const Jt = "rbi-button", Xt = "rbi-icon";
+class Yt 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 +1493,10 @@ class Qt extends HTMLElement {
}
connectedCallback() {
const i = `
-
-