@lynx-js/web-elements 0.2.4

package/dist/XRefreshView/XRefreshSubElementIntersectionObserver.js

@@ -0,0 +1,52 @@
+export class XRefreshIntersectionObserverEvent extends Event {
+    startShowing;
+    fullyShowing;
+    static EventName = 'x-refresh-view-intersecting';
+    constructor(startShowing, fullyShowing) {
+        super(XRefreshIntersectionObserverEvent.EventName, {
+            composed: false,
+            cancelable: true,
+            bubbles: true,
+        });
+        this.startShowing = startShowing;
+        this.fullyShowing = fullyShowing;
+    }
+}
+export class XRefreshSubElementIntersectionObserver {
+    #dom;
+    static observedAttributes = [];
+    #intersectionObserver;
+    constructor(dom) {
+        this.#dom = dom;
+    }
+    connectedCallback() {
+        if (IntersectionObserver && !this.#intersectionObserver) {
+            const parent = this.#dom.parentElement;
+            if (parent) {
+                this.#intersectionObserver = new IntersectionObserver((intersectionEntries) => {
+                    let isStartShowing = false;
+                    let isFullyShowing = false;
+                    intersectionEntries.forEach((e) => {
+                        isStartShowing = e.intersectionRatio > 0;
+                        isFullyShowing = e.intersectionRatio > 0.9;
+                    });
+                    this.#dom.dispatchEvent(new XRefreshIntersectionObserverEvent(isStartShowing, isFullyShowing));
+                    if (isFullyShowing) {
+                        this.#dom.setAttribute('x-magnet-enable', '');
+                    }
+                }, {
+                    root: parent,
+                    threshold: [0.1, 0.9], // set to 0.9 to get better user-experience
+                });
+                this.#intersectionObserver.observe(this.#dom);
+            }
+        }
+    }
+    dispose() {
+        if (this.#intersectionObserver) {
+            this.#intersectionObserver.disconnect();
+            this.#intersectionObserver = undefined;
+        }
+    }
+}
+//# sourceMappingURL=XRefreshSubElementIntersectionObserver.js.map

package/dist/XRefreshView/XRefreshView.d.ts

@@ -0,0 +1,13 @@
+import { scrollContainerDom } from '../common/constants.js';
+export declare class XRefreshView extends HTMLElement {
+    #private;
+    static readonly notToFilterFalseAttributes: Set<string>;
+    _nextRefreshIsManual: boolean;
+    finishRefresh(): void;
+    finishLoadMore(): void;
+    autoStartRefresh(): void;
+    get scrollTop(): number;
+    set scrollTop(val: number);
+    get scrollHeight(): number;
+    get [scrollContainerDom](): this;
+}

package/dist/XRefreshView/XRefreshView.js

