@lynx-js/web-elements 0.2.4

package/dist/XFoldViewNg/XFoldviewNg.d.ts

@@ -0,0 +1,11 @@
+import { scrollContainerDom } from '../common/constants.js';
+export declare class XFoldviewNg extends HTMLElement {
+    static readonly notToFilterFalseAttributes: Set<string>;
+    __scrollableLength: number;
+    get __headershowing(): boolean;
+    setFoldExpanded(params: {
+        offset: string;
+        smooth: boolean;
+    }): void;
+    get [scrollContainerDom](): this;
+}

package/dist/XFoldViewNg/XFoldviewNg.js

@@ -0,0 +1,52 @@
+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 { LynxExposure } from '../common/Exposure.js';
+import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
+import { scrollContainerDom } from '../common/constants.js';
+let XFoldviewNg = (() => {
+    let _classDecorators = [Component('x-foldview-ng', [
+            LynxExposure,
+            XFoldviewNgEvents,
+        ])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XFoldviewNg = 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);
+            XFoldviewNg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set(['scroll-enable']);
+        __scrollableLength = 0;
+        get __headershowing() {
+            // This behavior cannot be reproduced in the current test, but can be reproduced in Android WebView
+            return Math.abs(this.scrollTop - this.__scrollableLength) > 1;
+        }
+        setFoldExpanded(params) {
+            const { offset, smooth = true } = params;
+            const offsetValue = parseFloat(offset);
+            this.scrollTo({
+                top: offsetValue,
+                behavior: smooth ? 'smooth' : 'instant',
+            });
+        }
+        get [scrollContainerDom]() {
+            return this;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XFoldviewNg = _classThis;
+})();
+export { XFoldviewNg };
+//# sourceMappingURL=XFoldviewNg.js.map

package/dist/XFoldViewNg/XFoldviewNgEvents.d.ts

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

package/dist/XFoldViewNg/XFoldviewNgEvents.js

@@ -0,0 +1,55 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+let XFoldviewNgEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleGranularity_decorators;
+    let _private_handleGranularity_descriptor;
+    return class XFoldviewNgEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleGranularity_decorators = [registerAttributeHandler('granularity', true)];
+            __esDecorate(this, _private_handleGranularity_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal && newVal !== '')
+                        this.#granularity = parseFloat(newVal);
+                    else
+                        this.#granularity = 0.01;
+                }, "#handleGranularity") }, _private_handleGranularity_decorators, { kind: "method", name: "#handleGranularity", static: false, private: true, access: { has: obj => #handleGranularity in obj, get: obj => obj.#handleGranularity }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #granularity = 0.01;
+        #pervScroll = 0;
+        constructor(dom) {
+            this.#dom = dom;
+            this.#dom.addEventListener('scroll', this.#handleScroll, {
+                passive: true,
+            });
+        }
+        static observedAttributes = ['granularity'];
+        get #handleGranularity() { return _private_handleGranularity_descriptor.value; }
+        #handleScroll = () => {
+            const curentScrollTop = this.#dom.scrollTop;
+            const scrollLength = Math.abs(this.#pervScroll - curentScrollTop);
+            if (scrollLength > this.#granularity
+                || this.#dom.scrollTop === 0
+                || Math.abs(this.#dom.scrollHeight - this.#dom.clientHeight - this.#dom.scrollTop) <= 1) {
+                this.#pervScroll = curentScrollTop;
+                this.#dom.dispatchEvent(new CustomEvent('offset', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        offset: curentScrollTop,
+                        height: this.#dom.__scrollableLength,
+                    },
+                }));
+            }
+        };
+    };
+})();
+export { XFoldviewNgEvents };
+//# sourceMappingURL=XFoldviewNgEvents.js.map

package/dist/XFoldViewNg/XFoldviewSlotDragNg.d.ts

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

package/dist/XFoldViewNg/XFoldviewSlotDragNg.js

