@lynx-js/web-elements 0.2.4

package/dist/XSwiper/XSwiper.js

@@ -0,0 +1,231 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { XSwipeEvents } from './XSwiperEvents.js';
+import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
+import { XSwiperCircular } from './XSwiperCircular.js';
+import { XSwiperIndicator } from './XSwiperIndicator.js';
+import { LynxExposure } from '../common/Exposure.js';
+import { scrollContainerDom } from '../common/constants.js';
+let XSwiper = (() => {
+    let _classDecorators = [Component('x-swiper', [
+            LynxExposure,
+            XSwiperIndicator,
+            XSwipeEvents,
+            XSwiperCircular,
+            XSwiperAutoScroll,
+        ], html ` <style>
+      #bounce-padding {
+        display: none;
+        flex: 0 0 0;
+        align-self: stretch;
+        scroll-snap-align: none;
+        flex-basis: 100%;
+      }
+      #content {
+        position: relative;
+        display: flex;
+        flex: 0 0 100%;
+        flex-direction: inherit;
+        flex-wrap: inherit;
+        align-self: stretch;
+        justify-content: inherit;
+        align-items: inherit;
+        overflow: inherit;
+        scrollbar-width: none;
+        scroll-snap-align: start;
+        scroll-snap-type: inherit;
+      }
+      div::-webkit-scrollbar {
+        display: none;
+      }
+      #indicator-container {
+        display: none;
+      }
+      @keyframes indicator-dot {
+        30%,
+        70% {
+          background-color: var(--indicator-color);
+        }
+        31%,
+        69% {
+          background-color: var(--indicator-active-color);
+        }
+      }
+    </style>
+    <style id="indicator-style"></style>
+    <div id="bounce-padding" part="bounce-padding"></div>
+    <div id="indicator-container" part="indicator-container"></div>
+    <div id="content" part="content">
+      <slot part="slot-start" name="circular-start" id="circular-start"></slot>
+      <slot part="slot"></slot>
+      <slot part="slot-end" name="circular-end" id="circular-end"></slot>
+    </div>`)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XSwiper = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            XSwiper = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set([
+            'smooth-scroll',
+            'indicator-dots',
+        ]);
+        #getContentContainer = genDomGetter(() => this.shadowRoot, '#content').bind(this);
+        #getNeatestElementIndexAndDistanceToMid() {
+            let current = 0;
+            let minDistanceToMid = Number.MAX_SAFE_INTEGER;
+            let minOffsetToMid = 0;
+            if (this.childElementCount > 0) {
+                const contentContainer = this.#getContentContainer();
+                const isVertical = this.isVertical;
+                const numberOfChildren = this.childElementCount;
+                /* already scrolled distance */
+                const currentScrollDistance = isVertical
+                    ? contentContainer.scrollTop
+                    : contentContainer.scrollLeft;
+                const pageLength = isVertical
+                    ? contentContainer.clientHeight
+                    : contentContainer.clientWidth;
+                const itemLength = isVertical
+                    ? this.firstElementChild.offsetHeight
+                    : this.firstElementChild.offsetWidth;
+                /**
+                 * ============================
+                 * |                          |
+                 * |                          |
+                 * |    <-> scroll container  |
+                 * |                          |
+                 * |                          |
+                 * ============================
+                 *              ^___ mid
+                 */
+                // mode carousel width is 80% of pageLength
+                const midWidth = this.getAttribute('mode') === 'carousel'
+                    ? (pageLength * 0.8) / 2
+                    : pageLength / 2;
+                const midOffset = currentScrollDistance + midWidth;
+                for (let ii = 0; ii < numberOfChildren; ii++) {
+                    const swiperItem = this.children[ii];
+                    if (swiperItem) {
+                        const scrollOffset = (isVertical ? swiperItem.offsetTop : swiperItem.offsetLeft)
+                            + itemLength / 2;
+                        const offsetToMid = scrollOffset - midOffset;
+                        const distanceToMid = Math.abs(offsetToMid);
+                        if (distanceToMid < minDistanceToMid) {
+                            current = ii;
+                            minDistanceToMid = distanceToMid;
+                            minOffsetToMid = offsetToMid;
+                        }
+                    }
+                }
+            }
+            return {
+                current,
+                minDistanceToMid,
+                minOffsetToMid,
+            };
+        }
+        get current() {
+            return this.#getNeatestElementIndexAndDistanceToMid().current;
+        }
+        set current(newval) {
+            // When current is specified and current is updated in bindchange, there is no need to respond to the update of current
+            if (this.current === newval) {
+                return;
+            }
+            const smooth = this.getAttribute('smooth-scroll') === null; // smooth-scroll default true, it is set to be false
+            this.#scrollToIndex(newval, smooth ? 'smooth' : 'instant');
+        }
+        #scrollToIndex(index, behavior) {
+            const target = this.children.item(index);
+            if (target) {
+                const isVertical = this.isVertical;
+                let offset = 0;
+                // flat-coverflow mode, should scroll to the mid, 20% of left, 1/3 of width.
+                if (this.getAttribute('mode') === 'flat-coverflow') {
+                    if (isVertical) {
+                        offset = target.offsetTop - target.offsetHeight / 3;
+                    }
+                    else {
+                        offset = target.offsetLeft - target.offsetWidth / 3;
+                    }
+                }
+                else {
+                    if (isVertical) {
+                        offset = target.offsetTop;
+                    }
+                    else {
+                        offset = target.offsetLeft;
+                    }
+                }
+                this.#getContentContainer().scrollTo({
+                    left: isVertical ? 0 : offset,
+                    top: isVertical ? offset : 0,
+                    behavior,
+                });
+            }
+        }
+        get snapDistance() {
+            return this.#getNeatestElementIndexAndDistanceToMid().minOffsetToMid;
+        }
+        get isVertical() {
+            return this.getAttribute('vertical') !== null;
+        }
+        get circularPlay() {
+            return this.getAttribute('circular') !== null;
+        }
+        scrollToNext() {
+            const current = this.current;
+            const count = this.childElementCount;
+            if (current === count - 1) {
+                const circularPlay = this.circularPlay;
+                if (circularPlay) {
+                    this.current = 0;
+                }
+            }
+            else {
+                this.current += 1;
+            }
+        }
+        scrollToPrevious() {
+            const current = this.current;
+            const count = this.childElementCount;
+            if (current === 0) {
+                const circularPlay = this.circularPlay;
+                if (circularPlay) {
+                    this.current = count - 1;
+                }
+            }
+            else {
+                this.current == count - 1;
+            }
+        }
+        connectedCallback() {
+            const current = this.getAttribute('current');
+            if (current !== null) {
+                // first layout should always scroll instant
+                this.#scrollToIndex(Number(current), 'instant');
+            }
+        }
+        get [scrollContainerDom]() {
+            return this;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XSwiper = _classThis;
+})();
+export { XSwiper };
+//# sourceMappingURL=XSwiper.js.map

