@lynx-js/web-elements 0.2.4 → 0.4.0

package/dist/XList/XListEvents.js

@@ -9,178 +9,81 @@ import { commonComponentEventSetting } from '../common/commonEventInitConfigurat
 import { throttle } from '../common/throttle.js';
 import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
 import { useScrollEnd } from '../common/constants.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XListEvents = (() => {
     let _instanceExtraInitializers = [];
-    let _private_updateUpperIntersectionObserver_decorators;
-    let _private_updateUpperIntersectionObserver_descriptor;
-    let _private_updateLowerIntersectionObserver_decorators;
-    let _private_updateLowerIntersectionObserver_descriptor;
-    let _private_handleScrollEvents_decorators;
-    let _private_handleScrollEvents_descriptor;
-    let _private_updateUpperEdgeIntersectionObserver_decorators;
-    let _private_updateUpperEdgeIntersectionObserver_initializers = [];
-    let _private_updateUpperEdgeIntersectionObserver_extraInitializers = [];
-    let _private_updateLowerEdgeIntersectionObserver_decorators;
-    let _private_updateLowerEdgeIntersectionObserver_initializers = [];
-    let _private_updateLowerEdgeIntersectionObserver_extraInitializers = [];
+    let _private_updateEventSwitches_decorators;
+    let _private_updateEventSwitches_initializers = [];
+    let _private_updateEventSwitches_extraInitializers = [];
+    let _private_handleUpperThresholdItemCountChange_decorators;
+    let _private_handleUpperThresholdItemCountChange_descriptor;
+    let _private_updateScrollToLowerEventSwitches_decorators;
+    let _private_updateScrollToLowerEventSwitches_initializers = [];
+    let _private_updateScrollToLowerEventSwitches_extraInitializers = [];
+    let _private_handleLowerThresholdItemCountChange_decorators;
+    let _private_handleLowerThresholdItemCountChange_descriptor;
+    let _private_handleScrollEventsSwitches_decorators;
+    let _private_handleScrollEventsSwitches_initializers = [];
+    let _private_handleScrollEventsSwitches_extraInitializers = [];
+    let _private_handleScrollToUpperEdgeEventEnable_decorators;
+    let _private_handleScrollToUpperEdgeEventEnable_initializers = [];
+    let _private_handleScrollToUpperEdgeEventEnable_extraInitializers = [];
+    let _private_handleScrollToLowerEdgeEventEnable_decorators;
+    let _private_handleScrollToLowerEdgeEventEnable_initializers = [];
+    let _private_handleScrollToLowerEdgeEventEnable_extraInitializers = [];
     return class XListEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_updateUpperIntersectionObserver_decorators = [registerAttributeHandler('upper-threshold-item-count', true), registerAttributeHandler('x-enable-scrolltoupper-event', true)];
