@aquera/nile-elements 0.1.36-beta-1.3 → 0.1.36-beta-1.4

package/dist/src/nile-virtual-list/nile-virtual-list.css.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit';
+/**
+ * VirtualList CSS
+ */
+export const styles = css `
+	:host {
+      display: block;
+      border: 1px solid #ddd;
+      border-radius: var(--app-border-radius, 4px);
+      height: 300px;
+      overflow: auto;
+    }
+
+    .virtual-item {
+      width: 100%;
+    }
+`;
+export default [styles];
+//# sourceMappingURL=nile-virtual-list.css.js.map

package/dist/src/nile-virtual-list/nile-virtual-list.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-virtual-list.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-list/nile-virtual-list.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VirtualList CSS\n */\nexport const styles = css`\n\t:host {\n      display: block;\n      border: 1px solid #ddd;\n      border-radius: var(--app-border-radius, 4px);\n      height: 300px;\n      overflow: auto;\n    }\n\n    .virtual-item {\n      width: 100%;\n    }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-virtual-list/nile-virtual-list.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { TemplateResult, CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile virtual-list component.
+ *
+ * @tag nile-virtual-list
+ *
+ */
+export declare class NileVirtualList extends NileElement {
+    items: any[];
+    selectedValue: string;
+    static styles: CSSResultGroup;
+    private renderItem;
+    private handleItemClick;
+    render(): TemplateResult;
+}
+export default NileVirtualList;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-virtual-list': NileVirtualList;
+    }
+}

package/dist/src/nile-virtual-list/nile-virtual-list.js

@@ -0,0 +1,69 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-virtual-list.css';
+import NileElement from '../internal/nile-element';
+import { LitVirtualizer } from '@lit-labs/virtualizer';
+if (!customElements.get('lit-virtualizer')) {
+    customElements.define('lit-virtualizer', LitVirtualizer);
+}
+/**
+ * Nile virtual-list component.
+ *
+ * @tag nile-virtual-list
+ *
+ */
+let NileVirtualList = class NileVirtualList extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.selectedValue = '';
+        this.renderItem = (item, index) => {
+            const isSelected = (item.value || item.toString()) === this.selectedValue;
+            return html `
+      <nile-option
+        class="virtual-item"
+        value=${item.value || item.toString()}
+        @click=${() => this.handleItemClick(item)}
+      >
+        ${item.label || item.toString()}
+      </nile-option>
+    `;
+        };
+    }
+    handleItemClick(item) {
+        this.dispatchEvent(new CustomEvent('nile-selected', {
+            detail: item,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <lit-virtualizer
+        .items=${this.items}
+        .renderItem=${this.renderItem}
+      >
+      </lit-virtualizer>
+    `;
+    }
+};
+NileVirtualList.styles = styles;
+__decorate([
+    property({ type: Array })
+], NileVirtualList.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], NileVirtualList.prototype, "selectedValue", void 0);
+NileVirtualList = __decorate([
+    customElement('nile-virtual-list')
+], NileVirtualList);
+export { NileVirtualList };
+export default NileVirtualList;
+//# sourceMappingURL=nile-virtual-list.js.map

