@lynx-js/web-elements 0.2.4 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @lynx-js/web-elements
 
+## 0.4.0
+
+### Minor Changes
+
+- refactor: remove web-elements/lazy and loadNewTag ([#123](https://github.com/lynx-family/lynx-stack/pull/123))
+
+  - remove @lynx-js/web-elements/lazy
+  - remove loadElement
+  - remove loadNewTag callback
+
+  **This is a breaking change**
+
+  Now we removed the default lazy loading preinstalled in web-core
+
+  Please add the following statement in your web project
+
+  ```
+  import "@lynx-js/web-elements/all";
+  ```
+
+### Patch Changes
+
+- feat: never require the x-enable-xx-event attributes ([#157](https://github.com/lynx-family/lynx-stack/pull/157))
+
+  After this commit, we do not need user to add `x-enable-xx-event` to enable corresponding events
+
+- feat: add support for `<lynx-view/>` with shadowroot ([#198](https://github.com/lynx-family/lynx-stack/pull/198))
+
+  add a minor logic in `<x-overlay-ng>` to be compatiable with the <lynx-view> with a shadowroot
+
+- Updated dependencies [[`4c2ee65`](https://github.com/lynx-family/lynx-stack/commit/4c2ee65368eb4b39722ed36305101fe89a782b1a)]:
+  - @lynx-js/web-elements-reactive@0.2.0
+
+## 0.3.0
+
+### Minor Changes
+
+- feat: support `justify-content`, `align-self` in linear container ([#37](https://github.com/lynx-family/lynx-stack/pull/37))
+
+  Now these two properties could work in a linear container.
+
+  We don't transforms the `justify-content` and `align-self` to css vars any more.
+
+  The previous version of `@lynx-js/web-core` won't work with current `@lynx-js/web-core` after this change.
+
+### Patch Changes
+
+- Support NPM provenance. ([#30](https://github.com/lynx-family/lynx-stack/pull/30))
+
+- Updated dependencies [[`c617453`](https://github.com/lynx-family/lynx-stack/commit/c617453aea967aba702967deb2916b5c883f03bb)]:
+  - @lynx-js/web-elements-reactive@0.1.1
+
 ## 0.2.4
 
 ### Patch Changes

package/dist/ScrollView/FadeEdgeLengthAttribute.d.ts

@@ -1,5 +1,5 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { ScrollView } from './ScrollView.js';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { ScrollView } from './ScrollView.js';
 export declare class FadeEdgeLengthAttribute implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;
     static observedAttributes: string[];

package/dist/ScrollView/ScrollAttributes.d.ts

@@ -1,5 +1,5 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { ScrollView } from './ScrollView.js';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { ScrollView } from './ScrollView.js';
 export declare class ScrollAttributes implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;
     static observedAttributes: string[];

package/dist/ScrollView/ScrollIntoView.d.ts

@@ -1,5 +1,5 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { ScrollView } from './ScrollView.js';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { ScrollView } from './ScrollView.js';
 export declare class ScrollIntoView implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;
     static eventName: "__scrollIntoView";

package/dist/ScrollView/ScrollIntoView.js

@@ -1,3 +1,9 @@
+/*
+// 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 {} from '@lynx-js/web-elements-reactive';
 export class ScrollIntoView {
     static eventName = '__scrollIntoView';
     static observedAttributes = [];

package/dist/ScrollView/ScrollView.js

@@ -9,7 +9,7 @@ import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
 import { ScrollIntoView } from './ScrollIntoView.js';
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { scrollContainerDom } from '../common/constants.js';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [

package/dist/ScrollView/ScrollViewEvents.d.ts

@@ -1,5 +1,5 @@
 import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { ScrollView } from './ScrollView.js';
+import type { ScrollView } from './ScrollView.js';
 export declare class ScrollViewEvents implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
     #private;
     constructor(dom: ScrollView);

package/dist/ScrollView/ScrollViewEvents.js

@@ -1,4 +1,4 @@
-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
@@ -8,59 +8,49 @@ import { bindToStyle, genDomGetter, registerAttributeHandler, } from '@lynx-js/w
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { bindToIntersectionObserver } from '../common/bindToIntersectionObserver.js';
 import { useScrollEnd } from '../common/constants.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let ScrollViewEvents = (() => {
-    let _instanceExtraInitializers = [];
-    let _private_updateUpperIntersectionObserver_decorators;
-    let _private_updateUpperIntersectionObserver_initializers = [];
-    let _private_updateUpperIntersectionObserver_extraInitializers = [];
-    let _private_updateLowerIntersectionObserver_decorators;
-    let _private_updateLowerIntersectionObserver_initializers = [];
-    let _private_updateLowerIntersectionObserver_extraInitializers = [];
+    let _private_handleScrollUpperThresholdEventEnabled_decorators;
+    let _private_handleScrollUpperThresholdEventEnabled_initializers = [];
+    let _private_handleScrollUpperThresholdEventEnabled_extraInitializers = [];
+    let _private_handleScrollLowerThresholdEventEnabled_decorators;
+    let _private_handleScrollLowerThresholdEventEnabled_initializers = [];
+    let _private_handleScrollLowerThresholdEventEnabled_extraInitializers = [];
     let _private_updateUpperThreshold_decorators;
     let _private_updateUpperThreshold_initializers = [];
     let _private_updateUpperThreshold_extraInitializers = [];
     let _private_updateLowerThreshold_decorators;
     let _private_updateLowerThreshold_initializers = [];
     let _private_updateLowerThreshold_extraInitializers = [];
-    let _private_handleScrollEventsSwitches_decorators;
-    let _private_handleScrollEventsSwitches_descriptor;
+    let _private_handleScrollEventEnabled_decorators;
+    let _private_handleScrollEventEnabled_initializers = [];
+    let _private_handleScrollEventEnabled_extraInitializers = [];
+    let _private_handleScrollEndEventEnabled_decorators;
+    let _private_handleScrollEndEventEnabled_initializers = [];
+    let _private_handleScrollEndEventEnabled_extraInitializers = [];
     return class ScrollViewEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_updateUpperIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltoupper-event', true)];
-            _private_updateLowerIntersectionObserver_decorators = [registerAttributeHandler('x-enable-scrolltolower-event', true)];
+            _private_handleScrollUpperThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('scrolltoupper')];
+            _private_handleScrollLowerThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
             _private_updateUpperThreshold_decorators = [registerAttributeHandler('upper-threshold', true)];
             _private_updateLowerThreshold_decorators = [registerAttributeHandler('lower-threshold', true)];
-            _private_handleScrollEventsSwitches_decorators = [registerAttributeHandler('x-enable-scroll-event', true), registerAttributeHandler('x-enable-scrollend-event', true)];
-            __esDecorate(this, _private_handleScrollEventsSwitches_descriptor = { value: __setFunctionName(function () {
-                    const scroll = this.#dom.getAttribute('x-enable-scroll-event');
-                    this.#enableScrollEnd =
-                        this.#dom.getAttribute('x-enable-scrollend-event') !== null;
-                    if (scroll !== null || this.#enableScrollEnd) {
-                        this.#getScrollContainer().addEventListener('scroll', this.#handleScroll);
-                        this.#getScrollContainer().addEventListener('scrollend', this.#handleScrollEnd);
-                        this.#dom.addEventListener('scroll', this.#handleScroll);
-                        this.#dom.addEventListener('scrollend', this.#handleScrollEnd);
-                        this.#prevX = 0;
-                        this.#prevY = 0;
-                    }
-                    else {
-                        this.#dom.removeEventListener('scroll', this.#handleScroll);
-                        this.#dom.removeEventListener('scrollend', this.#handleScrollEnd);
-                    }
-                }, "#handleScrollEventsSwitches") }, _private_handleScrollEventsSwitches_decorators, { kind: "method", name: "#handleScrollEventsSwitches", static: false, private: true, access: { has: obj => #handleScrollEventsSwitches in obj, get: obj => obj.#handleScrollEventsSwitches }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _private_updateUpperIntersectionObserver_decorators, { kind: "field", name: "#updateUpperIntersectionObserver", static: false, private: true, access: { has: obj => #updateUpperIntersectionObserver in obj, get: obj => obj.#updateUpperIntersectionObserver, set: (obj, value) => { obj.#updateUpperIntersectionObserver = value; } }, metadata: _metadata }, _private_updateUpperIntersectionObserver_initializers, _private_updateUpperIntersectionObserver_extraInitializers);
-            __esDecorate(null, null, _private_updateLowerIntersectionObserver_decorators, { kind: "field", name: "#updateLowerIntersectionObserver", static: false, private: true, access: { has: obj => #updateLowerIntersectionObserver in obj, get: obj => obj.#updateLowerIntersectionObserver, set: (obj, value) => { obj.#updateLowerIntersectionObserver = value; } }, metadata: _metadata }, _private_updateLowerIntersectionObserver_initializers, _private_updateLowerIntersectionObserver_extraInitializers);
+            _private_handleScrollEventEnabled_decorators = [registerEventEnableStatusChangeHandler('lynxscroll')];
+            _private_handleScrollEndEventEnabled_decorators = [registerEventEnableStatusChangeHandler('lynxscrollend')];
+            __esDecorate(null, null, _private_handleScrollUpperThresholdEventEnabled_decorators, { kind: "field", name: "#handleScrollUpperThresholdEventEnabled", static: false, private: true, access: { has: obj => #handleScrollUpperThresholdEventEnabled in obj, get: obj => obj.#handleScrollUpperThresholdEventEnabled, set: (obj, value) => { obj.#handleScrollUpperThresholdEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollUpperThresholdEventEnabled_initializers, _private_handleScrollUpperThresholdEventEnabled_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollLowerThresholdEventEnabled_decorators, { kind: "field", name: "#handleScrollLowerThresholdEventEnabled", static: false, private: true, access: { has: obj => #handleScrollLowerThresholdEventEnabled in obj, get: obj => obj.#handleScrollLowerThresholdEventEnabled, set: (obj, value) => { obj.#handleScrollLowerThresholdEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollLowerThresholdEventEnabled_initializers, _private_handleScrollLowerThresholdEventEnabled_extraInitializers);
             __esDecorate(null, null, _private_updateUpperThreshold_decorators, { kind: "field", name: "#updateUpperThreshold", static: false, private: true, access: { has: obj => #updateUpperThreshold in obj, get: obj => obj.#updateUpperThreshold, set: (obj, value) => { obj.#updateUpperThreshold = value; } }, metadata: _metadata }, _private_updateUpperThreshold_initializers, _private_updateUpperThreshold_extraInitializers);
             __esDecorate(null, null, _private_updateLowerThreshold_decorators, { kind: "field", name: "#updateLowerThreshold", static: false, private: true, access: { has: obj => #updateLowerThreshold in obj, get: obj => obj.#updateLowerThreshold, set: (obj, value) => { obj.#updateLowerThreshold = value; } }, metadata: _metadata }, _private_updateLowerThreshold_initializers, _private_updateLowerThreshold_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollEventEnabled_decorators, { kind: "field", name: "#handleScrollEventEnabled", static: false, private: true, access: { has: obj => #handleScrollEventEnabled in obj, get: obj => obj.#handleScrollEventEnabled, set: (obj, value) => { obj.#handleScrollEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollEventEnabled_initializers, _private_handleScrollEventEnabled_extraInitializers);
+            __esDecorate(null, null, _private_handleScrollEndEventEnabled_decorators, { kind: "field", name: "#handleScrollEndEventEnabled", static: false, private: true, access: { has: obj => #handleScrollEndEventEnabled in obj, get: obj => obj.#handleScrollEndEventEnabled, set: (obj, value) => { obj.#handleScrollEndEventEnabled = value; } }, metadata: _metadata }, _private_handleScrollEndEventEnabled_initializers, _private_handleScrollEndEventEnabled_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #dom = __runInitializers(this, _instanceExtraInitializers);
-        #enableScrollEnd = false;
+        #dom;
         #debounceScrollForMockingScrollEnd;
         #prevX = 0;
         #prevY = 0;
         constructor(dom) {
+            __runInitializers(this, _private_handleScrollEndEventEnabled_extraInitializers);
             this.#dom = dom;
         }
         #getScrollContainer = () => this.#dom;
@@ -85,16 +75,24 @@ let ScrollViewEvents = (() => {
             }
         };
         static observedAttributes = [
-            'x-enable-scrolltoupper-event',
-            'x-enable-scrolltolower-event',
-            'x-enable-scroll-event',
-            'x-enable-scrollend-event',
             'upper-threshold',
             'lower-threshold',
         ];
-        #updateUpperIntersectionObserver = __runInitializers(this, _private_updateUpperIntersectionObserver_initializers, bindToIntersectionObserver(this.#getScrollContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
-        #updateLowerIntersectionObserver = (__runInitializers(this, _private_updateUpperIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateLowerIntersectionObserver_initializers, bindToIntersectionObserver(this.#getScrollContainer, this.#getLowerThresholdObserverDom, this.#handleObserver)));
-        #updateUpperThreshold = (__runInitializers(this, _private_updateLowerIntersectionObserver_extraInitializers), __runInitializers(this, _private_updateUpperThreshold_initializers, bindToStyle(this.#getUpperThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
+        #handleScrollUpperThresholdEventEnabled = __runInitializers(this, _private_handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltoupper-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltoupper-event'); // css needs this;
+            this.#updateUpperIntersectionObserver(enabled);
+        });
+        #updateUpperIntersectionObserver = (__runInitializers(this, _private_handleScrollUpperThresholdEventEnabled_extraInitializers), bindToIntersectionObserver(this.#getScrollContainer, this.#getUpperThresholdObserverDom, this.#handleObserver));
+        #handleScrollLowerThresholdEventEnabled = __runInitializers(this, _private_handleScrollLowerThresholdEventEnabled_initializers, (enabled) => {
+            enabled
+                ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
+                : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
+            this.#updateLowerIntersectionObserver(enabled);
+        });
+        #updateLowerIntersectionObserver = (__runInitializers(this, _private_handleScrollLowerThresholdEventEnabled_extraInitializers), bindToIntersectionObserver(this.#getScrollContainer, this.#getLowerThresholdObserverDom, this.#handleObserver));
+        #updateUpperThreshold = __runInitializers(this, _private_updateUpperThreshold_initializers, bindToStyle(this.#getUpperThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`));
         #updateLowerThreshold = (__runInitializers(this, _private_updateUpperThreshold_extraInitializers), __runInitializers(this, _private_updateLowerThreshold_initializers, bindToStyle(this.#getLowerThresholdObserverDom, 'flex-basis', (v) => `${parseInt(v)}px`)));
         #getScrollDetail() {
             let { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
@@ -119,7 +117,7 @@ let ScrollViewEvents = (() => {
             return detail;
         }
         #handleScroll = (__runInitializers(this, _private_updateLowerThreshold_extraInitializers), () => {
-            if (this.#enableScrollEnd && !useScrollEnd) {
+            if (this.#scrollEndEventEnabled && !useScrollEnd) {
                 // debounce
                 clearTimeout(this.#debounceScrollForMockingScrollEnd);
                 this.#debounceScrollForMockingScrollEnd = setTimeout(() => {
@@ -137,7 +135,30 @@ let ScrollViewEvents = (() => {
                 detail: this.#getScrollDetail(),
             }));
         };
-        get #handleScrollEventsSwitches() { return _private_handleScrollEventsSwitches_descriptor.value; }
+        #scrollEventEnabled = false;
+        #handleScrollEventEnabled = __runInitializers(this, _private_handleScrollEventEnabled_initializers, (enabled) => {
+            this.#scrollEventEnabled = enabled;
+            this.#handleScrollEventsSwitches();
+        });
+        #scrollEndEventEnabled = (__runInitializers(this, _private_handleScrollEventEnabled_extraInitializers), false);
+        #handleScrollEndEventEnabled = __runInitializers(this, _private_handleScrollEndEventEnabled_initializers, (enabled) => {
+            this.#scrollEndEventEnabled = enabled;
+            this.#handleScrollEventsSwitches();
+        });
+        #handleScrollEventsSwitches() {
+            if (this.#scrollEventEnabled || this.#scrollEndEventEnabled) {
+                this.#getScrollContainer().addEventListener('scroll', this.#handleScroll);
+                this.#getScrollContainer().addEventListener('scrollend', this.#handleScrollEnd);
+                this.#dom.addEventListener('scroll', this.#handleScroll);
+                this.#dom.addEventListener('scrollend', this.#handleScrollEnd);
+                this.#prevX = 0;
+                this.#prevY = 0;
+            }
+            else {
+                this.#dom.removeEventListener('scroll', this.#handleScroll);
+                this.#dom.removeEventListener('scrollend', this.#handleScrollEnd);
+            }
+        }
         connectedCallback() { }
         dispose() { }
     };

package/dist/XAudioTT/XAudioAttribute.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import type { XAudioTT } from './XAudioTT.js';
 export declare class XAudioAttribute implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;

package/dist/XAudioTT/XAudioEvents.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import type { XAudioTT } from './XAudioTT.js';
 export declare class XAudioEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;

package/dist/XCanvas/CanvasAttributes.d.ts

@@ -1,5 +1,5 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { XCanvas } from './XCanvas.js';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { XCanvas } from './XCanvas.js';
 export declare class CanvasAttributes implements InstanceType<AttributeReactiveClass<typeof XCanvas>> {
     #private;
     static observedAttributes: string[];

package/dist/XFoldViewNg/XFoldviewHeaderNgFeatures.d.ts

@@ -1,5 +1,5 @@
 import type { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
-import { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
+import type { XFoldviewHeaderNg } from './XFoldviewHeaderNg.js';
 export declare class XFoldviewHeaderNgFeatures implements InstanceType<AttributeReactiveClass<typeof XFoldviewHeaderNg>> {
     #private;
     static observedAttributes: never[];

package/dist/XFoldViewNg/XFoldviewNgEvents.d.ts

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

package/dist/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.d.ts

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

package/dist/XImage/DropShadow.d.ts

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

package/dist/XImage/ImageEvents.d.ts

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

package/dist/XImage/ImageEvents.js

@@ -4,8 +4,9 @@ import { __esDecorate, __runInitializers, __setFunctionName } 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 { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let ImageEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_enableLoadEvent_decorators;
@@ -15,31 +16,31 @@ let ImageEvents = (() => {
     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 {
+            _private_enableLoadEvent_decorators = [registerEventEnableStatusChangeHandler('load')];
+            _private_enableErrorEvent_decorators = [registerEventEnableStatusChangeHandler('error')];
+            __esDecorate(this, _private_enableLoadEvent_descriptor = { value: __setFunctionName(function (status) {
+                    if (status) {
                         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().removeEventListener('load', this.#teleportLoadEvent);
+                    }
+                }, "#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 (status) {
+                    if (status) {
                         this.#getImg().addEventListener('error', this.#teleportErrorEvent, {
                             passive: true,
                         });
                     }
+                    else {
+                        this.#getImg().removeEventListener('error', this.#teleportErrorEvent);
+                    }
                 }, "#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'];
+        static observedAttributes = [];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
         get #enableLoadEvent() { return _private_enableLoadEvent_descriptor.value; }

package/dist/XInput/InputBaseAttributes.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 /**
  * shared by x-input and x-input-ng
  */

package/dist/XInput/Placeholder.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 export declare class Placeholder implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];

package/dist/XInput/XInputAttribute.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 /**
  * shared by x-input and x-input-ng
  */

package/dist/XInput/XInputEvents.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 export declare class XInputEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static observedAttributes: string[];

package/dist/XInput/XInputEvents.js

@@ -7,6 +7,7 @@ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { renameEvent } from '../common/renameEvent.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XInputEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleEnableConfirmEvent_decorators;
@@ -16,11 +17,11 @@ let XInputEvents = (() => {
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('x-enable-input-event', true)];
+            _private_handleEnableConfirmEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
-            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (newValue) {
+            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
                     const input = this.#getInputElement();
-                    if (newValue !== null) {
+                    if (status) {
                         input.addEventListener('input', this.#teleportInput, { passive: true });
                         input.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
                     }
@@ -34,7 +35,7 @@ let XInputEvents = (() => {
                 }, "#handleSendComposingInput") }, _private_handleSendComposingInput_decorators, { kind: "method", name: "#handleSendComposingInput", static: false, private: true, access: { has: obj => #handleSendComposingInput in obj, get: obj => obj.#handleSendComposingInput }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['x-enable-input-event', 'send-composing-input'];
+        static observedAttributes = ['send-composing-input'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');

package/dist/XList/XList.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, genDomGetter, html, } from '@lynx-js/web-elements-reactive';
+import { boostedQueueMicrotask, Component, genDomGetter, html, } from '@lynx-js/web-elements-reactive';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
 import { LynxExposure } from '../common/Exposure.js';

package/dist/XList/XListAttributes.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import type { XList } from './XList.js';
 export declare class XListAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;

package/dist/XList/XListEvents.d.ts

@@ -1,4 +1,4 @@
-import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import type { XList } from './XList.js';
 export declare class XListEvents implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;