@cas-smartdesign/virtual-list 7.2.0 → 8.0.0

package/dist/virtual-list.mjs

@@ -1,363 +1,351 @@
-import { LitElement as p, unsafeCSS as b, css as _, html as x } from "lit";
-import { property as l } from "lit/decorators/property.js";
-import f, { generator as g } from "@cas-smartdesign/list-item";
-class C {
-  getOffsetForIndexAndAlignment(t, e, i, n, s, r) {
-    const m = Math.max(0, r * n), u = Math.min(m, t * n), c = Math.max(0, t * n - s + n);
-    switch (e) {
-      case "start":
-        return u;
-      case "end":
-        return c;
-      case "center": {
-        const I = Math.round(c + (u - c) / 2);
-        return I < Math.ceil(s / 2) ? 0 : I > m + Math.floor(s / 2) ? m : I;
-      }
-      default:
-        return i >= c && i <= u ? i : i < c ? c : u;
-    }
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  debounce(t) {
-    let e;
-    return (...i) => {
-      e && window.cancelAnimationFrame(e), e = window.requestAnimationFrame(() => {
-        t(...i), e = null;
-      });
-    };
-  }
+import e, { generator as t } from "@cas-smartdesign/list-item";
+import { LitElement as n, css as r, html as i, unsafeCSS as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+var s = new class {
+	getOffsetForIndexAndAlignment(e, t, n, r, i, a) {
+		let o = Math.max(0, a * r), s = Math.min(o, e * r), c = Math.max(0, e * r - i + r);
+		switch (t) {
+			case "start": return s;
+			case "end": return c;
+			case "center": {
+				let e = Math.round(c + (s - c) / 2);
+				return e < Math.ceil(i / 2) ? 0 : e > o + Math.floor(i / 2) ? o : e;
+			}
+			default: return n >= c && n <= s ? n : n < c ? c : s;
+		}
+	}
+	debounce(e) {
+		let t;
+		return (...n) => {
+			t && window.cancelAnimationFrame(t), t = window.requestAnimationFrame(() => {
+				e(...n), t = null;
+			});
+		};
+	}
+}();
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/decorateMetadata.js
+function c(e, t) {
+	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }
-const w = new C();
-class T {
-  constructor(t = 100, e = 5) {
-    this.pageSize = t, this.preloadedItemsCount = e, this._finalSizeIsKnown = !1, this._itemCache = [], this._lastRequestedFirstIndex = 0, this._lastRequestedLastIndex = 0, this._lastLoadedIndex = 0, this.handleListDataRequest = (i) => {
-      const { startIndex: n, stopIndex: s } = i.detail;
-      this._lastRequestedFirstIndex = n, this._lastRequestedLastIndex = s, this._list.items = this._itemCache.slice(n, s + 1), !this.finalSizeIsKnown && this._lastLoadedIndex < s + this.preloadedItemsCount && this.requestData();
-    }, this.itemCount = t;
-  }
-  get currentPage() {
-    return this.items.length == 0 && this.finalSizeIsKnown ? 0 : Math.floor((this.items.length - 1) / this.pageSize);
-  }
-  get finalSizeIsKnown() {
-    return this._finalSizeIsKnown;
-  }
-  set finalSizeIsKnown(t) {
-    this._finalSizeIsKnown = t, t && (this.itemCount = this._itemCache.length), this._list && (this._list.finalSizeIsKnown = t);
-  }
-  get itemCount() {
-    return this._itemCount;
-  }
-  set itemCount(t) {
-    this._itemCount = t, this._list && (this._list.itemCount = t);
-  }
-  get items() {
-    return this._itemCache;
-  }
-  set items(t) {
-    this._itemCache = t, this.onItemsChange();
-  }
-  addItems(t) {
-    this._itemCache = this._itemCache.concat(t), this.onItemsChange();
-  }
-  connectList(t) {
-    this._list && this._list.removeEventListener("data-request", this.handleListDataRequest), this._list = t, t.itemCount = this.itemCount, t.addEventListener("data-request", this.handleListDataRequest), t.finalSizeIsKnown = this._finalSizeIsKnown;
-  }
-  onItemsChange() {
-    this._pendingDataRequest = !1, this._lastLoadedIndex = this._itemCache.length - 1, this.finalSizeIsKnown ? this.itemCount = this._itemCache.length : this._lastLoadedIndex > this.itemCount && (this.itemCount = this._lastLoadedIndex), this._list && (this._list.items = this._itemCache.slice(this._lastRequestedFirstIndex, this._lastRequestedLastIndex + 1));
-  }
-  requestData() {
-    if (!this._pendingDataRequest)
-      if (this.onDataRequest)
-        this._pendingDataRequest = !0, this.onDataRequest(this.currentPage + 1), this._lastLoadedIndex += this.pageSize - 1, this._lastLoadedIndex > this.itemCount && (this.itemCount = this._lastLoadedIndex);
-      else
-        throw Error(
-          "The final size is not yet known and the list would require item data from index " + this._lastRequestedFirstIndex + ". to " + this._lastRequestedLastIndex + ". which is not possible to load without a configured onDataRequest"
-        );
-  }
+//#endregion
+//#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
+function l(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }
-const v = ":host{display:block;position:relative;contain:layout;--sd-virtual-list-focus-highlight-color: #1467ba;--sd-virtual-list-item-separator-color: #d9d9d9}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px var(--sd-virtual-list-focus-highlight-color) inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid var(--sd-virtual-list-item-separator-color)}";
-var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (h, t, e, i) => {
-  for (var n = i > 1 ? void 0 : i ? A(t, e) : t, s = h.length - 1, r; s >= 0; s--)
-    (r = h[s]) && (n = (i ? r(t, e, n) : r(n)) || n);
-  return i && n && S(t, e, n), n;
-}, y = /* @__PURE__ */ ((h) => (h.TriggerOnly = "trigger-only", h.Single = "single", h.Multi = "multi", h))(y || {});
-let L = 0;
-var a;
-const o = (a = class extends p {
-  constructor() {
-    super(), this.items = [], this.selectionType = "trigger-only", this.id = a.ID + "_" + L++, this.role = "listbox", this.itemGenerator = g, this._lastKnownScrollTop = 0, this._lastRenderedScrollTop = 0, this._itemsRenderData = [], this._elementCache = /* @__PURE__ */ new Map(), this._visibleItemsNum = 0, this._selectedIndices = [], this._focusIndex = -1, this._lastKnownHeight = 0, this.onScroll = () => {
-      this._lastKnownScrollTop = this.scrollTop;
-      const t = this._lastRenderedScrollTop - this._lastKnownScrollTop;
-      Math.abs(t) >= this.itemHeight && (this._lastRenderedScrollTop = this._lastKnownScrollTop, this.requestUpdate());
-    }, this.handleKeyDown = (t) => {
-      let e = !0;
-      switch (t.key) {
-        case "Down":
-        case "ArrowDown":
-          this.focusIndex = (this.focusIndex + 1) % this.itemCount;
-          break;
-        case "Up":
-        case "ArrowUp":
-          this.focusIndex > 0 ? this.focusIndex-- : this.finalSizeIsKnown && (this.focusIndex = this.itemCount - 1);
-          break;
-        case "Enter":
-          this.handleSelection(this.focusIndex, t);
-          break;
-        case "End":
-          this.focusIndex = this.itemCount - 1;
-          break;
-        case "PageDown":
-          this.focusIndex = this.normalizeIndex(this.focusIndex + this._visibleItemsNum - 1);
-          break;
-        case "Home":
-          this.focusIndex = 0;
-          break;
-        case "PageUp":
-          this.focusIndex = this.normalizeIndex(this.focusIndex - this._visibleItemsNum + 1);
-          break;
-        default:
-          e = !1;
-          break;
-      }
-      e && (t.preventDefault(), t.stopPropagation());
-    }, this._resizeObserver = new ResizeObserver(() => {
-      this._lastKnownHeight !== this.offsetHeight && (this._lastKnownHeight = this.offsetHeight, this.requestUpdate());
-    });
-  }
-  get focusTarget() {
-    return this.hasAttribute("focus-target");
-  }
-  set focusTarget(t) {
-    this.toggleAttribute("focus-target", t);
-  }
-  get focusIndex() {
-    return this._focusIndex;
-  }
-  set focusIndex(t) {
-    if (t >= -1 && t < this.itemCount) {
-      const e = this._focusIndex;
-      this._focusIndex = t, (t <= this._firstVisibleIndex || this._lastVisibleIndex <= t) && this.scrollToItem(t), e != t && (t == -1 && this.removeAttribute("aria-activedescendant"), this.requestUpdate("focusIndex", e));
-    }
-  }
-  get selectedIndices() {
-    return this._selectedIndices;
-  }
-  set selectedIndices(t) {
-    t ? this._selectedIndices = t.map((e) => Number(e)) : this._selectedIndices = [], this.requestUpdate("selectedIndices");
-  }
-  scrollToItem(t, e = "auto") {
-    this.scrollTop = w.getOffsetForIndexAndAlignment(
-      this.normalizeIndex(t),
-      e,
-      this.scrollTop,
-      this.itemHeight,
-      this.height,
-      this.itemCount
-    ), this._lastKnownScrollTop = this.scrollTop;
-  }
-  getListItem(t) {
-    return !this.shadowRoot || t < this._firstVisibleIndex || this._lastVisibleIndex < t ? null : this.querySelector(`[item-index="${t}"]`);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._resizeObserver.observe(this), this.scrollTop !== this._lastKnownScrollTop && (this.scrollTop = this._lastKnownScrollTop, this.requestUpdate());
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._resizeObserver.disconnect();
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.addEventListener("scroll", this.onScroll), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("click", this.handleClick), this.addEventListener("mousedown", (e) => {
-      e.button == 1 && e.preventDefault();
-    }), this.addEventListener("auxclick", this.handleClick), this.addEventListener("focus", () => {
-      this.matches(":focus-visible") && (this.focusIndex == -1 ? (this.selectedIndices && (this.focusIndex = this.selectedIndices[0]), this.focusIndex == -1 && this.itemCount > 0 && (this.focusIndex = 0)) : this.updateFocusedItemAttributes());
-    }), this.addEventListener("blur", () => {
-      this.focusIndex != -1 && this.updateFocusedItemAttributes();
-    }), this.selectedIndices.length > 0 && this.scrollToItem(this.selectedIndices[0], "center");
-  }
-  updateFocusedItemAttributes() {
-    const t = this.getListItem(this.focusIndex);
-    t && (this.focusTarget || document.activeElement == this ? (t.setAttribute("focused", ""), this.setAttribute("aria-activedescendant", t.id)) : (t.removeAttribute("focused"), this.removeAttribute("aria-activedescendant")));
-  }
-  static get styles() {
-    return [
-      _`
-                ${b(v)}
-            `
-    ];
-  }
-  render() {
-    return this.updateItemsRenderData(), x`
+//#endregion
+//#region data-provider.ts
+var u = class {
+	constructor(e = 100, t = 5) {
+		this.pageSize = e, this.preloadedItemsCount = t, this._finalSizeIsKnown = !1, this._itemCache = [], this._lastRequestedFirstIndex = 0, this._lastRequestedLastIndex = 0, this._lastLoadedIndex = 0, this._pendingDataRequest = !1, this.handleListDataRequest = (e) => {
+			if (this._list == null) return;
+			let { startIndex: t, stopIndex: n } = e.detail;
+			this._lastRequestedFirstIndex = t, this._lastRequestedLastIndex = n, this._list.items = this._itemCache.slice(t, n + 1), !this.finalSizeIsKnown && this._lastLoadedIndex < n + this.preloadedItemsCount && this.requestData();
+		}, this._itemCount = e;
+	}
+	get currentPage() {
+		return this.items.length == 0 && this.finalSizeIsKnown ? 0 : Math.floor((this.items.length - 1) / this.pageSize);
+	}
+	get finalSizeIsKnown() {
+		return this._finalSizeIsKnown;
+	}
+	set finalSizeIsKnown(e) {
+		this._finalSizeIsKnown = e, e && (this.itemCount = this._itemCache.length), this._list && (this._list.finalSizeIsKnown = e);
+	}
+	get itemCount() {
+		return this._itemCount;
+	}
+	set itemCount(e) {
+		this._itemCount = e, this._list && (this._list.itemCount = e);
+	}
+	get items() {
+		return this._itemCache;
+	}
+	set items(e) {
+		this._itemCache = e, this.onItemsChange();
+	}
+	addItems(e) {
+		this._itemCache = this._itemCache.concat(e), this.onItemsChange();
+	}
+	connectList(e) {
+		this._list && this._list.removeEventListener("sd-virtual-list-data-request", this.handleListDataRequest), this._list = e, e.itemCount = this.itemCount, e.addEventListener("sd-virtual-list-data-request", this.handleListDataRequest), e.finalSizeIsKnown = this._finalSizeIsKnown;
+	}
+	onItemsChange() {
+		this._pendingDataRequest = !1, this._lastLoadedIndex = this._itemCache.length - 1, this.finalSizeIsKnown ? this.itemCount = this._itemCache.length : this._lastLoadedIndex > this.itemCount && (this.itemCount = this._lastLoadedIndex), this._list && (this._list.items = this._itemCache.slice(this._lastRequestedFirstIndex, this._lastRequestedLastIndex + 1));
+	}
+	requestData() {
+		if (!this._pendingDataRequest) if (this.onDataRequest) this._pendingDataRequest = !0, this.onDataRequest(this.currentPage + 1), this._lastLoadedIndex += this.pageSize - 1, this._lastLoadedIndex > this.itemCount && (this.itemCount = this._lastLoadedIndex);
+		else throw Error("The final size is not yet known and the list would require item data from index " + this._lastRequestedFirstIndex + ". to " + this._lastRequestedLastIndex + ". which is not possible to load without a configured onDataRequest");
+	}
+}, d = ":host{contain:layout;--sd-virtual-list-focus-highlight-color:#1467ba;--sd-virtual-list-item-separator-color:#d9d9d9;display:block;position:relative}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px var(--sd-virtual-list-focus-highlight-color) inset}.container{width:100%}.container>::slotted(*){box-sizing:border-box;width:100%;position:absolute}.container>::slotted(:not([last])){border-bottom:1px solid var(--sd-virtual-list-item-separator-color)}", f, p = /* @__PURE__ */ function(e) {
+	return e.TriggerOnly = "trigger-only", e.Single = "single", e.Multi = "multi", e;
+}({}), m = 0, h = class o extends n {
+	static {
+		this.ID = "sd-virtual-list";
+	}
+	static {
+		this.ensureDefined = () => {
+			e.ensureDefined(), customElements.get(o.ID) || customElements.define(o.ID, o);
+		};
+	}
+	get focusTarget() {
+		return this.hasAttribute("focus-target");
+	}
+	set focusTarget(e) {
+		this.toggleAttribute("focus-target", e);
+	}
+	get focusIndex() {
+		return this._focusIndex;
+	}
+	set focusIndex(e) {
+		if (e >= -1 && e < this.itemCount) {
+			let t = this._focusIndex;
+			this._focusIndex = e, (e <= this._firstVisibleIndex || this._lastVisibleIndex <= e) && this.scrollToItem(e), t != e && (e == -1 && this.removeAttribute("aria-activedescendant"), this.requestUpdate("focusIndex", t));
+		}
+	}
+	get selectedIndices() {
+		return this._selectedIndices;
+	}
+	set selectedIndices(e) {
+		e ? this._selectedIndices = e.map((e) => Number(e)) : this._selectedIndices = [], this.requestUpdate("selectedIndices");
+	}
+	scrollToItem(e, t = "auto") {
+		this.scrollTop = s.getOffsetForIndexAndAlignment(this.normalizeIndex(e), t, this.scrollTop, this.itemHeight, this.height, this.itemCount), this._lastKnownScrollTop = this.scrollTop;
+	}
+	getListItem(e) {
+		return !this.shadowRoot || e < this._firstVisibleIndex || this._lastVisibleIndex < e ? null : this.querySelector(`[item-index="${e}"]`);
+	}
+	constructor() {
+		super(), this.itemHeight = 50, this.itemCount = 0, this.items = [], this.selectionType = p.TriggerOnly, this.id = o.ID + "_" + m++, this.role = "listbox", this.itemGenerator = t, this._lastKnownScrollTop = 0, this._lastRenderedScrollTop = 0, this._itemsRenderData = [], this._elementCache = /* @__PURE__ */ new Map(), this._firstVisibleIndex = -1, this._lastVisibleIndex = -1, this._visibleItemsNum = 0, this._selectedIndices = [], this._focusIndex = -1, this._lastKnownHeight = 0, this.onScroll = () => {
+			this._lastKnownScrollTop = this.scrollTop;
+			let e = this._lastRenderedScrollTop - this._lastKnownScrollTop;
+			Math.abs(e) >= this.itemHeight && (this._lastRenderedScrollTop = this._lastKnownScrollTop, this.requestUpdate());
+		}, this.handleKeyDown = (e) => {
+			let t = !0;
+			switch (e.key) {
+				case "Down":
+				case "ArrowDown":
+					this.focusIndex = (this.focusIndex + 1) % this.itemCount;
+					break;
+				case "Up":
+				case "ArrowUp":
+					this.focusIndex > 0 ? this.focusIndex-- : this.finalSizeIsKnown && (this.focusIndex = this.itemCount - 1);
+					break;
+				case "Enter":
+					this.handleSelection(this.focusIndex, e);
+					break;
+				case "End":
+					this.focusIndex = this.itemCount - 1;
+					break;
+				case "PageDown":
+					this.focusIndex = this.normalizeIndex(this.focusIndex + this._visibleItemsNum - 1);
+					break;
+				case "Home":
+					this.focusIndex = 0;
+					break;
+				case "PageUp":
+					this.focusIndex = this.normalizeIndex(this.focusIndex - this._visibleItemsNum + 1);
+					break;
+				default:
+					t = !1;
+					break;
+			}
+			t && (e.preventDefault(), e.stopPropagation());
+		}, this.handleClick = (e) => {
+			let t = e.composedPath().find((e) => e instanceof HTMLElement && e.hasAttribute && e.hasAttribute("item-index"));
+			if (t) {
+				let n = t.getAttribute("item-index");
+				if (n != null) {
+					let t = parseInt(n);
+					Number.isInteger(t) && ((e.button == 0 || e.button == 1) && this.handleSelection(t, e), this.focusIndex = t);
+				}
+			}
+		}, this._resizeObserver = new ResizeObserver(() => {
+			this._lastKnownHeight !== this.offsetHeight && (this._lastKnownHeight = this.offsetHeight, this.requestUpdate());
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._resizeObserver.observe(this), this.scrollTop !== this._lastKnownScrollTop && (this.scrollTop = this._lastKnownScrollTop, this.requestUpdate());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._resizeObserver.disconnect();
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.addEventListener("scroll", this.onScroll), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("click", this.handleClick), this.addEventListener("mousedown", (e) => {
+			e.button == 1 && e.preventDefault();
+		}), this.addEventListener("auxclick", this.handleClick), this.addEventListener("focus", () => {
+			this.matches(":focus-visible") && (this.focusIndex == -1 ? (this.selectedIndices && (this.focusIndex = this.selectedIndices[0] ?? -1), this.focusIndex == -1 && this.itemCount > 0 && (this.focusIndex = 0)) : this.updateFocusedItemAttributes());
+		}), this.addEventListener("blur", () => {
+			this.focusIndex != -1 && this.updateFocusedItemAttributes();
+		}), this.selectedIndices.length > 0 && this.scrollToItem(this.selectedIndices[0] ?? -1, "center");
+	}
+	updateFocusedItemAttributes() {
+		let e = this.getListItem(this.focusIndex);
+		e && (this.focusTarget || document.activeElement == this ? (e.setAttribute("focused", ""), this.setAttribute("aria-activedescendant", e.id)) : (e.removeAttribute("focused"), this.removeAttribute("aria-activedescendant")));
+	}
+	static get styles() {
+		return [r`
+                ${a(d)}
+            `];
+	}
+	render() {
+		return this.updateItemsRenderData(), i`
             <div class="container" style="height: ${this.itemCount * this.itemHeight}px">
                 <slot name="items"></slot>
             </div>
         `;
-  }
-  updated(t) {
-    if (super.updated(t), this._lastRenderedScrollTop = this._lastKnownScrollTop, this.updateItems(), (this._increaseWidthOnNextRenderIfNeeded || this._reachedMaxWidth) && //
-    this._firstVisibleIndex < this._lastVisibleIndex)
-      if (this.querySelector("[item-index]"))
-        this.adjustWidthIfNeeded();
-      else {
-        const e = new MutationObserver(() => {
-          this.adjustWidthIfNeeded(), e.disconnect();
-        });
-        e.observe(this);
-      }
-  }
-  adjustWidthIfNeeded() {
-    this._increaseWidthOnNextRenderIfNeeded ? (this._increaseWidthOnNextRenderIfNeeded = !1, window.requestAnimationFrame(() => {
-      const t = Number.parseInt(getComputedStyle(this).maxWidth) - this.offsetWidth;
-      if (t == 0)
-        this._reachedMaxWidth = !0, this.enableLineClampOnItemsIfNeeded();
-      else {
-        this._reachedMaxWidth = !1;
-        const e = [...this.querySelectorAll("[item-index]")].map((n) => {
-          if (n instanceof f) {
-            n.enableLineClamp = !1;
-            const s = n.missingWidthForTexts;
-            return s > t && (n.enableLineClamp = !0), s;
-          }
-        }), i = Math.max(...e);
-        i > 0 && (this.style.width = `${this.offsetWidth + i}px`);
-      }
-    })) : this._reachedMaxWidth && this.enableLineClampOnItemsIfNeeded();
-  }
-  enableLineClampOnItemsIfNeeded() {
-    this.querySelectorAll("[item-index]").forEach((t) => {
-      t instanceof f && (t.enableLineClamp = t.enableLineClamp || t.missingWidthForTexts > 0);
-    });
-  }
-  /**
-   * Searches for list-items where there is a need for an additional width (ellipsis maybe shown) and increases the width of the list,
-   * therefore all the content is visible without tooltips. As it can be an expensive task to retrieve the required details, calling
-   * this function has an effect only on the very next render. Note that it only works if the virtual-list works with sd-list-item elements.
-   * If the maximum width is reached, line clamp is enabled on list items as a last resort approach to show the content if possible.
-   */
-  increaseWidthOnNextRenderIfNeeded() {
-    this._increaseWidthOnNextRenderIfNeeded = !0;
-  }
-  updateItems() {
-    const t = [...this.querySelectorAll("[item-index]")], e = /* @__PURE__ */ new Map(), i = document.createDocumentFragment();
-    for (const n of this._itemsRenderData) {
-      const s = this.renderItem(n);
-      s.parentElement || i.appendChild(s), e.set(n.dataHash, s);
-      const r = t.indexOf(s);
-      r !== -1 && t.splice(r, 1);
-    }
-    this.appendChild(i);
-    for (const n of t)
-      n instanceof f && (n.enableLineClamp = !1), this.removeChild(n);
-    e.forEach((n, s) => {
-      this._elementCache.set(s, n);
-    });
-  }
-  renderItem({ index: t, top: e, dataHash: i, data: n }) {
-    let s;
-    return n ? this._elementCache.has(i) ? (s = this._elementCache.get(i), this._elementCache.delete(i)) : (s = this.itemGenerator(n, t), s.setAttribute("slot", "items")) : (s = document.createElement("div"), s.setAttribute("placeholder-item", ""), s.setAttribute("slot", "items")), Object.assign(s.style, {
-      transform: `translateY(${e}px)`,
-      height: `${this.itemHeight}px`
-    }), s.setAttribute("item-index", t.toString()), s.setAttribute("aria-setsize", String(this.finalSizeIsKnown ? this.itemCount : -1)), s.setAttribute("aria-posinset", String(t + 1)), (!s.id || s.id.startsWith(this.id + "_item_")) && (s.id = this.id + "_item_" + t), this.itemCount - 1 == t ? s.setAttribute("last", "") : s.removeAttribute("last"), this.updateSelectedAttribute(t, s), this.updateFocusedAttribute(t, s), s;
-  }
-  updateFocusedAttribute(t, e) {
-    this.focusIndex == t && (this.focusTarget || document.activeElement == this) ? (e.setAttribute("focused", ""), this.setAttribute("aria-activedescendant", e.id)) : e.removeAttribute("focused");
-  }
-  updateSelectedAttribute(t, e) {
-    const i = this.selectedIndices.indexOf(t) !== -1;
-    i ? e.setAttribute("selected", "") : e.removeAttribute("selected"), e.setAttribute("aria-selected", String(i));
-  }
-  updateItemsRenderData() {
-    if (this._itemsRenderData = [], this._visibleItemsNum = Math.min(Math.ceil(this.height / this.itemHeight), this.itemCount), this._visibleItemsNum > 0) {
-      this._firstVisibleIndex = this.normalizeIndex(Math.floor(this._lastKnownScrollTop / this.itemHeight)), this._lastVisibleIndex = this.normalizeIndex(this._firstVisibleIndex + this._visibleItemsNum);
-      const t = this.normalizeIndex(this._firstVisibleIndex - 2), e = this.normalizeIndex(this._lastVisibleIndex + 2);
-      this.requestData(t, e);
-      for (let i = t; i <= e; i++) {
-        const n = i - t, s = this.items[n];
-        let r;
-        s ? r = JSON.stringify(s) : r = `placeholder-${n}`, this._itemsRenderData.push({
-          index: i,
-          top: this.itemHeight * i,
-          physicalIndex: n,
-          dataHash: r,
-          data: s
-        });
-      }
-    } else
-      this._firstVisibleIndex = 0, this._lastVisibleIndex = 0;
-  }
-  normalizeIndex(t) {
-    return Math.max(0, Math.min(t, this.itemCount - 1));
-  }
-  get height() {
-    return this.offsetHeight;
-  }
-  requestData(t, e) {
-    !Number.isNaN(t) && !Number.isNaN(e) && this.dispatchEvent(
-      new CustomEvent("data-request", {
-        detail: {
-          startIndex: t,
-          stopIndex: e
-        }
-      })
-    );
-  }
-  handleSelection(t, e) {
-    if (t < 0 || this.itemCount <= t)
-      return;
-    const i = this.getListItem(t);
-    if (i.getAttribute("aria-disabled") == "true" || i.hasAttribute("disabled"))
-      return;
-    let n = !0;
-    if (this.selectionType !== "trigger-only") {
-      const s = this.selectedIndices.indexOf(t);
-      n = s == -1, n ? this.selectionType === "single" ? this.selectedIndices = [t] : this.selectedIndices.push(t) : this.selectedIndices.splice(s, 1), this.requestUpdate("selectedIndices");
-    }
-    this.focusIndex = t, this.dispatchSelectionEvent(t, n, e);
-  }
-  dispatchSelectionEvent(t, e, i) {
-    this.dispatchEvent(
-      new CustomEvent("selection", {
-        detail: { index: t, selected: e, originalEvent: i }
-      })
-    );
-  }
-  handleClick(t) {
-    const e = t.composedPath().find((i) => i.hasAttribute && i.hasAttribute("item-index"));
-    if (e) {
-      const i = parseInt(e.getAttribute("item-index"));
-      Number.isInteger(i) && ((t.button == 0 || t.button == 1) && this.handleSelection(i, t), this.focusIndex = i);
-    }
-  }
-}, a.ID = "sd-virtual-list", a.ensureDefined = () => {
-  f.ensureDefined(), customElements.get(a.ID) || customElements.define(a.ID, a);
-}, a);
-d([
-  l({ type: Number, attribute: "item-height", reflect: !0 })
-], o.prototype, "itemHeight", 2);
-d([
-  l({ type: Number })
-], o.prototype, "itemCount", 2);
-d([
-  l({ type: Array, attribute: !1 })
-], o.prototype, "items", 2);
-d([
-  l({ type: String, attribute: "selection-type", reflect: !0, noAccessor: !0 })
-], o.prototype, "selectionType", 2);
-d([
-  l({ type: String, attribute: !0, reflect: !0 })
-], o.prototype, "id", 2);
-d([
-  l({ type: String, reflect: !0 })
-], o.prototype, "role", 2);
-d([
-  l({ type: Number, attribute: "focus-index", reflect: !0 })
-], o.prototype, "focusIndex", 1);
-d([
-  l({ type: Array, attribute: !1 })
-], o.prototype, "selectedIndices", 1);
-let D = o;
-D.ensureDefined();
-export {
-  T as ListDataProvider,
-  y as SelectionType,
-  D as default
+	}
+	updated(e) {
+		super.updated(e), this._lastRenderedScrollTop = this._lastKnownScrollTop, this.updateItems(), (this._increaseWidthOnNextRenderIfNeeded || this._reachedMaxWidth) && this._firstVisibleIndex < this._lastVisibleIndex && this.adjustWidthIfNeeded();
+	}
+	adjustWidthIfNeeded() {
+		this._increaseWidthOnNextRenderIfNeeded ? (this._increaseWidthOnNextRenderIfNeeded = !1, window.requestAnimationFrame(() => {
+			let t = Number.parseInt(getComputedStyle(this).maxWidth) - this.offsetWidth;
+			if (t == 0) this._reachedMaxWidth = !0, this.enableLineClampOnItemsIfNeeded();
+			else {
+				this._reachedMaxWidth = !1;
+				let n = [...this.querySelectorAll("[item-index]")].map((n) => {
+					if (n instanceof e) {
+						n.enableLineClamp = !1;
+						let e = n.missingWidthForTexts;
+						return e > t && (n.enableLineClamp = !0), e;
+					}
+					let r = n.scrollWidth - n.clientWidth;
+					return r > 0 ? r + 1 : 0;
+				}), r = Math.max(...n);
+				r > 0 && (this.style.width = `${this.offsetWidth + r}px`);
+			}
+		})) : this._reachedMaxWidth && this.enableLineClampOnItemsIfNeeded();
+	}
+	enableLineClampOnItemsIfNeeded() {
+		this.querySelectorAll("[item-index]").forEach((t) => {
+			t instanceof e && (t.enableLineClamp = t.enableLineClamp || t.missingWidthForTexts > 0);
+		});
+	}
+	/**
+	* Searches for list-items where there is a need for an additional width (ellipsis maybe shown) and increases the width of the list,
+	* therefore all the content is visible without tooltips. As it can be an expensive task to retrieve the required details, calling
+	* this function has an effect only on the very next render. Note that it only works if the virtual-list works with sd-list-item elements.
+	* If the maximum width is reached, line clamp is enabled on list items as a last resort approach to show the content if possible.
+	*/
+	increaseWidthOnNextRenderIfNeeded() {
+		this._increaseWidthOnNextRenderIfNeeded = !0;
+	}
+	updateItems() {
+		let t = [...this.querySelectorAll("[item-index]")], n = /* @__PURE__ */ new Map(), r = document.createDocumentFragment();
+		for (let e of this._itemsRenderData) {
+			let i = this.renderItem(e);
+			i.parentElement || r.appendChild(i), n.set(e.dataHash, i);
+			let a = t.indexOf(i);
+			a !== -1 && t.splice(a, 1);
+		}
+		this.appendChild(r);
+		for (let n of t) n instanceof e && (n.enableLineClamp = !1), this.removeChild(n);
+		n.forEach((e, t) => {
+			this._elementCache.set(t, e);
+		});
+	}
+	renderItem({ index: e, top: t, dataHash: n, data: r }) {
+		let i;
+		return r ? this._elementCache.has(n) ? (i = this._elementCache.get(n), this._elementCache.delete(n)) : (i = this.itemGenerator(r, e), i.setAttribute("slot", "items")) : (i = document.createElement("div"), i.setAttribute("placeholder-item", ""), i.setAttribute("slot", "items")), Object.assign(i.style, {
+			transform: `translateY(${t}px)`,
+			height: `${this.itemHeight}px`
+		}), i.setAttribute("item-index", e.toString()), i.setAttribute("aria-setsize", String(this.finalSizeIsKnown ? this.itemCount : -1)), i.setAttribute("aria-posinset", String(e + 1)), (!i.id || i.id.startsWith(this.id + "_item_")) && (i.id = this.id + "_item_" + e), this.itemCount - 1 == e ? i.setAttribute("last", "") : i.removeAttribute("last"), this.updateSelectedAttribute(e, i), this.updateFocusedAttribute(e, i), i;
+	}
+	updateFocusedAttribute(e, t) {
+		this.focusIndex == e && (this.focusTarget || document.activeElement == this) ? (t.setAttribute("focused", ""), this.setAttribute("aria-activedescendant", t.id)) : t.removeAttribute("focused");
+	}
+	updateSelectedAttribute(e, t) {
+		let n = this.selectedIndices.indexOf(e) !== -1;
+		n ? t.setAttribute("selected", "") : t.removeAttribute("selected"), t.setAttribute("aria-selected", String(n));
+	}
+	updateItemsRenderData() {
+		if (this._itemsRenderData = [], this._visibleItemsNum = Math.min(Math.ceil(this.height / this.itemHeight), this.itemCount), this._visibleItemsNum > 0) {
+			this._firstVisibleIndex = this.normalizeIndex(Math.floor(this._lastKnownScrollTop / this.itemHeight)), this._lastVisibleIndex = this.normalizeIndex(this._firstVisibleIndex + this._visibleItemsNum);
+			let e = this.normalizeIndex(this._firstVisibleIndex - 2), t = this.normalizeIndex(this._lastVisibleIndex + 2);
+			this.requestData(e, t);
+			for (let n = e; n <= t; n++) {
+				let t = n - e, r = this.items[t], i;
+				i = r ? JSON.stringify(r) : `placeholder-${t}`, this._itemsRenderData.push({
+					index: n,
+					top: this.itemHeight * n,
+					physicalIndex: t,
+					dataHash: i,
+					data: r
+				});
+			}
+		} else this._firstVisibleIndex = 0, this._lastVisibleIndex = 0;
+	}
+	normalizeIndex(e) {
+		return Math.max(0, Math.min(e, this.itemCount - 1));
+	}
+	get height() {
+		return this.offsetHeight;
+	}
+	requestData(e, t) {
+		!Number.isNaN(e) && !Number.isNaN(t) && this.dispatchEvent(new CustomEvent("sd-virtual-list-data-request", { detail: {
+			startIndex: e,
+			stopIndex: t
+		} }));
+	}
+	handleSelection(e, t) {
+		if (e < 0 || this.itemCount <= e) return;
+		let n = this.getListItem(e);
+		if (n == null || n.getAttribute("aria-disabled") == "true" || n.hasAttribute("disabled")) return;
+		let r = !0;
+		if (this.selectionType !== p.TriggerOnly) {
+			let t = this.selectedIndices.indexOf(e);
+			r = t == -1, r ? this.selectionType === p.Single ? this.selectedIndices = [e] : this.selectedIndices.push(e) : this.selectedIndices.splice(t, 1), this.requestUpdate("selectedIndices");
+		}
+		this.focusIndex = e, this.dispatchSelectionEvent(e, r, t);
+	}
+	dispatchSelectionEvent(e, t, n) {
+		this.dispatchEvent(new CustomEvent("sd-virtual-list-selection", { detail: {
+			index: e,
+			selected: t,
+			originalEvent: n
+		} }));
+	}
 };
-//# sourceMappingURL=virtual-list.mjs.map
+l([o({
+	type: Number,
+	attribute: "item-height",
+	reflect: !0
+}), c("design:type", Number)], h.prototype, "itemHeight", void 0), l([o({ type: Number }), c("design:type", Number)], h.prototype, "itemCount", void 0), l([o({
+	type: Array,
+	attribute: !1
+}), c("design:type", Array)], h.prototype, "items", void 0), l([o({
+	type: String,
+	attribute: "selection-type",
+	reflect: !0,
+	noAccessor: !0
+}), c("design:type", typeof (f = p !== void 0 && p) == "function" ? f : Object)], h.prototype, "selectionType", void 0), l([o({
+	type: String,
+	attribute: !0,
+	reflect: !0
+}), c("design:type", String)], h.prototype, "id", void 0), l([o({
+	type: String,
+	reflect: !0
+}), c("design:type", Object)], h.prototype, "role", void 0), l([
+	o({
+		type: Number,
+		attribute: "focus-index",
+		reflect: !0
+	}),
+	c("design:type", Number),
+	c("design:paramtypes", [])
+], h.prototype, "focusIndex", null), l([
+	o({
+		type: Array,
+		attribute: !1
+	}),
+	c("design:type", Array),
+	c("design:paramtypes", [])
+], h.prototype, "selectedIndices", null), h.ensureDefined();
+//#endregion
+export { u as ListDataProvider, p as SelectionType, h as default };
+
+//# sourceMappingURL=virtual-list.mjs.map