package/dist/XSwiper/XSwiperAutoScroll.d.ts

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

package/dist/XSwiper/XSwiperAutoScroll.js

@@ -0,0 +1,63 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let XSwiperAutoScroll = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleCurrentChange_decorators;
+    let _private_handleCurrentChange_descriptor;
+    let _private_handleAutoplay_decorators;
+    let _private_handleAutoplay_descriptor;
+    return class XSwiperAutoScroll {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleCurrentChange_decorators = [registerAttributeHandler('current', false)];
+            _private_handleAutoplay_decorators = [registerAttributeHandler('interval', false), registerAttributeHandler('autoplay', false)];
+            __esDecorate(this, _private_handleCurrentChange_descriptor = { value: __setFunctionName(function (newVal) {
+                    const newval = Number(newVal);
+                    if (!Number.isNaN(newval)) {
+                        this.#dom.current = newval;
+                    }
+                }, "#handleCurrentChange") }, _private_handleCurrentChange_decorators, { kind: "method", name: "#handleCurrentChange", static: false, private: true, access: { has: obj => #handleCurrentChange in obj, get: obj => obj.#handleCurrentChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleAutoplay_descriptor = { value: __setFunctionName(function () {
+                    const enableAutoPlay = this.#dom.getAttribute('autoplay') !== null;
+                    if (enableAutoPlay) {
+                        const interval = this.#dom.getAttribute('interval');
+                        let intervalValue = interval ? parseFloat(interval) : 5000;
+                        if (Number.isNaN(intervalValue))
+                            intervalValue = 5000;
+                        this.#startAutoplay(intervalValue);
+                    }
+                }, "#handleAutoplay") }, _private_handleAutoplay_decorators, { kind: "method", name: "#handleAutoplay", static: false, private: true, access: { has: obj => #handleAutoplay in obj, get: obj => obj.#handleAutoplay }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['current', 'interval', 'autoplay'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        get #handleCurrentChange() { return _private_handleCurrentChange_descriptor.value; }
+        #autoPlayTimer;
+        #autoPlayTick = (() => {
+            this.#dom.scrollToNext();
+        }).bind(this);
+        #startAutoplay(interval) {
+            this.#stopAutoplay();
+            this.#autoPlayTimer = setInterval(this.#autoPlayTick, interval);
+        }
+        #stopAutoplay() {
+            if (this.#autoPlayTimer) {
+                clearInterval(this.#autoPlayTimer);
+            }
+        }
+        get #handleAutoplay() { return _private_handleAutoplay_descriptor.value; }
+        dispose() {
+            this.#stopAutoplay();
+        }
+    };
+})();
+export { XSwiperAutoScroll };
+//# sourceMappingURL=XSwiperAutoScroll.js.map