-            _private_updateLowerIntersectionObserver_decorators = [registerAttributeHandler('lower-threshold-item-count', true), registerAttributeHandler('x-enable-scrolltolower-event', true)];
-            _private_handleScrollEvents_decorators = [registerAttributeHandler('x-enable-scroll-event', true), registerAttributeHandler('scroll-event-throttle', true), registerAttributeHandler('x-enable-scrollend-event', true), registerAttributeHandler('x-enable-snap-event', true)];
-            _private_updateUpperEdgeIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltoupperedge-event', true)];
-            _private_updateLowerEdgeIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltoloweredge-event', true)];
-            __esDecorate(this, _private_updateUpperIntersectionObserver_descriptor = { value: __setFunctionName(function (newValue, oldValue, name) {
-                    const enableScrollToUpper = this.#dom.getAttribute('x-enable-scrolltoupper-event');
-                    if (enableScrollToUpper === null) {
-                        // if x-enable-scrolltoupper-event null, no need to handle upper-threshold-item-count
-                        if (this.#upperObserver) {
-                            this.#upperObserver.disconnect();
-                            this.#upperObserver = undefined;
-                        }
-                        if (this.#childrenObserver) {
-                            this.#childrenObserver.disconnect();
-                            this.#childrenObserver = undefined;
-                        }
-                        return;
-                    }
-                    if (!this.#upperObserver) {
-                        this.#upperObserver = new IntersectionObserver(this.#handleUpperObserver, {
-                            root: this.#getListContainer(),
-                        });
-                    }
-                    if (!this.#childrenObserver) {
-                        this.#childrenObserver = new MutationObserver(this.#handleChildrenObserver);
-                    }
-                    if (name === 'x-enable-scrolltoupper-event') {
-                        const upperThresholdItemCount = this.#dom.getAttribute('upper-threshold-item-count');
-                        const itemCount = upperThresholdItemCount !== null
-                            ? parseFloat(upperThresholdItemCount)
-                            : 0;
-                        const observerDom = itemCount === 0
-                            ? this.#getUpperThresholdObserverDom()
-                            : this.#dom.children[itemCount - 1];
-                        observerDom && this.#upperObserver.observe(observerDom);
-                        this.#childrenObserver.observe(this.#dom, {
-                            childList: true,
-                        });
-                    }
-                    if (name === 'upper-threshold-item-count') {
-                        const oldItemCount = oldValue !== null
-                            ? parseFloat(oldValue)
-                            : 0;
-                        const oldObserverDom = oldItemCount === 0
-                            ? this.#getUpperThresholdObserverDom()
-                            : this.#dom.children[oldItemCount - 1];
-                        oldObserverDom && this.#upperObserver.unobserve(oldObserverDom);
-                        const itemCount = newValue !== null
-                            ? parseFloat(newValue)
-                            : 0;
-                        const observerDom = itemCount === 0
-                            ? this.#getUpperThresholdObserverDom()
-                            : this.#dom.children[itemCount - 1];
-                        observerDom && this.#upperObserver.observe(observerDom);
-                    }
-                }, "#updateUpperIntersectionObserver") }, _private_updateUpperIntersectionObserver_decorators, { kind: "method", name: "#updateUpperIntersectionObserver", static: false, private: true, access: { has: obj => #updateUpperIntersectionObserver in obj, get: obj => obj.#updateUpperIntersectionObserver }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_updateLowerIntersectionObserver_descriptor = { value: __setFunctionName(function (newValue, oldValue, name) {
-                    const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
-                    if (enableScrollToLower === null) {
-                        if (this.#lowerObserver) {
-                            this.#lowerObserver.disconnect();
-                            this.#lowerObserver = undefined;
-                        }
-                        if (this.#childrenObserver) {
-                            this.#childrenObserver.disconnect();
-                            this.#childrenObserver = undefined;
-                        }
-                        return;
-                    }
-                    if (!this.#lowerObserver) {
-                        this.#lowerObserver = new IntersectionObserver(this.#handleLowerObserver, {
-                            root: this.#getListContainer(),
-                        });
-                    }
-                    if (!this.#childrenObserver) {
-                        this.#childrenObserver = new MutationObserver(this.#handleChildrenObserver);
-                    }
-                    if (name === 'x-enable-scrolltolower-event') {
-                        const lowerThresholdItemCount = this.#dom.getAttribute('lower-threshold-item-count');
-                        const itemCount = lowerThresholdItemCount !== null
-                            ? parseFloat(lowerThresholdItemCount)
-                            : 0;
-                        const observerDom = itemCount === 0
-                            ? this.#getLowerThresholdObserverDom()
-                            : this.#dom.children[this.#dom.children.length
-                                - itemCount];
-                        observerDom && this.#lowerObserver.observe(observerDom);
-                        this.#childrenObserver.observe(this.#dom, {
-                            childList: true,
-                        });
-                    }
-                    if (name === 'lower-threshold-item-count') {
-                        const oldItemCount = oldValue !== null
-                            ? parseFloat(oldValue)
-                            : 0;
-                        const oldObserverDom = oldItemCount === 0
-                            ? this.#getLowerThresholdObserverDom()
-                            : this.#dom.children[this.#dom.children.length - oldItemCount];
-                        oldObserverDom && this.#lowerObserver.unobserve(oldObserverDom);
-                        const itemCount = newValue !== null
-                            ? parseFloat(newValue)
-                            : 0;
-                        const observerDom = itemCount === 0
-                            ? this.#getLowerThresholdObserverDom()
-                            : this.#dom.children[this.#dom.children.length
-                                - itemCount];
-                        observerDom && this.#lowerObserver.observe(observerDom);
-                    }
-                }, "#updateLowerIntersectionObserver") }, _private_updateLowerIntersectionObserver_decorators, { kind: "method", name: "#updateLowerIntersectionObserver", static: false, private: true, access: { has: obj => #updateLowerIntersectionObserver in obj, get: obj => obj.#updateLowerIntersectionObserver }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleScrollEvents_descriptor = { value: __setFunctionName(function () {
-                    const scroll = this.#dom.getAttribute('x-enable-scroll-event') !== null;
-                    const scrollEventThrottle = this.#dom.getAttribute('scroll-event-throttle');
-                    const scrollend = this.#dom.getAttribute('x-enable-scrollend-event');
-                    const snap = this.#dom.getAttribute('x-enable-snap-event');
-                    this.#enableScrollEnd = scrollend !== null || snap !== null;
-                    const listContainer = this.#getListContainer();
-                    // cancel the previous listener first
-                    this.#throttledScroll
-                        && listContainer.removeEventListener('scroll', this.#throttledScroll);
-                    if (scroll !== null || this.#enableScrollEnd) {
-                        const wait = scrollEventThrottle !== null
-                            ? parseFloat(scrollEventThrottle)
-                            : 0;
-                        const throttledScroll = throttle(this.#handleScroll, wait, {
-                            leading: true,
-                            trailing: false,
-                        });
-                        this.#throttledScroll = throttledScroll;
-                        listContainer.addEventListener('scroll', this.#throttledScroll);
-                        this.#prevX = 0;
-                        this.#prevY = 0;
-                    }
-                    if (useScrollEnd && this.#enableScrollEnd) {
-                        listContainer.addEventListener('scrollend', this.#handleScrollEnd);
-                    }
-                    else {
-                        listContainer.removeEventListener('scrollend', this.#handleScrollEnd);
-                    }
-                }, "#handleScrollEvents") }, _private_handleScrollEvents_decorators, { kind: "method", name: "#handleScrollEvents", static: false, private: true, access: { has: obj => #handleScrollEvents in obj, get: obj => obj.#handleScrollEvents }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _private_updateUpperEdgeIntersectionObserver_decorators, { kind: "field", name: "#updateUpperEdgeIntersectionObserver", static: false, private: true, access: { has: obj => #updateUpperEdgeIntersectionObserver in obj, get: obj => obj.#updateUpperEdgeIntersectionObserver, set: (obj, value) => { obj.#updateUpperEdgeIntersectionObserver = value; } }, metadata: _metadata }, _private_updateUpperEdgeIntersectionObserver_initializers, _private_updateUpperEdgeIntersectionObserver_extraInitializers);
-            __esDecorate(null, null, _private_updateLowerEdgeIntersectionObserver_decorators, { kind: "field", name: "#updateLowerEdgeIntersectionObserver", static: false, private: true, access: { has: obj => #updateLowerEdgeIntersectionObserver in obj, get: obj => obj.#updateLowerEdgeIntersectionObserver, set: (obj, value) => { obj.#updateLowerEdgeIntersectionObserver = value; } }, metadata: _metadata }, _private_updateLowerEdgeIntersectionObserver_initializers, _private_updateLowerEdgeIntersectionObserver_extraInitializers);
+            _private_updateEventSwitches_decorators = [registerEventEnableStatusChangeHandler('scrolltoupper')];
+            _private_handleUpperThresholdItemCountChange_decorators = [registerAttributeHandler('upper-threshold-item-count', true)];
+            _private_updateScrollToLowerEventSwitches_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
+            _private_handleLowerThresholdItemCountChange_decorators = [registerAttributeHandler('lower-threshold-item-count', true)];
+            _private_handleScrollEventsSwitches_decorators = [registerEventEnableStatusChangeHandler('lynxscroll'), registerEventEnableStatusChangeHandler('lynxscrollend'), registerEventEnableStatusChangeHandler('snap')];
+            _private_handleScrollToUpperEdgeEventEnable_decorators = [registerEventEnableStatusChangeHandler('scrolltoupperedge')];
+            _private_handleScrollToLowerEdgeEventEnable_decorators = [registerEventEnableStatusChangeHandler('scrolltoloweredge')];
+            __esDecorate(this, _private_handleUpperThresholdItemCountChange_descriptor = { value: __setFunctionName(function (newValue, oldValue) {
+                    const oldItemCount = oldValue !== null
+                        ? parseFloat(oldValue)
+                        : 0;
+                    const oldObserverDom = oldItemCount === 0
+                        ? this.#getUpperThresholdObserverDom()
+                        : this.#dom.children[oldItemCount - 1];
+                    oldObserverDom && this.#upperObserver?.unobserve(oldObserverDom);
+                    const itemCount = newValue !== null
+                        ? parseFloat(newValue)
+                        : 0;
+                    const observerDom = itemCount === 0
+                        ? this.#getUpperThresholdObserverDom()
+                        : this.#dom.children[itemCount - 1];
+                    observerDom && this.#upperObserver?.observe(observerDom);
+                }, "#handleUpperThresholdItemCountChange") }, _private_handleUpperThresholdItemCountChange_decorators, { kind: "method", name: "#handleUpperThresholdItemCountChange", static: false, private: true, access: { has: obj => #handleUpperThresholdItemCountChange in obj, get: obj => obj.#handleUpperThresholdItemCountChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleLowerThresholdItemCountChange_descriptor = { value: __setFunctionName(function (newValue, oldValue) {
+                    const oldItemCount = oldValue !== null
+                        ? parseFloat(oldValue)
+                        : 0;
+                    const oldObserverDom = oldItemCount === 0
+                        ? this.#getLowerThresholdObserverDom()
+                        : this.#dom.children[this.#dom.children.length - oldItemCount];
+                    oldObserverDom && this.#lowerObserver?.unobserve(oldObserverDom);
+                    const itemCount = newValue !== null
+                        ? parseFloat(newValue)
+                        : 0;
+                    const observerDom = itemCount === 0
+                        ? this.#getLowerThresholdObserverDom()
+                        : this.#dom.children[this.#dom.children.length
+                            - itemCount];
+                    observerDom && this.#lowerObserver?.observe(observerDom);
+                }, "#handleLowerThresholdItemCountChange") }, _private_handleLowerThresholdItemCountChange_decorators, { kind: "method", name: "#handleLowerThresholdItemCountChange", static: false, private: true, access: { has: obj => #handleLowerThresholdItemCountChange in obj, get: obj => obj.#handleLowerThresholdItemCountChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _private_updateEventSwitches_decorators, { kind: "field", name: "#updateEventSwitches", static: false, private: true, access: { has: obj => #updateEventSwitches in obj, get: obj => obj.#updateEventSwitches, set: (obj, value) => { obj.#updateEventSwitches = value; } }, metadata: _metadata }, _private_updateEventSwitches_initializers, _private_updateEventSwitches_extraInitializers);
+            __esDecorate(null, null, _private_updateScrollToLowerEventSwitches_decorators, { kind: "field", name: "#updateScrollToLowerEventSwitches", static: false, private: true, access: { has: obj => #updateScrollToLowerEventSwitches in obj, get: obj => obj.#updateScrollToLowerEventSwitches, set: (obj, value) => { obj.#updateScrollToLowerEventSwitches = value; } }, metadata: _metadata }, _private_updateScrollToLowerEventSwitches_initializers, _private_updateScrollToLowerEventSwitches_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollEventsSwitches_decorators, { kind: "field", name: "#handleScrollEventsSwitches", static: false, private: true, access: { has: obj => #handleScrollEventsSwitches in obj, get: obj => obj.#handleScrollEventsSwitches, set: (obj, value) => { obj.#handleScrollEventsSwitches = value; } }, metadata: _metadata }, _private_handleScrollEventsSwitches_initializers, _private_handleScrollEventsSwitches_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollToUpperEdgeEventEnable_decorators, { kind: "field", name: "#handleScrollToUpperEdgeEventEnable", static: false, private: true, access: { has: obj => #handleScrollToUpperEdgeEventEnable in obj, get: obj => obj.#handleScrollToUpperEdgeEventEnable, set: (obj, value) => { obj.#handleScrollToUpperEdgeEventEnable = value; } }, metadata: _metadata }, _private_handleScrollToUpperEdgeEventEnable_initializers, _private_handleScrollToUpperEdgeEventEnable_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollToLowerEdgeEventEnable_decorators, { kind: "field", name: "#handleScrollToLowerEdgeEventEnable", static: false, private: true, access: { has: obj => #handleScrollToLowerEdgeEventEnable in obj, get: obj => obj.#handleScrollToLowerEdgeEventEnable, set: (obj, value) => { obj.#handleScrollToLowerEdgeEventEnable = value; } }, metadata: _metadata }, _private_handleScrollToLowerEdgeEventEnable_initializers, _private_handleScrollToLowerEdgeEventEnable_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = [
-            'x-enable-scroll-event',
-            'x-enable-scrollend-event',
             'upper-threshold-item-count',
             'lower-threshold-item-count',
-            'x-enable-scrolltoupper-event',
-            'x-enable-scrolltolower-event',
-            'x-enable-scrolltoupperedge-event',
-            'x-enable-scrolltoloweredge-event',
-            'x-enable-snap-event',
-            'scroll-event-throttle',
         ];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #getListContainer = genDomGetter(() => this.#dom.shadowRoot, '#content');
@@ -213,32 +116,113 @@ let XListEvents = (() => {
             return detail;
         }
         #handleUpperObserver = (entries) => {
-            const { isIntersecting, target } = entries[0];
-            const scrolltoupper = this.#dom.getAttribute('x-enable-scrolltoupper-event');
+            const { isIntersecting } = entries[0];
             if (isIntersecting) {
-                scrolltoupper !== null && this.#dom.dispatchEvent(new CustomEvent('scrolltoupper', {
+                this.#dom.dispatchEvent(new CustomEvent('scrolltoupper', {
                     ...commonComponentEventSetting,
                     detail: this.#getScrollDetail(),
                 }));
             }
         };
-        get #updateUpperIntersectionObserver() { return _private_updateUpperIntersectionObserver_descriptor.value; }
-        #handleLowerObserver = (entries) => {
+        #updateEventSwitches = __runInitializers(this, _private_updateEventSwitches_initializers, (enableScrollToUpper) => {
+            enableScrollToUpper
+                ? this.#dom.setAttribute('x-enable-scrolltoupper-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltoupper-event'); // css needs this;
+            this.#eventSwitches.scrolltoupper = enableScrollToUpper;
+            if (!enableScrollToUpper) {
+                // if x-enable-scrolltoupper-event null, no need to handle upper-threshold-item-count
+                if (this.#upperObserver) {
+                    this.#upperObserver.disconnect();
+                    this.#upperObserver = undefined;
+                }
+                if (this.#childrenObserver) {
+                    this.#childrenObserver.disconnect();
+                    this.#childrenObserver = undefined;
+                }
+            }
+            else {
+                if (!this.#upperObserver) {
+                    this.#upperObserver = new IntersectionObserver(this.#handleUpperObserver, {
+                        root: this.#getListContainer(),
+                    });
+                }
+                if (!this.#childrenObserver) {
+                    this.#childrenObserver = new MutationObserver(this.#handleChildrenObserver);
+                }
+                const upperThresholdItemCount = this.#dom.getAttribute('upper-threshold-item-count');
+                const itemCount = upperThresholdItemCount !== null
+                    ? parseFloat(upperThresholdItemCount)
+                    : 0;
+                const observerDom = itemCount === 0
+                    ? this.#getUpperThresholdObserverDom()
+                    : this.#dom.children[itemCount - 1];
+                observerDom && this.#upperObserver.observe(observerDom);
+                this.#childrenObserver.observe(this.#dom, {
+                    childList: true,
+                });
+            }
+        });
+        get #handleUpperThresholdItemCountChange() { return _private_handleUpperThresholdItemCountChange_descriptor.value; }
+        #handleLowerObserver = (__runInitializers(this, _private_updateEventSwitches_extraInitializers), (entries) => {
             const { isIntersecting } = entries[0];
-            const scrolltolower = this.#dom.getAttribute('x-enable-scrolltolower-event');
             if (isIntersecting) {
-                scrolltolower !== null && this.#dom.dispatchEvent(new CustomEvent('scrolltolower', {
+                this.#dom.dispatchEvent(new CustomEvent('scrolltolower', {
                     ...commonComponentEventSetting,
                     detail: this.#getScrollDetail(),
                 }));
             }
