@lynx-js/web-elements 0.2.4

package/dist/XList/XListEvents.js

@@ -0,0 +1,356 @@
+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 { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { throttle } from '../common/throttle.js';
+import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
+import { useScrollEnd } from '../common/constants.js';
+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 = [];
+    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);
+            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');
+        // The reason for using two observers is:
+        // Using upper-threshold-item-count and lower-threshold-item-count configurations, it is possible that upper and lower observers monitor the same list-item.
+        // Using the same observer, invoking callback event, it is impossible to confirm whether its source is upper or lower
+        #upperObserver;
+        #lowerObserver;
+        // When list-item counts changes, Observer needs to be regenerated. Applicable to: Load More scenario
+        #childrenObserver;
+        #prevX = 0;
+        #prevY = 0;
+        #enableScrollEnd = false;
+        #debounceScrollForMockingScrollEnd;
+        #getUpperThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#upper-threshold-observer');
+        #getLowerThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#lower-threshold-observer');
+        #getScrollDetail() {
+            const { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
+                .#getListContainer();
+            const detail = {
+                scrollTop,
+                scrollLeft,
+                scrollHeight,
+                scrollWidth,
+                deltaX: scrollLeft - this.#prevX,
+                deltaY: scrollTop - this.#prevY,
+            };
+            this.#prevX = scrollLeft;
+            this.#prevY = scrollTop;
+            return detail;
+        }
+        #handleUpperObserver = (entries) => {
+            const { isIntersecting, target } = entries[0];
+            const scrolltoupper = this.#dom.getAttribute('x-enable-scrolltoupper-event');
+            if (isIntersecting) {
+                scrolltoupper !== null && this.#dom.dispatchEvent(new CustomEvent('scrolltoupper', {
+                    ...commonComponentEventSetting,
+                    detail: this.#getScrollDetail(),
+                }));
+            }
+        };
+        get #updateUpperIntersectionObserver() { return _private_updateUpperIntersectionObserver_descriptor.value; }
+        #handleLowerObserver = (entries) => {
+            const { isIntersecting } = entries[0];
+            const scrolltolower = this.#dom.getAttribute('x-enable-scrolltolower-event');
+            if (isIntersecting) {
+                scrolltolower !== null && this.#dom.dispatchEvent(new CustomEvent('scrolltolower', {
+                    ...commonComponentEventSetting,
+                    detail: this.#getScrollDetail(),
+                }));
+            }
+        };
+        get #updateLowerIntersectionObserver() { return _private_updateLowerIntersectionObserver_descriptor.value; }
+        #handleChildrenObserver = (mutationList) => {
+            const mutation = mutationList?.[0];
+            // reset upper and lower observers
+            if (mutation?.type === 'childList') {
+                if (this.#dom.getAttribute('x-enable-scrolltolower-event') !== null) {
+                    // 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.
+                    if (this.#lowerObserver) {
+                        this.#lowerObserver.disconnect();
+                        this.#lowerObserver = undefined;
+                    }
+                    this.#lowerObserver = new IntersectionObserver(this.#handleLowerObserver, {
+                        root: this.#getListContainer(),
+                    });
+                    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);
+                }
+                if (this.#dom.getAttribute('x-enable-scrolltoupper-event') !== null) {
+                    // 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.
+                    if (this.#upperObserver) {
+                        this.#upperObserver.disconnect();
+                        this.#upperObserver = undefined;
+                    }
+                    this.#upperObserver = new IntersectionObserver(this.#handleUpperObserver, {
+                        root: this.#getListContainer(),
+                    });
+                    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);
+                }
+            }
+        };
+        #throttledScroll = null;
+        #handleScroll = () => {
+            if (this.#enableScrollEnd && !useScrollEnd) {
+                // debounce
+                clearTimeout(this.#debounceScrollForMockingScrollEnd);
+                this.#debounceScrollForMockingScrollEnd = setTimeout(() => {
+                    this.#handleScrollEnd();
+                }, 100);
+            }
+            this.#dom.dispatchEvent(new CustomEvent('lynxscroll', {
+                ...commonComponentEventSetting,
+                detail: {
+                    type: 'scroll',
+                },
+            }));
+        };
+        get #handleScrollEvents() { return _private_handleScrollEvents_descriptor.value; }
+        #handleObserver = (entries) => {
+            const { isIntersecting, target } = entries[0];
+            const id = target.id;
+            if (isIntersecting) {
+                if (id === 'upper-threshold-observer') {
+                    this.#dom.dispatchEvent(new CustomEvent('scrolltoupperedge', {
+                        ...commonComponentEventSetting,
+                        detail: this.#getScrollDetail(),
+                    }));
+                }
+                else if (id === 'lower-threshold-observer') {
+                    this.#dom.dispatchEvent(new CustomEvent('scrolltoloweredge', {
+                        ...commonComponentEventSetting,
+                        detail: this.#getScrollDetail(),
+                    }));
+                }
+            }
+        };
+        #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');
+            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) {
+                const children = Array.from(this.#dom.children).filter(node => {
+                    return node.tagName === 'LIST-ITEM';
+                });
+                const scrollTop = this.#getListContainer().scrollTop;
+                const scrollLeft = this.#getListContainer().scrollLeft;
+                const snapItem = children.find((ele) => {
+                    return scrollTop >= ele.offsetTop
+                        && scrollTop < ele.offsetTop + ele.offsetHeight;
+                });
+                this.#dom.dispatchEvent(new CustomEvent('snap', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        position: snapItem && children.indexOf(snapItem),
+                        scrollTop,
+                        scrollLeft,
+                    },
+                }));
+            }
+        });
+        constructor(dom) {
+            this.#dom = dom;
+        }
+    };
+})();
+export { XListEvents };
+//# sourceMappingURL=XListEvents.js.map

