@lynx-js/web-elements 0.2.4

package/dist/ScrollView/ScrollAttributes.d.ts

@@ -0,0 +1,8 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { ScrollView } from './ScrollView.js';
+export declare class ScrollAttributes implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: ScrollView);
+    dispose(): void;
+}

package/dist/ScrollView/ScrollAttributes.js

@@ -0,0 +1,83 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let ScrollAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleInitialScrollOffset_decorators;
+    let _private_handleInitialScrollOffset_descriptor;
+    let _private_handleInitialScrollIndex_decorators;
+    let _private_handleInitialScrollIndex_descriptor;
+    return class ScrollAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('nitial-scroll-offset', false)];
+            _private_handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-index', false)];
+            __esDecorate(this, _private_handleInitialScrollOffset_descriptor = { value: __setFunctionName(function (newVal, _, attributeName) {
+                    if (newVal) {
+                        const scrollValue = parseFloat(newVal);
+                        const scrollOrientation = this.#dom.getAttribute('scroll-orientation');
+                        const scrollY = this.#dom.getAttribute('scroll-y');
+                        const scrollX = this.#dom.getAttribute('scroll-x');
+                        const topScrollDistance = (attributeName === 'scroll-top'
+                            || attributeName === 'initial-scroll-offset')
+                            && (scrollY === ''
+                                || scrollY === 'true'
+                                || scrollOrientation === 'vertical'
+                                || scrollOrientation === 'both');
+                        const leftScrollDistance = (attributeName === 'scroll-left'
+                            || attributeName === 'initial-scroll-offset')
+                            && (scrollX === ''
+                                || scrollX === 'true'
+                                || scrollOrientation === 'vertical'
+                                || scrollOrientation === 'both');
+                        requestAnimationFrame(() => {
+                            if (topScrollDistance) {
+                                this.#dom.scrollTo(0, scrollValue);
+                            }
+                            if (leftScrollDistance) {
+                                this.#dom.scrollLeft = scrollValue;
+                            }
+                        });
+                    }
+                }, "#handleInitialScrollOffset") }, _private_handleInitialScrollOffset_decorators, { kind: "method", name: "#handleInitialScrollOffset", static: false, private: true, access: { has: obj => #handleInitialScrollOffset in obj, get: obj => obj.#handleInitialScrollOffset }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleInitialScrollIndex_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal) {
+                        const scrollValue = parseFloat(newVal);
+                        const childrenElement = this.#dom.children.item(scrollValue);
+                        if (childrenElement && childrenElement instanceof HTMLElement) {
+                            const scrollX = !!this.#dom.getAttribute('scroll-x');
+                            requestAnimationFrame(() => {
+                                if (scrollX) {
+                                    this.#dom.scrollLeft = childrenElement.offsetLeft;
+                                }
+                                else {
+                                    this.#dom.scrollTop = childrenElement.offsetTop;
+                                }
+                            });
+                        }
+                    }
+                }, "#handleInitialScrollIndex") }, _private_handleInitialScrollIndex_decorators, { kind: "method", name: "#handleInitialScrollIndex", static: false, private: true, access: { has: obj => #handleInitialScrollIndex in obj, get: obj => obj.#handleInitialScrollIndex }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        static observedAttributes = [
+            'scroll-top',
+            'scroll-left',
+            'initial-scroll-offset',
+            'scroll-to-index',
+            'initial-scroll-index',
+        ];
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        get #handleInitialScrollOffset() { return _private_handleInitialScrollOffset_descriptor.value; }
+        get #handleInitialScrollIndex() { return _private_handleInitialScrollIndex_descriptor.value; }
+        dispose() { }
+    };
+})();
+export { ScrollAttributes };
+//# sourceMappingURL=ScrollAttributes.js.map

package/dist/ScrollView/ScrollIntoView.d.ts

@@ -0,0 +1,9 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { ScrollView } from './ScrollView.js';
+export declare class ScrollIntoView implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
+    #private;
+    static eventName: "__scrollIntoView";
+    static observedAttributes: never[];
+    constructor(dom: ScrollView);
+    dispose(): void;
+}

package/dist/ScrollView/ScrollIntoView.js