@@ -0,0 +1,125 @@
+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 { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
+import { LynxExposure } from '../common/Exposure.js';
+import { scrollContainerDom } from '../common/constants.js';
+let XRefreshView = (() => {
+    let _classDecorators = [Component('x-refresh-view', [LynxExposure, XRefreshViewEventsEmitter], html `
+    <style>
+      .bounce-container {
+        overflow: scroll;
+        overscroll-behavior: contain;
+        scroll-snap-type: y mandatory;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+      }
+      .overflow-placeholder {
+        min-height: 30%;
+        min-width: 100%;
+        flex-shrink: 0;
+        scroll-snap-align: none;
+      }
+      .not-shrink {
+        height: 100%;
+        width: 100%;
+        min-height: 100%;
+        min-width: 100%;
+        flex-shrink: 0;
+      }
+      .vertical {
+        display: flex;
+        flex-direction: column;
+      }
+      #content {
+        scroll-snap-align: center;
+      }
+    </style>
+    <div id="container" part="container" class="bounce-container not-shrink vertical">
+      <div
+        id="placeholder-top"
+        class="overflow-placeholder bounce-item"
+        part="placeholder-top"
+      ></div>
+      <slot name="header"></slot>
+      <div id="content" part="content" class="not-shrink vertical">
+        <slot part="slot"></slot>
+      </div>
+      <slot name="footer"></slot>
+      <div
+        id="placeholder-bot"
+        class="overflow-placeholder bounce-item"
+        part="placeholder-bot"
+      ></div>
+    </div>
+  `)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XRefreshView = 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);
+            XRefreshView = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set([
+            'enable-refresh',
+            'enable-loadmore',
+            'enable-auto-loadmore',
+        ]);
+        _nextRefreshIsManual = true;
+        finishRefresh() {
+            this.querySelector('x-refresh-view > x-refresh-header:first-of-type')?.removeAttribute('x-magnet-enable');
+        }
+        finishLoadMore() {
+            this.querySelector('x-refresh-view > x-refresh-footer:first-of-type')?.removeAttribute('x-magnet-enable');
+        }
+        autoStartRefresh() {
+            const content = this.shadowRoot.querySelector('#container');
+            this.querySelector('x-refresh-view > x-refresh-header:first-of-type')?.setAttribute('x-magnet-enable', '');
+            this._nextRefreshIsManual = false;
+            content.scroll({
+                top: 0,
+                behavior: 'smooth',
+            });
+        }
+        #getOverScrollContainer = genDomGetter(() => this.shadowRoot, '#container');
+        #getContentContainer = genDomGetter(() => this.shadowRoot, '#content');
+        get scrollTop() {
+            const outer = this.#getOverScrollContainer();
+            const inner = this.#getContentContainer();
+            return inner.scrollTop + inner.offsetTop - outer.scrollTop;
+        }
+        set scrollTop(val) {
+            console.log(val);
+            const outer = this.#getOverScrollContainer();
+            const inner = this.#getContentContainer();
+            if (val > 0) {
+                inner.scrollTop = val;
+            }
+            else {
+                outer.scrollTop = inner.offsetTop + val;
+            }
+        }
+        get scrollHeight() {
+            const inner = this.#getContentContainer();
+            return inner.scrollHeight;
+        }
+        get [scrollContainerDom]() {
+            return this;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XRefreshView = _classThis;
+})();
+export { XRefreshView };
+//# sourceMappingURL=XRefreshView.js.map

package/dist/XRefreshView/XRefreshViewEventsEmitter.d.ts

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

package/dist/XRefreshView/XRefreshViewEventsEmitter.js

@@ -0,0 +1,246 @@
+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, genDomGetter, } from '@lynx-js/web-elements-reactive';
+import { XRefreshIntersectionObserverEvent } from './XRefreshSubElementIntersectionObserver.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+let XRefreshViewEventsEmitter = (() => {
+    let _instanceExtraInitializers = [];
+    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();
+                }, "#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',
+        ];
+        #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);
+        }
+        // complex events switches
+        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
+         */
+        #headerShowing = false;
+        #headerFullyShown = false;
+        #footerShowing = false;
+        #footerFullyShown = false;
+        #handleSubElementObserverEvent = (e) => {
+            e.stopPropagation();
+            if (e.target.tagName === 'X-REFRESH-HEADER') {
+                this.#headerShowing = e.startShowing;
+                this.#headerFullyShown = e.fullyShowing;
+            }
+            else {
+                this.#footerShowing = e.startShowing;
+                this.#footerFullyShown = e.fullyShowing;
+            }
+        };
+        /**
+         * Event without dragging info;
+         */
+        #simpleRefreshViewEventsEnabled = false;
+        #enableSimpleRefreshViewEvents() {
+            if (this.#simpleRefreshViewEventsEnabled)
+                return;
+            this.#dom.addEventListener('touchend', this.#handleTouchEndForEvent);
+            this.#simpleRefreshViewEventsEnabled = true;
+        }
+        #handleTouchEndForEvent = () => {
+            if (this.#headerFullyShown) {
+                this.#dom.dispatchEvent(new CustomEvent('headerreleased', commonComponentEventSetting));
+                this.#dom.dispatchEvent(new CustomEvent('startrefresh', {
+                    ...commonComponentEventSetting,
+                    detail: { isManual: this.#dom._nextRefreshIsManual },
+                }));
+                this.#dom._nextRefreshIsManual = true;
+            }
+            else if ((this.#dom.getAttribute('enable-auto-loadmore') === 'true'
+                && this.#footerShowing)
+                || this.#footerFullyShown) {
+                this.#dom.dispatchEvent(new CustomEvent('footerreleased', commonComponentEventSetting));
+                this.#dom.dispatchEvent(new CustomEvent('startloadmore', commonComponentEventSetting));
+            }
+        };
+        #disableSimpleRefreshViewEvents() {
+            if (this.#simpleRefreshViewEventsEnabled) {
+                this.#dom.removeEventListener('touchend', this.#handleTouchEndForEvent);
+            }
+        }
+        /**
+         * Event with dragging info
+         */
+        #dragging = false;
+        #complexRefreshViewEventEnabled = false;
+        #enableComplexRefreshViewEvents() {
+            if (this.#complexRefreshViewEventEnabled)
+                return;
+            this.#dom.addEventListener('touchstart', this.#handleTouchStartForDraggingStatus);
+            this.#dom.addEventListener('touchend', this.#handleTouchEndForDraggingStatus);
+            this.#dom.addEventListener('touchcancel', this.#handleTouchEndForDraggingStatus);
+            this.#dom
+                .shadowRoot.querySelector('#container')
+                .addEventListener('scroll', this.#handleScroll);
+        }
+        #handleTouchEndForDraggingStatus = () => {
+            this.#dragging = false;
+        };
+        #handleTouchStartForDraggingStatus = () => {
+            this.#dragging = true;
+        };
+        #handleScroll = () => {
+            if (this.#headerShowing
+                && (this.#enableHeaderShowEvent || this.#enableHeaderOffsetEvent)) {
+                const header = this.#getXRefreshHeader();
+                if (header) {
+                    const height = parseFloat(getComputedStyle(header).height);
+                    const scrollTop = this.#dom.shadowRoot.querySelector('#container').scrollTop;
+                    this.#dom.dispatchEvent(new CustomEvent('headershow', {
+                        ...commonComponentEventSetting,
+                        detail: {
+                            isDragging: this.#dragging,
+                            offsetPercent: 1 - scrollTop / height,
+                        },
+                    }));
+                    this.#dom.dispatchEvent(new CustomEvent('headeroffset', {
+                        ...commonComponentEventSetting,
+                        detail: {
+                            isDragging: this.#dragging,
+                            offsetPercent: 1 - scrollTop / height,
+                        },
+                    }));
+                }
+            }
+            else if (this.#footerShowing && this.#enableFooterOffsetEvent) {
+                const footer = this.#getXRefreshFooter();
+                if (footer) {
+                    const contentDom = this.#dom.shadowRoot.querySelector('#container');
+                    const scrollTop = contentDom.scrollTop;
+                    const scrollHeight = contentDom.scrollHeight;
+                    const height = parseFloat(getComputedStyle(footer).height);
+                    this.#dom.dispatchEvent(new CustomEvent('footeroffset', {
+                        ...commonComponentEventSetting,
+                        detail: {
+                            isDragging: this.#dragging,
+                            offsetPercent: 1 - scrollTop / height,
+                        },
+                    }));
+                }
+            }
+        };
+        #disableComplexRefreshViewEvents() {
+            if (this.#complexRefreshViewEventEnabled) {
+                this.#dom.removeEventListener('touchstart', this.#handleTouchStartForDraggingStatus);
+                this.#dom.removeEventListener('touchend', this.#handleTouchEndForDraggingStatus);
+                this.#dom.removeEventListener('touchcancel', this.#handleTouchEndForDraggingStatus);
+                this.#dom
+                    .shadowRoot.querySelector('#container')
+                    .removeEventListener('scroll', this.#handleScroll);
+            }
+        }
+        dispose() {
+            this.#disableSimpleRefreshViewEvents();
+            this.#disableComplexRefreshViewEvents();
+        }
+    };
+})();
+export { XRefreshViewEventsEmitter };
+//# sourceMappingURL=XRefreshViewEventsEmitter.js.map