@@ -0,0 +1,30 @@
+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 { LynxExposure } from '../common/Exposure.js';
+let XFoldviewSlotDragNg = (() => {
+    let _classDecorators = [Component('x-foldivew-slot-drag-ng', [
+            LynxExposure,
+        ])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XFoldviewSlotDragNg = 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);
+            XFoldviewSlotDragNg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XFoldviewSlotDragNg = _classThis;
+})();
+export { XFoldviewSlotDragNg };
+//# sourceMappingURL=XFoldviewSlotDragNg.js.map

package/dist/XFoldViewNg/XFoldviewSlotNg.d.ts

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

package/dist/XFoldViewNg/XFoldviewSlotNg.js

@@ -0,0 +1,32 @@
+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 { LynxExposure } from '../common/Exposure.js';
+import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
+let XFoldviewSlotNg = (() => {
+    let _classDecorators = [Component('x-foldview-slot-ng', [
+            LynxExposure,
+            XFoldviewSlotNgTouchEventsHandler,
+        ])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XFoldviewSlotNg = 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);
+            XFoldviewSlotNg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XFoldviewSlotNg = _classThis;
+})();
+export { XFoldviewSlotNg };
+//# sourceMappingURL=XFoldviewSlotNg.js.map

package/dist/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.d.ts

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

package/dist/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -0,0 +1,105 @@
+import { isChromium } from '../common/constants.js';
+export class XFoldviewSlotNgTouchEventsHandler {
+    #parentScrollTop = 0;
+    #childrenElemsntsScrollTop = new WeakMap();
+    #childrenElemsntsScrollLeft = new WeakMap();
+    #elements;
+    #previousPageY = 0;
+    #previousPageX = 0;
+    #dom;
+    static observedAttributes = [];
+    constructor(dom) {
+        this.#dom = dom;
+        this.#dom.addEventListener('touchmove', this.#scroller, {
+            passive: false,
+        });
+        this.#dom.addEventListener('touchstart', this.#initPreviousScreen, {
+            passive: true,
+        });
+        this.#dom.addEventListener('touchcancel', this.#initPreviousScreen, {
+            passive: true,
+        });
+    }
+    #getTheMostScrollableKid(delta, isVertical) {
+        const scrollableKid = this.#elements?.find((element) => {
+            if ((isVertical && element.scrollHeight > element.clientHeight)
+                || (!isVertical && element.scrollWidth > element.clientWidth)) {
+                const couldScrollNear = delta < 0
+                    && (isVertical ? element.scrollTop !== 0 : element.scrollLeft !== 0);
+                const couldScrollFar = delta > 0
+                    && Math.abs(isVertical
+                        ? (element.scrollHeight - element.clientHeight
+                            - element.scrollTop)
+                        : (element.scrollWidth - element.clientWidth
+                            - element.scrollLeft)) > 1;
+                return couldScrollNear || couldScrollFar;
+            }
+            return false;
+        });
+        return scrollableKid;
+    }
+    #scrollKid(scrollableKid, delta, isVertical) {
+        let targetKidScrollDistance = (isVertical
+            ? this.#childrenElemsntsScrollTop
+            : this.#childrenElemsntsScrollLeft)
+            .get(scrollableKid) ?? 0;
+        targetKidScrollDistance += delta;
+        this.#childrenElemsntsScrollTop.set(scrollableKid, targetKidScrollDistance);
+        isVertical
+            ? (scrollableKid.scrollTop = targetKidScrollDistance)
+            : (scrollableKid.scrollLeft = targetKidScrollDistance);
+    }
+    #scroller = (event) => {
+        const parentElement = this.#getParentElement();
+        const touch = event.touches.item(0);
+        const { pageY, pageX } = touch;
+        const deltaY = this.#previousPageY - pageY;
+        const deltaX = this.#previousPageX - pageX;
+        const scrollableKidY = this.#getTheMostScrollableKid(deltaY, true);
+        const scrollableKidX = this.#getTheMostScrollableKid(deltaX, false);
+        /**
+         * on chromium browsers, the y-axis js scrolling won't interrupt the pan-x gestures
+         * we make sure the x-axis scrolling will block the y-axis scrolling
+         */
+        if (deltaY && parentElement && Math.abs(deltaX / 4) < Math.abs(deltaY)) {
+            if (event.cancelable && !isChromium) {
+                event.preventDefault();
+                if (scrollableKidX) {
+                    this.#scrollKid(scrollableKidX, deltaX, false);
+                }
+            }
+            if ((parentElement.__headershowing && deltaY > 0
+                || (deltaY < 0 && !scrollableKidY))
+                // deltaY > 0: swipe up (folding header)
+                // scroll the foldview if its scrollable
+                || (!parentElement.__headershowing && !scrollableKidY)
+            // all sub doms are scrolled
+            ) {
+                this.#parentScrollTop += deltaY;
+                parentElement.scrollTop = this.#parentScrollTop;
+            }
+            else if (scrollableKidY) {
+                this.#scrollKid(scrollableKidY, deltaY, true);
+            }
+        }
+        this.#previousPageY = pageY;
+    };
+    #getParentElement() {
+        const parentElement = this.#dom.parentElement;
+        if (parentElement && parentElement.tagName === 'X-FOLDVIEW-NG') {
+            return parentElement;
+        }
+    }
+    #initPreviousScreen = (event) => {
+        const { pageX, pageY } = event.touches.item(0);
+        this.#elements = document.elementsFromPoint(pageX, pageY).filter(e => this.#dom.contains(e));
+        this.#previousPageY = pageY;
+        this.#previousPageX = pageX;
+        this.#parentScrollTop = this.#getParentElement()?.scrollTop ?? 0;
+        for (const element of this.#elements) {
+            this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
+            this.#childrenElemsntsScrollLeft.set(element, element.scrollLeft);
+        }
+    };
+}
+//# sourceMappingURL=XFoldviewSlotNgTouchEventsHandler.js.map

