@lynx-js/web-elements 0.9.0 → 0.10.0

package/dist/{XOverlayNg → elements/XOverlayNg}/XOverlayAttributes.d.ts

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

package/dist/elements/XOverlayNg/XOverlayAttributes.js

@@ -0,0 +1,83 @@
+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 { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerAttributeHandler, genDomGetter, } from '../../element-reactive/index.js';
+let XOverlayAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleEventsPassThrough_decorators;
+    let __handleVisible_decorators;
+    return class XOverlayAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleEventsPassThrough_decorators = [registerAttributeHandler('events-pass-through', true)];
+            __handleVisible_decorators = [registerAttributeHandler('visible', false)];
+            __esDecorate(this, null, __handleEventsPassThrough_decorators, { kind: "method", name: "_handleEventsPassThrough", static: false, private: false, access: { has: obj => "_handleEventsPassThrough" in obj, get: obj => obj._handleEventsPassThrough }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleVisible_decorators, { kind: "method", name: "_handleVisible", static: false, private: false, 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');
+        _handleEventsPassThrough(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);
+            }
+        }
+        _handleVisible(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));
+                }
+            }
+        }
+        #portalEventToMainDocument = (e) => {
+            e.stopPropagation();
+            const diaglogDom = this.#getDialogDom();
+            if (e.target === this.#dom || e.target === diaglogDom) {
+                diaglogDom.close();
+                const { clientX, clientY } = e;
+                let targetElement = document.elementFromPoint(clientX, clientY);
+                if (targetElement?.tagName === 'LYNX-VIEW' && targetElement.shadowRoot) {
+                    targetElement =
+                        targetElement.shadowRoot.elementFromPoint(clientX, clientY)
+                            ?? targetElement;
+                }
+                targetElement?.dispatchEvent(new MouseEvent('click', e));
+                requestAnimationFrame(() => {
+                    if (this.#visible && diaglogDom.isConnected) {
+                        diaglogDom.showModal();
+                    }
+                });
+            }
+        };
+        connectedCallback() {
+            if (!this.#useModernDialog) {
+                this.#getDialogDom().style.display = 'none';
+            }
+        }
+    };
+})();
+export { XOverlayAttributes };
+//# sourceMappingURL=XOverlayAttributes.js.map

package/dist/{XOverlayNg → elements/XOverlayNg}/XOverlayNg.js

@@ -4,10 +4,10 @@ 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 { templateXOverlayNg } from '@lynx-js/web-elements-template';
+import { templateXOverlayNg } from '../htmlTemplates.js';
 import { layoutChangeTarget, CommonEventsAndMethods, } from '../common/CommonEventsAndMethods.js';
 import { XOverlayAttributes } from './XOverlayAttributes.js';
