@lynx-js/web-elements 0.5.4 → 0.7.0

package/dist/XInput/XInput.js

@@ -9,10 +9,10 @@ import { InputBaseAttributes } from './InputBaseAttributes.js';
 import { Placeholder } from './Placeholder.js';
 import { XInputAttribute } from './XInputAttribute.js';
 import { XInputEvents } from './XInputEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XInput = (() => {
     let _classDecorators = [Component('x-input', [
-            LynxExposure,
+            CommonEventsAndMethods,
             Placeholder,
             XInputAttribute,
             InputBaseAttributes,

package/dist/XList/ListItem.js

@@ -5,9 +5,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let ListItem = (() => {
-    let _classDecorators = [Component('list-item', [LynxExposure])];
+    let _classDecorators = [Component('list-item', [CommonEventsAndMethods])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XList/XList.js

@@ -4,13 +4,14 @@ import { __esDecorate, __runInitializers } from "tslib";
 // 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 { boostedQueueMicrotask, Component, genDomGetter, html, } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { XListWaterfall } from './XListWaterfall.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 let XList = (() => {
-    let _classDecorators = [Component('x-list', [LynxExposure, XListAttributes, XListEvents], html `<style>
+    let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], html `<style>
   .placeholder-dom {
     display: none;
     flex: 0 0 0;

package/dist/XList/XListAttributes.js

@@ -5,6 +5,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { bindToStyle, boostedQueueMicrotask, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+const WATERFALL_SLOT = 'waterfall-slot';
 let XListAttributes = (() => {
     let _private_handlerStickyOffset_decorators;
     let _private_handlerStickyOffset_initializers = [];

package/dist/XList/XListEvents.js

@@ -101,6 +101,7 @@ let XListEvents = (() => {
         #getUpperThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#upper-threshold-observer');
         #getLowerThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#lower-threshold-observer');
         #getScrollDetail() {
+            const needVisibleItemInfo = this.#dom.getAttribute('need-visible-item-info') !== null;
             const { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
                 .#getListContainer();
             const detail = {
@@ -110,6 +111,9 @@ let XListEvents = (() => {
                 scrollWidth,
                 deltaX: scrollLeft - this.#prevX,
                 deltaY: scrollTop - this.#prevY,
+                attachedCells: needVisibleItemInfo
+                    ? this.#dom.getVisibleCells()
+                    : undefined,
             };
             this.#prevX = scrollLeft;
             this.#prevY = scrollTop;
@@ -276,9 +280,7 @@ let XListEvents = (() => {
             }
             this.#dom.dispatchEvent(new CustomEvent('lynxscroll', {
                 ...commonComponentEventSetting,
-                detail: {
-                    type: 'scroll',
-                },
+                detail: this.#getScrollDetail(),
             }));
         };
         #handleScrollEventsSwitches = __runInitializers(this, _private_handleScrollEventsSwitches_initializers, (enabled, name) => {

package/dist/XList/XListWaterfall.d.ts

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

package/dist/XList/XListWaterfall.js

@@ -0,0 +1,144 @@
+/*
+// 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 { boostedQueueMicrotask, genDomGetter, } from '@lynx-js/web-elements-reactive';
+const WATERFALL_SLOT = 'waterfall-slot';
+const WATERFALL_STYLE = 'waterfall-style';
+export class XListWaterfall {
+    static observedAttributes = [];
+    #dom;
+    #getListContainer = genDomGetter(() => this.#dom.shadowRoot, '#content');
+    #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
+    #resizeObserver;
+    #childrenObserver;
+    #createWaterfallContainer = () => {
+        const waterfallSlot = document.createElement('slot');
+        waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
+        this.#dom.shadowRoot?.querySelector('[part=upper-threshold-observer]')
+            ?.insertAdjacentElement('afterend', waterfallSlot);
+    };
+    #layoutListItem = (spanCount, isScrollVertical) => {
+        const measurements = new Array(spanCount).fill(0);
+        for (let i = 0; i < this.#dom.children.length; i++) {
+            const listItem = this.#dom.children[i];
+            const mainAxisGap = getComputedStyle(listItem).getPropertyValue('--list-main-axis-gap');
+            const crossAxisGap = getComputedStyle(listItem).getPropertyValue('--list-cross-axis-gap');
+            const increasedMeasurement = isScrollVertical
+                ? listItem.getBoundingClientRect().height + parseFloat(mainAxisGap)
+                : listItem.getBoundingClientRect().width + parseFloat(mainAxisGap);
+            if (listItem.getAttribute('full-span') !== null) {
+                let longestMeasurement = measurements[0];
+                // Find the longest track.
+                for (let j = 1; j < spanCount; j++) {
+                    if (measurements[j] > longestMeasurement) {
+                        longestMeasurement = measurements[j];
+                    }
+                }
+                for (let j = 0; j < spanCount; j++) {
+                    measurements[j] = longestMeasurement + increasedMeasurement;
+                }
+                if (isScrollVertical) {
+                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, '0');
+                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${longestMeasurement}px`);
+                }
+                else {
+                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${longestMeasurement}px`);
+                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, '0');
+                }
+            }
+            else {
+                let shortestIndex = 0;
+                let shortestMeasurement = measurements[0];
+                // Find the shortest track.
+                for (let j = 1; j < spanCount; j++) {
+                    if (measurements[j] < shortestMeasurement) {
+                        shortestIndex = j;
+                        shortestMeasurement = measurements[j];
+                    }
+                }
+                const crossOffset = `calc(${shortestIndex} * (100% - ${crossAxisGap} * (${spanCount} - 1))/ ${spanCount} + ${Math.max(0, shortestIndex)} * ${crossAxisGap})`;
+                if (isScrollVertical) {
+                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, crossOffset);
+                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${shortestMeasurement}px`);
+                }
+                else {
+                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${shortestMeasurement}px`);
+                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, crossOffset);
+                }
+                measurements[shortestIndex] += increasedMeasurement;
+            }
+        }
+        for (let i = 0; i < this.#dom.children.length; i++) {
+            const listItem = this.#dom.children[i];
+            listItem.style.setProperty('left', listItem.getAttribute(`${WATERFALL_STYLE}-left`));
+            listItem.style.setProperty('top', listItem.getAttribute(`${WATERFALL_STYLE}-top`));
+            listItem.setAttribute('slot', WATERFALL_SLOT);
+        }
+        // The reasons why it is not unified in #updateScrollToLowerEventSwitches is:
+        // It is impossible to ensure that list-item is not rendered, so it will cause incorrect listContent.scrollHeight/scrollWidth as height/width.
+        const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
+        if (enableScrollToLower !== null && enableScrollToLower !== 'false') {
+            const lower = this.#getLowerThresholdObserver();
+            const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                || 'vertical';
+            const listContent = this.#getListContainer();
+            if (scrollOrientation === 'vertical') {
+                lower.style.setProperty('top', 
+                // Firefox cannot trigger the bottom IntersectionObserver
+                `${String(listContent.scrollHeight - 1)}px`, 'important');
+                // Firefox needs this
+                lower.style.setProperty('bottom', 'unset', 'important');
+            }
+            else {
+                lower.style.setProperty('left', 
+                // Firefox cannot trigger the bottom IntersectionObserver
+                `${String(listContent.scrollHeight - 1)}px`);
+                // Firefox needs this
+                lower.style.setProperty('right', 'unset');
+            }
+        }
+    };
+    constructor(dom) {
+        this.#dom = dom;
+    }
+    #resizeObserverInit = (spanCount, isScrollVertical) => {
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = new ResizeObserver(() => {
+            // may cause: Resizeobserver loop completed with undelivered notifications
+            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+            boostedQueueMicrotask(() => {
+                this.#layoutListItem(spanCount, isScrollVertical);
+            });
+        });
+        Array.from(this.#dom.children).forEach(element => {
+            this.#resizeObserver?.observe(element);
+        });
+    };
+    connectedCallback() {
+        if (this.#dom.getAttribute('list-type') === 'waterfall') {
+            const spanCount = parseFloat(this.#dom.getAttribute('span-count')
+                || this.#dom.getAttribute('column-count')
+                || '') || 1;
+            const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                || 'vertical';
+            this.#createWaterfallContainer();
+            if (!this.#resizeObserver) {
+                this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+            }
+            if (!this.#childrenObserver) {
+                this.#childrenObserver = new MutationObserver((mutationList) => {
+                    const mutation = mutationList?.[0];
+                    if (mutation?.type === 'childList') {
+                        this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+                    }
+                });
+                this.#childrenObserver.observe(this.#dom, {
+                    childList: true,
+                });
+            }
+        }
+    }
+}
+//# sourceMappingURL=XListWaterfall.js.map

package/dist/XOverlayNg/XOverlayNg.d.ts

@@ -1,2 +1,4 @@
+import { layoutChangeTarget } from '../common/CommonEventsAndMethods.js';
 export declare class XOverlayNg extends HTMLElement {
+    get [layoutChangeTarget](): HTMLElement;
 }

package/dist/XOverlayNg/XOverlayNg.js

@@ -4,11 +4,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // 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 { layoutChangeTarget, CommonEventsAndMethods, } from '../common/CommonEventsAndMethods.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 `
+    let _classDecorators = [Component('x-overlay-ng', [CommonEventsAndMethods, XOverlayAttributes], html `
     <style>
       #dialog[open] {
         top: 0;
@@ -38,6 +38,9 @@ let XOverlayNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        get [layoutChangeTarget]() {
+            return this.shadowRoot.firstElementChild;
+        }
     };
     return XOverlayNg = _classThis;
 })();

package/dist/XRefreshView/XRefreshFooter.js

@@ -6,10 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XRefreshFooter = (() => {
     let _classDecorators = [Component('x-refresh-footer', [
-            LynxExposure,
+            CommonEventsAndMethods,
             XRefreshSubElementIntersectionObserver,
         ])];
     let _classDescriptor;

package/dist/XRefreshView/XRefreshHeader.js

@@ -6,10 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XRefreshHeader = (() => {
     let _classDecorators = [Component('x-refresh-header', [
-            LynxExposure,
+            CommonEventsAndMethods,
             XRefreshSubElementIntersectionObserver,
         ])];
     let _classDescriptor;

package/dist/XRefreshView/XRefreshView.js

@@ -6,10 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 let XRefreshView = (() => {
-    let _classDecorators = [Component('x-refresh-view', [LynxExposure, XRefreshViewEventsEmitter], html `
+    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], html `
     <style>
       .bounce-container {
         overflow: scroll;

package/dist/XSvg/XSvg.js

@@ -5,7 +5,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, bindToStyle, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 let XSvgFeatures = (() => {
     let _private_handleSrc_decorators;
@@ -57,7 +57,7 @@ let XSvgFeatures = (() => {
 })();
 export { XSvgFeatures };
 let XSvg = (() => {
-    let _classDecorators = [Component('x-svg', [LynxExposure, XSvgFeatures])];
+    let _classDecorators = [Component('x-svg', [CommonEventsAndMethods, XSvgFeatures])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XSwiper/SwiperItem.js

@@ -5,9 +5,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let SwiperItem = (() => {
-    let _classDecorators = [Component('x-swiper-item', [LynxExposure])];
+    let _classDecorators = [Component('x-swiper-item', [CommonEventsAndMethods])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XSwiper/XSwiper.js

@@ -9,11 +9,11 @@ import { XSwipeEvents } from './XSwiperEvents.js';
 import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
 import { XSwiperCircular } from './XSwiperCircular.js';
 import { XSwiperIndicator } from './XSwiperIndicator.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 let XSwiper = (() => {
     let _classDecorators = [Component('x-swiper', [
-            LynxExposure,
+            CommonEventsAndMethods,
             XSwiperIndicator,
             XSwipeEvents,
             XSwiperCircular,

package/dist/XText/RawText.js

@@ -14,17 +14,17 @@ let RawTextAttributes = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleText_decorators = [registerAttributeHandler('text', true)];
             __esDecorate(this, _private_handleText_descriptor = { value: __setFunctionName(function (newVal) {
+                    this.#text?.remove();
                     if (newVal) {
-                        this.#dom.innerHTML = newVal;
-                    }
-                    else {
-                        this.#dom.innerHTML = '';
+                        this.#text = new Text(newVal);
+                        this.#dom.append(this.#text);
                     }
                 }, "#handleText") }, _private_handleText_decorators, { kind: "method", name: "#handleText", static: false, private: true, access: { has: obj => #handleText in obj, get: obj => obj.#handleText }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = ['text'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
+        #text;
         constructor(currentElement) {
             this.#dom = currentElement;
         }

package/dist/XText/XText.d.ts

@@ -1,5 +1,7 @@
+import { layoutChangeTarget } from '../common/CommonEventsAndMethods.js';
 export declare class XText extends HTMLElement {
     static readonly notToFilterFalseAttributes: Set<string>;
     superScrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
     scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+    [layoutChangeTarget]: this;
 }

package/dist/XText/XText.js

@@ -5,12 +5,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
-import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
 let XText = (() => {
-    let _classDecorators = [Component('x-text', [LynxExposure, CommonEventsAndMethods, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`)];
+    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>`)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
@@ -40,6 +39,7 @@ let XText = (() => {
                 super.scrollIntoView(arg);
             }
         }
+        [layoutChangeTarget] = this;
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }

package/dist/XText/XTextTruncation.js

@@ -127,20 +127,19 @@ let XTextTruncation = (() => {
             if (this.#scheduledTextLayout)
                 return;
             this.#scheduledTextLayout = true;
-            boostedQueueMicrotask(() => {
-                this.#layoutTextInner();
+            boostedQueueMicrotask(async () => {
+                await this.#layoutTextInner();
                 this.#startObservers();
-                queueMicrotask(() => {
-                    this.#scheduledTextLayout = false;
-                });
+                this.#scheduledTextLayout = false;
             });
         }
-        #layoutTextInner() {
+        async #layoutTextInner() {
             this.#inplaceEllipsisNode?.parentElement?.removeChild(this.#inplaceEllipsisNode);
             this.#revertTruncatedTextNodes();
             if (!this.#doExpensiveLineLayoutCalculation && isNaN(this.#maxLength)) {
                 return;
             }
+            await document.fonts.ready;
             const parentBondingRect = this.#getInnerBox().getBoundingClientRect();
             this.#textMeasure = new TextRenderingMeasureTool(this.#dom, parentBondingRect);
             const measure = this.#textMeasure;
@@ -338,9 +337,7 @@ let XTextTruncation = (() => {
         connectedCallback() {
             this.#componentConnected = true;
             this.#handleEnableLayoutEvent(this.#enableLayoutEvent);
-            document.fonts.ready.then(() => {
-                this.#handleAttributeChange();
-            });
+            this.#handleAttributeChange();
             boostedQueueMicrotask(() => {
                 this.#sendLayoutEvent();
             });

package/dist/XTextarea/XTextarea.js

@@ -9,11 +9,11 @@ import { Placeholder } from './Placeholder.js';
 import { TextareaBaseAttributes } from './TextareaBaseAttributes.js';
 import { XTextareaAttributes } from './XTextareaAttributes.js';
 import { XTextareaEvents } from './XTextareaEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 // x-textarea
 let XTextarea = (() => {
     let _classDecorators = [Component('x-textarea', [
-            LynxExposure,
+            CommonEventsAndMethods,
             Placeholder,
             TextareaBaseAttributes,
             XTextareaAttributes,

package/dist/XView/XBlurView.js

@@ -5,10 +5,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { BlurRadius } from './BlurRadius.js';
 let XBlurView = (() => {
-    let _classDecorators = [Component('x-blur-view', [LynxExposure, BlurRadius], `<style id="dynamic-style"></style><slot></slot>`)];
+    let _classDecorators = [Component('x-blur-view', [CommonEventsAndMethods, BlurRadius], `<style id="dynamic-style"></style><slot></slot>`)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XView/XView.d.ts

@@ -1,4 +1,6 @@
+import { layoutChangeTarget } from '../common/CommonEventsAndMethods.js';
 export declare class XView extends HTMLElement {
     superScrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
     scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+    [layoutChangeTarget]: this;
 }

package/dist/XView/XView.js

@@ -6,10 +6,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
-import { LynxExposure } from '../common/Exposure.js';
-import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
 let XView = (() => {
-    let _classDecorators = [Component('x-view', [LynxExposure, CommonEventsAndMethods])];
+    let _classDecorators = [Component('x-view', [
+            CommonEventsAndMethods,
+        ])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
@@ -39,6 +40,7 @@ let XView = (() => {
                 super.scrollIntoView(arg);
             }
         }
+        [layoutChangeTarget] = this;
     };
     return XView = _classThis;
 })();

package/dist/XViewpagerNg/XViewpagerItemNg.js

@@ -5,10 +5,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XViewpagerItemNg = (() => {
     let _classDecorators = [Component('x-viewpager-item-ng', [
-            LynxExposure,
+            CommonEventsAndMethods,
         ])];
     let _classDescriptor;
     let _classExtraInitializers = [];

package/dist/XViewpagerNg/XViewpagerNg.js

@@ -5,11 +5,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { boostedQueueMicrotask, Component, html, } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XViewpagerNgEvents } from './XViewpagerNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
 let XViewpagerNg = (() => {
-    let _classDecorators = [Component('x-viewpager-ng', [LynxExposure, XViewpagerNgEvents], html `
+    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], html `
     <style>
       #bounce-padding {
         display: none;

package/dist/common/CommonEventsAndMethods.d.ts

@@ -1,6 +1,35 @@
+export declare const layoutChangeTarget: unique symbol;
+export interface ExposureParameters {
+    exposureID: string | null;
+    exposureArea: string | null;
+    exposureScene: string | null;
+    exposureScreenMarginTop: string | null;
+    exposureScreenMarginRight: string | null;
+    exposureScreenMarginBottom: string | null;
+    exposureScreenMarginLeft: string | null;
+    exposureUIMarginTop: string | null;
+    exposureUIMarginRight: string | null;
+    exposureUIMarginBottom: string | null;
+    exposureUIMarginLeft: string | null;
+}
+export interface ExposureEvent {
+    'exposure-id': string;
+    'exposure-scene': string;
+    exposureID: string;
+    exposureScene: string;
+}
 export declare class CommonEventsAndMethods {
     #private;
-    static readonly observedAttributes: never[];
-    constructor(currentElement: HTMLElement);
+    static readonly observedAttributes: string[];
+    constructor(currentElement: HTMLElement & {
+        [layoutChangeTarget]?: HTMLElement;
+    });
+    onExposureParamsChanged: () => void;
+    onExposureIdChanged(_: string | null, oldValue: string | null): void;
+    attributeChangedHandler: this;
+    eventStatusChangedHandler: {
+        uiappear: (status: boolean) => void;
+        uidisappear: (status: boolean) => void;
+    };
     __handleScrollUpperThresholdEventEnabled: (enabled: boolean) => void;
 }