package/dist/XFoldViewNg/XFoldviewToolbarNg.d.ts

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

package/dist/XFoldViewNg/XFoldviewToolbarNg.js

@@ -0,0 +1,30 @@
+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 { LynxExposure } from '../common/Exposure.js';
+let XFoldviewToolbarNg = (() => {
+    let _classDecorators = [Component('x-foldview-toolbar-ng', [
+            LynxExposure,
+        ])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XFoldviewToolbarNg = 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);
+            XFoldviewToolbarNg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XFoldviewToolbarNg = _classThis;
+})();
+export { XFoldviewToolbarNg };
+//# sourceMappingURL=XFoldviewToolbarNg.js.map

package/dist/XFoldViewNg/index.d.ts

@@ -0,0 +1,5 @@
+export { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
+export { XFoldviewNg } from './XFoldviewNg.js';
+export { XFoldviewSlotDragNg } from './XFoldviewSlotDragNg.js';
+export { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
+export { XFoldviewToolbarNg } from './XFoldviewToolbarNg.js';

package/dist/XFoldViewNg/index.js

@@ -0,0 +1,6 @@
+export { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
+export { XFoldviewNg } from './XFoldviewNg.js';
+export { XFoldviewSlotDragNg } from './XFoldviewSlotDragNg.js';
+export { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
+export { XFoldviewToolbarNg } from './XFoldviewToolbarNg.js';
+//# sourceMappingURL=index.js.map

package/dist/XImage/DropShadow.d.ts

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

package/dist/XImage/DropShadow.js

@@ -0,0 +1,30 @@
+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 { bindToStyle, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let DropShadow = (() => {
+    let _private_handleBlurRadius_decorators;
+    let _private_handleBlurRadius_initializers = [];
+    let _private_handleBlurRadius_extraInitializers = [];
+    return class DropShadow {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleBlurRadius_decorators = [registerAttributeHandler('drop-shadow', true)];
+            __esDecorate(null, null, _private_handleBlurRadius_decorators, { kind: "field", name: "#handleBlurRadius", static: false, private: true, access: { has: obj => #handleBlurRadius in obj, get: obj => obj.#handleBlurRadius, set: (obj, value) => { obj.#handleBlurRadius = value; } }, metadata: _metadata }, _private_handleBlurRadius_initializers, _private_handleBlurRadius_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['drop-shadow'];
+        #dom;
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        #handleBlurRadius = __runInitializers(this, _private_handleBlurRadius_initializers, bindToStyle(this.#getImg, '--drop-shadow', undefined, true));
+        constructor(dom) {
+            __runInitializers(this, _private_handleBlurRadius_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { DropShadow };
+//# sourceMappingURL=DropShadow.js.map

package/dist/XImage/FilterImage.d.ts

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

package/dist/XImage/FilterImage.js

@@ -0,0 +1,31 @@
+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, html } from '@lynx-js/web-elements-reactive';
+import { LynxExposure } from '../common/Exposure.js';
+import { DropShadow } from './DropShadow.js';
+import { ImageSrc } from './ImageSrc.js';
+import { ImageEvents } from './ImageEvents.js';
+let FilterImage = (() => {
+    let _classDecorators = [Component('filter-image', [LynxExposure, ImageSrc, DropShadow, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var FilterImage = 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);
+            FilterImage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return FilterImage = _classThis;
+})();
+export { FilterImage };
+//# sourceMappingURL=FilterImage.js.map

package/dist/XImage/ImageEvents.d.ts

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

package/dist/XImage/ImageEvents.js

@@ -0,0 +1,68 @@
+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';
+let ImageEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_enableLoadEvent_decorators;
+    let _private_enableLoadEvent_descriptor;
+    let _private_enableErrorEvent_decorators;
+    let _private_enableErrorEvent_descriptor;
+    return class ImageEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_enableLoadEvent_decorators = [registerAttributeHandler('x-enable-load-event', true)];
+            _private_enableErrorEvent_decorators = [registerAttributeHandler('x-enable-error-event', true)];
+            __esDecorate(this, _private_enableLoadEvent_descriptor = { value: __setFunctionName(function (value) {
+                    if (value === null) {
+                        this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
+                    }
+                    else {
+                        this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
+                            passive: true,
+                        });
+                    }
+                }, "#enableLoadEvent") }, _private_enableLoadEvent_decorators, { kind: "method", name: "#enableLoadEvent", static: false, private: true, access: { has: obj => #enableLoadEvent in obj, get: obj => obj.#enableLoadEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_enableErrorEvent_descriptor = { value: __setFunctionName(function (value) {
+                    if (value === null) {
+                        this.#getImg().removeEventListener('error', this.#teleportErrorEvent);
+                    }
+                    else {
+                        this.#getImg().addEventListener('error', this.#teleportErrorEvent, {
+                            passive: true,
+                        });
+                    }
+                }, "#enableErrorEvent") }, _private_enableErrorEvent_decorators, { kind: "method", name: "#enableErrorEvent", static: false, private: true, access: { has: obj => #enableErrorEvent in obj, get: obj => obj.#enableErrorEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['x-enable-load-event', 'x-enable-error-event'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        get #enableLoadEvent() { return _private_enableLoadEvent_descriptor.value; }
+        get #enableErrorEvent() { return _private_enableErrorEvent_descriptor.value; }
+        #teleportLoadEvent = () => {
+            this.#dom.dispatchEvent(new CustomEvent('load', {
+                ...commonComponentEventSetting,
+                detail: {
+                    width: this.#getImg().naturalWidth,
+                    height: this.#getImg().naturalHeight,
+                },
+            }));
+        };
+        #teleportErrorEvent = () => {
+            this.#dom.dispatchEvent(new CustomEvent('error', {
+                ...commonComponentEventSetting,
+                detail: {},
+            }));
+        };
+        constructor(dom) {
+            this.#dom = dom;
+        }
+    };
+})();
+export { ImageEvents };
+//# sourceMappingURL=ImageEvents.js.map

package/dist/XImage/ImageSrc.d.ts

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

package/dist/XImage/ImageSrc.js

@@ -0,0 +1,61 @@
+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 { bindToAttribute, bindToStyle, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let ImageSrc = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleSrc_decorators;
+    let _private_handleSrc_initializers = [];
+    let _private_handleSrc_extraInitializers = [];
+    let _private_preloadPlaceholder_decorators;
+    let _private_preloadPlaceholder_descriptor;
+    let _private_handleBlurRadius_decorators;
+    let _private_handleBlurRadius_initializers = [];
+    let _private_handleBlurRadius_extraInitializers = [];
+    return class ImageSrc {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
+            _private_preloadPlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
+            _private_handleBlurRadius_decorators = [registerAttributeHandler('blur-radius', true)];
+            __esDecorate(this, _private_preloadPlaceholder_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal) {
+                        new Image().src = newVal;
+                    }
+                }, "#preloadPlaceholder") }, _private_preloadPlaceholder_decorators, { kind: "method", name: "#preloadPlaceholder", static: false, private: true, access: { has: obj => #preloadPlaceholder in obj, get: obj => obj.#preloadPlaceholder }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _private_handleSrc_decorators, { kind: "field", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc, set: (obj, value) => { obj.#handleSrc = value; } }, metadata: _metadata }, _private_handleSrc_initializers, _private_handleSrc_extraInitializers);
+            __esDecorate(null, null, _private_handleBlurRadius_decorators, { kind: "field", name: "#handleBlurRadius", static: false, private: true, access: { has: obj => #handleBlurRadius in obj, get: obj => obj.#handleBlurRadius, set: (obj, value) => { obj.#handleBlurRadius = value; } }, metadata: _metadata }, _private_handleBlurRadius_initializers, _private_handleBlurRadius_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['src', 'placeholder', 'blur-radius'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        #handleSrc = __runInitializers(this, _private_handleSrc_initializers, bindToAttribute(this.#getImg, 'src', (newval) => {
+            return newval || this.#dom.getAttribute('placeholder');
+        }));
+        get #preloadPlaceholder() { return _private_preloadPlaceholder_descriptor.value; }
+        #handleBlurRadius = (__runInitializers(this, _private_handleSrc_extraInitializers), __runInitializers(this, _private_handleBlurRadius_initializers, bindToStyle(this.#getImg, '--blur-radius', undefined, true)));
+        #onImageError = (__runInitializers(this, _private_handleBlurRadius_extraInitializers), () => {
+            const currentSrc = this.#getImg().src;
+            const placeholder = this.#dom.getAttribute('placeholder');
+            if (placeholder && currentSrc !== placeholder) {
+                this.#getImg().src = placeholder;
+            }
+        });
+        constructor(dom) {
+            this.#dom = dom;
+            this.#getImg().addEventListener('error', this.#onImageError);
+        }
+        connectedCallback() {
+            if (this.#dom.getAttribute('src') === null
+                || this.#dom.getAttribute('src') === '') {
+                this.#handleSrc(null);
+            }
+        }
+    };
+})();
+export { ImageSrc };
+//# sourceMappingURL=ImageSrc.js.map

package/dist/XImage/XImage.d.ts

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

package/dist/XImage/XImage.js

@@ -0,0 +1,30 @@
+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, html } from '@lynx-js/web-elements-reactive';
+import { LynxExposure } from '../common/Exposure.js';
+import { ImageSrc } from './ImageSrc.js';
+import { ImageEvents } from './ImageEvents.js';
+let XImage = (() => {
+    let _classDecorators = [Component('x-image', [LynxExposure, ImageSrc, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XImage = 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);
+            XImage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XImage = _classThis;
+})();
+export { XImage };
+//# sourceMappingURL=XImage.js.map

package/dist/XImage/index.d.ts

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

package/dist/XImage/index.js

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

package/dist/XInput/InputBaseAttributes.d.ts

@@ -0,0 +1,9 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+/**
+ * shared by x-input and x-input-ng
+ */
+export declare class InputBaseAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: HTMLElement);
+}