@@ -0,0 +1,71 @@
+export class ScrollIntoView {
+    static eventName = '__scrollIntoView';
+    static observedAttributes = [];
+    #dom;
+    #handleScrollIntoView = ((event) => {
+        event.stopPropagation();
+        const compusedPath = event
+            .composedPath()
+            .filter((e) => e instanceof HTMLElement);
+        const eventPath = [];
+        const scrollContainer = this.#dom;
+        for (const target of compusedPath) {
+            if (target === scrollContainer)
+                break;
+            eventPath.push(target);
+        }
+        const scrollOrientation = this.#dom.getAttribute('scroll-orientation');
+        const scrollX = this.#dom.getAttribute('scroll-x') !== null
+            || scrollOrientation === 'both'
+            || scrollOrientation === 'horizontal';
+        const scrollY = this.#dom.getAttribute('scroll-y') !== null
+            || scrollOrientation === 'both'
+            || scrollOrientation === 'vertical';
+        let top = 0, left = 0;
+        for (const { offsetTop, offsetLeft } of eventPath) {
+            if (scrollX)
+                left += offsetLeft;
+            if (scrollY)
+                top += offsetTop;
+        }
+        if (scrollX) {
+            switch (event.detail.inline) {
+                case 'center':
+                    left += (event.target.clientWidth
+                        - this.#dom.clientWidth)
+                        / 2;
+                    break;
+                case 'end':
+                    left += event.target.clientWidth
+                        - this.#dom.clientWidth;
+                    break;
+            }
+        }
+        if (scrollY) {
+            switch (event.detail.block) {
+                case 'center':
+                    top += (event.target.clientHeight
+                        - this.#dom.clientHeight)
+                        / 2;
+                    break;
+                case 'end':
+                    top += event.target.clientHeight
+                        - this.#dom.clientHeight;
+                    break;
+            }
+        }
+        scrollContainer.scrollTo({
+            behavior: event.detail.behavior === 'smooth' ? 'smooth' : 'instant',
+            left,
+            top,
+        });
+    });
+    constructor(dom) {
+        this.#dom = dom;
+        this.#dom.addEventListener(ScrollIntoView.eventName, this.#handleScrollIntoView, { passive: false });
+    }
+    dispose() {
+        this.#dom.removeEventListener(ScrollIntoView.eventName, this.#handleScrollIntoView);
+    }
+}
+//# sourceMappingURL=ScrollIntoView.js.map

package/dist/ScrollView/ScrollView.d.ts

@@ -0,0 +1,31 @@
+import { scrollContainerDom } from '../common/constants.js';
+export declare class ScrollView extends HTMLElement {
+    #private;
+    static readonly notToFilterFalseAttributes: Set<string>;
+    static readonly scrollInterval = 100;
+    scrollTo(options: {
+        /**
+         * @description The offset of the content
+         * @defaultValue 0
+         */
+        offset?: `${number}px` | `${number}rpx` | `${number}ppx` | number;
+        /**
+         * @description target node
+         */
+        index: number;
+        smooth?: boolean;
+    }): void;
+    scrollTo(options?: ScrollToOptions | undefined): void;
+    scrollTo(x: number, y: number): void;
+    autoScroll(options: {
+        /**
+         * @description scrolling speed
+         */
+        rate: `${number}px` | number;
+        /**
+         * @description could be stop by this parameter
+         */
+        start: boolean;
+    }): void;
+    get [scrollContainerDom](): this;
+}

package/dist/ScrollView/ScrollView.js