+        });
+        #eventSwitches = {
+            lynxscroll: false,
+            lynxscrollend: false,
+            snap: false,
+            scrolltolower: false,
+            scrolltoupper: false,
         };
-        get #updateLowerIntersectionObserver() { return _private_updateLowerIntersectionObserver_descriptor.value; }
-        #handleChildrenObserver = (mutationList) => {
+        #updateScrollToLowerEventSwitches = __runInitializers(this, _private_updateScrollToLowerEventSwitches_initializers, (enableScrollToLower) => {
+            this.#eventSwitches.scrolltolower = enableScrollToLower;
+            enableScrollToLower
+                ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
+            if (!enableScrollToLower) {
+                if (this.#lowerObserver) {
+                    this.#lowerObserver.disconnect();
+                    this.#lowerObserver = undefined;
+                }
+                if (this.#childrenObserver) {
+                    this.#childrenObserver.disconnect();
+                    this.#childrenObserver = undefined;
+                }
+            }
+            else {
+                if (!this.#lowerObserver) {
+                    this.#lowerObserver = new IntersectionObserver(this.#handleLowerObserver, {
+                        root: this.#getListContainer(),
+                    });
+                }
+                if (!this.#childrenObserver) {
+                    this.#childrenObserver = new MutationObserver(this.#handleChildrenObserver);
+                }
+                const lowerThresholdItemCount = this.#dom.getAttribute('lower-threshold-item-count');
+                const itemCount = lowerThresholdItemCount !== null
+                    ? parseFloat(lowerThresholdItemCount)
+                    : 0;
+                const observerDom = itemCount === 0
+                    ? this.#getLowerThresholdObserverDom()
+                    : this.#dom.children[this.#dom.children.length
+                        - itemCount];
+                observerDom && this.#lowerObserver.observe(observerDom);
+                this.#childrenObserver.observe(this.#dom, {
+                    childList: true,
+                });
+            }
+        });
+        get #handleLowerThresholdItemCountChange() { return _private_handleLowerThresholdItemCountChange_descriptor.value; }
+        #handleChildrenObserver = (__runInitializers(this, _private_updateScrollToLowerEventSwitches_extraInitializers), (mutationList) => {
             const mutation = mutationList?.[0];
             // reset upper and lower observers
             if (mutation?.type === 'childList') {
-                if (this.#dom.getAttribute('x-enable-scrolltolower-event') !== null) {
+                if (this.#eventSwitches.scrolltolower) {
                     // The reason why unobserve cannot be used is that the structure of list-item has changed,
                     // and the list-item before the change cannot be obtained.
                     // so disconnect and reconnect is required.
@@ -280,7 +264,7 @@ let XListEvents = (() => {
                     observerDom && this.#upperObserver.observe(observerDom);
                 }
             }
-        };
+        });
         #throttledScroll = null;
         #handleScroll = () => {
             if (this.#enableScrollEnd && !useScrollEnd) {
@@ -297,8 +281,37 @@ let XListEvents = (() => {
                 },
             }));
         };