package/dist/XList/index.d.ts

@@ -0,0 +1,2 @@
+export { ListItem } from './ListItem.js';
+export { XList } from './XList.js';

package/dist/XList/index.js

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

package/dist/XOverlayNg/XOverlayAttributes.d.ts

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

package/dist/XOverlayNg/XOverlayAttributes.js

@@ -0,0 +1,80 @@
+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 { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerAttributeHandler, genDomGetter, } from '@lynx-js/web-elements-reactive';
+let XOverlayAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleEventsPassThrough_decorators;
+    let _private_handleEventsPassThrough_descriptor;
+    let _private_handleVisible_decorators;
+    let _private_handleVisible_descriptor;
+    return class XOverlayAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleEventsPassThrough_decorators = [registerAttributeHandler('events-pass-through', true)];
+            _private_handleVisible_decorators = [registerAttributeHandler('visible', false)];
+            __esDecorate(this, _private_handleEventsPassThrough_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal !== null) {
+                        this.#getDialogDom().addEventListener('click', this.#portalEventToMainDocument, { passive: false });
+                        this.#dom.addEventListener('click', this.#portalEventToMainDocument, {
+                            passive: false,
+                        });
+                    }
+                    else {
+                        this.#getDialogDom().removeEventListener('click', this.#portalEventToMainDocument);
+                        this.#dom.removeEventListener('click', this.#portalEventToMainDocument);
+                    }
+                }, "#handleEventsPassThrough") }, _private_handleEventsPassThrough_decorators, { kind: "method", name: "#handleEventsPassThrough", static: false, private: true, access: { has: obj => #handleEventsPassThrough in obj, get: obj => obj.#handleEventsPassThrough }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleVisible_descriptor = { value: __setFunctionName(function (newVal) {
+                    this.#visible = newVal !== null;
+                    if (this.#useModernDialog) {
+                        if (this.#visible) {
+                            this.#getDialogDom().showModal();
+                            this.#dom.dispatchEvent(new CustomEvent('showoverlay', commonComponentEventSetting));
+                        }
+                        else {
+                            this.#getDialogDom().close();
+                            this.#dom.dispatchEvent(new CustomEvent('dismissoverlay', commonComponentEventSetting));
+                        }
+                    }
+                }, "#handleVisible") }, _private_handleVisible_decorators, { kind: "method", name: "#handleVisible", static: false, private: true, access: { has: obj => #handleVisible in obj, get: obj => obj.#handleVisible }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['visible', 'events-pass-through'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #useModernDialog = !!window.HTMLDialogElement;
+        #visible = false;
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        #getDialogDom = genDomGetter(() => this.#dom.shadowRoot, '#dialog');
+        get #handleEventsPassThrough() { return _private_handleEventsPassThrough_descriptor.value; }
+        get #handleVisible() { return _private_handleVisible_descriptor.value; }
+        #portalEventToMainDocument = (e) => {
+            e.stopPropagation();
+            const diaglogDom = this.#getDialogDom();
+            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));
+                requestAnimationFrame(() => {
+                    if (this.#visible && diaglogDom.isConnected) {
+                        diaglogDom.showModal();
+                    }
+                });
+            }
+        };
+        connectedCallback() {
+            if (!this.#useModernDialog) {
+                this.#getDialogDom().style.display = 'none';
+            }
+        }
+    };
+})();
+export { XOverlayAttributes };
+//# sourceMappingURL=XOverlayAttributes.js.map