@@ -0,0 +1,185 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { LynxExposure } from '../common/Exposure.js';
+import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
+import { ScrollAttributes } from './ScrollAttributes.js';
+import { ScrollViewEvents } from './ScrollViewEvents.js';
+import { ScrollIntoView } from './ScrollIntoView.js';
+import { Component, html } from '@lynx-js/web-elements-reactive';
+import { scrollContainerDom } from '../common/constants.js';
+let ScrollView = (() => {
+    let _classDecorators = [Component('scroll-view', [
+            LynxExposure,
+            ScrollAttributes,
+            FadeEdgeLengthAttribute,
+            ScrollViewEvents,
+            ScrollIntoView,
+        ], html ` <style>
+      .placeholder-dom {
+        display: none;
+        flex: 0 0 0;
+        align-self: stretch;
+        min-height: 0;
+        min-width: 0;
+      }
+      .mask {
+        z-index: 1;
+        position: sticky;
+      }
+      .observer-container {
+        flex-direction: inherit;
+        overflow: visible;
+      }
+      .observer {
+        display: flex;
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
+
+      @keyframes topFading {
+        0% {
+          box-shadow: transparent 0px 0px 0px 0px;
+        }
+        5% {
+          box-shadow: var(--scroll-view-bg-color) 0px 0px
+            var(--scroll-view-fading-edge-length)
+            var(--scroll-view-fading-edge-length);
+        }
+        100% {
+          box-shadow: var(--scroll-view-bg-color) 0px 0px
+            var(--scroll-view-fading-edge-length)
+            var(--scroll-view-fading-edge-length);
+        }
+      }
+      @keyframes botFading {
+        0% {
+          box-shadow: var(--scroll-view-bg-color) 0px 0px
+            var(--scroll-view-fading-edge-length)
+            var(--scroll-view-fading-edge-length);
+        }
+        95% {
+          box-shadow: var(--scroll-view-bg-color) 0px 0px
+            var(--scroll-view-fading-edge-length)
+            var(--scroll-view-fading-edge-length);
+        }
+        100% {
+          box-shadow: transparent 0px 0px 0px 0px;
+        }
+      }
+    </style>
+      <div
+        class="mask placeholder-dom"
+        id="top-fade-mask"
+        part="top-fade-mask"
+      ></div>
+      <div
+        class="observer-container placeholder-dom"
+        part="upper-threshold-observer"
+      >
+        <div
+          class="observer placeholder-dom"
+          id="upper-threshold-observer"
+        ></div>
+      </div>
+      <slot></slot>
+      <div
+        class="observer-container placeholder-dom"
+        part="lower-threshold-observer"
+      >
+        <div
+          class="observer placeholder-dom"
+          id="lower-threshold-observer"
+        ></div>
+      </div>
+      <div
+        class="mask placeholder-dom"
+        id="bot-fade-mask"
+        part="bot-fade-mask"
+      ></div>`)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var ScrollView = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ScrollView = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set(['enable-scroll']);
+        static scrollInterval = 100;
+        #autoScrollTimer;
+        scrollTo(...args) {
+            let offset;
+            if (typeof args[0].offset === 'string') {
+                const offsetValue = parseFloat(args[0].offset);
+                offset = { left: offsetValue, top: offsetValue };
+            }
+            else if (typeof args[0].offset === 'number') {
+                offset = { left: args[0].offset, top: args[0].offset };
+            }
+            if (typeof args[0].index === 'number') {
+                const index = args[0].index;
+                if (index === 0) {
+                    this.scrollTop = 0;
+                    this.scrollLeft = 0;
+                }
+                else if (index > 0 && index < this.childElementCount) {
+                    const targetKid = this.children.item(index);
+                    if (targetKid instanceof HTMLElement) {
+                        if (offset) {
+                            offset = {
+                                left: targetKid.offsetLeft + offset.left,
+                                top: targetKid.offsetTop + offset.top,
+                            };
+                        }
+                        else {
+                            offset = { left: targetKid.offsetLeft, top: targetKid.offsetTop };
+                        }
+                    }
+                }
+            }
+            if (offset) {
+                this.scrollTo({
+                    ...offset,
+                    behavior: args[0].smooth ? 'smooth' : 'auto',
+                });
+            }
+            else {
+                super.scrollTo(...args);
+            }
+        }
+        autoScroll(options) {
+            clearInterval(this.#autoScrollTimer);
+            if (options.start) {
+                const rate = typeof options.rate === 'number'
+                    ? options.rate
+                    : parseFloat(options.rate);
+                const tickDistance = (rate * ScrollView.scrollInterval) / 1000;
+                this.#autoScrollTimer = setInterval((dom) => {
+                    dom.scrollBy({
+                        left: tickDistance,
+                        top: tickDistance,
+                        behavior: 'smooth',
+                    });
+                }, ScrollView.scrollInterval, this);
+            }
+        }
+        get [scrollContainerDom]() {
+            return this;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return ScrollView = _classThis;
+})();
+export { ScrollView };
+//# sourceMappingURL=ScrollView.js.map

package/dist/ScrollView/ScrollViewEvents.d.ts

@@ -0,0 +1,9 @@
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { ScrollView } from './ScrollView.js';
+export declare class ScrollViewEvents implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
+    #private;
+    constructor(dom: ScrollView);
+    static observedAttributes: string[];
+    connectedCallback?(): void;
+    dispose(): void;
+}

package/dist/ScrollView/ScrollViewEvents.js

