@lynx-js/web-elements 0.9.0 → 0.10.0

package/dist/elements/XAudioTT/XAudioAttribute.js

@@ -0,0 +1,90 @@
+/*
+// 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 { __esDecorate, __runInitializers } from "tslib";
+import { bindToAttribute, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+import { XAudioErrorCode, xAudioBlob, xAudioSrc } from './utils.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+let XAudioAttribute = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleSrc_decorators;
+    let __handleLoop_decorators;
+    let __handleLoop_initializers = [];
+    let __handleLoop_extraInitializers = [];
+    let __handlePauseOnHide_decorators;
+    return class XAudioAttribute {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleSrc_decorators = [registerAttributeHandler('src', true)];
+            __handleLoop_decorators = [registerAttributeHandler('loop', true)];
+            __handlePauseOnHide_decorators = [registerAttributeHandler('pause-on-hide', true)];
+            __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, __handlePauseOnHide_decorators, { kind: "method", name: "_handlePauseOnHide", static: false, private: false, access: { has: obj => "_handlePauseOnHide" in obj, get: obj => obj._handlePauseOnHide }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, __handleLoop_decorators, { kind: "field", name: "_handleLoop", static: false, private: false, access: { has: obj => "_handleLoop" in obj, get: obj => obj._handleLoop, set: (obj, value) => { obj._handleLoop = value; } }, metadata: _metadata }, __handleLoop_initializers, __handleLoop_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'src',
+            'loop',
+            'pause-on-hide',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getAudioElement = genDomGetter(() => this.#dom.shadowRoot, '#audio');
+        _handleSrc(newValue) {
+            let parsedSrc;
+            try {
+                parsedSrc = JSON.parse(newValue || '') || {};
+            }
+            catch (error) {
+                console.error(`JSON.parse src error: ${error}`);
+                parsedSrc = {};
+            }
+            if (newValue === null) {
+                this.#dom.dispatchEvent(new CustomEvent('error', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        code: XAudioErrorCode.SrcError,
+                        msg: '',
+                        from: 'res loader',
+                        currentSrcID: this.#dom[xAudioSrc]?.id,
+                    },
+                }));
+            }
+            else if (parsedSrc?.id === undefined || parsedSrc?.play_url === undefined) {
+                this.#dom.dispatchEvent(new CustomEvent('error', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        code: XAudioErrorCode.SrcJsonError,
+                        msg: '',
+                        from: 'res loader',
+                        currentSrcID: this.#dom[xAudioSrc]?.id,
+                    },
+                }));
+            }
+            this.#dom[xAudioSrc] = parsedSrc;
+            this.#dom[xAudioBlob] = undefined;
+            this.#dom.stop();
+        }
+        _handleLoop = __runInitializers(this, __handleLoop_initializers, bindToAttribute(this.#getAudioElement, 'loop'));
+        #documentVisibilitychange = (__runInitializers(this, __handleLoop_extraInitializers), () => {
+            if (document.visibilityState === 'hidden') {
+                this.#dom.pause();
+            }
+        });
+        _handlePauseOnHide(newValue) {
+            if (newValue !== null) {
+                document.addEventListener('visibilitychange', this.#documentVisibilitychange, { passive: true });
+            }
+            else {
+                document.removeEventListener('visibilitychange', this.#documentVisibilitychange);
+            }
+        }
+        constructor(dom) {
+            this.#dom = dom;
+        }
+    };
+})();
+export { XAudioAttribute };
+//# sourceMappingURL=XAudioAttribute.js.map

package/dist/{XAudioTT → elements/XAudioTT}/XAudioEvents.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 { XAudioTT } from './XAudioTT.js';
 export declare class XAudioEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;

package/dist/{XAudioTT → elements/XAudioTT}/XAudioEvents.js

@@ -3,7 +3,7 @@
 // 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 { audioLoadingStateMap, audioPlaybackStateMap, XAudioErrorCode, xAudioSrc, } from './utils.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 export class XAudioEvents {

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

@@ -4,13 +4,13 @@ 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, bindToAttribute, } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, bindToAttribute, } from '../../element-reactive/index.js';
 import { XAudioAttribute } from './XAudioAttribute.js';
 import { XAudioEvents } from './XAudioEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { XAudioErrorCode, audioPlaybackStateMap, getAudioState, xAudioBlob, xAudioSrc, } from './utils.js';
-import { templateXAudioTT } from '@lynx-js/web-elements-template';
+import { templateXAudioTT } from '../htmlTemplates.js';
 let XAudioTT = (() => {
     let _classDecorators = [Component('x-audio-tt', [CommonEventsAndMethods, XAudioAttribute, XAudioEvents], templateXAudioTT)];
     let _classDescriptor;

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

@@ -0,0 +1,21 @@
+/**
+ * @module elements/XAudioTT
+ *
+ * `x-audio-tt` provides audio playback functionality.
+ *
+ * Attributes:
+ * - `src`: JSON string containing audio source info (`{id, play_url}`).
+ * - `loop`: 'true' | 'false', whether to loop playback.
+ * - `pause-on-hide`: 'true' | 'false', whether to pause when document is hidden.
+ *
+ * Methods:
+ * - `play()`: Starts playback.
+ * - `pause()`: Pauses playback.
+ * - `stop()`: Stops playback.
+ * - `resume()`: Resumes playback.
+ * - `seek({ currentTime })`: Seeks to time (in ms).
+ * - `mute({ mute })`: Mutes/unmutes.
+ * - `setVolume({ volume })`: Sets volume (0-1).
+ * - `playerInfo()`: Returns current player state.
+ */
+export { XAudioTT } from './XAudioTT.js';

