@lynx-js/web-elements 0.2.4

package/dist/XInput/InputBaseAttributes.js

@@ -0,0 +1,99 @@
+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 { bindToAttribute, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+/**
+ * shared by x-input and x-input-ng
+ */
+let InputBaseAttributes = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handlerConfirmType_decorators;
+    let _private_handlerConfirmType_initializers = [];
+    let _private_handlerConfirmType_extraInitializers = [];
+    let _private_handlerMaxlength_decorators;
+    let _private_handlerMaxlength_initializers = [];
+    let _private_handlerMaxlength_extraInitializers = [];
+    let _private_handleReadonly_decorators;
+    let _private_handleReadonly_initializers = [];
+    let _private_handleReadonly_extraInitializers = [];
+    let _private_handleType_decorators;
+    let _private_handleType_descriptor;
+    let _private_handleSpellCheck_decorators;
+    let _private_handleSpellCheck_initializers = [];
+    let _private_handleSpellCheck_extraInitializers = [];
+    return class InputBaseAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handlerConfirmType_decorators = [registerAttributeHandler('confirm-type', true)];
+            _private_handlerMaxlength_decorators = [registerAttributeHandler('maxlength', true)];
+            _private_handleReadonly_decorators = [registerAttributeHandler('readonly', true)];
+            _private_handleType_decorators = [registerAttributeHandler('type', true)];
+            _private_handleSpellCheck_decorators = [registerAttributeHandler('ios-spell-check', true), registerAttributeHandler('spell-check', true)];
+            __esDecorate(this, _private_handleType_descriptor = { value: __setFunctionName(function (value) {
+                    const attributeValue = value;
+                    // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+                    let inputMode = 'text';
+                    let inputType = 'text';
+                    if (attributeValue === 'digit') {
+                        inputMode = 'numeric';
+                        inputType = 'number';
+                    }
+                    else if (attributeValue === 'number') {
+                        inputMode = 'decimal';
+                        inputType = 'number';
+                    }
+                    else if (attributeValue === 'email') {
+                        inputMode = 'email';
+                    }
+                    else if (attributeValue === 'tel') {
+                        inputMode = 'tel';
+                    }
+                    else {
+                        inputType = attributeValue;
+                    }
+                    this.#setInputmode(inputMode);
+                    this.#setType(inputType);
+                }, "#handleType") }, _private_handleType_decorators, { kind: "method", name: "#handleType", static: false, private: true, access: { has: obj => #handleType in obj, get: obj => obj.#handleType }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _private_handlerConfirmType_decorators, { kind: "field", name: "#handlerConfirmType", static: false, private: true, access: { has: obj => #handlerConfirmType in obj, get: obj => obj.#handlerConfirmType, set: (obj, value) => { obj.#handlerConfirmType = value; } }, metadata: _metadata }, _private_handlerConfirmType_initializers, _private_handlerConfirmType_extraInitializers);
+            __esDecorate(null, null, _private_handlerMaxlength_decorators, { kind: "field", name: "#handlerMaxlength", static: false, private: true, access: { has: obj => #handlerMaxlength in obj, get: obj => obj.#handlerMaxlength, set: (obj, value) => { obj.#handlerMaxlength = value; } }, metadata: _metadata }, _private_handlerMaxlength_initializers, _private_handlerMaxlength_extraInitializers);
+            __esDecorate(null, null, _private_handleReadonly_decorators, { kind: "field", name: "#handleReadonly", static: false, private: true, access: { has: obj => #handleReadonly in obj, get: obj => obj.#handleReadonly, set: (obj, value) => { obj.#handleReadonly = value; } }, metadata: _metadata }, _private_handleReadonly_initializers, _private_handleReadonly_extraInitializers);
+            __esDecorate(null, null, _private_handleSpellCheck_decorators, { kind: "field", name: "#handleSpellCheck", static: false, private: true, access: { has: obj => #handleSpellCheck in obj, get: obj => obj.#handleSpellCheck, set: (obj, value) => { obj.#handleSpellCheck = value; } }, metadata: _metadata }, _private_handleSpellCheck_initializers, _private_handleSpellCheck_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'confirm-type',
+            'maxlength',
+            'readonly',
+            'type',
+            'ios-spell-check',
+            'spell-check',
+        ];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #inputType = 'text';
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        #handlerConfirmType = __runInitializers(this, _private_handlerConfirmType_initializers, bindToAttribute(this.#getInputElement, 'enterkeyhint', (val) => {
+            if (val === null)
+                return 'send';
+            return val;
+        }));
+        #handlerMaxlength = (__runInitializers(this, _private_handlerConfirmType_extraInitializers), __runInitializers(this, _private_handlerMaxlength_initializers, bindToAttribute(this.#getInputElement, 'maxlength', (val) => {
+            if (val === null)
+                return '140';
+            return val;
+        })));
+        #handleReadonly = (__runInitializers(this, _private_handlerMaxlength_extraInitializers), __runInitializers(this, _private_handleReadonly_initializers, bindToAttribute(this.#getInputElement, 'readonly', (value) => (value !== null ? '' : null))));
+        #setType = (__runInitializers(this, _private_handleReadonly_extraInitializers), bindToAttribute(this.#getInputElement, 'type'));
+        #setInputmode = bindToAttribute(this.#getInputElement, 'inputmode');
+        get #handleType() { return _private_handleType_descriptor.value; }
+        #handleSpellCheck = __runInitializers(this, _private_handleSpellCheck_initializers, bindToAttribute(this.#getInputElement, 'spellcheck', (value) => (value === null ? 'false' : 'true')));
+        constructor(dom) {
+            __runInitializers(this, _private_handleSpellCheck_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { InputBaseAttributes };
+//# sourceMappingURL=InputBaseAttributes.js.map

package/dist/XInput/Placeholder.d.ts

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

package/dist/XInput/Placeholder.js

@@ -0,0 +1,60 @@
+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 { bindToAttribute, bindToStyle, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+let Placeholder = (() => {
+    let _private_handlerPlaceholder_decorators;
+    let _private_handlerPlaceholder_initializers = [];
+    let _private_handlerPlaceholder_extraInitializers = [];
+    let _private_handlerPlaceholderColor_decorators;
+    let _private_handlerPlaceholderColor_initializers = [];
+    let _private_handlerPlaceholderColor_extraInitializers = [];
+    let _private_handlerPlaceholderFontFamily_decorators;
+    let _private_handlerPlaceholderFontFamily_initializers = [];
+    let _private_handlerPlaceholderFontFamily_extraInitializers = [];
+    let _private_handlerPlaceholderFontSize_decorators;
+    let _private_handlerPlaceholderFontSize_initializers = [];
+    let _private_handlerPlaceholderFontSize_extraInitializers = [];
+    let _private_handlerPlaceholderFontWeight_decorators;
+    let _private_handlerPlaceholderFontWeight_initializers = [];
+    let _private_handlerPlaceholderFontWeight_extraInitializers = [];
+    return class Placeholder {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handlerPlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
+            _private_handlerPlaceholderColor_decorators = [registerAttributeHandler('placeholder-color', true)];
+            _private_handlerPlaceholderFontFamily_decorators = [registerAttributeHandler('placeholder-font-family', true)];
+            _private_handlerPlaceholderFontSize_decorators = [registerAttributeHandler('placeholder-font-size', true)];
+            _private_handlerPlaceholderFontWeight_decorators = [registerAttributeHandler('placeholder-font-weight', true)];
+            __esDecorate(null, null, _private_handlerPlaceholder_decorators, { kind: "field", name: "#handlerPlaceholder", static: false, private: true, access: { has: obj => #handlerPlaceholder in obj, get: obj => obj.#handlerPlaceholder, set: (obj, value) => { obj.#handlerPlaceholder = value; } }, metadata: _metadata }, _private_handlerPlaceholder_initializers, _private_handlerPlaceholder_extraInitializers);
+            __esDecorate(null, null, _private_handlerPlaceholderColor_decorators, { kind: "field", name: "#handlerPlaceholderColor", static: false, private: true, access: { has: obj => #handlerPlaceholderColor in obj, get: obj => obj.#handlerPlaceholderColor, set: (obj, value) => { obj.#handlerPlaceholderColor = value; } }, metadata: _metadata }, _private_handlerPlaceholderColor_initializers, _private_handlerPlaceholderColor_extraInitializers);
+            __esDecorate(null, null, _private_handlerPlaceholderFontFamily_decorators, { kind: "field", name: "#handlerPlaceholderFontFamily", static: false, private: true, access: { has: obj => #handlerPlaceholderFontFamily in obj, get: obj => obj.#handlerPlaceholderFontFamily, set: (obj, value) => { obj.#handlerPlaceholderFontFamily = value; } }, metadata: _metadata }, _private_handlerPlaceholderFontFamily_initializers, _private_handlerPlaceholderFontFamily_extraInitializers);
+            __esDecorate(null, null, _private_handlerPlaceholderFontSize_decorators, { kind: "field", name: "#handlerPlaceholderFontSize", static: false, private: true, access: { has: obj => #handlerPlaceholderFontSize in obj, get: obj => obj.#handlerPlaceholderFontSize, set: (obj, value) => { obj.#handlerPlaceholderFontSize = value; } }, metadata: _metadata }, _private_handlerPlaceholderFontSize_initializers, _private_handlerPlaceholderFontSize_extraInitializers);
+            __esDecorate(null, null, _private_handlerPlaceholderFontWeight_decorators, { kind: "field", name: "#handlerPlaceholderFontWeight", static: false, private: true, access: { has: obj => #handlerPlaceholderFontWeight in obj, get: obj => obj.#handlerPlaceholderFontWeight, set: (obj, value) => { obj.#handlerPlaceholderFontWeight = value; } }, metadata: _metadata }, _private_handlerPlaceholderFontWeight_initializers, _private_handlerPlaceholderFontWeight_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'placeholder',
+            'placeholder-color',
+            'placeholder-font-family',
+            'placeholder-font-size',
+            'placeholder-font-weight',
+        ];
+        #dom;
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        #handlerPlaceholder = __runInitializers(this, _private_handlerPlaceholder_initializers, bindToAttribute(this.#getInputElement, 'placeholder'));
+        #handlerPlaceholderColor = (__runInitializers(this, _private_handlerPlaceholder_extraInitializers), __runInitializers(this, _private_handlerPlaceholderColor_initializers, bindToStyle(this.#getInputElement, '--placeholder-color', undefined, true)));
+        #handlerPlaceholderFontFamily = (__runInitializers(this, _private_handlerPlaceholderColor_extraInitializers), __runInitializers(this, _private_handlerPlaceholderFontFamily_initializers, bindToStyle(this.#getInputElement, '--placeholder-font-family', undefined, true)));
+        #handlerPlaceholderFontSize = (__runInitializers(this, _private_handlerPlaceholderFontFamily_extraInitializers), __runInitializers(this, _private_handlerPlaceholderFontSize_initializers, bindToStyle(this.#getInputElement, '--placeholder-font-size', undefined, true)));
+        #handlerPlaceholderFontWeight = (__runInitializers(this, _private_handlerPlaceholderFontSize_extraInitializers), __runInitializers(this, _private_handlerPlaceholderFontWeight_initializers, bindToStyle(this.#getInputElement, '--placeholder-font-weight', undefined, true)));
+        constructor(dom) {
+            __runInitializers(this, _private_handlerPlaceholderFontWeight_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { Placeholder };
+//# sourceMappingURL=Placeholder.js.map

package/dist/XInput/XInput.d.ts

@@ -0,0 +1,28 @@
+export declare class XInput extends HTMLElement {
+    #private;
+    addText(params: {
+        text: string;
+    }): void;
+    controlKeyBoard(params: {
+        action: number;
+    }): void;
+    setValue(params: {
+        value: string;
+        index: number;
+    }): void;
+    sendDelEvent(params: {
+        action: number;
+        length: number;
+    }): void;
+    setInputFilter(params: {
+        pattern: string;
+    }): void;
+    select(): void;
+    setSelectionRange(params: {
+        selectionStart: number;
+        selectionEnd: number;
+    }): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    connectedCallback(): void;
+}

package/dist/XInput/XInput.js

@@ -0,0 +1,129 @@
+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 { InputBaseAttributes } from './InputBaseAttributes.js';
+import { Placeholder } from './Placeholder.js';
+import { XInputAttribute } from './XInputAttribute.js';
+import { XInputEvents } from './XInputEvents.js';
+import { LynxExposure } from '../common/Exposure.js';
+let XInput = (() => {
+    let _classDecorators = [Component('x-input', [
+            LynxExposure,
+            Placeholder,
+            XInputAttribute,
+            InputBaseAttributes,
+            XInputEvents,
+        ], html ` <style>
+      #input:focus {
+        outline: none;
+      }
+      #form {
+        display: none;
+      }
+    </style>
+    <form id="form" part="form" method="dialog">
+      <input
+        id="input"
+        part="input"
+        step="any"
+        type="text"
+        inputmode="text"
+        spell-check="true"
+      />
+    </form>`)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XInput = 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);
+            XInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #getInput = genDomGetter(() => this.shadowRoot, '#input');
+        addText(params) {
+            const { text } = params;
+            const input = this.#getInput();
+            const selectionStart = input.selectionStart;
+            if (selectionStart === null) {
+                input.value = text;
+            }
+            else {
+                const currentValue = input.value;
+                input.value = currentValue.slice(0, selectionStart)
+                    + text
+                    + currentValue.slice(selectionStart);
+            }
+        }
+        controlKeyBoard(params) {
+            const { action } = params;
+            if (action === 0 || action === 1) {
+                this.focus();
+            }
+            else if (action === 2 || action === 3) {
+                this.blur();
+            }
+        }
+        setValue(params) {
+            const input = this.#getInput();
+            input.value = params.value;
+            let cursorIndex;
+            if ((cursorIndex = params.index)) {
+                input.setSelectionRange(cursorIndex, cursorIndex);
+            }
+        }
+        sendDelEvent(params) {
+            let { action, length } = params;
+            const input = this.#getInput();
+            if (action === 1) {
+                length = 1;
+            }
+            const selectionStart = input.selectionStart;
+            if (selectionStart === null) {
+                const currentValue = input.value;
+                input.value = input.value.substring(0, currentValue.length - length);
+            }
+            else {
+                const currentValue = input.value;
+                input.value = currentValue.slice(0, selectionStart - length)
+                    + currentValue.slice(selectionStart);
+            }
+        }
+        setInputFilter(params) {
+            this.#getInput().setAttribute('pattern', params.pattern);
+        }
+        select() {
+            const input = this.#getInput();
+            input.setSelectionRange(0, input.value.length);
+        }
+        setSelectionRange(params) {
+            this.#getInput().setSelectionRange(params.selectionStart, params.selectionEnd);
+        }
+        focus(options) {
+            this.#getInput().focus(options);
+        }
+        blur() {
+            this.#getInput().blur();
+        }
+        connectedCallback() {
+            const input = this.#getInput();
+            if (this.getAttribute('confirm-type') === null) {
+                input.setAttribute('confirm-type', 'send');
+            }
+            if (this.getAttribute('maxlength') === null) {
+                input.setAttribute('maxlength', '140');
+            }
+        }
+    };
+    return XInput = _classThis;
+})();
+export { XInput };
+//# sourceMappingURL=XInput.js.map

package/dist/XInput/XInputAttribute.d.ts

@@ -0,0 +1,9 @@
+import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+/**
+ * shared by x-input and x-input-ng
+ */
+export declare class XInputAttribute implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: HTMLElement);
+}

package/dist/XInput/XInputAttribute.js

@@ -0,0 +1,52 @@
+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 { bindToAttribute, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+/**
+ * shared by x-input and x-input-ng
+ */
+let XInputAttribute = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleValue_decorators;
+    let _private_handleValue_descriptor;
+    let _private_handleDisabled_decorators;
+    let _private_handleDisabled_initializers = [];
+    let _private_handleDisabled_extraInitializers = [];
+    return class XInputAttribute {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleValue_decorators = [registerAttributeHandler('value', false)];
+            _private_handleDisabled_decorators = [registerAttributeHandler('disabled', true)];
+            __esDecorate(this, _private_handleValue_descriptor = { value: __setFunctionName(function (newValue) {
+                    if (newValue) {
+                        const maxlength = parseFloat(this.#dom.getAttribute('maxlength') ?? '');
+                        if (!isNaN(maxlength))
+                            newValue = newValue.substring(0, maxlength);
+                    }
+                    else {
+                        newValue = '';
+                    }
+                    const input = this.#getInputElement();
+                    if (input.value !== newValue) {
+                        input.value = newValue;
+                    }
+                }, "#handleValue") }, _private_handleValue_decorators, { kind: "method", name: "#handleValue", static: false, private: true, access: { has: obj => #handleValue in obj, get: obj => obj.#handleValue }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _private_handleDisabled_decorators, { kind: "field", name: "#handleDisabled", static: false, private: true, access: { has: obj => #handleDisabled in obj, get: obj => obj.#handleDisabled, set: (obj, value) => { obj.#handleDisabled = value; } }, metadata: _metadata }, _private_handleDisabled_initializers, _private_handleDisabled_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['value', 'disabled'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        get #handleValue() { return _private_handleValue_descriptor.value; }
+        #handleDisabled = __runInitializers(this, _private_handleDisabled_initializers, bindToAttribute(this.#getInputElement, 'disabled', (value) => (value !== null ? '' : null)));
+        constructor(dom) {
+            __runInitializers(this, _private_handleDisabled_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { XInputAttribute };
+//# sourceMappingURL=XInputAttribute.js.map

package/dist/XInput/XInputEvents.d.ts

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

package/dist/XInput/XInputEvents.js

@@ -0,0 +1,111 @@
+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 { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { renameEvent } from '../common/renameEvent.js';
+let XInputEvents = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handleEnableConfirmEvent_decorators;
+    let _private_handleEnableConfirmEvent_descriptor;
+    let _private_handleSendComposingInput_decorators;
+    let _private_handleSendComposingInput_descriptor;
+    return class XInputEvents {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('x-enable-input-event', true)];
+            _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
+            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (newValue) {
+                    const input = this.#getInputElement();
+                    if (newValue !== null) {
+                        input.addEventListener('input', this.#teleportInput, { passive: true });
+                        input.addEventListener('compositionend', this.#teleportCompositionendInput, { passive: true });
+                    }
+                    else {
+                        input.addEventListener('input', this.#teleportInput, { passive: true });
+                        input.removeEventListener('compositionend', this.#teleportCompositionendInput);
+                    }
+                }, "#handleEnableConfirmEvent") }, _private_handleEnableConfirmEvent_decorators, { kind: "method", name: "#handleEnableConfirmEvent", static: false, private: true, access: { has: obj => #handleEnableConfirmEvent in obj, get: obj => obj.#handleEnableConfirmEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleSendComposingInput_descriptor = { value: __setFunctionName(function (newVal) {
+                    this.#sendComposingInput = newVal !== null;
+                }, "#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'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #sendComposingInput = false;
+        #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
+        #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
+        get #handleEnableConfirmEvent() { return _private_handleEnableConfirmEvent_descriptor.value; }
+        get #handleSendComposingInput() { return _private_handleSendComposingInput_descriptor.value; }
+        #teleportEvent = (event) => {
+            const eventType = renameEvent[event.type] ?? event.type;
+            this.#dom.dispatchEvent(new CustomEvent(eventType, {
+                ...commonComponentEventSetting,
+                detail: {
+                    value: this.#getInputElement().value,
+                },
+            }));
+        };
+        #teleportInput = (event) => {
+            const input = this.#getInputElement();
+            const value = input.value;
+            const isComposing = event.isComposing;
+            if (isComposing && !this.#sendComposingInput)
+                return;
+            this.#dom.dispatchEvent(new CustomEvent('input', {
+                ...commonComponentEventSetting,
+                detail: {
+                    value,
+                    textLength: value.length,
+                    cursor: input.selectionStart,
+                    isComposing,
+                },
+            }));
+        };
+        #teleportCompositionendInput = () => {
+            const input = this.#getInputElement();
+            const value = input.value;
+            // if #sendComposingInput set true, #teleportInput will send detail
+            if (!this.#sendComposingInput) {
+                this.#dom.dispatchEvent(new CustomEvent('input', {
+                    ...commonComponentEventSetting,
+                    detail: {
+                        value,
+                        textLength: value.length,
+                        cursor: input.selectionStart,
+                    },
+                }));
+            }
+        };
+        #blockHtmlEvent = (event) => {
+            if (event.target === this.#getInputElement()
+                && typeof event.detail === 'number') {
+                event.stopImmediatePropagation();
+            }
+        };
+        constructor(dom) {
+            this.#dom = dom;
+            const inputElement = this.#getInputElement();
+            const formElement = this.#getFormElement();
+            inputElement.addEventListener('blur', this.#teleportEvent, {
+                passive: true,
+            });
+            inputElement.addEventListener('focus', this.#teleportEvent, {
+                passive: true,
+            });
+            formElement.addEventListener('submit', this.#teleportEvent, {
+                passive: true,
+            });
+            // use form to stop propagation
+            formElement.addEventListener('input', this.#blockHtmlEvent, {
+                passive: true,
+            });
+        }
+    };
+})();
+export { XInputEvents };
+//# sourceMappingURL=XInputEvents.js.map

package/dist/XInput/index.d.ts

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

package/dist/XInput/index.js

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

package/dist/XList/ListItem.d.ts

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

package/dist/XList/ListItem.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 ListItem = (() => {
+    let _classDecorators = [Component('list-item', [LynxExposure])];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var ListItem = 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);
+            ListItem = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return ListItem = _classThis;
+})();
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

package/dist/XList/XList.d.ts

@@ -0,0 +1,52 @@
+export declare class XList extends HTMLElement {
+    #private;
+    static readonly notToFilterFalseAttributes: Set<string>;
+    get scrollTop(): number;
+    set scrollTop(val: number);
+    get scrollLeft(): number;
+    set scrollLeft(val: number);
+    get __scrollTop(): number;
+    get __scrollLeft(): number;
+    scrollToPosition(params: {
+        index: number;
+        smooth?: boolean;
+        /**
+         * @description The offset of the content
+         * @defaultValue 0
+         */
+        offset?: `${number}px` | `${number}rpx` | `${number}ppx` | number;
+    }): void;
+    autoScroll(params: {
+        /**
+         * @description The scrolling interval per second, supports positive and negative
+         * @defaultValue null
+         */
+        rate: `${number}px` | `${number}rpx` | `${number}ppx` | number;
+        /**
+         * @description start/pause autoScroll
+         * @defaultValue true
+         */
+        start: boolean;
+        /**
+         * @description Whether to stop automatically when sliding to the bottom
+         * @defaultValue true
+         */
+        autoStop: boolean;
+    }): void;
+    getScrollContainerInfo(): {
+        scrollTop: number;
+        scrollLeft: number;
+        scrollHeight: number;
+        scrollWidth: number;
+    };
+    getVisibleCells: () => {
+        id: string | null;
+        itemKey: string | null;
+        bottom: number;
+        top: number;
+        left: number;
+        right: number;
+        index: number;
+    }[];
+    connectedCallback(): void;
+}