-import { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 let XOverlayNg = (() => {
     let _classDecorators = [Component('x-overlay-ng', [CommonEventsAndMethods, XOverlayAttributes], templateXOverlayNg)];
     let _classDescriptor;

package/dist/elements/XOverlayNg/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module elements/XOverlayNg
+ *
+ * `x-overlay-ng` provides a modal overlay using the `<dialog>` element.
+ *
+ * Attributes:
+ * - `visible`: 'true' | 'false', shows or hides the overlay.
+ * - `events-pass-through`: 'true' | 'false', allows clicks to pass through to the underlying document.
+ *
+ * Events:
+ * - `showoverlay`: Fired when the overlay is shown.
+ * - `dismissoverlay`: Fired when the overlay is dismissed.
+ */
+export { XOverlayNg } from './XOverlayNg.js';

package/dist/elements/XOverlayNg/index.js

@@ -0,0 +1,18 @@
+// 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.
+/**
+ * @module elements/XOverlayNg
+ *
+ * `x-overlay-ng` provides a modal overlay using the `<dialog>` element.
+ *
+ * Attributes:
+ * - `visible`: 'true' | 'false', shows or hides the overlay.
+ * - `events-pass-through`: 'true' | 'false', allows clicks to pass through to the underlying document.
+ *
+ * Events:
+ * - `showoverlay`: Fired when the overlay is shown.
+ * - `dismissoverlay`: Fired when the overlay is dismissed.
+ */
+export { XOverlayNg } from './XOverlayNg.js';
+//# sourceMappingURL=index.js.map

package/dist/{XRefreshView → elements/XRefreshView}/XRefreshFooter.js

@@ -4,7 +4,7 @@ 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 { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XRefreshFooter = (() => {

package/dist/{XRefreshView → elements/XRefreshView}/XRefreshHeader.js

@@ -4,7 +4,7 @@ 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 { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XRefreshHeader = (() => {

package/dist/{XRefreshView → elements/XRefreshView}/XRefreshSubElementIntersectionObserver.d.ts

@@ -1,4 +1,4 @@
-import type { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { XRefreshFooter } from './XRefreshFooter.js';
 import type { XRefreshHeader } from './XRefreshHeader.js';
 export declare class XRefreshIntersectionObserverEvent extends Event {

package/dist/{XRefreshView → elements/XRefreshView}/XRefreshView.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 { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '../../element-reactive/index.js';
 import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
-import { templateXRefreshView } from '@lynx-js/web-elements-template';
+import { templateXRefreshView } from '../htmlTemplates.js';
 let XRefreshView = (() => {
     let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
     let _classDescriptor;

package/dist/{XRefreshView → elements/XRefreshView}/XRefreshViewEventsEmitter.d.ts

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

package/dist/{XRefreshView → elements/XRefreshView}/XRefreshViewEventsEmitter.js

@@ -1,51 +1,24 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+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 { genDomGetter, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, } from '../../element-reactive/index.js';
 import { XRefreshIntersectionObserverEvent } from './XRefreshSubElementIntersectionObserver.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
-import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
 let XRefreshViewEventsEmitter = (() => {
     let _instanceExtraInitializers = [];
-    let _private_handleComplexEventEnableAttributes_decorators;
-    let _private_handleComplexEventEnableAttributes_descriptor;
-    let _private_handleXEnableHeaderOffsetEvent_decorators;
-    let _private_handleXEnableHeaderOffsetEvent_descriptor;
+    let __handleComplexEventEnableAttributes_decorators;
+    let __handleXEnableHeaderOffsetEvent_decorators;
     return class XRefreshViewEventsEmitter {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleComplexEventEnableAttributes_decorators = [registerEventEnableStatusChangeHandler('headeroffset'), registerEventEnableStatusChangeHandler('headershow'), registerEventEnableStatusChangeHandler('footeroffset')];
-            _private_handleXEnableHeaderOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('startrefresh'), registerEventEnableStatusChangeHandler('headerreleased'), registerEventEnableStatusChangeHandler('startloadmore'), registerEventEnableStatusChangeHandler('footerreleased')];
-            __esDecorate(this, _private_handleComplexEventEnableAttributes_descriptor = { value: __setFunctionName(function (status, eventName) {
-                    this
-                        .#eventSwitches[eventName] = status;
-                    const { headeroffset, headershow, footeroffset } = this.#eventSwitches;
-                    if (headeroffset
-                        || headershow
-                        || footeroffset) {
-                        this.#enableComplexRefreshViewEvents();
-                    }
-                    else {
-                        this.#disableComplexRefreshViewEvents();
-                    }
-                }, "#handleComplexEventEnableAttributes") }, _private_handleComplexEventEnableAttributes_decorators, { kind: "method", name: "#handleComplexEventEnableAttributes", static: false, private: true, access: { has: obj => #handleComplexEventEnableAttributes in obj, get: obj => obj.#handleComplexEventEnableAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleXEnableHeaderOffsetEvent_descriptor = { value: __setFunctionName(function (status, eventName) {
-                    this
-                        .#eventSwitches[eventName] = status;
-                    const { startrefresh, headerreleased, startloadmore, footerreleased } = this.#eventSwitches;
-                    if (headerreleased
-                        || footerreleased
-                        || startloadmore
-                        || startrefresh) {
-                        this.#enableSimpleRefreshViewEvents();
-                    }
-                    else {
-                        this.#disableSimpleRefreshViewEvents();
-                    }
-                }, "#handleXEnableHeaderOffsetEvent") }, _private_handleXEnableHeaderOffsetEvent_decorators, { kind: "method", name: "#handleXEnableHeaderOffsetEvent", static: false, private: true, access: { has: obj => #handleXEnableHeaderOffsetEvent in obj, get: obj => obj.#handleXEnableHeaderOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __handleComplexEventEnableAttributes_decorators = [registerEventEnableStatusChangeHandler('headeroffset'), registerEventEnableStatusChangeHandler('headershow'), registerEventEnableStatusChangeHandler('footeroffset')];
+            __handleXEnableHeaderOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('startrefresh'), registerEventEnableStatusChangeHandler('headerreleased'), registerEventEnableStatusChangeHandler('startloadmore'), registerEventEnableStatusChangeHandler('footerreleased')];
+            __esDecorate(this, null, __handleComplexEventEnableAttributes_decorators, { kind: "method", name: "_handleComplexEventEnableAttributes", static: false, private: false, access: { has: obj => "_handleComplexEventEnableAttributes" in obj, get: obj => obj._handleComplexEventEnableAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleXEnableHeaderOffsetEvent_decorators, { kind: "method", name: "_handleXEnableHeaderOffsetEvent", static: false, private: false, access: { has: obj => "_handleXEnableHeaderOffsetEvent" in obj, get: obj => obj._handleXEnableHeaderOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #dom = __runInitializers(this, _instanceExtraInitializers);
@@ -66,8 +39,33 @@ let XRefreshViewEventsEmitter = (() => {
             startloadmore: false,
         };
         // complex events switches
-        get #handleComplexEventEnableAttributes() { return _private_handleComplexEventEnableAttributes_descriptor.value; }
-        get #handleXEnableHeaderOffsetEvent() { return _private_handleXEnableHeaderOffsetEvent_descriptor.value; }
+        _handleComplexEventEnableAttributes(status, eventName) {
+            this
+                .#eventSwitches[eventName] = status;
+            const { headeroffset, headershow, footeroffset } = this.#eventSwitches;
+            if (headeroffset
+                || headershow
+                || footeroffset) {
+                this.#enableComplexRefreshViewEvents();
+            }
+            else {
+                this.#disableComplexRefreshViewEvents();
+            }
+        }
+        _handleXEnableHeaderOffsetEvent(status, eventName) {
+            this
+                .#eventSwitches[eventName] = status;
+            const { startrefresh, headerreleased, startloadmore, footerreleased } = this.#eventSwitches;
+            if (headerreleased
+                || footerreleased
+                || startloadmore
+                || startrefresh) {
+                this.#enableSimpleRefreshViewEvents();
+            }
+            else {
+                this.#disableSimpleRefreshViewEvents();
+            }
+        }
         /**
          * handle header/footer showing events
          */
@@ -166,7 +164,6 @@ let XRefreshViewEventsEmitter = (() => {
                 if (footer) {
                     const contentDom = this.#dom.shadowRoot.querySelector('#container');
                     const scrollTop = contentDom.scrollTop;
-                    const scrollHeight = contentDom.scrollHeight;
                     const height = parseFloat(getComputedStyle(footer).height);
                     this.#dom.dispatchEvent(new CustomEvent('footeroffset', {
                         ...commonComponentEventSetting,

package/dist/elements/XRefreshView/index.d.ts

@@ -0,0 +1,26 @@
+export { XRefreshFooter } from './XRefreshFooter.js';
+export { XRefreshHeader } from './XRefreshHeader.js';
+/**
+ * @module elements/XRefreshView
+ *
+ * `x-refresh-view` provides pull-to-refresh and load-more functionality.
+ *
+ * Attributes:
+ * - `enable-refresh`: 'true' | 'false'.
+ * - `enable-loadmore`: 'true' | 'false'.
+ * - `enable-auto-loadmore`: 'true' | 'false'.
+ *
+ * Events:
+ * - `startrefresh`: Fired when refresh triggers. Detail: `{ isManual }`.
+ * - `startloadmore`: Fired when load more triggers.
+ * - `headerreleased`: Fired when header is released.
+ * - `footerreleased`: Fired when footer is released.
+ * - `headeroffset` / `headershow`: Fired during pull down. Detail: `{ isDragging, offsetPercent }`.
+ * - `footeroffset`: Fired during pull up. Detail: `{ isDragging, offsetPercent }`.
+ *
+ * Methods:
+ * - `finishRefresh()`: Stops refresh animation.
+ * - `finishLoadMore()`: Stops load more animation.
+ * - `autoStartRefresh()`: Manually triggers refresh.
+ */
+export { XRefreshView } from './XRefreshView.js';

package/dist/elements/XRefreshView/index.js

@@ -0,0 +1,30 @@
+// 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.
+export { XRefreshFooter } from './XRefreshFooter.js';
+export { XRefreshHeader } from './XRefreshHeader.js';
+/**
+ * @module elements/XRefreshView
+ *
+ * `x-refresh-view` provides pull-to-refresh and load-more functionality.
+ *
+ * Attributes:
+ * - `enable-refresh`: 'true' | 'false'.
+ * - `enable-loadmore`: 'true' | 'false'.
+ * - `enable-auto-loadmore`: 'true' | 'false'.
+ *
+ * Events:
+ * - `startrefresh`: Fired when refresh triggers. Detail: `{ isManual }`.
+ * - `startloadmore`: Fired when load more triggers.
+ * - `headerreleased`: Fired when header is released.
+ * - `footerreleased`: Fired when footer is released.
+ * - `headeroffset` / `headershow`: Fired during pull down. Detail: `{ isDragging, offsetPercent }`.
+ * - `footeroffset`: Fired during pull up. Detail: `{ isDragging, offsetPercent }`.
+ *
+ * Methods:
+ * - `finishRefresh()`: Stops refresh animation.
+ * - `finishLoadMore()`: Stops load more animation.
+ * - `autoStartRefresh()`: Manually triggers refresh.
+ */
+export { XRefreshView } from './XRefreshView.js';
+//# sourceMappingURL=index.js.map

package/dist/{XSvg → elements/XSvg}/XSvg.d.ts

@@ -1,7 +1,10 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 export declare class XSvgFeatures implements InstanceType<AttributeReactiveClass<typeof XSvg>> {
     #private;
     static observedAttributes: string[];
+    _handleSrc(newVal: string | null): void;
+    _handleContent(content: string | null): void;
+    _enableLoadEvent(status: boolean): void;
     constructor(dom: HTMLElement);
 }
 export declare class XSvg extends HTMLElement {

package/dist/elements/XSvg/XSvg.js

@@ -0,0 +1,96 @@
+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, genDomGetter, registerAttributeHandler, registerEventEnableStatusChangeHandler, } from '../../element-reactive/index.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { templateXSvg } from '../htmlTemplates.js';
+let XSvgFeatures = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleSrc_decorators;
+    let __handleContent_decorators;
+    let __enableLoadEvent_decorators;
+    return class XSvgFeatures {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleSrc_decorators = [registerAttributeHandler('src', true)];
+            __handleContent_decorators = [registerAttributeHandler('content', true)];
+            __enableLoadEvent_decorators = [registerEventEnableStatusChangeHandler('load')];
+            __esDecorate(this, null, __handleSrc_decorators, { kind: "method", name: "_handleSrc", static: false, private: false, access: { has: obj => "_handleSrc" in obj, get: obj => obj._handleSrc }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleContent_decorators, { kind: "method", name: "_handleContent", static: false, private: false, access: { has: obj => "_handleContent" in obj, get: obj => obj._handleContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __enableLoadEvent_decorators, { kind: "method", name: "_enableLoadEvent", static: false, private: false, access: { has: obj => "_enableLoadEvent" in obj, get: obj => obj._enableLoadEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['src', 'content'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #url = null;
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        _handleSrc(newVal) {
+            if (!newVal) {
+                this.#getImg().src = '';
+            }
+            else {
+                this.#getImg().src = newVal;
+            }
+        }
+        _handleContent(content) {
+            this.#url && URL.revokeObjectURL(this.#url);
+            if (!content) {
+                this.#url = '';
+                return;
+            }
+            const blob = new Blob([content], {
+                type: 'image/svg+xml;charset=UTF-8',
+            });
+            const src = URL.createObjectURL(blob);
+            this.#url = src;
+            this.#getImg().src = src;
+        }
+        _enableLoadEvent(status) {
+            if (status) {
+                this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
+                    passive: true,
+                });
+            }
+            else {
+                this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
+            }
+        }
+        #teleportLoadEvent = () => {
+            this.#dom.dispatchEvent(new CustomEvent('load', {
+                ...commonComponentEventSetting,
+                detail: {
+                    width: this.#getImg().naturalWidth,
+                    height: this.#getImg().naturalHeight,
+                },
+            }));
+        };
+        constructor(dom) {
+            this.#dom = dom;
+        }
+    };
+})();
+export { XSvgFeatures };
+let XSvg = (() => {
+    let _classDecorators = [Component('x-svg', [CommonEventsAndMethods, XSvgFeatures], templateXSvg())];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XSvg = 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);
+            XSvg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XSvg = _classThis;
+})();
+export { XSvg };
+//# sourceMappingURL=XSvg.js.map

package/dist/elements/XSvg/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @module elements/XSvg
+ *
+ * `x-svg` displays SVG content.
+ *
+ * Attributes:
+ * - `src`: URL of the SVG file.
+ * - `content`: Raw SVG content string.
+ *
+ * Events:
+ * - `load`: Fired when SVG loads. Detail: `{ width, height }`.
+ */
+export { XSvg } from './XSvg.js';

package/dist/elements/XSvg/index.js

@@ -0,0 +1,17 @@
+// 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.
+/**
+ * @module elements/XSvg
+ *
+ * `x-svg` displays SVG content.
+ *
+ * Attributes:
+ * - `src`: URL of the SVG file.
+ * - `content`: Raw SVG content string.
+ *
+ * Events:
+ * - `load`: Fired when SVG loads. Detail: `{ width, height }`.
+ */
+export { XSvg } from './XSvg.js';
+//# sourceMappingURL=index.js.map

package/dist/{XSwiper → elements/XSwiper}/SwiperItem.js

@@ -4,7 +4,7 @@ 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 { Component } from '@lynx-js/web-elements-reactive';
+import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let SwiperItem = (() => {
     let _classDecorators = [Component('x-swiper-item', [CommonEventsAndMethods])];

package/dist/{XSwiper → elements/XSwiper}/XSwiper.js

@@ -4,14 +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 { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '../../element-reactive/index.js';
 import { XSwipeEvents } from './XSwiperEvents.js';
 import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
 import { XSwiperCircular } from './XSwiperCircular.js';
 import { XSwiperIndicator } from './XSwiperIndicator.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
-import { templateXSwiper } from '@lynx-js/web-elements-template';
+import { templateXSwiper } from '../htmlTemplates.js';
 let XSwiper = (() => {
     let _classDecorators = [Component('x-swiper', [
             CommonEventsAndMethods,

package/dist/{XSwiper → elements/XSwiper}/XSwiperAutoScroll.d.ts

@@ -1,8 +1,10 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { XSwiper } from './XSwiper.js';
 export declare class XSwiperAutoScroll implements InstanceType<AttributeReactiveClass<typeof XSwiper>> {
     #private;
     static observedAttributes: string[];
     constructor(dom: XSwiper);
+    _handleCurrentChange(newVal: string | null): void;
+    _handleAutoplay(): void;
     dispose(): void;
 }

package/dist/elements/XSwiper/XSwiperAutoScroll.js

@@ -0,0 +1,74 @@
+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 { registerAttributeHandler, } from '../../element-reactive/index.js';
+let XSwiperAutoScroll = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleCurrentChange_decorators;
+    let __handleAutoplay_decorators;
+    return class XSwiperAutoScroll {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleCurrentChange_decorators = [registerAttributeHandler('current', false)];
+            __handleAutoplay_decorators = [registerAttributeHandler('interval', false), registerAttributeHandler('autoplay', false)];
+            __esDecorate(this, null, __handleCurrentChange_decorators, { kind: "method", name: "_handleCurrentChange", static: false, private: false, access: { has: obj => "_handleCurrentChange" in obj, get: obj => obj._handleCurrentChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __handleAutoplay_decorators, { kind: "method", name: "_handleAutoplay", static: false, private: false, access: { has: obj => "_handleAutoplay" in obj, get: obj => obj._handleAutoplay }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['current', 'interval', 'autoplay'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        #scrollToNext() {
+            const current = this.#dom.currentIndex;
+            const count = this.#dom.childElementCount;
+            if (current === count - 1) {
+                const circularPlay = this.#dom.circularPlay;
+                if (circularPlay) {
+                    this.#dom.currentIndex = 0;
+                }
+            }
+            else {
+                this.#dom.currentIndex += 1;
+            }
+        }
+        _handleCurrentChange(newVal) {
+            const newval = Number(newVal);
+            if (!Number.isNaN(newval)) {
+                this.#dom.currentIndex = newval;
+            }
+        }
+        #autoPlayTimer;
+        #autoPlayTick = (() => {
+            this.#scrollToNext();
+        }).bind(this);
+        #startAutoplay(interval) {
+            this.#stopAutoplay();
+            this.#autoPlayTimer = setInterval(this.#autoPlayTick, interval);
+        }
+        #stopAutoplay() {
+            if (this.#autoPlayTimer) {
+                clearInterval(this.#autoPlayTimer);
+            }
+        }
+        _handleAutoplay() {
+            const enableAutoPlay = this.#dom.getAttribute('autoplay') !== null;
+            if (enableAutoPlay) {
+                const interval = this.#dom.getAttribute('interval');
+                let intervalValue = interval ? parseFloat(interval) : 5000;
+                if (Number.isNaN(intervalValue))
+                    intervalValue = 5000;
+                this.#startAutoplay(intervalValue);
+            }
+        }
+        dispose() {
+            this.#stopAutoplay();
+        }
+    };
+})();
+export { XSwiperAutoScroll };
+//# sourceMappingURL=XSwiperAutoScroll.js.map

package/dist/{XSwiper → elements/XSwiper}/XSwiperCircular.d.ts

@@ -1,8 +1,10 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import type { XSwiper } from './XSwiper.js';
 export declare class XSwiperCircular implements InstanceType<AttributeReactiveClass<typeof XSwiper>> {
     #private;
     static observedAttributes: string[];
     constructor(dom: XSwiper);
+    _handleCircular(newVal: string | null): void;
+    _handleVerticalChange(newVal: string | null): void;
     dispose(): void;
 }