@lynx-js/web-elements 0.3.0 → 0.5.0

package/dist/XRefreshView/XRefreshViewEventsEmitter.js

@@ -4,118 +4,70 @@ 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 { registerAttributeHandler, genDomGetter, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, } from '@lynx-js/web-elements-reactive';
 import { XRefreshIntersectionObserverEvent } from './XRefreshSubElementIntersectionObserver.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XRefreshViewEventsEmitter = (() => {
     let _instanceExtraInitializers = [];
+    let _private_handleComplexEventEnableAttributes_decorators;
+    let _private_handleComplexEventEnableAttributes_descriptor;
     let _private_handleXEnableHeaderOffsetEvent_decorators;
     let _private_handleXEnableHeaderOffsetEvent_descriptor;
-    let _private_handleXEnableHeaderShowEvent_decorators;
-    let _private_handleXEnableHeaderShowEvent_descriptor;
-    let _private_handleXEnableFooterOffsetEvent_decorators;
-    let _private_handleXEnableFooterOffsetEvent_descriptor;
-    let _private_handleXEnableStartRefreshEvent_decorators;
-    let _private_handleXEnableStartRefreshEvent_descriptor;
-    let _private_handleXEnableHeaderReleasedEvent_decorators;
-    let _private_handleXEnableHeaderReleasedEvent_descriptor;
-    let _private_handleXEnableStartLoadMoreEvent_decorators;
-    let _private_handleXEnableStartLoadMoreEvent_descriptor;
-    let _private_handleXEnableFooterReleasedEvent_decorators;
-    let _private_handleXEnableFooterReleasedEvent_descriptor;
     return class XRefreshViewEventsEmitter {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleXEnableHeaderOffsetEvent_decorators = [registerAttributeHandler('x-enable-headeroffset-event', true)];
-            _private_handleXEnableHeaderShowEvent_decorators = [registerAttributeHandler('x-enable-headershow-event', true)];
-            _private_handleXEnableFooterOffsetEvent_decorators = [registerAttributeHandler('x-enable-footeroffset-event', true)];
-            _private_handleXEnableStartRefreshEvent_decorators = [registerAttributeHandler('x-enable-startrefresh-event', true)];
-            _private_handleXEnableHeaderReleasedEvent_decorators = [registerAttributeHandler('x-enable-headerreleased-event', true)];
-            _private_handleXEnableStartLoadMoreEvent_decorators = [registerAttributeHandler('x-enable-startloadmore-event', true)];
-            _private_handleXEnableFooterReleasedEvent_decorators = [registerAttributeHandler('x-enable-footerreleased-event', true)];
-            __esDecorate(this, _private_handleXEnableHeaderOffsetEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableHeaderOffsetEvent = newVal !== null;
-                    this.#handleComplexEventEnableAttributes();
+            _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);
-            __esDecorate(this, _private_handleXEnableHeaderShowEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableHeaderShowEvent = newVal !== null;
-                    this.#handleComplexEventEnableAttributes();
-                }, "#handleXEnableHeaderShowEvent") }, _private_handleXEnableHeaderShowEvent_decorators, { kind: "method", name: "#handleXEnableHeaderShowEvent", static: false, private: true, access: { has: obj => #handleXEnableHeaderShowEvent in obj, get: obj => obj.#handleXEnableHeaderShowEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleXEnableFooterOffsetEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableFooterOffsetEvent = newVal !== null;
-                    this.#handleComplexEventEnableAttributes();
-                }, "#handleXEnableFooterOffsetEvent") }, _private_handleXEnableFooterOffsetEvent_decorators, { kind: "method", name: "#handleXEnableFooterOffsetEvent", static: false, private: true, access: { has: obj => #handleXEnableFooterOffsetEvent in obj, get: obj => obj.#handleXEnableFooterOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleXEnableStartRefreshEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableStartRefreshEvent = newVal !== null;
-                    this.#handleSimpleEventEnableAttributes();
-                }, "#handleXEnableStartRefreshEvent") }, _private_handleXEnableStartRefreshEvent_decorators, { kind: "method", name: "#handleXEnableStartRefreshEvent", static: false, private: true, access: { has: obj => #handleXEnableStartRefreshEvent in obj, get: obj => obj.#handleXEnableStartRefreshEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleXEnableHeaderReleasedEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableHeaderReleasedEvent = newVal !== null;
-                    this.#handleSimpleEventEnableAttributes();
-                }, "#handleXEnableHeaderReleasedEvent") }, _private_handleXEnableHeaderReleasedEvent_decorators, { kind: "method", name: "#handleXEnableHeaderReleasedEvent", static: false, private: true, access: { has: obj => #handleXEnableHeaderReleasedEvent in obj, get: obj => obj.#handleXEnableHeaderReleasedEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleXEnableStartLoadMoreEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableStartLoadMoreEvent = newVal !== null;
-                    this.#handleSimpleEventEnableAttributes();
-                }, "#handleXEnableStartLoadMoreEvent") }, _private_handleXEnableStartLoadMoreEvent_decorators, { kind: "method", name: "#handleXEnableStartLoadMoreEvent", static: false, private: true, access: { has: obj => #handleXEnableStartLoadMoreEvent in obj, get: obj => obj.#handleXEnableStartLoadMoreEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleXEnableFooterReleasedEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableFooterReleasedEvent = newVal !== null;
-                    this.#handleSimpleEventEnableAttributes();
-                }, "#handleXEnableFooterReleasedEvent") }, _private_handleXEnableFooterReleasedEvent_decorators, { kind: "method", name: "#handleXEnableFooterReleasedEvent", static: false, private: true, access: { has: obj => #handleXEnableFooterReleasedEvent in obj, get: obj => obj.#handleXEnableFooterReleasedEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         #dom = __runInitializers(this, _instanceExtraInitializers);
-        #enableStartRefreshEvent = false;
-        #enableHeaderReleasedEvent = false;
-        #enableHeaderOffsetEvent = false;
-        #enableHeaderShowEvent = false;
-        #enableStartLoadMoreEvent = false;
-        #enableFooterReleasedEvent = false;
-        #enableFooterOffsetEvent = false;
-        static observedAttributes = [
-            'x-enable-startrefresh-event',
-            'x-enable-headerreleased-event',
-            'x-enable-headeroffset-event',
-            'x-enable-headershow-event',
-            'x-enable-startloadmore-event',
-            'x-enable-footerreleased-event',
-            'x-enable-footeroffset-event',
-        ];
+        static observedAttributes = [];
         #getXRefreshHeader = genDomGetter(() => this.#dom, 'x-refresh-view > x-refresh-header:first-of-type');
         #getXRefreshFooter = genDomGetter(() => this.#dom, 'x-refresh-view > x-refresh-footer:first-of-type');
         constructor(dom) {
             this.#dom = dom;
             this.#dom.addEventListener(XRefreshIntersectionObserverEvent.EventName, this.#handleSubElementObserverEvent);
         }
+        #eventSwitches = {
+            headeroffset: false,
+            headerreleased: false,
+            startrefresh: false,
+            footeroffset: false,
+            headershow: false,
+            footerreleased: false,
+            startloadmore: false,
+        };
         // complex events switches
+        get #handleComplexEventEnableAttributes() { return _private_handleComplexEventEnableAttributes_descriptor.value; }
         get #handleXEnableHeaderOffsetEvent() { return _private_handleXEnableHeaderOffsetEvent_descriptor.value; }
-        get #handleXEnableHeaderShowEvent() { return _private_handleXEnableHeaderShowEvent_descriptor.value; }
-        get #handleXEnableFooterOffsetEvent() { return _private_handleXEnableFooterOffsetEvent_descriptor.value; }
-        #handleComplexEventEnableAttributes() {
-            if (this.#enableHeaderOffsetEvent
-                || this.#enableHeaderShowEvent
-                || this.#enableFooterOffsetEvent) {
-                this.#enableComplexRefreshViewEvents();
-            }
-            else {
-                this.#disableComplexRefreshViewEvents();
-            }
-        }
-        // simple events switches
-        get #handleXEnableStartRefreshEvent() { return _private_handleXEnableStartRefreshEvent_descriptor.value; }
-        get #handleXEnableHeaderReleasedEvent() { return _private_handleXEnableHeaderReleasedEvent_descriptor.value; }
-        get #handleXEnableStartLoadMoreEvent() { return _private_handleXEnableStartLoadMoreEvent_descriptor.value; }
-        get #handleXEnableFooterReleasedEvent() { return _private_handleXEnableFooterReleasedEvent_descriptor.value; }
-        #handleSimpleEventEnableAttributes() {
-            if (this.#enableHeaderReleasedEvent
-                || this.#enableFooterReleasedEvent
-                || this.#enableStartLoadMoreEvent
-                || this.#enableStartRefreshEvent) {
-                this.#enableSimpleRefreshViewEvents();
-            }
-            else {
-                this.#disableSimpleRefreshViewEvents();
-            }
-        }
         /**
          * handle header/footer showing events
          */