package/dist/XSwiper/XSwiperCircular.d.ts

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

package/dist/XSwiper/XSwiperCircular.js

@@ -0,0 +1,191 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindSwitchToEventListener, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let XSwiperCircular = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleCircular_decorators;
+    let _private_handleCircular_descriptor;
+    let _private_handleVerticalChange_decorators;
+    let _private_handleVerticalChange_descriptor;
+    return class XSwiperCircular {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _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));
+                    if (newVal !== null) {
+                        this.#dom.setAttribute('x-enable-change-event-for-indicator', '');
+                        this.#changeEventHandler({
+                            detail: {
+                                current: this.#dom.current,
+                                isDragged: false,
+                                __isFirstLayout: true,
+                            },
+                        });
+                    }
+                }, "#handleCircular") }, _private_handleCircular_decorators, { kind: "method", name: "#handleCircular", static: false, private: true, access: { has: obj => #handleCircular in obj, get: obj => obj.#handleCircular }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleVerticalChange_descriptor = { value: __setFunctionName(function (newVal) {
+                    const enable = newVal !== null;
+                    this.#isVertical = enable;
+                }, "#handleVerticalChange") }, _private_handleVerticalChange_decorators, { kind: "method", name: "#handleVerticalChange", static: false, private: true, access: { has: obj => #handleVerticalChange in obj, get: obj => obj.#handleVerticalChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['circular', 'vertical'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #isVertical = false;
+        #pervTouchPosition;
+        #currentScrollDistance = 0;
+        #getContentContainer = genDomGetter(() => this.#dom.shadowRoot, '#content').bind(this);
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        #getCircularFirstSlot = genDomGetter(() => this.#dom.shadowRoot, '#circular-start').bind(this);
+        #getCircularLastSlot = genDomGetter(() => this.#dom.shadowRoot, '#circular-end').bind(this);
+        #changeEventHandler(eventLikeObject) {
+            const numberOfChlidren = this.#dom.childElementCount;
+            if (numberOfChlidren > 2) {
+                const { current, isDragged, __isFirstLayout } = eventLikeObject.detail;
+                if (current === 0
+                    || current === numberOfChlidren - 1
+                    || current === 2
+                    || current === numberOfChlidren - 2) {
+                    /**
+                     * for current = 0
+                     * start:[lastElement]
+                     * main: [firstElement, ....]
+                     * end: []
+                     *
+                     * for current = EOF
+                     *
+                     * start: []
+                     * main: [..., lastElement],
+                     * end: [firstElement]
+                     */
+                    const contentContainer = this.#getContentContainer();
+                    const elementsAtStart = this.#getCircularFirstSlot().assignedElements();
+                    const elementsAtEnd = this.#getCircularLastSlot().assignedElements();
+                    const firstElement = this.#dom.firstElementChild;
+                    const lastElement = this.#dom.lastElementChild;
+                    const snapDistance = this.#dom.snapDistance;
+                    let targetElement;
+                    if (current === 0) {
+                        elementsAtEnd.forEach((e) => e.removeAttribute('slot'));
+                        lastElement.setAttribute('slot', 'circular-start');
+                        targetElement = firstElement;
+                    }
+                    else if (current === numberOfChlidren - 1) {
+                        elementsAtStart.forEach((e) => e.removeAttribute('slot'));
+                        firstElement.setAttribute('slot', 'circular-end');
+                        targetElement = lastElement;
+                    }
+                    else {
+                        elementsAtStart.forEach((e) => e.removeAttribute('slot'));
+                        elementsAtEnd.forEach((e) => e.removeAttribute('slot'));
+                        targetElement = this.#dom.children[current];
+                    }
+                    // make sure the center offset of first element does not change.
+                    // make scrollleft + midWidth/2 = offsetLeft/2 + itemWidth - snapDistance
+                    if (this.#isVertical) {
+                        const midHeight = this.#dom.getAttribute('mode') === 'carousel'
+                            ? (contentContainer.clientHeight * 0.8) / 2
+                            : contentContainer.clientHeight / 2;
+                        this.#currentScrollDistance = targetElement.offsetTop
+                            + targetElement.offsetHeight / 2
+                            - snapDistance
+                            - midHeight;
+                        contentContainer.scrollTop = this.#currentScrollDistance;
+                    }
+                    else {
+                        const midWidth = this.#dom.getAttribute('mode') === 'carousel'
+                            ? (contentContainer.clientWidth * 0.8) / 2
+                            : contentContainer.clientWidth / 2;
+                        this.#currentScrollDistance = targetElement.offsetLeft
+                            + targetElement.offsetWidth / 2
+                            - snapDistance
+                            - midWidth;
+                        contentContainer.scrollLeft = this.#currentScrollDistance;
+                    }
+                    if (!isDragged) {
+                        const mode = this.#dom.getAttribute('mode');
+                        // first layout, the following mode position is the leftmost, no scrollToSnapPosition is needed
+                        if (__isFirstLayout
+                            && (mode === null || mode === 'normal' || mode === 'carousel'
+                                || mode === 'carry')) {
+                            return;
+                        }
+                        // first layout should always scroll instant
+                        this.#scrollToSnapPosition(__isFirstLayout ? 'instant' : 'smooth');
+                    }
+                }
+            }
+        }
+        #scrollToSnapPosition(behavior) {
+            const contentContainer = this.#getContentContainer();
+            const snapDistance = this.#dom.snapDistance;
+            contentContainer.scrollBy({
+                top: this.#isVertical ? snapDistance : 0,
+                left: this.#isVertical ? 0 : snapDistance,
+                behavior: behavior ?? 'smooth',
+            });
+        }
+        #listeners = [
+            bindSwitchToEventListener(() => this.#dom, 'change', this.#changeEventHandler.bind(this), { passive: true }),
+            bindSwitchToEventListener(() => this.#dom, 'touchmove', this.#handleTouchEvent.bind(this), { passive: false }),
+            bindSwitchToEventListener(() => this.#dom, 'touchend', this.#handleEndEvent.bind(this), { passive: false }),
+            bindSwitchToEventListener(() => this.#dom, 'touchcancel', this.#handleEndEvent.bind(this), { passive: false }),
+        ];
+        get #handleCircular() { return _private_handleCircular_descriptor.value; }
+        #handleTouchEvent(event) {
+            const touch = event.touches.item(0);
+            if (touch) {
+                const currentTouchPosition = this.#isVertical ? touch.pageY : touch.pageX;
+                if (this.#pervTouchPosition !== undefined) {
+                    this.#startScrolling();
+                    const scrollMoveDistance = this.#pervTouchPosition
+                        - currentTouchPosition;
+                    this.#currentScrollDistance += scrollMoveDistance;
+                }
+                this.#pervTouchPosition = currentTouchPosition;
+            }
+        }
+        #handleEndEvent(_event) {
+            this.#stopScrolling();
+            this.#scrollToSnapPosition();
+            this.#pervTouchPosition = undefined;
+        }
+        get #handleVerticalChange() { return _private_handleVerticalChange_descriptor.value; }
+        #scrollTimer;
+        #startScrolling() {
+            if (!this.#scrollTimer) {
+                const contentContainer = this.#getContentContainer();
+                this.#currentScrollDistance = this.#isVertical
+                    ? contentContainer.scrollTop
+                    : contentContainer.scrollLeft;
+                this.#scrollTimer = setInterval(() => {
+                    if (this.#isVertical) {
+                        contentContainer.scrollTop = this.#currentScrollDistance;
+                    }
+                    else {
+                        contentContainer.scrollLeft = this.#currentScrollDistance;
+                    }
+                }, 10);
+            }
+        }
+        #stopScrolling() {
+            if (this.#scrollTimer) {
+                clearInterval(this.#scrollTimer);
+                this.#scrollTimer = undefined;
+            }
+        }
+        dispose() {
+            this.#stopScrolling();
+        }
+    };
+})();
+export { XSwiperCircular };
+//# sourceMappingURL=XSwiperCircular.js.map