@@ -0,0 +1,146 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindToStyle, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
+import { useScrollEnd } from '../common/constants.js';
+let ScrollViewEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_updateUpperIntersectionObserver_decorators;
+    let _private_updateUpperIntersectionObserver_initializers = [];
+    let _private_updateUpperIntersectionObserver_extraInitializers = [];
+    let _private_updateLowerIntersectionObserver_decorators;
+    let _private_updateLowerIntersectionObserver_initializers = [];
+    let _private_updateLowerIntersectionObserver_extraInitializers = [];
+    let _private_updateUpperThreshold_decorators;
+    let _private_updateUpperThreshold_initializers = [];
+    let _private_updateUpperThreshold_extraInitializers = [];
+    let _private_updateLowerThreshold_decorators;
+    let _private_updateLowerThreshold_initializers = [];
+    let _private_updateLowerThreshold_extraInitializers = [];
+    let _private_handleScrollEventsSwitches_decorators;
+    let _private_handleScrollEventsSwitches_descriptor;
+    return class ScrollViewEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_updateUpperIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltoupper-event', true)];
+            _private_updateLowerIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltolower-event', true)];
+            _private_updateUpperThreshold_decorators = [registerAttributeHandler('upper-threshold', true)];
+            _private_updateLowerThreshold_decorators = [registerAttributeHandler('lower-threshold', true)];
+            _private_handleScrollEventsSwitches_decorators = [registerAttributeHandler('x-enable-scroll-event', true), registerAttributeHandler('x-enable-scrollend-event', true)];
+            __esDecorate(this, _private_handleScrollEventsSwitches_descriptor = { value: __setFunctionName(function () {
+                    const scroll = this.#dom.getAttribute('x-enable-scroll-event');
+                    this.#enableScrollEnd =
+                        this.#dom.getAttribute('x-enable-scrollend-event') !== null;
+                    if (scroll !== null || this.#enableScrollEnd) {
+                        this.#getScrollContainer().addEventListener('scroll', this.#handleScroll);
+                        this.#getScrollContainer().addEventListener('scrollend', this.#handleScrollEnd);
+                        this.#dom.addEventListener('scroll', this.#handleScroll);
+                        this.#dom.addEventListener('scrollend', this.#handleScrollEnd);
+                        this.#prevX = 0;
+                        this.#prevY = 0;
+                    }
+                    else {
+                        this.#dom.removeEventListener('scroll', this.#handleScroll);
+                        this.#dom.removeEventListener('scrollend', this.#handleScrollEnd);
+                    }
+                }, "#handleScrollEventsSwitches") }, _private_handleScrollEventsSwitches_decorators, { kind: "method", name: "#handleScrollEventsSwitches", static: false, private: true, access: { has: obj => #handleScrollEventsSwitches in obj, get: obj => obj.#handleScrollEventsSwitches }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _private_updateUpperIntersectionObserver_decorators, { kind: "field", name: "#updateUpperIntersectionObserver", static: false, private: true, access: { has: obj => #updateUpperIntersectionObserver in obj, get: obj => obj.#updateUpperIntersectionObserver, set: (obj, value) => { obj.#updateUpperIntersectionObserver = value; } }, metadata: _metadata }, _private_updateUpperIntersectionObserver_initializers, _private_updateUpperIntersectionObserver_extraInitializers);
+            __esDecorate(null, null, _private_updateLowerIntersectionObserver_decorators, { kind: "field", name: "#updateLowerIntersectionObserver", static: false, private: true, access: { has: obj => #updateLowerIntersectionObserver in obj, get: obj => obj.#updateLowerIntersectionObserver, set: (obj, value) => { obj.#updateLowerIntersectionObserver = value; } }, metadata: _metadata }, _private_updateLowerIntersectionObserver_initializers, _private_updateLowerIntersectionObserver_extraInitializers);
+            __esDecorate(null, null, _private_updateUpperThreshold_decorators, { kind: "field", name: "#updateUpperThreshold", static: false, private: true, access: { has: obj => #updateUpperThreshold in obj, get: obj => obj.#updateUpperThreshold, set: (obj, value) => { obj.#updateUpperThreshold = value; } }, metadata: _metadata }, _private_updateUpperThreshold_initializers, _private_updateUpperThreshold_extraInitializers);
+            __esDecorate(null, null, _private_updateLowerThreshold_decorators, { kind: "field", name: "#updateLowerThreshold", static: false, private: true, access: { has: obj => #updateLowerThreshold in obj, get: obj => obj.#updateLowerThreshold, set: (obj, value) => { obj.#updateLowerThreshold = value; } }, metadata: _metadata }, _private_updateLowerThreshold_initializers, _private_updateLowerThreshold_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #enableScrollEnd = false;
+        #debounceScrollForMockingScrollEnd;
+        #prevX = 0;
+        #prevY = 0;
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        #getScrollContainer = () => this.#dom;
+        #getUpperThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#upper-threshold-observer');
+        #getLowerThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#lower-threshold-observer');
+        #handleObserver = (entries) => {
+            const { isIntersecting, target } = entries[0];
+            const id = target.id;
+            if (isIntersecting) {
+                if (id === 'upper-threshold-observer') {
+                    this.#dom.dispatchEvent(new CustomEvent('scrolltoupper', {
+                        ...commonComponentEventSetting,
+                        detail: this.#getScrollDetail(),
+                    }));
+                }
+                else if (id === 'lower-threshold-observer') {
+                    this.#dom.dispatchEvent(new CustomEvent('scrolltolower', {
+                        ...commonComponentEventSetting,
+                        detail: this.#getScrollDetail(),
+                    }));
+                }
+            }
+        };
+        static observedAttributes = [
+            'x-enable-scrolltoupper-event',
+            'x-enable-scrolltolower-event',
+            'x-enable-scroll-event',
+            'x-enable-scrollend-event',
+            'upper-threshold',
+            'lower-threshold',
+        ];
+        #updateUpperIntersectionObserver = __runInitializers(this, _private_updateUpperIntersectionObserver_initializers, bindToIntersectionObserver(this.#getScrollContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
+        #updateLowerIntersectionObserver = (__runInitializers(this, _private_updateUpperIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateLowerIntersectionObserver_initializers, bindToIntersectionObserver(this.#getScrollContainer, this.#getLowerThresholdObserverDom, this.#handleObserver)));
+        #updateUpperThreshold = (__runInitializers(this, _private_updateLowerIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateUpperThreshold_initializers, bindToStyle(this.#getUpperThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
+        #updateLowerThreshold = (__runInitializers(this, _private_updateUpperThreshold_extraInitializers), __runInitializers(this, _private_updateLowerThreshold_initializers, bindToStyle(this.#getLowerThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
+        #getScrollDetail() {
+            let { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
+                .#getScrollContainer();
+            if (scrollTop === 0) {
+                scrollTop -= this.#dom.scrollHeight / 2 - this.#dom.scrollTop;
+            }
+            if (scrollLeft === 0) {
+                scrollLeft -= this.#dom.scrollWidth / 2 - this.#dom.scrollLeft;
+            }
+            const detail = {
+                scrollTop,
+                scrollLeft,
+                scrollHeight,
+                scrollWidth,
+                isDragging: false,
+                deltaX: scrollLeft - this.#prevX,
+                deltaY: scrollTop - this.#prevY,
+            };
+            this.#prevX = scrollLeft;
+            this.#prevY = scrollTop;
+            return detail;
+        }
+        #handleScroll = (__runInitializers(this, _private_updateLowerThreshold_extraInitializers), () => {
+            if (this.#enableScrollEnd && !useScrollEnd) {
+                // debounce
+                clearTimeout(this.#debounceScrollForMockingScrollEnd);
+                this.#debounceScrollForMockingScrollEnd = setTimeout(() => {
+                    this.#handleScrollEnd();
+                }, 100);
+            }
+            this.#dom.dispatchEvent(new CustomEvent('lynxscroll', {
+                ...commonComponentEventSetting,
+                detail: this.#getScrollDetail(),
+            }));
+        });
+        #handleScrollEnd = () => {
+            this.#dom.dispatchEvent(new CustomEvent('lynxscrollend', {
+                ...commonComponentEventSetting,
+                detail: this.#getScrollDetail(),
+            }));
+        };
+        get #handleScrollEventsSwitches() { return _private_handleScrollEventsSwitches_descriptor.value; }
+        connectedCallback() { }
+        dispose() { }
+    };
+})();
+export { ScrollViewEvents };
+//# sourceMappingURL=ScrollViewEvents.js.map