@@ -188,7 +140,7 @@ let XRefreshViewEventsEmitter = (() => {
         };
         #handleScroll = () => {
             if (this.#headerShowing
-                && (this.#enableHeaderShowEvent || this.#enableHeaderOffsetEvent)) {
+                && (this.#eventSwitches.headershow || this.#eventSwitches.headeroffset)) {
                 const header = this.#getXRefreshHeader();
                 if (header) {
                     const height = parseFloat(getComputedStyle(header).height);
@@ -209,7 +161,7 @@ let XRefreshViewEventsEmitter = (() => {
                     }));
                 }
             }
-            else if (this.#footerShowing && this.#enableFooterOffsetEvent) {
+            else if (this.#footerShowing && this.#eventSwitches.footeroffset) {
                 const footer = this.#getXRefreshFooter();
                 if (footer) {
                     const contentDom = this.#dom.shadowRoot.querySelector('#container');

package/dist/XSvg/XSvg.js

@@ -40,8 +40,6 @@ let XSvgFeatures = (() => {
             return `url("${src}")`;
         })));
         #fireLoadEvent = (__runInitializers(this, _private_handleContent_extraInitializers), () => {
-            if (this.#dom.getAttribute('x-enable-load-event') === null)
-                return;
             const { width, height } = this.#loadEventInvoker;
             this.#dom.dispatchEvent(new CustomEvent('load', {
                 ...commonComponentEventSetting,

package/dist/XSwiper/XSwiperCircular.js

@@ -17,9 +17,8 @@ let XSwiperCircular = (() => {
             _private_handleCircular_decorators = [registerAttributeHandler('circular', false)];
             _private_handleVerticalChange_decorators = [registerAttributeHandler('vertical', true)];
             __esDecorate(this, _private_handleCircular_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#listeners.forEach((l) => l(newVal));
+                    this.#listeners.forEach((l) => l(newVal != null));
                     if (newVal !== null) {
-                        this.#dom.setAttribute('x-enable-change-event-for-indicator', '');
                         this.#changeEventHandler({
                             detail: {
                                 current: this.#dom.current,

package/dist/XSwiper/XSwiperEvents.d.ts

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

package/dist/XSwiper/XSwiperEvents.js

@@ -4,9 +4,10 @@ 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 { bindSwitchToEventListener, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { bindSwitchToEventListener, genDomGetter, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { useScrollEnd } from '../common/constants.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XSwipeEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleEnableTransitionEvent_decorators;
@@ -17,29 +18,20 @@ let XSwipeEvents = (() => {
     return class XSwipeEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableTransitionEvent_decorators = [registerAttributeHandler('x-enable-transition-event', true)];
-            _private_enableScrollEventProcessor_decorators = [registerAttributeHandler('x-enable-scrollstart-event', false), registerAttributeHandler('x-enable-scrollend-event', false), registerAttributeHandler('x-enable-change-event', false), registerAttributeHandler('x-enable-change-event-for-indicator', false)];
-            __esDecorate(this, _private_enableScrollEventProcessor_descriptor = { value: __setFunctionName(function () {
-                    const enableScrollstartEvent = this.#dom.getAttribute('x-enable-scrollstart-event') !== null;
-                    const enableScrollendEvent = this.#dom.getAttribute('x-enable-scrollend-event') !== null;
-                    const enableChangeEvent = this.#dom.getAttribute('x-enable-change-event') !== null;
-                    const enableChangeforindicatorEvent = this.#dom.getAttribute('x-enable-change-event-for-indicator') !== null;
-                    const enableEvent = enableChangeEvent
-                        || enableScrollendEvent
-                        || enableScrollstartEvent
-                        || enableChangeforindicatorEvent;
-                    this.#listeners.forEach((l) => l(enableEvent ? '' : null));
+            _private_handleEnableTransitionEvent_decorators = [registerEventEnableStatusChangeHandler('transition')];
+            _private_enableScrollEventProcessor_decorators = [registerEventEnableStatusChangeHandler('scrollstart'), registerEventEnableStatusChangeHandler('lynxscrollend'), registerEventEnableStatusChangeHandler('change'), registerEventEnableStatusChangeHandler('change-event-for-indicator')];
+            __esDecorate(this, _private_enableScrollEventProcessor_descriptor = { value: __setFunctionName(function (value, eventName) {
+                    this
+                        .#eventSwitches[eventName] = value;
+                    const { lynxscrollend, scrollstart, change } = this.#eventSwitches;
+                    const changeEventEnabled = change || lynxscrollend || scrollstart
+                        || this.#eventSwitches['change-event-for-indicator'];
+                    this.#listeners.forEach((l) => l(changeEventEnabled));
                 }, "#enableScrollEventProcessor") }, _private_enableScrollEventProcessor_decorators, { kind: "method", name: "#enableScrollEventProcessor", static: false, private: true, access: { has: obj => #enableScrollEventProcessor in obj, get: obj => obj.#enableScrollEventProcessor }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _private_handleEnableTransitionEvent_decorators, { kind: "field", name: "#handleEnableTransitionEvent", static: false, private: true, access: { has: obj => #handleEnableTransitionEvent in obj, get: obj => obj.#handleEnableTransitionEvent, set: (obj, value) => { obj.#handleEnableTransitionEvent = value; } }, metadata: _metadata }, _private_handleEnableTransitionEvent_initializers, _private_handleEnableTransitionEvent_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = [
-            'x-enable-scrollstart-event',
-            'x-enable-scrollend-event',
-            'x-enable-change-event',
-            'x-enable-change-event-for-indicator',
-            'x-enable-transition-event',
-        ];
+        static observedAttributes = [];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #current = 0;
         #pervScrollPosition = 0;
@@ -130,6 +122,12 @@ let XSwipeEvents = (() => {
             bindSwitchToEventListener(this.#getContentContainer, 'touchcancel', this.#handleTouchEndAndCancel.bind(this), { passive: true }),
             bindSwitchToEventListener(this.#getContentContainer, 'scrollend', this.#handleScrollEnd.bind(this), { passive: true }),
         ]);
+        #eventSwitches = {
+            scrollstart: false,
+            lynxscrollend: false,
+            change: false,
+            'change-event-for-indicator': false,
+        };
         get #enableScrollEventProcessor() { return _private_enableScrollEventProcessor_descriptor.value; }
         connectedCallback() {
             this.#current = parseFloat(this.#dom.getAttribute('current') ?? '0');

package/dist/XSwiper/XSwiperIndicator.js

@@ -86,7 +86,6 @@ let XSwiperIndicator = (() => {
                 subtree: false,
             });
             if (!CSS.supports('timeline-scope', '--a, --b')) {
-                this.#dom.setAttribute('x-enable-change-event-for-indicator', '');
                 this.#dom.addEventListener('change', (({ detail }) => {
                     const currentPage = detail.current;
                     const numberOfChildren = this.#dom.childElementCount;

package/dist/XText/XTextTruncation.js

@@ -6,6 +6,7 @@ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 */
 import { boostedQueueMicrotask, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XTextTruncation = (() => {
     var _a;
     let _instanceExtraInitializers = [];
@@ -17,7 +18,7 @@ let XTextTruncation = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleAttributeChange_decorators = [registerAttributeHandler('text-maxlength', true), registerAttributeHandler('text-maxline', true), registerAttributeHandler('tail-color-convert', true)];
-            _private_handleEnableLayoutEvent_decorators = [registerAttributeHandler('x-enable-layout-event', true)];
+            _private_handleEnableLayoutEvent_decorators = [registerEventEnableStatusChangeHandler('layout')];
             __esDecorate(this, _private_handleAttributeChange_descriptor = { value: __setFunctionName(function () {
                     this.#maxLength = parseFloat(this.#dom.getAttribute('text-maxlength') ?? '');
                     this.#maxLine = parseFloat(this.#dom.getAttribute('text-maxline') ?? '');
@@ -35,8 +36,8 @@ let XTextTruncation = (() => {
                     }
                     this.#layoutText();
                 }, "#handleAttributeChange") }, _private_handleAttributeChange_decorators, { kind: "method", name: "#handleAttributeChange", static: false, private: true, access: { has: obj => #handleAttributeChange in obj, get: obj => obj.#handleAttributeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, _private_handleEnableLayoutEvent_descriptor = { value: __setFunctionName(function (newVal) {
-                    this.#enableLayoutEvent = newVal !== null;
+            __esDecorate(this, _private_handleEnableLayoutEvent_descriptor = { value: __setFunctionName(function (status) {
+                    this.#enableLayoutEvent = status;
                 }, "#handleEnableLayoutEvent") }, _private_handleEnableLayoutEvent_decorators, { kind: "method", name: "#handleEnableLayoutEvent", static: false, private: true, access: { has: obj => #handleEnableLayoutEvent in obj, get: obj => obj.#handleEnableLayoutEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -46,7 +47,6 @@ let XTextTruncation = (() => {
             'text-maxlength',
             'text-maxline',
             'tail-color-convert',
-            'x-enable-layout-event',
         ];
         #scheduledTextLayout = (__runInitializers(this, _instanceExtraInitializers), false);
         #componentConnected = false;
@@ -337,7 +337,7 @@ let XTextTruncation = (() => {
         }
         connectedCallback() {
             this.#componentConnected = true;
-            this.#handleEnableLayoutEvent(this.#dom.getAttribute('x-enable-layout-event'));
+            this.#handleEnableLayoutEvent(this.#enableLayoutEvent);
             document.fonts.ready.then(() => {
                 this.#handleAttributeChange();
             });

package/dist/XTextarea/XTextareaEvents.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 XTextareaEvents = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleEnableConfirmEvent_decorators;
@@ -16,11 +17,11 @@ let XTextareaEvents = (() => {
     return class XTextareaEvents {
         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 textareaElement = this.#getTextareaElement();
-                    if (newValue !== null) {
+                    if (status) {
                         textareaElement.addEventListener('input', this.#teleportInput, { passive: true });
                         textareaElement.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
                     }
@@ -34,7 +35,7 @@ let XTextareaEvents = (() => {
                 }, "#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;
         #getTextareaElement = genDomGetter(() => this.#dom.shadowRoot, '#textarea');

package/dist/XViewpagerNg/XViewpagerNgEvents.d.ts

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

package/dist/XViewpagerNg/XViewpagerNgEvents.js

@@ -4,50 +4,36 @@ 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 { useScrollEnd } from '../common/constants.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XViewpagerNgEvents = (() => {
     let _instanceExtraInitializers = [];
-    let _private_enableScrollEventListener_decorators;
-    let _private_enableScrollEventListener_descriptor;
+    let _private_enableChangeEvent_decorators;
+    let _private_enableChangeEvent_descriptor;
+    let _private_enableOffsetChangeEvent_decorators;
+    let _private_enableOffsetChangeEvent_descriptor;
     return class XViewpagerNgEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_enableScrollEventListener_decorators = [registerAttributeHandler('x-enable-change-event', true), registerAttributeHandler('x-enable-offsetchange-event', true)];
-            __esDecorate(this, _private_enableScrollEventListener_descriptor = { value: __setFunctionName(function () {
-                    this.#enableChange =
-                        this.#dom.getAttribute('x-enable-change-event') !== null;
-                    const enableOffsetChange = this.#dom.getAttribute('x-enable-offsetchange-event') !== null;
-                    const scrollContainer = this.#getScrollContainer();
-                    if (enableOffsetChange !== null || this.#enableChange) {
-                        scrollContainer.addEventListener('scroll', this.#scrollHandler, {
-                            passive: true,
-                        });
-                    }
-                    else {
-                        scrollContainer.removeEventListener('scroll', this.#scrollHandler);
-                    }
-                    if (useScrollEnd && this.#enableChange) {
-                        scrollContainer.addEventListener('scrollend', this.#scrollEndHandler, {
-                            passive: true,
-                        });
-                    }
-                    else {
-                        scrollContainer.removeEventListener('scrollend', this.#scrollEndHandler);
-                    }
-                }, "#enableScrollEventListener") }, _private_enableScrollEventListener_decorators, { kind: "method", name: "#enableScrollEventListener", static: false, private: true, access: { has: obj => #enableScrollEventListener in obj, get: obj => obj.#enableScrollEventListener }, metadata: _metadata }, null, _instanceExtraInitializers);
+            _private_enableChangeEvent_decorators = [registerEventEnableStatusChangeHandler('change')];
+            _private_enableOffsetChangeEvent_decorators = [registerEventEnableStatusChangeHandler('offsetchange')];
+            __esDecorate(this, _private_enableChangeEvent_descriptor = { value: __setFunctionName(function (status) {
+                    this.#enableChange = status;
+                    this.#enableScrollEventListener();
+                }, "#enableChangeEvent") }, _private_enableChangeEvent_decorators, { kind: "method", name: "#enableChangeEvent", static: false, private: true, access: { has: obj => #enableChangeEvent in obj, get: obj => obj.#enableChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_enableOffsetChangeEvent_descriptor = { value: __setFunctionName(function (status) {
+                    this.#enableChange = status;
+                    this.#enableScrollEventListener();
+                }, "#enableOffsetChangeEvent") }, _private_enableOffsetChangeEvent_decorators, { kind: "method", name: "#enableOffsetChangeEvent", static: false, private: true, access: { has: obj => #enableOffsetChangeEvent in obj, get: obj => obj.#enableOffsetChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = [
-            'x-enable-change-event',
-            'x-enable-offsetchange-event',
-        ];
+        static observedAttributes = [];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #isDragging = false;
         #connected = false;
         #currentIndex = 0;
-        #enableChange = false;
         #debounceScrollForMockingScrollEnd;
         constructor(dom) {
             this.#dom = dom;
@@ -93,7 +79,29 @@ let XViewpagerNgEvents = (() => {
         #touchEndHandler = () => {
             this.#isDragging = false;
         };
-        get #enableScrollEventListener() { return _private_enableScrollEventListener_descriptor.value; }
+        #enableChange = false;
+        get #enableChangeEvent() { return _private_enableChangeEvent_descriptor.value; }
+        #enableOffsetChange = false;
+        get #enableOffsetChangeEvent() { return _private_enableOffsetChangeEvent_descriptor.value; }
+        #enableScrollEventListener() {
+            const scrollContainer = this.#getScrollContainer();
+            if (this.#enableOffsetChange || this.#enableChange) {
+                scrollContainer.addEventListener('scroll', this.#scrollHandler, {
+                    passive: true,
+                });
+            }
+            else {
+                scrollContainer.removeEventListener('scroll', this.#scrollHandler);
+            }
+            if (useScrollEnd && this.#enableChange) {
+                scrollContainer.addEventListener('scrollend', this.#scrollEndHandler, {
+                    passive: true,
+                });
+            }
+            else {
+                scrollContainer.removeEventListener('scrollend', this.#scrollEndHandler);
+            }
+        }
         connectedCallback() {
             this.#connected = true;
             const scrollContainer = this.#getScrollContainer();

package/dist/common/Exposure.d.ts

@@ -24,5 +24,9 @@ export declare class LynxExposure {
     onExposureParamsChanged: () => void;
     onExposureIdChanged(_: string | null, oldValue: string | null): void;
     attributeChangedHandler: this;
+    eventStatusChangedHandler: {
+        uiappear: (status: boolean) => void;
+        uidisappear: (status: boolean) => void;
+    };
     disableExposure(): void;
 }

package/dist/common/Exposure.js

@@ -6,8 +6,6 @@ import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
 import { scrollContainerDom } from './constants.js';
 export class LynxExposure {
     static observedAttributes = [
-        'x-enable-uiappear-event',
-        'x-enable-uidisappear-event',
         'exposure-id',
         'exposure-area',
         'exposure-screen-margin-top',
@@ -19,6 +17,8 @@ export class LynxExposure {
         'exposure-ui-margin-bottom',
         'exposure-ui-margin-left',
     ];
+    #uiAppearEnabled = false;
+    #uiDisappearEnabled = false;
     #currentElement;
     /**
      * Stores a promise. We will handler the exposure attribute change after all related life-cycle events has been fired by browser.
@@ -33,9 +33,8 @@ export class LynxExposure {
      */
     #exposureObserver;
     get #exposureEnabled() {
-        return (this.#currentElement.getAttribute('x-enable-uiappear-event') !== null
-            || this.#currentElement.getAttribute('x-enable-uidisappear-event')
-                !== null
+        return (this.#uiAppearEnabled
+            || this.#uiDisappearEnabled
             || this.#currentElement.getAttribute('exposure-id') !== null);
     }
     constructor(currentElement) {
@@ -73,6 +72,16 @@ export class LynxExposure {
             return;
         },
     });
+    eventStatusChangedHandler = {
+        'uiappear': (status) => {
+            this.#uiAppearEnabled = status;
+            this.onExposureParamsChanged();
+        },
+        'uidisappear': (status) => {
+            this.#uiDisappearEnabled = status;
+            this.onExposureParamsChanged();
+        },
+    };
     #updateExposure() {
         const newParams = {
             exposureID: this.#currentElement.getAttribute('exposure-id'),

package/dist/common/bindToIntersectionObserver.d.ts

@@ -1 +1 @@
-export declare function bindToIntersectionObserver(rootGetter: () => HTMLElement, targetGetter: () => HTMLElement, callback: IntersectionObserverCallback): (newVal: string | null) => void;
+export declare function bindToIntersectionObserver(rootGetter: () => HTMLElement, targetGetter: () => HTMLElement, callback: IntersectionObserverCallback): (newVal: string | boolean | null) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -22,10 +22,6 @@
       "types": "./dist/all.d.ts",
       "default": "./dist/all.js"
     },
-    "./lazy": {
-      "types": "./dist/lazy.d.ts",
-      "default": "./dist/lazy.js"
-    },
     "./LynxWrapper": {
       "types": "./dist/LynxWrapper/index.d.ts",
       "default": "./dist/LynxWrapper/index.js"
@@ -104,7 +100,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-elements-reactive": "0.1.1"
+    "@lynx-js/web-elements-reactive": "0.2.0"
   },
   "devDependencies": {
     "tslib": "^2.8.1"