@everymatrix/lottery-hakuna-ticket-history 0.0.1

package/dist/collection/components/lottery-infinite-scroll/lottery-infinite-scroll.js

@@ -0,0 +1,556 @@
+import { h } from "@stencil/core";
+export class LotteryInfiniteScroll {
+    constructor() {
+        /** Y-coordinate of the touch start event. */
+        this.startY = 0;
+        /** Indicates if a touch event is currently active for pull-to-refresh. */
+        this.isTouching = false;
+        // --- Virtual Scroll Core Logic ---
+        this.onScroll = () => {
+            if (this.enableVirtualScroll) {
+                if (this.rafId)
+                    cancelAnimationFrame(this.rafId);
+                this.rafId = requestAnimationFrame(() => this.calculateVisibleRange());
+            }
+        };
+        // --- Pull to Refresh Logic (Touch handling) ---
+        this.handleTouchStart = (e) => {
+            // Only allow pull-down when scrollbar is at the top
+            if (this.scrollContainer.scrollTop <= 0) {
+                this.startY = e.touches[0].clientY;
+                this.isTouching = true;
+            }
+        };
+        this.handleTouchMove = (e) => {
+            if (!this.isTouching || this.isRefreshing)
+                return;
+            const currentY = e.touches[0].clientY;
+            const distance = currentY - this.startY;
+            // Only process pull-down and when scrollbar is at the top
+            if (distance > 0 && this.scrollContainer.scrollTop <= 0) {
+                // Prevent default scroll behavior (prevents entire page from being dragged)
+                if (e.cancelable)
+                    e.preventDefault();
+                // Add damping effect (harder to pull further)
+                this.pullDistance = Math.pow(distance, 0.8);
+            }
+            else {
+                // If user pushes up, or already scrolled, reset
+                this.isTouching = false;
+                this.pullDistance = 0;
+            }
+        };
+        this.handleTouchEnd = () => {
+            this.isTouching = false;
+            if (this.pullDistance >= this.pullTriggerDistance) {
+                // Trigger refresh
+                this.pullDistance = this.pullTriggerDistance; // Stay in loading area
+                this.refresh.emit();
+            }
+            else {
+                // Not reached threshold, bounce back
+                this.pullDistance = 0;
+            }
+        };
+        this.items = [];
+        this.hasMore = false;
+        this.isLoading = false;
+        this.isRefreshing = false;
+        this.threshold = '0px 0px 200px 0px';
+        this.estimatedItemHeight = 200;
+        this.containerHeight = '100%';
+        this.enableVirtualScroll = false;
+        this.renderItem = undefined;
+        this.renderSkeleton = undefined;
+        this.skeletonCount = 6;
+        this.pullTriggerDistance = 60;
+        this.minItemWidth = 340;
+        this.gridGap = 10;
+        this.visibleStartIndex = 0;
+        this.visibleEndIndex = 10;
+        this.pullDistance = 0;
+        this.columns = 1;
+    }
+    componentDidLoad() {
+        if (this.enableVirtualScroll) {
+            // Listen for container size changes, recalculate columns
+            this.initResizeObserver();
+            // Initial calculation
+            this.calculateMetrics();
+        }
+        // Initialize observer on component load
+        this.initObserver();
+    }
+    componentDidUpdate() {
+        if (this.hasMore && !this.isLoading) {
+            this.initObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.disconnectObserver();
+        if (this.resizeObserver)
+            this.resizeObserver.disconnect();
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+    }
+    initResizeObserver() {
+        if (!window.ResizeObserver || !this.scrollContainer)
+            return;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                // When width changes, recalculate the number of columns
+                const width = entry.contentRect.width;
+                this.recalcColumns(width);
+                this.calculateVisibleRange();
+            }
+        });
+        this.resizeObserver.observe(this.scrollContainer);
+    }
+    recalcColumns(containerWidth) {
+        if (!this.enableVirtualScroll)
+            return;
+        // Calculation logic must be consistent with CSS grid-template-columns: repeat(auto-fill, ...)
+        // Considering the gap
+        const effectiveWidth = containerWidth + this.gridGap;
+        const itemOccupancy = this.minItemWidth + this.gridGap;
+        // At least 1 column
+        const newColumns = Math.max(1, Math.floor(effectiveWidth / itemOccupancy));
+        if (this.columns !== newColumns) {
+            this.columns = newColumns;
+        }
+    }
+    // --- Watchers ---
+    handleItemsChange() {
+        if (this.enableVirtualScroll) {
+            this.calculateVisibleRange();
+        }
+    }
+    handleRefreshingChange(newValue) {
+        if (!newValue) {
+            this.pullDistance = 0;
+        }
+    }
+    // --- Observer Logic ---
+    disconnectObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    initObserver() {
+        this.disconnectObserver();
+        if (!this.hasMore || this.isLoading || !this.sentinel)
+            return;
+        const options = {
+            root: this.scrollContainer === this.el.shadowRoot.querySelector('.lottery-infinite-scroll__container')
+                ? this.scrollContainer
+                : null,
+            rootMargin: this.threshold,
+            threshold: 0.1
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            // When scrolled to bottom and not currently loading
+            if (entries[0].isIntersecting && this.hasMore && !this.isLoading) {
+                this.loadMore.emit();
+            }
+        }, options);
+        this.observer.observe(this.sentinel);
+    }
+    calculateMetrics() {
+        if (!this.scrollContainer)
+            return;
+        this.recalcColumns(this.scrollContainer.clientWidth);
+        this.calculateVisibleRange();
+    }
+    calculateVisibleRange() {
+        if (!this.scrollContainer || !this.enableVirtualScroll)
+            return;
+        const scrollTop = this.scrollContainer.scrollTop;
+        const viewportHeight = this.scrollContainer.clientHeight;
+        // 1. Calculate the current "Row" index
+        // We assume each row has a height of estimatedItemHeight (although it may differ in reality, this is sufficient for visible window calculation)
+        const startRow = Math.floor(scrollTop / this.estimatedItemHeight);
+        // 2. Buffer row count
+        const bufferRows = 3;
+        // 3. Calculate visible rows
+        const visibleRows = Math.ceil(viewportHeight / this.estimatedItemHeight);
+        // 4. Calculate start and end rows for rendering
+        const renderStartRow = Math.max(0, startRow - bufferRows);
+        const renderEndRow = startRow + visibleRows + bufferRows;
+        // 5. Convert to Item indices (Row * Columns)
+        const startIndex = renderStartRow * this.columns;
+        const endIndex = Math.min(this.items.length, renderEndRow * this.columns);
+        if (this.visibleStartIndex !== startIndex || this.visibleEndIndex !== endIndex) {
+            this.visibleStartIndex = startIndex;
+            this.visibleEndIndex = endIndex;
+        }
+    }
+    render() {
+        const { items, visibleStartIndex, visibleEndIndex, estimatedItemHeight, columns, gridGap, minItemWidth } = this;
+        // Check if we should show skeleton: items are empty, loading is true, and renderSkeleton is provided
+        const showSkeleton = items.length === 0 && !!this.renderSkeleton && this.isLoading;
+        // Virtual Scroll Calculations for Spacer
+        let paddingTop = 0;
+        let paddingBottom = 0;
+        let visibleItems = [];
+        if (this.enableVirtualScroll && !showSkeleton) {
+            const totalRows = Math.ceil(items.length / columns);
+            const startRow = Math.floor(visibleStartIndex / columns);
+            // Note: Here we calculate how many rows are actually rendered based on the number of slices, for calculating bottom padding.
+            const renderedCount = visibleEndIndex - visibleStartIndex;
+            const renderedRows = Math.ceil(renderedCount / columns);
+            // Top Spacer: Number of rows hidden at the top * Estimated height
+            paddingTop = startRow * estimatedItemHeight;
+            // Bottom Spacer: Total rows - (Top rows + Rendered rows) * Estimated height
+            // Ensure the total scroll height is roughly correct
+            paddingBottom = Math.max(0, (totalRows - startRow - renderedRows) * estimatedItemHeight);
+            visibleItems = items.slice(visibleStartIndex, visibleEndIndex);
+        }
+        else {
+            visibleItems = showSkeleton ? new Array(this.skeletonCount).fill(null) : items;
+        }
+        // Styles
+        const contentTransform = {
+            transform: `translateY(${this.pullDistance}px)`,
+            transition: this.isTouching ? 'none' : 'transform 0.3s ease-out'
+        };
+        // Grid Layout Style
+        const listStyle = {
+            display: 'grid',
+            // Responsive column width
+            gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}px, 1fr))`,
+            gap: `${gridGap}px`,
+            // Even with Flex/Grid, we don't need absolute positioning, use margin/padding for spacing
+            paddingTop: `${paddingTop}px`,
+            paddingBottom: `${paddingBottom}px`,
+            boxSizing: 'border-box'
+        };
+        return (h("div", { key: '366232c373082c1a825da935fd02039c3cef5653', class: "lottery-infinite-scroll__container", style: {
+                height: this.containerHeight,
+                overflowY: 'auto',
+                position: 'relative',
+                contain: 'strict' // Performance optimization
+            }, ref: (el) => (this.scrollContainer = el), onScroll: this.onScroll, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }, h("div", { key: '1dbe68c185299f989101ad2489319ebab82c44da', class: "ptr-indicator", style: Object.assign(Object.assign({}, contentTransform), { position: 'absolute', top: '0', left: '0', width: '100%', height: `${this.pullTriggerDistance}px`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: `-${this.pullTriggerDistance}px`, pointerEvents: 'none' }) }, this.isRefreshing ? (h("slot", { name: "refresh-loading" }, "Refreshing...")) : (h("slot", { name: "pull-hint" }, this.pullDistance > this.pullTriggerDistance ? 'Release' : 'Pull'))), h("div", { key: 'd058018d407dd0e003571e0c1259f837deb093be', class: "scroll-content-wrapper", style: contentTransform }, h("div", { key: '1041eb5548bc79c2a507477013e3e34f35e25c22', class: "list-content", style: listStyle }, visibleItems.map((item, i) => {
+            /* Pass the real index to renderItem */
+            const realIndex = this.enableVirtualScroll && !showSkeleton ? visibleStartIndex + i : i;
+            return (h("div", { key: realIndex, class: "list-item-wrapper" }, showSkeleton
+                ? this.renderSkeleton
+                    ? this.renderSkeleton(realIndex)
+                    : null
+                : this.renderItem
+                    ? this.renderItem(item, realIndex)
+                    : null));
+        })), (this.hasMore || (this.isLoading && !showSkeleton)) && (h("div", { key: '0af2a85096fc16e9071ec0363a4eb58753324247', class: "lottery-infinite-scroll__sentinel", ref: (el) => (this.sentinel = el), style: { height: '20px', display: 'flex', justifyContent: 'center' } }, this.isLoading ? h("slot", { name: "loading-more" }, "Loading...") : null)), !this.hasMore && !this.isLoading && items.length > 0 && (h("div", { key: 'e6e814a96727e2442137412c25ec09908b2f9015', class: "end-message", style: { textAlign: 'center', padding: '10px' } }, h("slot", { key: '02831150b863992dabd59ab01f7bbb23066877bf', name: "end-message" }, "No more data"))))));
+    }
+    static get is() { return "lottery-infinite-scroll"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-infinite-scroll.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-infinite-scroll.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of items to be displayed in the infinite scroll list."
+                },
+                "defaultValue": "[]"
+            },
+            "hasMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if there are more items to load. When false, no more `loadMore` events will be emitted."
+                },
+                "attribute": "has-more",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if new items are currently being loaded. Used to prevent multiple `loadMore` calls."
+                },
+                "attribute": "is-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isRefreshing": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the component is currently in a refreshing state (e.g., during pull-to-refresh)."
+                },
+                "attribute": "is-refreshing",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "threshold": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the intersection root margin for the IntersectionObserver.\nThis allows for pre-loading content before the sentinel becomes visible.\nE.g., '0px 0px 200px 0px' means the bottom margin is 200px."
+                },
+                "attribute": "threshold",
+                "reflect": false,
+                "defaultValue": "'0px 0px 200px 0px'"
+            },
+            "estimatedItemHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estimated height of each item.\nUsed in virtual scrolling to calculate the total scrollbar length.\nEven if actual heights vary, an average value is sufficient;\nCSS handles layout fluidly without overlap."
+                },
+                "attribute": "estimated-item-height",
+                "reflect": false,
+                "defaultValue": "200"
+            },
+            "containerHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Container height. If `enableVirtualScroll` is true,\nit is recommended to explicitly set the container height in CSS\nor pass this value."
+                },
+                "attribute": "container-height",
+                "reflect": false,
+                "defaultValue": "'100%'"
+            },
+            "enableVirtualScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables or disables virtual scrolling for performance optimization with large lists."
+                },
+                "attribute": "enable-virtual-scroll",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "renderItem": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: any, index: number) => any",
+                    "resolved": "(item: any, index: number) => any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render function"
+                }
+            },
+            "renderSkeleton": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(index: number) => any",
+                    "resolved": "(index: number) => any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render function for skeleton item"
+                }
+            },
+            "skeletonCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of skeleton items to show during initial load"
+                },
+                "attribute": "skeleton-count",
+                "reflect": false,
+                "defaultValue": "6"
+            },
+            "pullTriggerDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pull-to-refresh trigger distance"
+                },
+                "attribute": "pull-trigger-distance",
+                "reflect": false,
+                "defaultValue": "60"
+            },
+            "minItemWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid layout configuration: minimum column width\nUsed with CSS Grid to achieve responsiveness: repeat(auto-fill, minmax(minItemWidth, 1fr))"
+                },
+                "attribute": "min-item-width",
+                "reflect": false,
+                "defaultValue": "340"
+            },
+            "gridGap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid spacing (px)"
+                },
+                "attribute": "grid-gap",
+                "reflect": false,
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visibleStartIndex": {},
+            "visibleEndIndex": {},
+            "pullDistance": {},
+            "columns": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "loadMore",
+                "name": "loadMore",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user scrolls near the end of the list, indicating that more items should be loaded."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "refresh",
+                "name": "refresh",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the pull-to-refresh action is triggered by the user."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "handleItemsChange"
+            }, {
+                "propName": "isRefreshing",
+                "methodName": "handleRefreshingChange"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/lottery-hakuna-ticket-history';

package/dist/collection/models/index.js

@@ -0,0 +1,21 @@
+export var GameType;
+(function (GameType) {
+    GameType["Lottery"] = "Lottery";
+    GameType["PoolGame"] = "PoolGame";
+})(GameType || (GameType = {}));
+export var GameBettingObject;
+(function (GameBettingObject) {
+    GameBettingObject["Tipping"] = "HomeDrawAway";
+    GameBettingObject["Oddsbomben"] = "CorrectScore";
+})(GameBettingObject || (GameBettingObject = {}));
+export var TicketStatus;
+(function (TicketStatus) {
+    TicketStatus["Settled"] = "Settled";
+    TicketStatus["Purchased"] = "Purchased";
+    TicketStatus["Canceled"] = "Canceled";
+})(TicketStatus || (TicketStatus = {}));
+export var DrawResult;
+(function (DrawResult) {
+    DrawResult["WON"] = "Won";
+    DrawResult["LOST"] = "Lost";
+})(DrawResult || (DrawResult = {}));