package/dist/XOverlayNg/XOverlayNg.d.ts

@@ -0,0 +1,2 @@
+export declare class XOverlayNg extends HTMLElement {
+}

package/dist/XOverlayNg/XOverlayNg.js

@@ -0,0 +1,45 @@
+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 { XOverlayAttributes } from './XOverlayAttributes.js';
+import { Component, html } from '@lynx-js/web-elements-reactive';
+let XOverlayNg = (() => {
+    let _classDecorators = [Component('x-overlay-ng', [LynxExposure, XOverlayAttributes], html `
+    <style>
+      #dialog[open] {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: fixed;
+      }
+      #dialog::backdrop {
+        background-color: transparent;
+      }
+    </style>
+    <dialog id="dialog" part="dialog">
+      <slot></slot>
+    </dialog>
+  `)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XOverlayNg = 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);
+            XOverlayNg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XOverlayNg = _classThis;
+})();
+export { XOverlayNg };
+//# sourceMappingURL=XOverlayNg.js.map

package/dist/XOverlayNg/index.d.ts

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

package/dist/XOverlayNg/index.js

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

package/dist/XRefreshView/XRefreshFooter.d.ts

@@ -0,0 +1,3 @@
+export declare class XRefreshFooter extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/XRefreshView/XRefreshFooter.js

@@ -0,0 +1,35 @@
+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 { Component } from '@lynx-js/web-elements-reactive';
+import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
+import { LynxExposure } from '../common/Exposure.js';
+let XRefreshFooter = (() => {
+    let _classDecorators = [Component('x-refresh-footer', [
+            LynxExposure,
+            XRefreshSubElementIntersectionObserver,
+        ])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XRefreshFooter = 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);
+            XRefreshFooter = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        connectedCallback() {
+            this.setAttribute('slot', 'footer');
+        }
+    };
+    return XRefreshFooter = _classThis;
+})();
+export { XRefreshFooter };
+//# sourceMappingURL=XRefreshFooter.js.map

package/dist/XRefreshView/XRefreshHeader.d.ts

@@ -0,0 +1,3 @@
+export declare class XRefreshHeader extends HTMLElement {
+    connectedCallback(): void;
+}

package/dist/XRefreshView/XRefreshHeader.js

@@ -0,0 +1,35 @@
+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 { Component } from '@lynx-js/web-elements-reactive';
+import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
+import { LynxExposure } from '../common/Exposure.js';
+let XRefreshHeader = (() => {
+    let _classDecorators = [Component('x-refresh-header', [
+            LynxExposure,
+            XRefreshSubElementIntersectionObserver,
+        ])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XRefreshHeader = 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);
+            XRefreshHeader = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        connectedCallback() {
+            this.setAttribute('slot', 'header');
+        }
+    };
+    return XRefreshHeader = _classThis;
+})();
+export { XRefreshHeader };
+//# sourceMappingURL=XRefreshHeader.js.map

package/dist/XRefreshView/XRefreshSubElementIntersectionObserver.d.ts

@@ -0,0 +1,16 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { XRefreshFooter } from './XRefreshFooter.js';
+import { XRefreshHeader } from './XRefreshHeader.js';
+export declare class XRefreshIntersectionObserverEvent extends Event {
+    startShowing: boolean;
+    fullyShowing: boolean;
+    static EventName: string;
+    constructor(startShowing: boolean, fullyShowing: boolean);
+}
+export declare class XRefreshSubElementIntersectionObserver implements InstanceType<AttributeReactiveClass<typeof XRefreshHeader | typeof XRefreshFooter>> {
+    #private;
+    static observedAttributes: never[];
+    constructor(dom: XRefreshHeader);
+    connectedCallback?(): void;
+    dispose(): void;
+}