-        get #handleScrollEvents() { return _private_handleScrollEvents_descriptor.value; }
-        #handleObserver = (entries) => {
+        #handleScrollEventsSwitches = __runInitializers(this, _private_handleScrollEventsSwitches_initializers, (enabled, name) => {
+            this.#eventSwitches[name] =
+                enabled;
+            const { lynxscroll, lynxscrollend, snap } = this.#eventSwitches;
+            const scrollEventThrottle = this.#dom.getAttribute('scroll-event-throttle');
+            this.#enableScrollEnd = lynxscrollend !== null || snap !== null;
+            const listContainer = this.#getListContainer();
+            // cancel the previous listener first
+            this.#throttledScroll
+                && listContainer.removeEventListener('scroll', this.#throttledScroll);
+            if (scroll !== null || this.#enableScrollEnd) {
+                const wait = scrollEventThrottle !== null
+                    ? parseFloat(scrollEventThrottle)
+                    : 0;
+                const throttledScroll = throttle(this.#handleScroll, wait, {
+                    leading: true,
+                    trailing: false,
+                });
+                this.#throttledScroll = throttledScroll;
+                listContainer.addEventListener('scroll', this.#throttledScroll);
+                this.#prevX = 0;
+                this.#prevY = 0;
+            }
+            if (useScrollEnd && this.#enableScrollEnd) {
+                listContainer.addEventListener('scrollend', this.#handleScrollEnd);
+            }
+            else {
+                listContainer.removeEventListener('scrollend', this.#handleScrollEnd);
+            }
+        });
+        #handleObserver = (__runInitializers(this, _private_handleScrollEventsSwitches_extraInitializers), (entries) => {
             const { isIntersecting, target } = entries[0];
             const id = target.id;
             if (isIntersecting) {
@@ -315,19 +328,27 @@ let XListEvents = (() => {
                     }));
                 }
             }