package/dist/elements/XAudioTT/index.js

@@ -0,0 +1,25 @@
+// 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/XAudioTT
+ *
+ * `x-audio-tt` provides audio playback functionality.
+ *
+ * Attributes:
+ * - `src`: JSON string containing audio source info (`{id, play_url}`).
+ * - `loop`: 'true' | 'false', whether to loop playback.
+ * - `pause-on-hide`: 'true' | 'false', whether to pause when document is hidden.
+ *
+ * Methods:
+ * - `play()`: Starts playback.
+ * - `pause()`: Pauses playback.
+ * - `stop()`: Stops playback.
+ * - `resume()`: Resumes playback.
+ * - `seek({ currentTime })`: Seeks to time (in ms).
+ * - `mute({ mute })`: Mutes/unmutes.
+ * - `setVolume({ volume })`: Sets volume (0-1).
+ * - `playerInfo()`: Returns current player state.
+ */
+export { XAudioTT } from './XAudioTT.js';
+//# sourceMappingURL=index.js.map

package/dist/{XCanvas → elements/XCanvas}/CanvasAttributes.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 { XCanvas } from './XCanvas.js';
 export declare class CanvasAttributes implements InstanceType<AttributeReactiveClass<typeof XCanvas>> {
     #private;

package/dist/{XCanvas → elements/XCanvas}/CanvasAttributes.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 { bindToAttribute, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { bindToAttribute, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 let CanvasAttributes = (() => {
     let _handleName_decorators;

package/dist/{XCanvas → elements/XCanvas}/XCanvas.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, html } from '@lynx-js/web-elements-reactive';
+import { Component, html } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { CanvasAttributes } from './CanvasAttributes.js';
 /**

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

@@ -0,0 +1,14 @@
+/**
+ * @module elements/XCanvas
+ *
+ * `x-canvas` provides a canvas element for drawing.
+ *
+ * Attributes:
+ * - `name`: canvas name.
+ * - `width`: canvas width.
+ * - `height`: canvas height.
+ *
+ * Events:
+ * - `resize`: Fired when the canvas dimensions change.
+ */
+export { XCanvas } from './XCanvas.js';

package/dist/elements/XCanvas/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/XCanvas
+ *
+ * `x-canvas` provides a canvas element for drawing.
+ *
+ * Attributes:
+ * - `name`: canvas name.
+ * - `width`: canvas width.
+ * - `height`: canvas height.
+ *
+ * Events:
+ * - `resize`: Fired when the canvas dimensions change.
+ */
+export { XCanvas } from './XCanvas.js';
+//# sourceMappingURL=index.js.map

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewHeaderNg.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';
 import { resizeObserver } from './XFoldviewNg.js';
 import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewNg.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';
 import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewNgEvents.d.ts

@@ -1,7 +1,9 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import { type XFoldviewNg } from './XFoldviewNg.js';
 export declare class XFoldviewNgEvents implements InstanceType<AttributeReactiveClass<typeof XFoldviewNg>> {
     #private;
     constructor(dom: XFoldviewNg);
     static observedAttributes: string[];
+    _handleGranularity(newVal: string | null): void;
+    _enableOffsetEvent(enable: boolean): void;
 }

package/dist/elements/XFoldViewNg/XFoldviewNgEvents.js

@@ -0,0 +1,65 @@
+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, registerEventEnableStatusChangeHandler, } from '../../element-reactive/index.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { scrollableLength } from './XFoldviewNg.js';
+let XFoldviewNgEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let __handleGranularity_decorators;
+    let __enableOffsetEvent_decorators;
+    return class XFoldviewNgEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleGranularity_decorators = [registerAttributeHandler('granularity', true)];
+            __enableOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('offset')];
+            __esDecorate(this, null, __handleGranularity_decorators, { kind: "method", name: "_handleGranularity", static: false, private: false, access: { has: obj => "_handleGranularity" in obj, get: obj => obj._handleGranularity }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __enableOffsetEvent_decorators, { kind: "method", name: "_enableOffsetEvent", static: false, private: false, access: { has: obj => "_enableOffsetEvent" in obj, get: obj => obj._enableOffsetEvent }, 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;
+        }
+        static observedAttributes = ['granularity'];
+        _handleGranularity(newVal) {
+            if (newVal && newVal !== '')
+                this.#granularity = parseFloat(newVal);
+            else
+                this.#granularity = 0.01;
+        }
+        _enableOffsetEvent(enable) {
+            if (enable) {
+                this.#dom.addEventListener('scroll', this.#handleScroll, {
+                    passive: true,
+                });
+            }
+            else {
+                this.#dom.removeEventListener('scroll', this.#handleScroll);
+            }
+        }
+        #handleScroll = () => {
+            const currentScrollTop = this.#dom.scrollTop;
+            const scrollLength = Math.abs(this.#pervScroll - currentScrollTop);
+            if (scrollLength > this.#granularity
+                || this.#dom.scrollTop === 0
+                || Math.abs(this.#dom.scrollHeight - this.#dom.clientHeight - this.#dom.scrollTop) <= 1) {
+                this.#pervScroll = currentScrollTop;
+                this.#dom.dispatchEvent(new CustomEvent('offset', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        offset: currentScrollTop,
+                        height: this.#dom[scrollableLength],
+                    },
+                }));
+            }
+        };
+    };
+})();
+export { XFoldviewNgEvents };
+//# sourceMappingURL=XFoldviewNgEvents.js.map

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewSlotDragNg.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 XFoldviewSlotDragNg = (() => {
     let _classDecorators = [Component('x-foldview-slot-drag-ng', [

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewSlotNg.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';
 import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
 import { slotKid } from './XFoldviewNg.js';

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewSlotNgTouchEventsHandler.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 { XFoldviewSlotNg } from './XFoldviewSlotNg.js';
 export declare class XFoldviewSlotNgTouchEventsHandler implements InstanceType<AttributeReactiveClass<typeof XFoldviewSlotNg>> {
     #private;

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewSlotNgTouchEventsHandler.js

@@ -1,5 +1,4 @@
 import { isHeaderShowing } from './XFoldviewNg.js';
-import { isChromium } from '../common/constants.js';
 export class XFoldviewSlotNgTouchEventsHandler {
     #parentScrollTop = 0;
     #childrenElemsntsScrollTop = new WeakMap();

package/dist/{XFoldViewNg → elements/XFoldViewNg}/XFoldviewToolbarNg.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';
 import { resizeObserver } from './XFoldviewNg.js';
 import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';

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

@@ -0,0 +1,23 @@
+/**
+ * @module elements/XFoldViewNg
+ *
+ * `x-foldview-ng` provides a collapsible view with header, toolbar, and content slots.
+ *
+ * Components:
+ * - `x-foldview-ng`: Main container.
+ * - `x-foldview-header-ng`: Header area.
+ * - `x-foldview-toolbar-ng`: Toolbar area.
+ * - `x-foldview-slot-ng`: Scrollable content area.
+ * - `x-foldview-slot-drag-ng`: Area to drag for scrolling.
+ *
+ * `x-foldview-ng` attributes:
+ * - `scroll-enable`: 'true' | 'false'.
+ *
+ * `x-foldview-ng` methods:
+ * - `setFoldExpanded({ offset, smooth })`: Expands/collapses the view.
+ */
+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/elements/XFoldViewNg/index.js

@@ -0,0 +1,27 @@
+// 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/XFoldViewNg
+ *
+ * `x-foldview-ng` provides a collapsible view with header, toolbar, and content slots.
+ *
+ * Components:
+ * - `x-foldview-ng`: Main container.
+ * - `x-foldview-header-ng`: Header area.
+ * - `x-foldview-toolbar-ng`: Toolbar area.
+ * - `x-foldview-slot-ng`: Scrollable content area.
+ * - `x-foldview-slot-drag-ng`: Area to drag for scrolling.
+ *
+ * `x-foldview-ng` attributes:
+ * - `scroll-enable`: 'true' | 'false'.
+ *
+ * `x-foldview-ng` methods:
+ * - `setFoldExpanded({ offset, smooth })`: Expands/collapses the view.
+ */
+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 → elements/XImage}/DropShadow.d.ts

@@ -1,6 +1,7 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 export declare class DropShadow implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];
+    _handleBlurRadius: (this: void, newVal: string | null) => void;
     constructor(dom: HTMLElement);
 }

package/dist/elements/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 '../../element-reactive/index.js';
+let DropShadow = (() => {
+    let __handleBlurRadius_decorators;
+    let __handleBlurRadius_initializers = [];
+    let __handleBlurRadius_extraInitializers = [];
+    return class DropShadow {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleBlurRadius_decorators = [registerAttributeHandler('drop-shadow', true)];
+            __esDecorate(null, null, __handleBlurRadius_decorators, { kind: "field", name: "_handleBlurRadius", static: false, private: false, access: { has: obj => "_handleBlurRadius" in obj, get: obj => obj._handleBlurRadius, set: (obj, value) => { obj._handleBlurRadius = value; } }, metadata: _metadata }, __handleBlurRadius_initializers, __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, __handleBlurRadius_initializers, bindToStyle(this.#getImg, '--drop-shadow', undefined, true));
+        constructor(dom) {
+            __runInitializers(this, __handleBlurRadius_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { DropShadow };
+//# sourceMappingURL=DropShadow.js.map

package/dist/{XImage → elements/XImage}/FilterImage.js

@@ -4,12 +4,12 @@ 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';
 import { DropShadow } from './DropShadow.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
-import { templateFilterImage } from '@lynx-js/web-elements-template';
+import { templateFilterImage } from '../htmlTemplates.js';
 let FilterImage = (() => {
     let _classDecorators = [Component('filter-image', [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents], templateFilterImage({}))];
     let _classDescriptor;

package/dist/{XImage → elements/XImage}/ImageEvents.d.ts

@@ -1,6 +1,8 @@
-import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 export declare class ImageEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: never[];
+    _enableLoadEvent(status: boolean): void;
+    _enableErrorEvent(status: boolean): void;
     constructor(dom: HTMLElement);
 }

package/dist/elements/XImage/ImageEvents.js

@@ -0,0 +1,67 @@
+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 '../../element-reactive/index.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '../../element-reactive/index.js';
+let ImageEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let __enableLoadEvent_decorators;
+    let __enableErrorEvent_decorators;
+    return class ImageEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __enableLoadEvent_decorators = [registerEventEnableStatusChangeHandler('load')];
+            __enableErrorEvent_decorators = [registerEventEnableStatusChangeHandler('error')];
+            __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);
+            __esDecorate(this, null, __enableErrorEvent_decorators, { kind: "method", name: "_enableErrorEvent", static: false, private: false, 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 = [];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        _enableLoadEvent(status) {
+            if (status) {
+                this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
+                    passive: true,
+                });
+            }
+            else {
+                this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
+            }
+        }
+        _enableErrorEvent(status) {
+            if (status) {
+                this.#getImg().addEventListener('error', this.#teleportErrorEvent, {
+                    passive: true,
+                });
+            }
+            else {
+                this.#getImg().removeEventListener('error', this.#teleportErrorEvent);
+            }
+        }
+        #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/elements/XImage/ImageSrc.d.ts

@@ -0,0 +1,12 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+export declare class ImageSrc implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    _handleSrc: (this: void, newVal: string | null) => void;
+    _preloadPlaceholder(newVal: string | null): void;
+    _handleBlurRadius: (this: void, newVal: string | null) => void;
+    _handleCrossorigin: (this: void, newVal: string | null) => void;
+    _handleReferrerpolicy: (this: void, newVal: string | null) => void;
+    constructor(dom: HTMLElement);
+    connectedCallback(): void;
+}