@lynx-js/web-elements 0.2.4

package/dist/XSwiper/XSwiperIndicator.js

@@ -0,0 +1,118 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { genDomGetter, registerAttributeHandler, bindToStyle, boostedQueueMicrotask, } from '@lynx-js/web-elements-reactive';
+let XSwiperIndicator = (() => {
+    let _private_handleIndicatorColor_decorators;
+    let _private_handleIndicatorColor_initializers = [];
+    let _private_handleIndicatorColor_extraInitializers = [];
+    let _private_handleIndicatorActiveColor_decorators;
+    let _private_handleIndicatorActiveColor_initializers = [];
+    let _private_handleIndicatorActiveColor_extraInitializers = [];
+    let _private_handlePageMargin_decorators;
+    let _private_handlePageMargin_initializers = [];
+    let _private_handlePageMargin_extraInitializers = [];
+    let _private_handlePreviousMargin_decorators;
+    let _private_handlePreviousMargin_initializers = [];
+    let _private_handlePreviousMargin_extraInitializers = [];
+    let _private_handleNextMargin_decorators;
+    let _private_handleNextMargin_initializers = [];
+    let _private_handleNextMargin_extraInitializers = [];
+    return class XSwiperIndicator {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleIndicatorColor_decorators = [registerAttributeHandler('indicator-color', true)];
+            _private_handleIndicatorActiveColor_decorators = [registerAttributeHandler('indicator-active-color', true)];
+            _private_handlePageMargin_decorators = [registerAttributeHandler('page-margin', true)];
+            _private_handlePreviousMargin_decorators = [registerAttributeHandler('previous-margin', true)];
+            _private_handleNextMargin_decorators = [registerAttributeHandler('next-margin', true)];
+            __esDecorate(null, null, _private_handleIndicatorColor_decorators, { kind: "field", name: "#handleIndicatorColor", static: false, private: true, access: { has: obj => #handleIndicatorColor in obj, get: obj => obj.#handleIndicatorColor, set: (obj, value) => { obj.#handleIndicatorColor = value; } }, metadata: _metadata }, _private_handleIndicatorColor_initializers, _private_handleIndicatorColor_extraInitializers);
+            __esDecorate(null, null, _private_handleIndicatorActiveColor_decorators, { kind: "field", name: "#handleIndicatorActiveColor", static: false, private: true, access: { has: obj => #handleIndicatorActiveColor in obj, get: obj => obj.#handleIndicatorActiveColor, set: (obj, value) => { obj.#handleIndicatorActiveColor = value; } }, metadata: _metadata }, _private_handleIndicatorActiveColor_initializers, _private_handleIndicatorActiveColor_extraInitializers);
+            __esDecorate(null, null, _private_handlePageMargin_decorators, { kind: "field", name: "#handlePageMargin", static: false, private: true, access: { has: obj => #handlePageMargin in obj, get: obj => obj.#handlePageMargin, set: (obj, value) => { obj.#handlePageMargin = value; } }, metadata: _metadata }, _private_handlePageMargin_initializers, _private_handlePageMargin_extraInitializers);
+            __esDecorate(null, null, _private_handlePreviousMargin_decorators, { kind: "field", name: "#handlePreviousMargin", static: false, private: true, access: { has: obj => #handlePreviousMargin in obj, get: obj => obj.#handlePreviousMargin, set: (obj, value) => { obj.#handlePreviousMargin = value; } }, metadata: _metadata }, _private_handlePreviousMargin_initializers, _private_handlePreviousMargin_extraInitializers);
+            __esDecorate(null, null, _private_handleNextMargin_decorators, { kind: "field", name: "#handleNextMargin", static: false, private: true, access: { has: obj => #handleNextMargin in obj, get: obj => obj.#handleNextMargin, set: (obj, value) => { obj.#handleNextMargin = value; } }, metadata: _metadata }, _private_handleNextMargin_initializers, _private_handleNextMargin_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'indicator-color',
+            'indicator-active-color',
+            'page-margin',
+            'previous-margin',
+            'next-margin',
+        ];
+        #dom;
+        #numOfChildElement = 0;
+        #getIndicatorContainer = genDomGetter(() => this.#dom.shadowRoot, '#indicator-container');
+        #getIndicatorDynamicStyleContainer = genDomGetter(() => this.#dom.shadowRoot, '#indicator-style');
+        #childrenElementMutationObserver;
+        constructor(dom) {
+            __runInitializers(this, _private_handleNextMargin_extraInitializers);
+            this.#dom = dom;
+        }
+        #handleIndicatorColor = __runInitializers(this, _private_handleIndicatorColor_initializers, bindToStyle(this.#getIndicatorContainer, '--indicator-color', undefined, true));
+        #handleIndicatorActiveColor = (__runInitializers(this, _private_handleIndicatorColor_extraInitializers), __runInitializers(this, _private_handleIndicatorActiveColor_initializers, bindToStyle(this.#getIndicatorContainer, '--indicator-active-color', undefined, true)));
+        #handlePageMargin = (__runInitializers(this, _private_handleIndicatorActiveColor_extraInitializers), __runInitializers(this, _private_handlePageMargin_initializers, bindToStyle(this.#getIndicatorContainer, '--page-margin', undefined, true)));
+        #handlePreviousMargin = (__runInitializers(this, _private_handlePageMargin_extraInitializers), __runInitializers(this, _private_handlePreviousMargin_initializers, bindToStyle(this.#getIndicatorContainer, '--previous-margin', undefined, true)));
+        #handleNextMargin = (__runInitializers(this, _private_handlePreviousMargin_extraInitializers), __runInitializers(this, _private_handleNextMargin_initializers, bindToStyle(this.#getIndicatorContainer, '--next-margin', undefined, true)));
+        #updateIndicatorDoms() {
+            const currentNumber = this.#dom.childElementCount;
+            if (currentNumber !== this.#numOfChildElement) {
+                let nextInnerHtml = '';
+                for (let ii = 0; ii < currentNumber; ii++) {
+                    nextInnerHtml +=
+                        `<div style="animation-timeline:--x-swiper-item-${ii};" part="indicator-item"></div>`;
+                }
+                this.#getIndicatorContainer().innerHTML = nextInnerHtml;
+                if (currentNumber > 5) {
+                    for (let ii = 0; ii < currentNumber; ii++) {
+                        this.#dom.children.item(ii)?.style.setProperty('view-timeline-name', `--x-swiper-item-${ii}`);
+                    }
+                    this.#getIndicatorDynamicStyleContainer().innerHTML =
+                        `:host { timeline-scope: ${Array.from({ length: currentNumber }, (_, ii) => `--x-swiper-item-${ii}`).join(',')} !important; }`;
+                }
+            }
+            this.#numOfChildElement = currentNumber;
+        }
+        connectedCallback() {
+            this.#updateIndicatorDoms();
+            this.#childrenElementMutationObserver = new MutationObserver(this.#updateIndicatorDoms.bind(this));
+            this.#childrenElementMutationObserver.observe(this.#dom, {
+                attributes: false,
+                characterData: false,
+                childList: true,
+                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;
+                    const indicatorContainer = this.#getIndicatorContainer();
+                    for (let ii = 0; ii < numberOfChildren; ii++) {
+                        const indicator = indicatorContainer.children[ii];
+                        if (indicator) {
+                            if (ii === currentPage) {
+                                indicator.style.setProperty('background-color', 'var(--indicator-active-color)', 'important');
+                            }
+                            else {
+                                indicator.style.removeProperty('background-color');
+                            }
+                        }
+                    }
+                }).bind(this));
+                boostedQueueMicrotask(() => {
+                    this.#getIndicatorContainer().children[this.#dom.current]?.style.setProperty('background-color', 'var(--indicator-active-color)', 'important');
+                });
+            }
+        }
+        dispose() {
+            this.#childrenElementMutationObserver?.disconnect();
+            this.#childrenElementMutationObserver = undefined;
+        }
+    };
+})();
+export { XSwiperIndicator };
+//# sourceMappingURL=XSwiperIndicator.js.map

package/dist/XSwiper/index.d.ts

@@ -0,0 +1,2 @@
+export { SwiperItem } from './SwiperItem.js';
+export { XSwiper } from './XSwiper.js';

package/dist/XSwiper/index.js

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

package/dist/XText/InlineImage.d.ts

@@ -0,0 +1,11 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+export declare class InlineImageAttributes implements InstanceType<AttributeReactiveClass<typeof InlineImage>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: InlineImage);
+}
+/**
+ * @deprecated you can use `x-image` instead in `x-text`.
+ */
+export declare class InlineImage extends HTMLElement {
+}

package/dist/XText/InlineImage.js

@@ -0,0 +1,56 @@
+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 { Component, genDomGetter, html, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let InlineImageAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleSrc_decorators;
+    let _private_handleSrc_descriptor;
+    return class InlineImageAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
+            __esDecorate(this, _private_handleSrc_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal)
+                        this.#getImage().setAttribute('src', newVal);
+                    else
+                        this.#getImage().removeAttribute('src');
+                }, "#handleSrc") }, _private_handleSrc_decorators, { kind: "method", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['src'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        constructor(dom) {
+            this.#dom = dom;
+        }
+        #getImage = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        get #handleSrc() { return _private_handleSrc_descriptor.value; }
+    };
+})();
+export { InlineImageAttributes };
+/**
+ * @deprecated you can use `x-image` instead in `x-text`.
+ */
+let InlineImage = (() => {
+    let _classDecorators = [Component('inline-image', [InlineImageAttributes], html ` <img id="img" part="img" /> `)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var InlineImage = 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);
+            InlineImage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return InlineImage = _classThis;
+})();
+export { InlineImage };
+//# sourceMappingURL=InlineImage.js.map

package/dist/XText/InlineText.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated you can use x-text instead in x-text.
+ */
+export declare class InlineText extends HTMLElement {
+}

package/dist/XText/InlineText.js

@@ -0,0 +1,30 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { Component } from '@lynx-js/web-elements-reactive';
+/**
+ * @deprecated you can use x-text instead in x-text.
+ */
+let InlineText = (() => {
+    let _classDecorators = [Component('inline-text', [])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var InlineText = 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);
+            InlineText = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return InlineText = _classThis;
+})();
+export { InlineText };
+//# sourceMappingURL=InlineText.js.map

package/dist/XText/InlineTruncation.d.ts

@@ -0,0 +1,5 @@
+export declare class InlineTruncation extends HTMLElement {
+    static XEnableCustomTruncation: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/XText/InlineTruncation.js

@@ -0,0 +1,42 @@
+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';
+let InlineTruncation = (() => {
+    let _classDecorators = [Component('inline-truncation', [])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var InlineTruncation = 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);
+            InlineTruncation = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static XEnableCustomTruncation = 'x-text-custom-overflow';
+        connectedCallback() {
+            if (!CSS.supports('selector(:has(inline-truncation))')) {
+                if (this.parentElement?.tagName === 'X-TEXT'
+                    && !this.matches('inline-truncation ~ inline-truncation')) {
+                    this.parentElement.setAttribute(InlineTruncation.XEnableCustomTruncation, '');
+                }
+            }
+            this.setAttribute('slot', 'inline-truncation');
+        }
+        disconnectedCallback() {
+            this.parentElement?.removeAttribute(InlineTruncation.XEnableCustomTruncation);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return InlineTruncation = _classThis;
+})();
+export { InlineTruncation };
+//# sourceMappingURL=InlineTruncation.js.map

package/dist/XText/RawText.d.ts

@@ -0,0 +1,7 @@
+export declare class RawTextAttributes {
+    #private;
+    static observedAttributes: string[];
+    constructor(currentElement: HTMLElement);
+}
+export declare class RawText extends HTMLElement {
+}

package/dist/XText/RawText.js

@@ -0,0 +1,54 @@
+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 { Component, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let RawTextAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleText_decorators;
+    let _private_handleText_descriptor;
+    return class RawTextAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleText_decorators = [registerAttributeHandler('text', true)];
+            __esDecorate(this, _private_handleText_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal) {
+                        this.#dom.innerHTML = newVal;
+                    }
+                    else {
+                        this.#dom.innerHTML = '';
+                    }
+                }, "#handleText") }, _private_handleText_decorators, { kind: "method", name: "#handleText", static: false, private: true, access: { has: obj => #handleText in obj, get: obj => obj.#handleText }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['text'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        constructor(currentElement) {
+            this.#dom = currentElement;
+        }
+        get #handleText() { return _private_handleText_descriptor.value; }
+    };
+})();
+export { RawTextAttributes };
+let RawText = (() => {
+    let _classDecorators = [Component('raw-text', [RawTextAttributes])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var RawText = 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);
+            RawText = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return RawText = _classThis;
+})();
+export { RawText };
+//# sourceMappingURL=RawText.js.map

package/dist/XText/XText.d.ts

@@ -0,0 +1,5 @@
+export declare class XText extends HTMLElement {
+    static readonly notToFilterFalseAttributes: Set<string>;
+    superScrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+}

package/dist/XText/XText.js

@@ -0,0 +1,49 @@
+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, html } from '@lynx-js/web-elements-reactive';
+import { LynxExposure } from '../common/Exposure.js';
+import { XTextTruncation } from './XTextTruncation.js';
+import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
+let XText = (() => {
+    let _classDecorators = [Component('x-text', [LynxExposure, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XText = 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);
+            XText = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set(['tail-color-convert']);
+        superScrollIntoView(arg) {
+            super.scrollIntoView(arg);
+        }
+        scrollIntoView(arg) {
+            const lynxArg = arg;
+            if (typeof arg === 'object' && lynxArg.scrollIntoViewOptions) {
+                this.dispatchEvent(new CustomEvent(ScrollIntoView.eventName, {
+                    bubbles: true,
+                    composed: true,
+                    detail: lynxArg.scrollIntoViewOptions,
+                }));
+            }
+            else {
+                super.scrollIntoView(arg);
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return XText = _classThis;
+})();
+export { XText };
+//# sourceMappingURL=XText.js.map

package/dist/XText/XTextTruncation.d.ts

@@ -0,0 +1,11 @@
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import { XText } from './XText.js';
+export declare class XTextTruncation implements InstanceType<AttributeReactiveClass<typeof XText>> {
+    #private;
+    static exceedMathLengthAttribute: "x-text-clipped";
+    static showInlineTruncation: "x-show-inline-truncation";
+    static observedAttributes: string[];
+    constructor(dom: XText);
+    dispose(): void;
+    connectedCallback(): void;
+}