package/dist/ScrollView/index.d.ts

@@ -0,0 +1 @@
+export { ScrollView } from './ScrollView.js';

package/dist/ScrollView/index.js

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

package/dist/XAudioTT/XAudioAttribute.d.ts

@@ -0,0 +1,7 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { XAudioTT } from './XAudioTT.js';
+export declare class XAudioAttribute implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: XAudioTT);
+}

package/dist/XAudioTT/XAudioAttribute.js

@@ -0,0 +1,93 @@
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { bindToAttribute, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { XAudioErrorCode, xAudioBlob, xAudioSrc } from './utils.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+let XAudioAttribute = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleSrc_decorators;
+    let _private_handleSrc_descriptor;
+    let _private_handleLoop_decorators;
+    let _private_handleLoop_initializers = [];
+    let _private_handleLoop_extraInitializers = [];
+    let _private_handlePauseOnHide_decorators;
+    let _private_handlePauseOnHide_descriptor;
+    return class XAudioAttribute {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
+            _private_handleLoop_decorators = [registerAttributeHandler('loop', true)];
+            _private_handlePauseOnHide_decorators = [registerAttributeHandler('pause-on-hide', true)];
+            __esDecorate(this, _private_handleSrc_descriptor = { value: __setFunctionName(function (newValue) {
+                    let parsedSrc;
+                    try {
+                        parsedSrc = JSON.parse(newValue || '') || {};
+                    }
+                    catch (error) {
+                        console.error(`JSON.parse src error: ${error}`);
+                        parsedSrc = {};
+                    }
+                    if (newValue === null) {
+                        this.#dom.dispatchEvent(new CustomEvent('error', {
+                            ...commonComponentEventSetting,
+                            detail: {
+                                code: XAudioErrorCode.SrcError,
+                                msg: '',
+                                from: 'res loader',
+                                currentSrcID: this.#dom[xAudioSrc]?.id,
+                            },
+                        }));
+                    }
+                    else if (parsedSrc?.id === undefined || parsedSrc?.play_url === undefined) {
+                        this.#dom.dispatchEvent(new CustomEvent('error', {
+                            ...commonComponentEventSetting,
+                            detail: {
+                                code: XAudioErrorCode.SrcJsonError,
+                                msg: '',
+                                from: 'res loader',
+                                currentSrcID: this.#dom[xAudioSrc]?.id,
+                            },
+                        }));
+                    }
+                    this.#dom[xAudioSrc] = parsedSrc;
+                    this.#dom[xAudioBlob] = undefined;
+                    this.#dom.stop();
+                }, "#handleSrc") }, _private_handleSrc_decorators, { kind: "method", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handlePauseOnHide_descriptor = { value: __setFunctionName(function (newValue) {
+                    if (newValue !== null) {
+                        document.addEventListener('visibilitychange', this.#documentVisibilitychange, { passive: true });
+                    }
+                    else {
+                        document.removeEventListener('visibilitychange', this.#documentVisibilitychange);
+                    }
+                }, "#handlePauseOnHide") }, _private_handlePauseOnHide_decorators, { kind: "method", name: "#handlePauseOnHide", static: false, private: true, access: { has: obj => #handlePauseOnHide in obj, get: obj => obj.#handlePauseOnHide }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _private_handleLoop_decorators, { kind: "field", name: "#handleLoop", static: false, private: true, access: { has: obj => #handleLoop in obj, get: obj => obj.#handleLoop, set: (obj, value) => { obj.#handleLoop = value; } }, metadata: _metadata }, _private_handleLoop_initializers, _private_handleLoop_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'src',
+            'loop',
+            'pause-on-hide',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getAudioElement = genDomGetter(() => this.#dom.shadowRoot, '#audio');
+        #setAudioSrc = bindToAttribute(this.#getAudioElement, 'src');
+        get #handleSrc() { return _private_handleSrc_descriptor.value; }
+        #handleLoop = __runInitializers(this, _private_handleLoop_initializers, bindToAttribute(this.#getAudioElement, 'loop'));
+        #documentVisibilitychange = (__runInitializers(this, _private_handleLoop_extraInitializers), () => {
+            if (document.visibilityState === 'hidden') {
+                this.#dom.pause();
+            }
+        });
+        get #handlePauseOnHide() { return _private_handlePauseOnHide_descriptor.value; }
+        constructor(dom) {
+            this.#dom = dom;
+        }
+    };
+})();
+export { XAudioAttribute };
+//# sourceMappingURL=XAudioAttribute.js.map