@cas-smartdesign/virtual-list 7.0.1 → 7.1.0

package/dist/virtual-list.mjs

@@ -1,10 +1,10 @@
 import { LitElement as p, unsafeCSS as b, css as _, html as x } from "lit";
-import { property as d } from "lit/decorators/property.js";
+import { property as l } from "lit/decorators/property.js";
 import f, { generator as g } from "@cas-smartdesign/list-item";
 class C {
-  getOffsetForIndexAndAlignment(e, t, i, n, s, a) {
-    const m = Math.max(0, a * n), u = Math.min(m, e * n), c = Math.max(0, e * n - s + n);
-    switch (t) {
+  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":
@@ -19,22 +19,22 @@ class C {
     }
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  debounce(e) {
-    let t;
+  debounce(t) {
+    let e;
     return (...i) => {
-      t && window.cancelAnimationFrame(t), t = window.requestAnimationFrame(() => {
-        e(...i), t = null;
+      e && window.cancelAnimationFrame(e), e = window.requestAnimationFrame(() => {
+        t(...i), e = null;
       });
     };
   }
 }
 const w = new C();
 class T {
-  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.handleListDataRequest = (i) => {
+  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 = e;
+    }, this.itemCount = t;
   }
   get currentPage() {
     return this.items.length == 0 && this.finalSizeIsKnown ? 0 : Math.floor((this.items.length - 1) / this.pageSize);
@@ -42,26 +42,26 @@ class T {
   get finalSizeIsKnown() {
     return this._finalSizeIsKnown;
   }
-  set finalSizeIsKnown(e) {
-    this._finalSizeIsKnown = e, e && (this.itemCount = this._itemCache.length), this._list && (this._list.finalSizeIsKnown = e);
+  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(e) {
-    this._itemCount = e, this._list && (this._list.itemCount = e);
+  set itemCount(t) {
+    this._itemCount = t, this._list && (this._list.itemCount = t);
   }
   get items() {
     return this._itemCache;
   }
-  set items(e) {
-    this._itemCache = e, this.onItemsChange();
+  set items(t) {
+    this._itemCache = t, this.onItemsChange();
   }
-  addItems(e) {
-    this._itemCache = this._itemCache.concat(e), this.onItemsChange();
+  addItems(t) {
+    this._itemCache = this._itemCache.concat(t), this.onItemsChange();
   }
-  connectList(e) {
-    this._list && this._list.removeEventListener("data-request", this.handleListDataRequest), this._list = e, e.itemCount = this.itemCount, e.addEventListener("data-request", this.handleListDataRequest), e.finalSizeIsKnown = this._finalSizeIsKnown;
+  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));
@@ -76,23 +76,23 @@ class T {
         );
   }
 }
-const S = ":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}";
-var v = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (h, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? A(e, t) : e, s = h.length - 1, a; s >= 0; s--)
-    (a = h[s]) && (n = (i ? a(e, t, n) : a(n)) || n);
-  return i && n && v(e, t, n), n;
+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 r;
-const o = (r = class extends p {
+var a;
+const o = (a = class extends p {
   constructor() {
-    super(), this.items = [], this.selectionType = "trigger-only", this.id = r.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 = () => {
+    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 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) {
+      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;
@@ -102,7 +102,7 @@ const o = (r = class extends p {
           this.focusIndex > 0 ? this.focusIndex-- : this.finalSizeIsKnown && (this.focusIndex = this.itemCount - 1);
           break;
         case "Enter":
-          this.handleSelection(this.focusIndex, e);
+          this.handleSelection(this.focusIndex, t);
           break;
         case "End":
           this.focusIndex = this.itemCount - 1;
@@ -117,10 +117,10 @@ const o = (r = class extends p {
           this.focusIndex = this.normalizeIndex(this.focusIndex - this._visibleItemsNum + 1);
           break;
         default:
-          t = !1;
+          e = !1;
           break;
       }
-      t && (e.preventDefault(), e.stopPropagation());
+      e && (t.preventDefault(), t.stopPropagation());
     }, this._resizeObserver = new ResizeObserver(() => {
       this._lastKnownHeight !== this.offsetHeight && (this._lastKnownHeight = this.offsetHeight, this.requestUpdate());
     });
@@ -128,36 +128,36 @@ const o = (r = class extends p {
   get focusTarget() {
     return this.hasAttribute("focus-target");
   }
-  set focusTarget(e) {
-    this.toggleAttribute("focus-target", e);
+  set focusTarget(t) {
+    this.toggleAttribute("focus-target", t);
   }
   get focusIndex() {
     return this._focusIndex;
   }
-  set focusIndex(e) {
-    if (e >= -1 && e < this.itemCount) {
-      const 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));
+  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(e) {
-    e ? this._selectedIndices = e.map((t) => Number(t)) : this._selectedIndices = [], this.requestUpdate("selectedIndices");
+  set selectedIndices(t) {
+    t ? this._selectedIndices = t.map((e) => Number(e)) : this._selectedIndices = [], this.requestUpdate("selectedIndices");
   }
-  scrollToItem(e, t = "auto") {
+  scrollToItem(t, e = "auto") {
     this.scrollTop = w.getOffsetForIndexAndAlignment(
-      this.normalizeIndex(e),
-      t,
+      this.normalizeIndex(t),
+      e,
       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}"]`);
+  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());
@@ -165,9 +165,9 @@ const o = (r = class extends p {
   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", (t) => {
-      t.button == 1 && t.preventDefault();
+  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", () => {
@@ -175,13 +175,13 @@ const o = (r = class extends p {
     }), this.selectedIndices.length > 0 && this.scrollToItem(this.selectedIndices[0], "center");
   }
   updateFocusedItemAttributes() {
-    const 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")));
+    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(S)}
+                ${b(v)}
             `
     ];
   }
@@ -192,39 +192,39 @@ const o = (r = class extends p {
             </div>
         `;
   }
-  updated(e) {
-    if (super.updated(e), this._lastRenderedScrollTop = this._lastKnownScrollTop, this.updateItems(), (this._increaseWidthOnNextRenderIfNeeded || this._reachedMaxWidth) && //
+  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 t = new MutationObserver(() => {
-          this.adjustWidthIfNeeded(), t.disconnect();
+        const e = new MutationObserver(() => {
+          this.adjustWidthIfNeeded(), e.disconnect();
         });
-        t.observe(this);
+        e.observe(this);
       }
   }
   adjustWidthIfNeeded() {
     this._increaseWidthOnNextRenderIfNeeded ? (this._increaseWidthOnNextRenderIfNeeded = !1, window.requestAnimationFrame(() => {
-      const e = Number.parseInt(getComputedStyle(this).maxWidth) - this.offsetWidth;
-      if (e == 0)
+      const t = Number.parseInt(getComputedStyle(this).maxWidth) - this.offsetWidth;
+      if (t == 0)
         this._reachedMaxWidth = !0, this.enableLineClampOnItemsIfNeeded();
       else {
         this._reachedMaxWidth = !1;
-        const t = [...this.querySelectorAll("[item-index]")].map((n) => {
+        const e = [...this.querySelectorAll("[item-index]")].map((n) => {
           if (n instanceof f) {
             n.enableLineClamp = !1;
             const s = n.missingWidthForTexts;
-            return s > e && (n.enableLineClamp = !0), s;
+            return s > t && (n.enableLineClamp = !0), s;
           }
-        }), i = Math.max(...t);
+        }), i = Math.max(...e);
         i > 0 && (this.style.width = `${this.offsetWidth + i}px`);
       }
     })) : this._reachedMaxWidth && this.enableLineClampOnItemsIfNeeded();
   }
   enableLineClampOnItemsIfNeeded() {
-    this.querySelectorAll("[item-index]").forEach((e) => {
-      e instanceof f && (e.enableLineClamp = e.enableLineClamp || e.missingWidthForTexts > 0);
+    this.querySelectorAll("[item-index]").forEach((t) => {
+      t instanceof f && (t.enableLineClamp = t.enableLineClamp || t.missingWidthForTexts > 0);
     });
   }
   /**
@@ -237,122 +237,122 @@ const o = (r = class extends p {
     this._increaseWidthOnNextRenderIfNeeded = !0;
   }
   updateItems() {
-    const e = [...this.querySelectorAll("[item-index]")], t = /* @__PURE__ */ new Map(), i = document.createDocumentFragment();
+    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), t.set(n.dataHash, s);
-      const a = e.indexOf(s);
-      a !== -1 && e.splice(a, 1);
+      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 e)
+    for (const n of t)
       n instanceof f && (n.enableLineClamp = !1), this.removeChild(n);
-    t.forEach((n, s) => {
+    e.forEach((n, s) => {
       this._elementCache.set(s, n);
     });
   }
-  renderItem({ index: e, top: t, dataHash: i, data: 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, e), s.setAttribute("slot", "items")) : (s = document.createElement("div"), s.setAttribute("placeholder-item", ""), s.setAttribute("slot", "items")), Object.assign(s.style, {
-      transform: `translateY(${t}px)`,
+    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", e.toString()), s.setAttribute("aria-setsize", String(this.finalSizeIsKnown ? this.itemCount : -1)), s.setAttribute("aria-posinset", String(e + 1)), (!s.id || s.id.startsWith(this.id + "_item_")) && (s.id = this.id + "_item_" + e), this.itemCount - 1 == e ? s.setAttribute("last", "") : s.removeAttribute("last"), this.updateSelectedAttribute(e, s), this.updateFocusedAttribute(e, s), s;
+    }), 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(e, t) {
-    this.focusIndex == e && (this.focusTarget || document.activeElement == this) ? (t.setAttribute("focused", ""), this.setAttribute("aria-activedescendant", t.id)) : t.removeAttribute("focused");
+  updateFocusedAttribute(t, e) {
+    this.focusIndex == t && (this.focusTarget || document.activeElement == this) ? (e.setAttribute("focused", ""), this.setAttribute("aria-activedescendant", e.id)) : e.removeAttribute("focused");
   }
-  updateSelectedAttribute(e, t) {
-    const i = this.selectedIndices.indexOf(e) !== -1;
-    i ? t.setAttribute("selected", "") : t.removeAttribute("selected"), t.setAttribute("aria-selected", String(i));
+  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 e = this.normalizeIndex(this._firstVisibleIndex - 2), t = this.normalizeIndex(this._lastVisibleIndex + 2);
-      this.requestData(e, t);
-      for (let i = e; i <= t; i++) {
-        const n = i - e, s = this.items[n];
-        let a;
-        s ? a = JSON.stringify(s) : a = `placeholder-${n}`, this._itemsRenderData.push({
+      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: a,
+          dataHash: r,
           data: s
         });
       }
     } else
       this._firstVisibleIndex = 0, this._lastVisibleIndex = 0;
   }
-  normalizeIndex(e) {
-    return Math.max(0, Math.min(e, this.itemCount - 1));
+  normalizeIndex(t) {
+    return Math.max(0, Math.min(t, this.itemCount - 1));
   }
   get height() {
     return this.offsetHeight;
   }
-  requestData(e, t) {
-    !Number.isNaN(e) && !Number.isNaN(t) && this.dispatchEvent(
+  requestData(t, e) {
+    !Number.isNaN(t) && !Number.isNaN(e) && this.dispatchEvent(
       new CustomEvent("data-request", {
         detail: {
-          startIndex: e,
-          stopIndex: t
+          startIndex: t,
+          stopIndex: e
         }
       })
     );
   }
-  handleSelection(e, t) {
-    if (e < 0 || this.itemCount <= e)
+  handleSelection(t, e) {
+    if (t < 0 || this.itemCount <= t)
       return;
-    const i = this.getListItem(e);
+    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(e);
-      n = s == -1, n ? this.selectionType === "single" ? this.selectedIndices = [e] : this.selectedIndices.push(e) : this.selectedIndices.splice(s, 1), this.requestUpdate("selectedIndices");
+      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 = e, this.dispatchSelectionEvent(e, n, t);
+    this.focusIndex = t, this.dispatchSelectionEvent(t, n, e);
   }
-  dispatchSelectionEvent(e, t, i) {
+  dispatchSelectionEvent(t, e, i) {
     this.dispatchEvent(
       new CustomEvent("selection", {
-        detail: { index: e, selected: t, originalEvent: i }
+        detail: { index: t, selected: e, originalEvent: i }
       })
     );
   }
-  handleClick(e) {
-    const t = e.composedPath().find((i) => i.hasAttribute && i.hasAttribute("item-index"));
-    if (t) {
-      const i = parseInt(t.getAttribute("item-index"));
-      Number.isInteger(i) && ((e.button == 0 || e.button == 1) && this.handleSelection(i, e), this.focusIndex = 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);
     }
   }
-}, r.ID = "sd-virtual-list", r.ensureDefined = () => {
-  f.ensureDefined(), customElements.get(r.ID) || customElements.define(r.ID, r);
-}, r);
-l([
-  d({ type: Number, attribute: "item-height", reflect: !0 })
+}, 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);
-l([
-  d({ type: Number })
+d([
+  l({ type: Number })
 ], o.prototype, "itemCount", 2);
-l([
-  d({ type: Array, attribute: !1 })
+d([
+  l({ type: Array, attribute: !1 })
 ], o.prototype, "items", 2);
-l([
-  d({ type: String, attribute: "selection-type", reflect: !0, noAccessor: !0 })
+d([
+  l({ type: String, attribute: "selection-type", reflect: !0, noAccessor: !0 })
 ], o.prototype, "selectionType", 2);
-l([
-  d({ type: String, attribute: !0, reflect: !0 })
+d([
+  l({ type: String, attribute: !0, reflect: !0 })
 ], o.prototype, "id", 2);
-l([
-  d({ type: String, reflect: !0 })
+d([
+  l({ type: String, reflect: !0 })
 ], o.prototype, "role", 2);
-l([
-  d({ type: Number, attribute: "focus-index", reflect: !0 })
+d([
+  l({ type: Number, attribute: "focus-index", reflect: !0 })
 ], o.prototype, "focusIndex", 1);
-l([
-  d({ type: Array, attribute: !1 })
+d([
+  l({ type: Array, attribute: !1 })
 ], o.prototype, "selectedIndices", 1);
 let D = o;
 D.ensureDefined();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/virtual-list",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "A virtualized list element with SmartDesign look and feel.",
   "main": "dist/virtual-list-with-externals.js",
   "module": "dist/virtual-list.mjs",
@@ -8,7 +8,7 @@
   "types": "dist/virtual-list.d.ts",
   "dependencies": {
     "lit": "^3.3.1",
-    "@cas-smartdesign/list-item": "^7.4.4"
+    "@cas-smartdesign/list-item": "^7.5.0"
   },
   "devDependencies": {
     "@cas-smartdesign/element-preview": "^0.3.1",

package/readme.md

@@ -35,6 +35,13 @@ The following properties are available:
 - `selectedIndices` **_number[] (default=empty)_**
   - Contains the indices of the selected items.
 
+## CSS Custom Properties
+
+- `--sd-virtual-list-focus-highlight-color`
+  - Defines the focus highlight color for list items, defaults to #1467ba
+- `--sd-virtual-list-item-separator-color`
+  - Defines the separator color for list items, defaults to #d9d9d9
+
 ## Custom events
 
 - `data-request`
@@ -43,7 +50,7 @@ The following properties are available:
 - `selection`
   - Dispatched when one of the items is selected/deselected
   - Contains the index of the item and a `selected` flag which is when false indicates that the item is deselected
-  - The `hasModifier` property is true if mouse wheel or ctrl/meta key is down while selection. Note that the auto scroll feature is disabled while middle mouse click.
+  - The `originalEvent` a mouse or keyboard event that triggered the selection event.
 
 ## Public methods