package/dist/src/nile-virtual-list/nile-virtual-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-virtual-list.js","sourceRoot":"","sources":["../../../src/nile-virtual-list/nile-virtual-list.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EACL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAC3D,CAAC;AACD;;;;;GAKG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QACsB,UAAK,GAAU,EAAE,CAAC;QACjB,kBAAa,GAAW,EAAE,CAAC;QAI/C,eAAU,GAAG,CAAC,IAAS,EAAE,KAAa,EAAkB,EAAE;YAChE,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC;YAC1E,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;iBAC5B,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;;UAEvC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;;KAElC,CAAC;QACJ,CAAC,CAAC;IAoBJ,CAAC;IAlBS,eAAe,CAAC,IAAS;QAC/B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IACM,MAAM;QACX,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;sBACL,IAAI,CAAC,UAAU;;;KAGhC,CAAC;IACJ,CAAC;;AAhCM,sBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAHZ;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAmB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA4B;AAF5C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAqC3B;;AAED,eAAe,eAAe,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  html,\n  TemplateResult,\n  CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-virtual-list.css';\nimport NileElement from '../internal/nile-element';\nimport { LitVirtualizer } from '@lit-labs/virtualizer';\n\nif (!customElements.get('lit-virtualizer')) {\n  customElements.define('lit-virtualizer', LitVirtualizer);\n}\n/**\n * Nile virtual-list component.\n *\n * @tag nile-virtual-list\n *\n */\n@customElement('nile-virtual-list')\nexport class NileVirtualList extends NileElement {\n  @property({ type: Array }) items: any[] = [];\n  @property({ type: String }) selectedValue: string = '';\n\n  static styles: CSSResultGroup = styles;\n\n  private renderItem = (item: any, index: number): TemplateResult => {\n    const isSelected = (item.value || item.toString()) === this.selectedValue;\n    return html`\n      <nile-option\n        class=\"virtual-item\"\n        value=${item.value || item.toString()}\n        @click=${() => this.handleItemClick(item)}\n      >\n        ${item.label || item.toString()}\n      </nile-option>\n    `;\n  };\n\n  private handleItemClick(item: any) {\n    this.dispatchEvent(\n      new CustomEvent('nile-selected', {\n        detail: item,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n  public render(): TemplateResult {\n    return html`\n      <lit-virtualizer\n        .items=${this.items}\n        .renderItem=${this.renderItem}\n      >\n      </lit-virtualizer>\n    `;\n  }\n}\n\nexport default NileVirtualList;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-virtual-list': NileVirtualList;\n  }\n}\n"]}

package/dist/src/nile-virtual-scroll/index.d.ts

@@ -0,0 +1 @@
+export { NileVirtualScroll } from './nile-virtual-scroll';

package/dist/src/nile-virtual-scroll/index.js

@@ -0,0 +1,2 @@
+export { NileVirtualScroll } from './nile-virtual-scroll';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-virtual-scroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileVirtualScroll } from './nile-virtual-scroll';"]}

package/dist/src/{nile-pagination/nile-pagination.css.d.ts → nile-virtual-scroll/nile-virtual-scroll.css.d.ts}

@@ -1,11 +1,11 @@
 /**
-* Copyright Aquera Inc 2025
+* Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
 /**
- * Pagination CSS
+ * VirtualScroll CSS
  */
 export declare const styles: import("lit").CSSResult;
 declare const _default: import("lit").CSSResult[];

package/dist/src/{nile-rich-text-editor/nile-rich-text-editor.css.js → nile-virtual-scroll/nile-virtual-scroll.css.js}

