@cas-smartdesign/virtual-list 7.2.1 → 9.0.0

package/dist/docs/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 		<title>Virtual list</title>
 		<style>
 			.markdown-body {
@@ -17,6 +18,13 @@
 			#markdown-container img {
 				background-color: transparent;
 			}
+			.list-wrapper {
+				background-color: var(--color-bg-weak, #f1f1f1);
+				padding: var(--spacing-x8, 16px);
+			}
+			sd-virtual-list {
+				border-radius: var(--radius-s, 4px);
+			}
 		</style>
 		<script type="module" crossorigin src="./doc.mjs"></script>
 		<link rel="stylesheet" crossorigin href="./doc.css">

package/dist/docs/item-provider.mjs

@@ -1 +1 @@
-import"./doc.mjs";class l{constructor(t=100,s=5){this.pageSize=t,this.preloadedItemsCount=s,this._finalSizeIsKnown=!1,this._itemCache=[],this._lastRequestedFirstIndex=0,this._lastRequestedLastIndex=0,this._lastLoadedIndex=0,this.handleListDataRequest=e=>{const{startIndex:i,stopIndex:n}=e.detail;this._lastRequestedFirstIndex=i,this._lastRequestedLastIndex=n,this._list.items=this._itemCache.slice(i,n+1),!this.finalSizeIsKnown&&this._lastLoadedIndex<n+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")}}const r=["Annette","Alexandra","Almeria","Chris","Bernd","Britta","Lional","Lucho","Martin","Peter","Rik","Robert"],h=["Bukac","Ganning","Giacopello","Glaser","Grundmann","Kovac","Lapham","Lee","Plose","Smith","Todarini"],d=["Full time employee","Student"];function c(o=r.length*h.length){const t=[],s=Math.max(1,Math.floor(r.length*h.length/o));for(let e=0;t.length<o;e+=s){const i=r[Math.floor(e/h.length)%r.length],n=h[e%h.length];t.push({caption:`${i} ${n}`,description:d[Math.random()<.3?1:0],disabled:Math.random()<.1})}return t}const u="./right-arrow.svg",m="./lock.svg",_="./icon.svg";class f extends l{constructor(t=c(40)){super(30),t&&(this.items=this.createListItems(...t),this.finalSizeIsKnown=!0)}createListItems(...t){const s=[];for(let e=0;e<t.length;e++){const i=t[e],n=i.disabled;s.push({caption:i.caption,description:i.description,rightContentGenerator:()=>{const a=document.createElement("div");return a.style.display="flex",a.style.flexDirection="row-reverse",a.appendChild(this.createIcon(u)),n&&a.appendChild(this.createIcon(m)),a},icon:_,disabled:n})}return s}createIcon(t){const s=document.createElement("div");s.style.display="flex",s.style.justifyContent="center";const e=document.createElement("img");return e.style.width="24px",e.src=t,s.appendChild(e),s}}export{f as I,c as g};
+import{t as e}from"./doc.mjs";var t=[`Annette`,`Alexandra`,`Almeria`,`Chris`,`Bernd`,`Britta`,`Lional`,`Lucho`,`Martin`,`Peter`,`Rik`,`Robert`],n=[`Bukac`,`Ganning`,`Giacopello`,`Glaser`,`Grundmann`,`Kovac`,`Lapham`,`Lee`,`Plose`,`Smith`,`Todarini`],r=[`Full time employee`,`Student`];function i(e=t.length*n.length){let i=[],a=Math.max(1,Math.floor(t.length*n.length/e));for(let o=0;i.length<e;o+=a){let e=t[Math.floor(o/n.length)%t.length],a=n[o%n.length];i.push({caption:`${e} ${a}`,description:r[Math.random()<.3?1:0],disabled:Math.random()<.1})}return i}var a=`./right-arrow.svg`,o=`./lock.svg`,s=`./icon.svg`,c=class extends e{constructor(e=i(40)){super(30),e&&(this.items=this.createListItems(...e),this.finalSizeIsKnown=!0)}createListItems(...e){return e.map(e=>{let t=e.disabled;return{caption:e.caption,description:e.description,rightContentGenerator:()=>{let e=document.createElement(`div`);return e.style.display=`flex`,e.style.flexDirection=`row-reverse`,e.appendChild(this.createIcon(a)),t&&e.appendChild(this.createIcon(o)),e},icon:s,disabled:t}})}createIcon(e){let t=document.createElement(`div`);t.style.display=`flex`,t.style.justifyContent=`center`;let n=document.createElement(`img`);return n.style.width=`24px`,n.src=e,t.appendChild(n),t}};export{i as n,c as t};

package/dist/list-util.d.ts

@@ -4,8 +4,14 @@ export interface IListUtil {
     debounce(func: (...args: any) => void): () => void;
 }
 declare class ListUtil implements IListUtil {
+    /**
+     * Padding kept between a scrolled-to item and the viewport edge so the item's focus ring
+     * stays visible. Must be kept in sync with `--list-item-focus-ring-width` in style.scss.
+     */
+    private static readonly FOCUS_RING_WIDTH;
     getOffsetForIndexAndAlignment(index: number, alignment: ScrollToAlignment, scrollOffset: number, itemHeight: number, height: number, itemCount: number): number;
     debounce(func: (...args: any) => void): (...args: unknown[]) => void;
 }
 declare const _default: ListUtil;
 export default _default;
+//# sourceMappingURL=list-util.d.ts.map

package/dist/list-util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-util.d.ts","sourceRoot":"","sources":["../list-util.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpE,MAAM,WAAW,SAAS;IACtB,6BAA6B,CACzB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GAClB,MAAM,CAAC;IAEV,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACtD;AAED,cAAM,QAAS,YAAW,SAAS;IAC/B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAK;IAEtC,6BAA6B,CAChC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,iBAAiB,EAC5B,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GAClB,MAAM;IAqCF,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI;CAY9E;;AAED,wBAA8B"}

package/dist/virtual-list.d.ts

@@ -1,12 +1,17 @@
-import { LitElement, TemplateResult, PropertyValues } from "lit";
-import { ScrollToAlignment } from "./list-util";
+import { type ItemData } from "@cas-smartdesign/list-item";
+import { LitElement, type TemplateResult, type PropertyValues } from "lit";
+import { type ScrollToAlignment } from "./list-util";
 export { ListDataProvider } from "./data-provider";
 declare global {
     interface HTMLElementTagNameMap {
         [VirtualList.ID]: VirtualList;
     }
+    interface HTMLElementEventMap {
+        "sd-virtual-list-data-request": CustomEvent<IDataRequestEvent>;
+        "sd-virtual-list-selection": CustomEvent<ISelectionEvent>;
+    }
 }
-export type ItemGenerator = (data: unknown, index: number) => HTMLElement;
+export type ItemGenerator = (data: ItemData, _index: number) => HTMLElement;
 export declare enum SelectionType {
     TriggerOnly = "trigger-only",
     Single = "single",
@@ -21,17 +26,6 @@ export interface ISelectionEvent {
     selected: boolean;
     originalEvent: Event;
 }
-export interface CustomEventMap extends HTMLElementEventMap {
-    "data-request": CustomEvent<IDataRequestEvent>;
-    selection: CustomEvent<ISelectionEvent>;
-}
-export default interface VirtualList {
-    addEventListener<K extends keyof CustomEventMap>(event: K, listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null, options?: AddEventListenerOptions | boolean): void;
-    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
-    removeEventListener<K extends keyof CustomEventMap>(type: K, listener: (this: this, ev: CustomEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;
-}
 export default class VirtualList extends LitElement {
     static readonly ID = "sd-virtual-list";
     static ensureDefined: () => void;
@@ -42,7 +36,7 @@ export default class VirtualList extends LitElement {
     id: string;
     role: string;
     itemGenerator: ItemGenerator;
-    finalSizeIsKnown: boolean;
+    finalSizeIsKnown?: boolean;
     private _lastKnownScrollTop;
     private _lastRenderedScrollTop;
     private _itemsRenderData;
@@ -54,8 +48,8 @@ export default class VirtualList extends LitElement {
     private _focusIndex;
     private _resizeObserver;
     private _lastKnownHeight;
-    private _increaseWidthOnNextRenderIfNeeded;
-    private _reachedMaxWidth;
+    private _increaseWidthOnNextRenderIfNeeded?;
+    private _reachedMaxWidth?;
     get focusTarget(): boolean;
     set focusTarget(value: boolean);
     get focusIndex(): number;
@@ -63,7 +57,7 @@ export default class VirtualList extends LitElement {
     get selectedIndices(): number[];
     set selectedIndices(selectedIndices: number[]);
     scrollToItem(index: number, alignment?: ScrollToAlignment): void;
-    getListItem(index: number): HTMLElement;
+    getListItem(index: number): HTMLElement | null;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -95,3 +89,4 @@ export default class VirtualList extends LitElement {
     private dispatchSelectionEvent;
     private handleClick;
 }
+//# sourceMappingURL=virtual-list.d.ts.map

package/dist/virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../virtual-list.ts"],"names":[],"mappings":"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"}