-        };
-        #updateUpperEdgeIntersectionObserver = __runInitializers(this, _private_updateUpperEdgeIntersectionObserver_initializers, bindToIntersectionObserver(this.#getListContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
-        #updateLowerEdgeIntersectionObserver = (__runInitializers(this, _private_updateUpperEdgeIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateLowerEdgeIntersectionObserver_initializers, bindToIntersectionObserver(this.#getListContainer, this.#getLowerThresholdObserverDom, this.#handleObserver)));
-        #handleScrollEnd = (__runInitializers(this, _private_updateLowerEdgeIntersectionObserver_extraInitializers), () => {
-            const scrollend = this.#dom.getAttribute('x-enable-scrollend-event');
+        });
+        #handleScrollToUpperEdgeEventEnable = __runInitializers(this, _private_handleScrollToUpperEdgeEventEnable_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltoupperedge-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltoupperedge-event'); // css needs this;
+            this.#updateUpperEdgeIntersectionObserver(enabled);
+        });
+        #updateUpperEdgeIntersectionObserver = (__runInitializers(this, _private_handleScrollToUpperEdgeEventEnable_extraInitializers), bindToIntersectionObserver(this.#getListContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
+        #handleScrollToLowerEdgeEventEnable = __runInitializers(this, _private_handleScrollToLowerEdgeEventEnable_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltoloweredge-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltoloweredge-event'); // css needs this;
+            this.#updateLowerEdgeIntersectionObserver(enabled);
+        });
+        #updateLowerEdgeIntersectionObserver = (__runInitializers(this, _private_handleScrollToLowerEdgeEventEnable_extraInitializers), bindToIntersectionObserver(this.#getListContainer, this.#getLowerThresholdObserverDom, this.#handleObserver));
+        #handleScrollEnd = () => {
             const itemSnap = this.#dom.getAttribute('item-snap');