package/dist/XSwiper/XSwiperEvents.d.ts

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

package/dist/XSwiper/XSwiperEvents.js

@@ -0,0 +1,144 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { bindSwitchToEventListener, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { useScrollEnd } from '../common/constants.js';
+let XSwipeEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleEnableTransitionEvent_decorators;
+    let _private_handleEnableTransitionEvent_initializers = [];
+    let _private_handleEnableTransitionEvent_extraInitializers = [];
+    let _private_enableScrollEventProcessor_decorators;
+    let _private_enableScrollEventProcessor_descriptor;
+    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));
+                }, "#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',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #current = 0;
+        #pervScrollPosition = 0;
+        #dragging = false;
+        #debounceScrollForMockingScrollEnd;
+        #scrollStarted = false;
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        #getContentContainer = genDomGetter(() => this.#dom.shadowRoot, '#content').bind(this);
+        #handleEnableTransitionEvent = __runInitializers(this, _private_handleEnableTransitionEvent_initializers, bindSwitchToEventListener(this.#getContentContainer, 'scroll', this.#scrollEventListenerForTransition, { passive: true }));
+        #handleScroll() {
+            if (!useScrollEnd) {
+                // debounce
+                clearTimeout(this.#debounceScrollForMockingScrollEnd);
+                this.#debounceScrollForMockingScrollEnd = setTimeout(() => {
+                    this.#handleScrollEnd();
+                }, 100);
+            }
+            if (!this.#scrollStarted) {
+                this.#dom.dispatchEvent(new CustomEvent('scrollstart', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        current: this.#current,
+                        isDragged: this.#dragging,
+                    },
+                }));
+                this.#scrollStarted = true;
+            }
+            const contentContainer = this.#getContentContainer();
+            const isVertical = this.#dom.isVertical;
+            /* already scrolled distance */
+            const currentScrollDistance = isVertical
+                ? contentContainer.scrollTop
+                : contentContainer.scrollLeft;
+            const pageLength = isVertical
+                ? contentContainer.clientHeight
+                : contentContainer.clientWidth;
+            const totalScrollDistance = isVertical
+                ? contentContainer.scrollHeight
+                : contentContainer.scrollWidth;
+            if (Math.abs(this.#pervScrollPosition - currentScrollDistance)
+                > pageLength / 4
+                || currentScrollDistance < 10
+                || Math.abs(currentScrollDistance - totalScrollDistance) <= pageLength) {
+                const current = this.#dom.current;
+                if (current !== this.#current) {
+                    this.#dom.dispatchEvent(new CustomEvent('change', {
+                        ...commonComponentEventSetting,
+                        detail: {
+                            current,
+                            isDragged: this.#dragging,
+                        },
+                    }));
+                    this.#current = current;
+                }
+                this.#pervScrollPosition = currentScrollDistance;
+            }
+        }
+        #handleScrollEnd() {
+            this.#dom.dispatchEvent(new CustomEvent('lynxscrollend', {
+                ...commonComponentEventSetting,
+                detail: {
+                    current: this.#current,
+                },
+            }));
+            this.#scrollStarted = false;
+        }
+        #handleTouchStart() {
+            this.#dragging = true;
+        }
+        #handleTouchEndAndCancel() {
+            this.#dragging = false;
+        }
+        #scrollEventListenerForTransition() {
+            this.#dom.dispatchEvent(new CustomEvent('transition', {
+                ...commonComponentEventSetting,
+                detail: {
+                    dx: this.#getContentContainer().scrollLeft,
+                    dy: this.#getContentContainer().scrollTop,
+                },
+            }));
+        }
+        #listeners = (__runInitializers(this, _private_handleEnableTransitionEvent_extraInitializers), [
+            bindSwitchToEventListener(this.#getContentContainer, 'scroll', this.#handleScroll.bind(this), { passive: true }),
+            bindSwitchToEventListener(this.#getContentContainer, 'touchstart', this.#handleTouchStart.bind(this), { passive: true }),
+            bindSwitchToEventListener(this.#getContentContainer, 'touchend', this.#handleTouchEndAndCancel.bind(this), { passive: true }),
+            bindSwitchToEventListener(this.#getContentContainer, 'touchcancel', this.#handleTouchEndAndCancel.bind(this), { passive: true }),
+            bindSwitchToEventListener(this.#getContentContainer, 'scrollend', this.#handleScrollEnd.bind(this), { passive: true }),
+        ]);
+        get #enableScrollEventProcessor() { return _private_enableScrollEventProcessor_descriptor.value; }
+        connectedCallback() {
+            this.#current = parseFloat(this.#dom.getAttribute('current') ?? '0');
+            const isVertical = this.#dom.isVertical;
+            this.#pervScrollPosition = isVertical
+                ? this.#getContentContainer().scrollTop
+                : this.#getContentContainer().scrollLeft;
+        }
+    };
+})();
+export { XSwipeEvents };
+//# sourceMappingURL=XSwiperEvents.js.map

package/dist/XSwiper/XSwiperIndicator.d.ts

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