package/dist/XRefreshView/index.d.ts

@@ -0,0 +1,3 @@
+export { XRefreshFooter } from './XRefreshFooter.js';
+export { XRefreshHeader } from './XRefreshHeader.js';
+export { XRefreshView } from './XRefreshView.js';

package/dist/XRefreshView/index.js

@@ -0,0 +1,4 @@
+export { XRefreshFooter } from './XRefreshFooter.js';
+export { XRefreshHeader } from './XRefreshHeader.js';
+export { XRefreshView } from './XRefreshView.js';
+//# sourceMappingURL=index.js.map

package/dist/XSvg/XSvg.d.ts

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

package/dist/XSvg/XSvg.js

@@ -0,0 +1,80 @@
+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, bindToStyle, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { LynxExposure } from '../common/Exposure.js';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+let XSvgFeatures = (() => {
+    let _private_handleSrc_decorators;
+    let _private_handleSrc_initializers = [];
+    let _private_handleSrc_extraInitializers = [];
+    let _private_handleContent_decorators;
+    let _private_handleContent_initializers = [];
+    let _private_handleContent_extraInitializers = [];
+    return class XSvgFeatures {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
+            _private_handleContent_decorators = [registerAttributeHandler('content', true)];
+            __esDecorate(null, null, _private_handleSrc_decorators, { kind: "field", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc, set: (obj, value) => { obj.#handleSrc = value; } }, metadata: _metadata }, _private_handleSrc_initializers, _private_handleSrc_extraInitializers);
+            __esDecorate(null, null, _private_handleContent_decorators, { kind: "field", name: "#handleContent", static: false, private: true, access: { has: obj => #handleContent in obj, get: obj => obj.#handleContent, set: (obj, value) => { obj.#handleContent = value; } }, metadata: _metadata }, _private_handleContent_initializers, _private_handleContent_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['src', 'content'];
+        #dom;
+        #loadEventInvoker = new Image();
+        #handleSrc = __runInitializers(this, _private_handleSrc_initializers, bindToStyle(() => this.#dom, 'background-image', (src) => {
+            this.#loadEventInvoker.src = src;
+            return `url(${src})`;
+        }));
+        #handleContent = (__runInitializers(this, _private_handleSrc_extraInitializers), __runInitializers(this, _private_handleContent_initializers, bindToStyle(() => this.#dom, 'background-image', (content) => {
+            if (!content)
+                return '';
+            // https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
+            const src = 'data:image/svg+xml;base64,'
+                + btoa(unescape(encodeURIComponent(content)));
+            this.#loadEventInvoker.src = src;
+            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,
+                detail: {
+                    width,
+                    height,
+                },
+            }));
+        });
+        constructor(dom) {
+            this.#dom = dom;
+            this.#loadEventInvoker.addEventListener('load', this.#fireLoadEvent);
+        }
+    };
+})();
+export { XSvgFeatures };
+let XSvg = (() => {
+    let _classDecorators = [Component('x-svg', [LynxExposure, XSvgFeatures])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XSvg = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            XSvg = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XSvg = _classThis;
+})();
+export { XSvg };
+//# sourceMappingURL=XSvg.js.map

package/dist/XSvg/index.d.ts

@@ -0,0 +1 @@
+export { XSvg } from './XSvg.js';

package/dist/XSvg/index.js

@@ -0,0 +1,2 @@
+export { XSvg } from './XSvg.js';
+//# sourceMappingURL=index.js.map

package/dist/XSwiper/SwiperItem.d.ts

@@ -0,0 +1,2 @@
+export declare class SwiperItem extends HTMLElement {
+}

package/dist/XSwiper/SwiperItem.js

@@ -0,0 +1,28 @@
+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 } from '@lynx-js/web-elements-reactive';
+import { LynxExposure } from '../common/Exposure.js';
+let SwiperItem = (() => {
+    let _classDecorators = [Component('x-swiper-item', [LynxExposure])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var SwiperItem = 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);
+            SwiperItem = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SwiperItem = _classThis;
+})();
+export { SwiperItem };
+//# sourceMappingURL=SwiperItem.js.map

package/dist/XSwiper/XSwiper.d.ts

@@ -0,0 +1,14 @@
+import { scrollContainerDom } from '../common/constants.js';
+export declare class XSwiper extends HTMLElement {
+    #private;
+    static notToFilterFalseAttributes: Set<string>;
+    get current(): number;
+    set current(newval: number);
+    get snapDistance(): number;
+    get isVertical(): boolean;
+    get circularPlay(): boolean;
+    scrollToNext(): void;
+    scrollToPrevious(): void;
+    connectedCallback(): void;
+    get [scrollContainerDom](): this;
+}