-            const snap = this.#dom.getAttribute('x-enable-snap-event');
-            if (scrollend !== null) {
-                this.#dom.dispatchEvent(new CustomEvent('lynxscrollend', {
-                    ...commonComponentEventSetting,
-                }));
-            }
-            if (itemSnap !== null && snap !== null) {
+            this.#dom.dispatchEvent(new CustomEvent('lynxscrollend', {
+                ...commonComponentEventSetting,
+            }));
+            if (itemSnap !== null) {
                 const children = Array.from(this.#dom.children).filter(node => {
                     return node.tagName === 'LIST-ITEM';
                 });
@@ -346,7 +367,7 @@ let XListEvents = (() => {
                     },
                 }));
             }
-        });
+        };
         constructor(dom) {
             this.#dom = dom;
         }

package/dist/XOverlayNg/XOverlayAttributes.d.ts

@@ -1,5 +1,5 @@
-import { XOverlayNg } from './XOverlayNg.js';
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { XOverlayNg } from './XOverlayNg.js';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 export declare class XOverlayAttributes implements InstanceType<AttributeReactiveClass<typeof XOverlayNg>> {
     #private;
     static observedAttributes: string[];

package/dist/XOverlayNg/XOverlayAttributes.js

@@ -60,8 +60,13 @@ let XOverlayAttributes = (() => {
             if (e.target === this.#dom || e.target === diaglogDom) {
                 diaglogDom.close();
                 const { clientX, clientY } = e;
-                const targetElemnt = document.elementFromPoint(clientX, clientY);
-                targetElemnt?.dispatchEvent(new MouseEvent('click', e));
+                let targetElement = document.elementFromPoint(clientX, clientY);
+                if (targetElement?.tagName === 'LYNX-VIEW' && targetElement.shadowRoot) {
+                    targetElement =
+                        targetElement.shadowRoot.elementFromPoint(clientX, clientY)
+                            ?? targetElement;
+                }
+                targetElement?.dispatchEvent(new MouseEvent('click', e));
                 requestAnimationFrame(() => {
                     if (this.#visible && diaglogDom.isConnected) {
                         diaglogDom.showModal();

package/dist/XRefreshView/XRefreshSubElementIntersectionObserver.d.ts

@@ -1,6 +1,6 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { XRefreshFooter } from './XRefreshFooter.js';
-import { XRefreshHeader } from './XRefreshHeader.js';
+import type { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { XRefreshFooter } from './XRefreshFooter.js';
+import type { XRefreshHeader } from './XRefreshHeader.js';
 export declare class XRefreshIntersectionObserverEvent extends Event {
     startShowing: boolean;
     fullyShowing: boolean;

package/dist/XRefreshView/XRefreshViewEventsEmitter.d.ts

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