@@ -1,12 +1,12 @@
 /**
-* Copyright Aquera Inc 2025
+* Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
 import { css } from 'lit';
 /**
- * RichTextEditor CSS
+ * VirtualScroll CSS
  */
 export const styles = css `
 	:host {
@@ -14,4 +14,4 @@ export const styles = css `
 	}
 `;
 export default [styles];
-//# sourceMappingURL=nile-rich-text-editor.css.js.map
+//# sourceMappingURL=nile-virtual-scroll.css.js.map

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-virtual-scroll.css.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/nile-virtual-scroll.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * VirtualScroll CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n`;\n\nexport default [styles];"]}

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile virtual-scroll component.
+ *
+ * @tag nile-virtual-scroll
+ *
+ */
+export declare class NileVirtualScroll extends NileElement {
+    /**
+     * The styles for nile-virtual-scroll
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    templateContent: any;
+    scrollInProgress: boolean;
+    currentController: AbortController | null;
+    private observer;
+    itemHeight: number;
+    cachedElements: any;
+    height: number;
+    items: any[];
+    bufferSize: number;
+    showLoading: boolean;
+    scrollHeightAdjust: string;
+    startIndex: number;
+    endIndex: number;
+    currentScrollTop: number;
+    constructor();
+    protected firstUpdated(): void;
+    private handleScroll;
+    private showLoadingItemsScreen;
+    updateVisibleItems(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleItemChange(): void;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileVirtualScroll;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-virtual-scroll': NileVirtualScroll;
+    }
+}

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.js

@@ -0,0 +1,196 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './nile-virtual-scroll.css';
+import NileElement from '../internal/nile-element';
+import { watch } from '../internal/watch';
+import { getStartAndEndIndices, getVisibleItems, stringToDOM, } from './nile-virtual-scroll.utils';
+/**
+ * Nile virtual-scroll component.
+ *
+ * @tag nile-virtual-scroll
+ *
+ */
+let NileVirtualScroll = class NileVirtualScroll extends NileElement {
+    /**
+     * The styles for nile-virtual-scroll
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    constructor() {
+        super();
+        this.templateContent = '';
+        this.scrollInProgress = false;
+        this.currentController = null;
+        this.itemHeight = 10;
+        this.cachedElements = [];
+        this.height = 100;
+        this.items = [];
+        this.bufferSize = 50;
+        this.showLoading = false;
+        this.scrollHeightAdjust = '0px';
+        this.startIndex = 0;
+        this.endIndex = 0;
+        this.currentScrollTop = 0;
+        this.handleScroll = this.handleScroll.bind(this);
+        this.showLoadingItemsScreen = this.showLoadingItemsScreen.bind(this);
+        this.updateVisibleItems = this.updateVisibleItems.bind(this);
+    }
+    firstUpdated() {
+        this.templateContent =
+            document.getElementsByTagName('template')[0]?.innerHTML;
+        this.addEventListener('scroll', this.handleScroll);
+        this.scrollInProgress = true;
+        this.updateVisibleItems();
+    }
+    handleScroll() {
+        this.currentScrollTop = this.scrollTop;
+        this.scrollInProgress = true;
+        this.updateVisibleItems();
+    }
+    /* #endregion */
+    showLoadingItemsScreen() {
+        const { startIndex, endIndex } = getStartAndEndIndices({
+            currentScrollTop: this.currentScrollTop,
+            items: this.items,
+            height: this.height,
+            itemHeight: this.itemHeight,
+            bufferSize: this.bufferSize,
+        });
+        const visibleItems = this.items.slice(startIndex, endIndex);
+        const loadingScreenItems = [];
+        visibleItems.forEach((item) => {
+            let element = stringToDOM(`<p>Loading...</p>`);
+            if (element) {
+                loadingScreenItems.push(element);
+            }
+        });
+        this.innerHTML = '';
+        this.append(...loadingScreenItems);
+        this.scrollInProgress = true;
+        this.requestUpdate();
+    }
+    updateVisibleItems() {
+        const { startIndex, endIndex } = getStartAndEndIndices({
+            currentScrollTop: this.currentScrollTop,
+            items: this.items,
+            height: this.height,
+            itemHeight: this.itemHeight,
+            bufferSize: this.bufferSize,
+        });
+        const currentVisibleItems = getVisibleItems({
+            startIndex: startIndex,
+            endIndex: endIndex,
+            items: this.items,
+            templateContent: this.templateContent,
+        });
+        this.innerHTML = '';
+        this.append(...currentVisibleItems);
+        this.scrollInProgress = false;
+        this.requestUpdate();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    handleItemChange() {
+        if (this.items.length) {
+            this.updateVisibleItems();
+        }
+    }
+    /* #region Methods */
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html `
+      <style>
+        :host {
+          display: block;
+          overflow-y: scroll;
+          will-change: scroll-position;
+          max-height: calc(
+            var(--auto-size-available-height) - ${this.scrollHeightAdjust}
+          );
+          transform: translateZ(0);
+        }
+        :host::-webkit-scrollbar {
+          -webkit-appearance: none;
+          width: 7px;
+        }
+        :host::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background-color: rgba(0, 0, 0, 0.5);
+          box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+          -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+        }
+      </style>
+      <div
+        style="
+                position: absolute; 
+                width: 100%; 
+                top: 0; 
+                left: 0; 
+                contain: content;
+                transform: translateY(${this.currentScrollTop}px)
+              "
+      >
+        <slot></slot>
+      </div>
+      <div
+        style="height: ${this.items?.length *
+            this.itemHeight}px; transform-origin: 0 0; flex: 0 0 auto;"
+      ></div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], NileVirtualScroll.prototype, "itemHeight", void 0);
+__decorate([
+    property({ type: Number })
+], NileVirtualScroll.prototype, "cachedElements", void 0);
+__decorate([
+    property({ type: Number })
+], NileVirtualScroll.prototype, "height", void 0);
+__decorate([
+    property({ type: Array })
+], NileVirtualScroll.prototype, "items", void 0);
+__decorate([
+    property({ type: Number })
+], NileVirtualScroll.prototype, "bufferSize", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileVirtualScroll.prototype, "showLoading", void 0);
+__decorate([
+    property({ type: String })
+], NileVirtualScroll.prototype, "scrollHeightAdjust", void 0);
+__decorate([
+    state()
+], NileVirtualScroll.prototype, "startIndex", void 0);
+__decorate([
+    state()
+], NileVirtualScroll.prototype, "endIndex", void 0);
+__decorate([
+    state()
+], NileVirtualScroll.prototype, "currentScrollTop", void 0);
+__decorate([
+    watch('items')
+], NileVirtualScroll.prototype, "handleItemChange", null);
+NileVirtualScroll = __decorate([
+    customElement('nile-virtual-scroll')
+], NileVirtualScroll);
+export { NileVirtualScroll };
+export default NileVirtualScroll;
+//# sourceMappingURL=nile-virtual-scroll.js.map

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-virtual-scroll.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/nile-virtual-scroll.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './nile-virtual-scroll.css';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport {\n  getStartAndEndIndices,\n  getVisibleItems,\n  stringToDOM,\n} from './nile-virtual-scroll.utils';\n\n/**\n * Nile virtual-scroll component.\n *\n * @tag nile-virtual-scroll\n *\n */\n@customElement('nile-virtual-scroll')\nexport class NileVirtualScroll extends NileElement {\n  /**\n   * The styles for nile-virtual-scroll\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  templateContent: any = '';\n  scrollInProgress: boolean = false;\n  currentController: AbortController | null = null;\n  private observer!: MutationObserver;\n\n  @property({ type: Number })\n  itemHeight = 10;\n\n  @property({ type: Number })\n  cachedElements: any = [];\n\n  @property({ type: Number })\n  height = 100;\n\n  @property({ type: Array })\n  items: any[] = [];\n\n  @property({ type: Number })\n  bufferSize = 50;\n\n  @property({ type: Boolean })\n  showLoading = false;\n\n  @property({ type: String })\n  scrollHeightAdjust = '0px';\n\n  @state()\n  startIndex: number = 0;\n  @state()\n  endIndex: number = 0;\n  @state()\n  currentScrollTop = 0;\n\n  constructor() {\n    super();\n    this.handleScroll = this.handleScroll.bind(this);\n    this.showLoadingItemsScreen = this.showLoadingItemsScreen.bind(this);\n    this.updateVisibleItems = this.updateVisibleItems.bind(this);\n  }\n\n  protected firstUpdated() {\n    this.templateContent =\n      document.getElementsByTagName('template')[0]?.innerHTML;\n    this.addEventListener('scroll', this.handleScroll);\n    \n    this.scrollInProgress = true;\n    this.updateVisibleItems();\n  }\n\n  private handleScroll() {\n    this.currentScrollTop = this.scrollTop;\n    this.scrollInProgress = true;\n    this.updateVisibleItems();\n  }\n\n  /* #endregion */\n\n  private showLoadingItemsScreen() {\n    const { startIndex, endIndex } = getStartAndEndIndices({\n      currentScrollTop: this.currentScrollTop,\n      items: this.items,\n      height: this.height,\n      itemHeight: this.itemHeight,\n      bufferSize: this.bufferSize,\n    });\n    const visibleItems = this.items.slice(startIndex, endIndex);\n    const loadingScreenItems: HTMLElement[] = [];\n    visibleItems.forEach((item: any) => {\n      let element = stringToDOM(`<p>Loading...</p>`) as HTMLElement;\n      if (element) {\n        loadingScreenItems.push(element);\n      }\n    });\n    this.innerHTML = '';\n    this.append(...loadingScreenItems);\n    this.scrollInProgress = true;\n    this.requestUpdate();\n  }\n\n  updateVisibleItems() {\n    const { startIndex, endIndex } = getStartAndEndIndices({\n      currentScrollTop: this.currentScrollTop,\n      items: this.items,\n      height: this.height,\n      itemHeight: this.itemHeight,\n      bufferSize: this.bufferSize,\n    });\n\n    const currentVisibleItems: HTMLElement[] = getVisibleItems({\n      startIndex: startIndex,\n      endIndex: endIndex,\n      items: this.items,\n      templateContent: this.templateContent,\n    });\n\n    this.innerHTML = '';\n    this.append(...currentVisibleItems);\n    this.scrollInProgress = false;\n    this.requestUpdate();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  @watch('items')\n  handleItemChange() {\n    if(this.items.length) {\n      this.updateVisibleItems()\n    }\n  }\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n      <style>\n        :host {\n          display: block;\n          overflow-y: scroll;\n          will-change: scroll-position;\n          max-height: calc(\n            var(--auto-size-available-height) - ${this.scrollHeightAdjust}\n          );\n          transform: translateZ(0);\n        }\n        :host::-webkit-scrollbar {\n          -webkit-appearance: none;\n          width: 7px;\n        }\n        :host::-webkit-scrollbar-thumb {\n          border-radius: 4px;\n          background-color: rgba(0, 0, 0, 0.5);\n          box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n        }\n      </style>\n      <div\n        style=\"\n                position: absolute; \n                width: 100%; \n                top: 0; \n                left: 0; \n                contain: content;\n                transform: translateY(${this.currentScrollTop}px)\n              \"\n      >\n        <slot></slot>\n      </div>\n      <div\n        style=\"height: ${this.items?.length *\n        this.itemHeight}px; transform-origin: 0 0; flex: 0 0 auto;\"\n      ></div>\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileVirtualScroll;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-virtual-scroll': NileVirtualScroll;\n  }\n}\n"]}

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.utils.d.ts

@@ -0,0 +1,23 @@
+interface ScrollParams {
+    currentScrollTop: number;
+    itemHeight: number;
+    height: number;
+    items: any[];
+    bufferSize: number;
+}
+interface GetVisibleItemsParams {
+    startIndex: number;
+    endIndex: number;
+    items: any[];
+    templateContent: any;
+}
+export declare const VIRTUAL_LIST_KEY = "data-itemValue";
+export declare const stringToDOM: (htmlString: string) => ChildNode | null;
+export declare const interpolateString: (template: string, item: any) => string;
+export declare const isHTMLElement: (obj: any) => obj is HTMLElement;
+export declare const getStartAndEndIndices: ({ currentScrollTop, itemHeight, height, items, bufferSize, }: ScrollParams) => {
+    startIndex: number;
+    endIndex: number;
+};
+export declare const getVisibleItems: ({ startIndex, endIndex, items, templateContent, }: GetVisibleItemsParams) => HTMLElement[];
+export {};

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.utils.js

@@ -0,0 +1,48 @@
+export const VIRTUAL_LIST_KEY = 'data-itemValue';
+export const stringToDOM = (htmlString) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(htmlString, 'text/html');
+    return doc.body.firstChild; // Returns the first element
+};
+export const interpolateString = (template, item) => {
+    return new Function('item', `return \`${template}\`;`)(item);
+};
+export const isHTMLElement = (obj) => {
+    return obj instanceof HTMLElement;
+};
+export const getStartAndEndIndices = ({ currentScrollTop, itemHeight, height, items, bufferSize, }) => {
+    let startIndex = Math.floor(currentScrollTop / itemHeight);
+    let endIndex = startIndex +
+        Math.min(Math.ceil(height / itemHeight), items.length) +
+        Math.floor((bufferSize * 2) / itemHeight);
+    if (startIndex < 0) {
+        startIndex = 0;
+    }
+    if (endIndex >= items.length) {
+        endIndex = items.length - 1;
+    }
+    return { startIndex, endIndex };
+};
+export const getVisibleItems = ({ startIndex, endIndex, items, templateContent, }) => {
+    const currentVisibleItems = [];
+    let currentVisibleIndices = Array.from({ length: endIndex - startIndex + 1 }, (_, index) => startIndex + index);
+    for (let visibleIndex of currentVisibleIndices) {
+        const virtualItem = items[visibleIndex];
+        if (isHTMLElement(virtualItem)) {
+            if (!currentVisibleItems.includes(virtualItem)) {
+                currentVisibleItems.push(virtualItem);
+            }
+        }
+        else {
+            if (currentVisibleIndices.includes(virtualItem.index)) {
+                let element = stringToDOM(interpolateString(templateContent, virtualItem));
+                if (element) {
+                    element.setAttribute(VIRTUAL_LIST_KEY, `${virtualItem.name}`);
+                    currentVisibleItems.push(element);
+                }
+            }
+        }
+    }
+    return currentVisibleItems;
+};
+//# sourceMappingURL=nile-virtual-scroll.utils.js.map

package/dist/src/nile-virtual-scroll/nile-virtual-scroll.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-virtual-scroll.utils.js","sourceRoot":"","sources":["../../../src/nile-virtual-scroll/nile-virtual-scroll.utils.ts"],"names":[],"mappings":"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","sourcesContent":["interface ScrollParams {\n  currentScrollTop: number;\n  itemHeight: number;\n  height: number;\n  items: any[];\n  bufferSize: number;\n}\n\ninterface GetVisibleItemsParams {\n  startIndex: number;\n  endIndex: number;\n  items: any[];\n  templateContent: any;\n}\n\nexport const VIRTUAL_LIST_KEY = 'data-itemValue';\n\nexport const stringToDOM = (htmlString: string) => {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(htmlString, 'text/html');\n  return doc.body.firstChild; // Returns the first element\n};\n\nexport const interpolateString = (template: string, item: any): string => {\n  return new Function('item', `return \\`${template}\\`;`)(item);\n};\n\nexport const isHTMLElement = (obj: any) => {\n  return obj instanceof HTMLElement;\n};\n\nexport const getStartAndEndIndices = ({\n  currentScrollTop,\n  itemHeight,\n  height,\n  items,\n  bufferSize,\n}: ScrollParams): { startIndex: number; endIndex: number } => {\n  let startIndex = Math.floor(currentScrollTop / itemHeight);\n  let endIndex =\n    startIndex +\n    Math.min(Math.ceil(height / itemHeight), items.length) +\n    Math.floor((bufferSize * 2) / itemHeight);\n\n  if (startIndex < 0) {\n    startIndex = 0;\n  }\n\n  if (endIndex >= items.length) {\n    endIndex = items.length - 1;\n  }\n\n  return { startIndex, endIndex };\n};\n\nexport const getVisibleItems = ({\n  startIndex,\n  endIndex,\n  items,\n  templateContent,\n}: GetVisibleItemsParams): HTMLElement[] => {\n  const currentVisibleItems: HTMLElement[] = [];\n  let currentVisibleIndices = Array.from(\n    { length: endIndex - startIndex + 1 },\n    (_, index) => startIndex + index\n  );\n\n  for(let visibleIndex of currentVisibleIndices) {\n    const virtualItem = items[visibleIndex];\n    if (isHTMLElement(virtualItem)) {\n      if (!currentVisibleItems.includes(virtualItem)) {\n        currentVisibleItems.push(virtualItem);\n      }\n    } else {\n      if(currentVisibleIndices.includes(virtualItem.index)) {\n        let element = stringToDOM(\n          interpolateString(templateContent, virtualItem)\n        ) as HTMLElement;\n        if (element) {\n          element.setAttribute(VIRTUAL_LIST_KEY, `${virtualItem.name}`);\n          currentVisibleItems.push(element);\n        }\n      }\n    }\n  }\n\n  return currentVisibleItems;\n};\n"]}

package/dist/src/nile-virtual-select/event-handlers.d.ts

@@ -0,0 +1,19 @@
+import type { NileVirtualSelect } from './nile-virtual-select';
+export declare class SelectEventHandlers {
+    private select;
+    constructor(select: NileVirtualSelect);
+    setupEventHandlers(): void;
+    addOpenListeners(): void;
+    removeOpenListeners(): void;
+    removeEventHandlers(): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    handleDocumentFocusIn(event: FocusEvent): void;
+    handleDocumentKeyDown(event: KeyboardEvent): void;
+    handleDocumentMouseDown(event: MouseEvent): void;
+    handleLabelClick(): void;
+    handleComboboxMouseDown(event: MouseEvent): void;
+    handleComboboxKeyDown(event: KeyboardEvent): void;
+    handleSearchFocus(): void;
+    handleSearchBlur(): void;
+}