@lingxia/elements 0.9.0 → 0.11.1

package/dist/input.js

@@ -1,699 +0,0 @@
-import { sendNativeComponentMessage, registerNativeComponentHandler, } from "./nativecomponent.js";
-import { ensureComponentId, NativeComponentUpdateState } from "./component.js";
-import { measureElement } from "./dom.js";
-import { isHarmony, isDesktop, isMacOS, isAndroid, isIOS } from "./platform.js";
-import { getPropOrAttr as getSharedPropOrAttr, getBoolAttr as getSharedBoolAttr, getNumAttr as getSharedNumAttr, shouldRefreshForDataAttribute as shouldRefreshSharedDataAttribute, collectDataset as collectSharedDataset, } from "./text_component_shared.js";
-const HARMONY_PROPS_PREFIX = "data:application/json,";
-// Component implementation
-export class LxInputElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.componentId = null;
-        this.mounted = false;
-        this._handlers = {};
-        this.rawHandlers = {};
-        this.pendingHarmonyRetryTimer = null;
-        this.pendingHarmonyRetryCount = 0;
-        this.updateState = new NativeComponentUpdateState();
-        this.pendingLayoutFrame = null;
-        this.focusLayoutSyncTimer = null;
-        this.layoutEventListener = {
-            handleEvent: () => this.schedulePositionSync()
-        };
-        this._pageBindings = {};
-    }
-    static get observedAttributes() {
-        return [
-            "id", "value", "type", "placeholder", "placeholder-style",
-            "placeholder-class", "password", "maxlength", "cursor-spacing",
-            "auto-focus", "disabled", "focus", "confirm-type", "always-embed",
-            "confirm-hold", "cursor", "cursor-color", "selection-start",
-            "selection-end", "adjust-position", "hold-keyboard"
-        ];
-    }
-    set pageBindings(bindings) {
-        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected) {
-            this.mountInput();
-        }
-    }
-    get pageBindings() {
-        return this._pageBindings;
-    }
-    upgradeProperty(propName) {
-        const self = this;
-        if (!Object.prototype.hasOwnProperty.call(self, propName))
-            return;
-        const value = self[propName];
-        delete self[propName];
-        self[propName] = value;
-    }
-    registerNativeHandler() {
-        if (!this.componentId)
-            return;
-        if (this.unregister) {
-            this.unregister();
-            this.unregister = undefined;
-        }
-        this.unregister = registerNativeComponentHandler(this.componentId, (message) => {
-            var _a;
-            if (typeof message.event === "string") {
-                const detail = ((_a = message.detail) !== null && _a !== void 0 ? _a : {});
-                if (message.event === "keyboardheightchange") {
-                    this.resyncHarmonyLayoutAfterFocus();
-                }
-                else if (message.event === "focus") {
-                    this.startFocusLayoutSync();
-                    this.resyncHarmonyLayoutAfterFocus();
-                }
-                else if (message.event === "blur") {
-                    this.stopFocusLayoutSync();
-                }
-                this.dispatchEvent(new CustomEvent(message.event, { detail, bubbles: true }));
-            }
-        });
-    }
-    unmountNativeComponentById(componentId) {
-        if (!componentId || isHarmony() || isDesktop() || isAndroid())
-            return;
-        sendNativeComponentMessage({
-            action: "component.unmount",
-            id: componentId
-        });
-    }
-    teardownHarmonyEmbed() {
-        if (this.harmonyEmbed && this.contains(this.harmonyEmbed)) {
-            this.removeChild(this.harmonyEmbed);
-        }
-        this.harmonyEmbed = undefined;
-        this.lastHarmonyProps = undefined;
-        if (this.pendingHarmonyRetryTimer !== null) {
-            clearTimeout(this.pendingHarmonyRetryTimer);
-            this.pendingHarmonyRetryTimer = null;
-        }
-        this.pendingHarmonyProps = undefined;
-        this.pendingHarmonyRetryCount = 0;
-    }
-    connectedCallback() {
-        this.upgradeProperty("pageBindings");
-        this.upgradeProperty("oninput");
-        this.upgradeProperty("onchange");
-        this.upgradeProperty("onfocus");
-        this.upgradeProperty("onblur");
-        this.upgradeProperty("onconfirm");
-        this.upgradeProperty("onkeyboardheightchange");
-        this.upgradeProperty("onnicknamereview");
-        this.componentId = ensureComponentId(this, "lx-input", this.componentId);
-        if (!this.componentId)
-            return;
-        this.registerNativeHandler();
-        this.startAttrObserver();
-        this.startTracking();
-        this.mountInput();
-        queueMicrotask(() => {
-            if (!this.isConnected)
-                return;
-            this.mountInput();
-        });
-    }
-    disconnectedCallback() {
-        if (this.shadow) {
-            this.innerInput = undefined;
-            this.shadow = undefined;
-        }
-        if (this.componentId) {
-            this.unmountNativeComponentById(this.componentId);
-        }
-        if (this.unregister) {
-            this.unregister();
-            this.unregister = undefined;
-        }
-        this.teardownHarmonyEmbed();
-        this.stopFocusLayoutSync();
-        this.stopTracking();
-        this.mounted = false;
-        this.updateState.reset();
-        this.stopAttrObserver();
-        Object.keys(this._handlers).forEach(name => {
-            this.removeEventListener(name, this._handlers[name]);
-        });
-        this._handlers = {};
-        this.rawHandlers = {};
-    }
-    attributeChangedCallback(name) {
-        if (name === "id") {
-            const prev = this.componentId;
-            this.componentId = ensureComponentId(this, "lx-input", this.componentId);
-            if (prev && this.componentId !== prev) {
-                this.mounted = false;
-                this.updateState.reset();
-                if (this.isConnected) {
-                    this.unmountNativeComponentById(prev);
-                    this.teardownHarmonyEmbed();
-                    this.registerNativeHandler();
-                }
-            }
-        }
-        if (!this.isConnected)
-            return;
-        this.mountInput();
-    }
-    getAttr(name, fallback = "") {
-        const raw = this.getPropOrAttr(name);
-        if (raw === undefined || raw === null)
-            return fallback;
-        return String(raw);
-    }
-    getBoolAttr(name) {
-        return getSharedBoolAttr(this, name);
-    }
-    getNumAttr(name) {
-        return getSharedNumAttr(this, name);
-    }
-    getPropOrAttr(name) {
-        return getSharedPropOrAttr(this, name);
-    }
-    shouldTrackNativeLayout() {
-        return isIOS() || isHarmony();
-    }
-    startTracking() {
-        var _a, _b;
-        if (!this.shouldTrackNativeLayout())
-            return;
-        window.addEventListener("resize", this.layoutEventListener);
-        if (isHarmony()) {
-            // Harmony native embed coordinates need continuous sync while page scrolls.
-            window.addEventListener("scroll", this.layoutEventListener, { capture: true, passive: true });
-        }
-        else if (isIOS()) {
-            // Match video behavior on iOS: track top-level page scrolling only.
-            window.addEventListener("scroll", this.layoutEventListener, { passive: true });
-        }
-        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", this.layoutEventListener);
-        (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", this.layoutEventListener);
-        this.startSizeObserver();
-        this.schedulePositionSync();
-    }
-    stopTracking() {
-        var _a, _b;
-        window.removeEventListener("resize", this.layoutEventListener);
-        window.removeEventListener("scroll", this.layoutEventListener, true);
-        window.removeEventListener("scroll", this.layoutEventListener);
-        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.layoutEventListener);
-        (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.layoutEventListener);
-        this.stopSizeObserver();
-        if (this.pendingLayoutFrame !== null) {
-            cancelAnimationFrame(this.pendingLayoutFrame);
-            this.pendingLayoutFrame = null;
-        }
-    }
-    startSizeObserver() {
-        if (typeof ResizeObserver === "undefined" || this.resizeObserver)
-            return;
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target !== this)
-                    continue;
-                this.schedulePositionSync();
-                break;
-            }
-        });
-        this.resizeObserver.observe(this);
-    }
-    stopSizeObserver() {
-        if (!this.resizeObserver)
-            return;
-        this.resizeObserver.disconnect();
-        this.resizeObserver = undefined;
-    }
-    schedulePositionSync() {
-        if (!this.shouldTrackNativeLayout() || !this.isConnected)
-            return;
-        if (this.pendingLayoutFrame !== null)
-            return;
-        this.pendingLayoutFrame = requestAnimationFrame(() => {
-            this.pendingLayoutFrame = null;
-            if (!this.isConnected)
-                return;
-            this.mountInput();
-        });
-    }
-    collectProps() {
-        const autoFocus = this.getBoolAttr("auto-focus");
-        const password = this.getBoolAttr("password");
-        const value = this.getPropOrAttr("value");
-        const props = {
-            value: value === undefined || value === null ? undefined : String(value),
-            type: password ? "password" : this.getAttr("type", "text"),
-            password,
-            placeholder: this.getAttr("placeholder"),
-            placeholderStyle: this.getAttr("placeholder-style"),
-            // Use string values so "false" survives all bridge layers (some paths may drop falsy booleans).
-            focus: (this.getBoolAttr("focus") || autoFocus) ? "true" : "false",
-            autoFocus,
-            disabled: this.getBoolAttr("disabled"),
-            confirmType: this.getAttr("confirm-type", "done"),
-            alwaysEmbed: this.getBoolAttr("always-embed"),
-            confirmHold: this.getBoolAttr("confirm-hold"),
-            adjustPosition: this.getAttribute("adjust-position") !== "false",
-            holdKeyboard: this.getBoolAttr("hold-keyboard"),
-        };
-        const textColor = this.getHostTextColor();
-        if (textColor)
-            props.textColor = textColor;
-        const placeholderClass = this.getAttr("placeholder-class");
-        if (placeholderClass)
-            props.placeholderClass = placeholderClass;
-        const maxlength = this.getNumAttr("maxlength");
-        if (maxlength !== undefined)
-            props.maxlength = maxlength;
-        const cursorSpacing = this.getNumAttr("cursor-spacing");
-        if (cursorSpacing !== undefined)
-            props.cursorSpacing = cursorSpacing;
-        const cursor = this.getNumAttr("cursor");
-        if (cursor !== undefined)
-            props.cursor = cursor;
-        const cursorColor = this.getAttr("cursor-color");
-        if (cursorColor)
-            props.cursorColor = cursorColor;
-        const selStart = this.getNumAttr("selection-start");
-        if (selStart !== undefined)
-            props.selectionStart = selStart;
-        const selEnd = this.getNumAttr("selection-end");
-        if (selEnd !== undefined)
-            props.selectionEnd = selEnd;
-        return props;
-    }
-    getHostTextColor() {
-        var _a;
-        const color = (_a = getComputedStyle(this).color) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!color)
-            return undefined;
-        if (color === "transparent" || color === "rgba(0, 0, 0, 0)")
-            return undefined;
-        return color;
-    }
-    resyncHarmonyLayoutAfterFocus() {
-        if (!isHarmony() || !this.isConnected)
-            return;
-        this.mountInput();
-        setTimeout(() => {
-            if (!this.isConnected)
-                return;
-            this.mountInput();
-        }, 32);
-        setTimeout(() => {
-            if (!this.isConnected)
-                return;
-            this.mountInput();
-        }, 96);
-    }
-    startFocusLayoutSync() {
-        if (!isHarmony())
-            return;
-        if (this.focusLayoutSyncTimer !== null)
-            return;
-        this.focusLayoutSyncTimer = window.setInterval(() => {
-            if (!this.isConnected) {
-                this.stopFocusLayoutSync();
-                return;
-            }
-            this.mountInput();
-        }, 80);
-    }
-    stopFocusLayoutSync() {
-        if (this.focusLayoutSyncTimer === null)
-            return;
-        clearInterval(this.focusLayoutSyncTimer);
-        this.focusLayoutSyncTimer = null;
-    }
-    shouldRefreshForAttribute(name) {
-        return shouldRefreshSharedDataAttribute(name);
-    }
-    startAttrObserver() {
-        if (typeof MutationObserver === "undefined" || this.attrObserver)
-            return;
-        this.attrObserver = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                const attrName = mutation.attributeName;
-                if (!attrName || !this.shouldRefreshForAttribute(attrName))
-                    continue;
-                this.mountInput();
-                break;
-            }
-        });
-        this.attrObserver.observe(this, { attributes: true });
-    }
-    stopAttrObserver() {
-        if (!this.attrObserver)
-            return;
-        this.attrObserver.disconnect();
-        this.attrObserver = undefined;
-    }
-    collectDataset() {
-        return collectSharedDataset(this);
-    }
-    getInputType() {
-        if (this.getBoolAttr("password"))
-            return "password";
-        const type = this.getAttr("type", "text");
-        switch (type) {
-            case "digit": return "tel";
-            case "number": return "number";
-            case "password": return "password";
-            case "safe-password": return "password";
-            default: return "text";
-        }
-    }
-    mountDesktopInput() {
-        if (!this.shadow) {
-            this.shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            if (isAndroid() || isMacOS()) {
-                // Native app context: page provides visual container; keep the input bare
-                style.textContent = `
-          :host { display: block; width: 100%; height: 100%; }
-          input {
-            display: block; width: 100%; height: 100%;
-            box-sizing: border-box; padding: 0; margin: 0;
-            background: transparent; border: none; outline: none;
-            color: inherit; font: inherit;
-          }
-        `;
-            }
-            else {
-                style.textContent = `
-          :host {
-            display: block;
-            width: 100%;
-          }
-          input {
-            display: block;
-            width: 100%;
-            box-sizing: border-box;
-            padding: 8px 12px;
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
-            font-size: 14px;
-            line-height: 1.5;
-            color: #111827;
-            background: #fff;
-            outline: none;
-            transition: border-color 0.2s;
-          }
-          input:focus {
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-          }
-          input:disabled {
-            background: #f3f4f6;
-            color: #9ca3af;
-            cursor: not-allowed;
-          }
-          input::placeholder {
-            color: #9ca3af;
-          }
-        `;
-            }
-            this.shadow.appendChild(style);
-            const input = document.createElement("input");
-            this.innerInput = input;
-            this.shadow.appendChild(input);
-            // Stop native composed events from leaking through shadow boundary
-            // to avoid double-firing (native retarget + our CustomEvent).
-            input.addEventListener("input", (e) => {
-                e.stopPropagation();
-                const detail = { value: input.value };
-                this.dispatchEvent(new CustomEvent("input", { detail, bubbles: true }));
-            });
-            input.addEventListener("change", (e) => {
-                e.stopPropagation();
-                const detail = { value: input.value };
-                this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true }));
-            });
-            input.addEventListener("focus", (e) => {
-                e.stopPropagation();
-                const detail = { value: input.value };
-                this.dispatchEvent(new CustomEvent("focus", { detail, bubbles: true }));
-            });
-            input.addEventListener("blur", (e) => {
-                e.stopPropagation();
-                const detail = { value: input.value };
-                this.dispatchEvent(new CustomEvent("blur", { detail, bubbles: true }));
-            });
-            input.addEventListener("keydown", (e) => {
-                if (e.key === "Enter") {
-                    const detail = { value: input.value };
-                    this.dispatchEvent(new CustomEvent("confirm", { detail, bubbles: true }));
-                }
-            });
-        }
-        // Sync attributes to inner input
-        const input = this.innerInput;
-        const props = this.collectProps();
-        input.type = this.getInputType();
-        input.placeholder = props.placeholder || "";
-        input.disabled = props.disabled;
-        if (props.maxlength !== undefined) {
-            input.maxLength = props.maxlength;
-        }
-        else {
-            input.removeAttribute("maxlength");
-        }
-        // Only sync value if it differs (avoid cursor jump)
-        if (props.value !== undefined && input.value !== props.value) {
-            input.value = props.value;
-        }
-        // Apply selection range
-        if (typeof props.selectionStart === "number" &&
-            typeof props.selectionEnd === "number" &&
-            props.selectionStart >= 0 &&
-            props.selectionEnd >= props.selectionStart) {
-            input.setSelectionRange(props.selectionStart, props.selectionEnd);
-        }
-        // Apply placeholder style (replace on every update so dynamic changes work)
-        const placeholderStyle = props.placeholderStyle;
-        const styleEl = this.shadow.querySelector("style");
-        const marker = "/* placeholder-style */";
-        const markerIdx = styleEl.textContent.indexOf(marker);
-        if (placeholderStyle) {
-            const rule = `\n${marker}\ninput::placeholder { ${placeholderStyle} }`;
-            if (markerIdx >= 0) {
-                styleEl.textContent = styleEl.textContent.substring(0, markerIdx) + rule;
-            }
-            else {
-                styleEl.textContent += rule;
-            }
-        }
-        else if (markerIdx >= 0) {
-            styleEl.textContent = styleEl.textContent.substring(0, markerIdx);
-        }
-        if (isAndroid() || isMacOS()) {
-            const confirmType = this.getAttr("confirm-type", "done");
-            input.setAttribute("enterkeyhint", confirmType);
-        }
-        if (props.focus === "true" && document.activeElement !== input) {
-            input.focus();
-        }
-        else if (props.focus === "false" && document.activeElement === input) {
-            input.blur();
-        }
-    }
-    mountInput() {
-        if (!this.componentId)
-            return;
-        this.ensureHostLayout();
-        const props = this.collectProps();
-        const dataset = this.collectDataset();
-        props.dataset = dataset;
-        props.datasetJson = JSON.stringify(dataset);
-        props.pageFuncBindings = this._pageBindings;
-        props.pageFuncBindingsJson = JSON.stringify(this._pageBindings);
-        const { rect, cornerRadius } = measureElement(this);
-        props.__layoutX = rect.x;
-        props.__layoutY = rect.y;
-        props.__layoutWidth = rect.width;
-        props.__layoutHeight = rect.height;
-        if (isHarmony()) {
-            this.ensureHarmonyEmbed(rect, props, cornerRadius);
-            this.mounted = true;
-            return;
-        }
-        if (isDesktop() || isAndroid()) {
-            this.mountDesktopInput();
-            this.mounted = true;
-            return;
-        }
-        const zIndex = 9999;
-        const decision = this.updateState.decide(rect, props, zIndex, !this.mounted);
-        if (!decision.shouldSend) {
-            this.mounted = true;
-            return;
-        }
-        const payload = {
-            action: this.mounted ? "component.update" : "component.mount",
-            id: this.componentId,
-            type: "input.native",
-            rect,
-            zIndex
-        };
-        if (!this.mounted || decision.propsChanged) {
-            payload.props = props;
-        }
-        if (cornerRadius !== undefined) {
-            payload.cornerRadius = cornerRadius;
-        }
-        sendNativeComponentMessage(payload);
-        this.mounted = true;
-    }
-    // Force a full native sync when host frameworks mutate properties without
-    // triggering observed attribute callbacks on custom elements.
-    syncNativeProps() {
-        if (!this.isConnected)
-            return;
-        this.mountInput();
-    }
-    ensureHostLayout() {
-        const computed = getComputedStyle(this);
-        if (computed.display === "inline") {
-            this.style.display = "block";
-        }
-        const height = Number.parseFloat(computed.height);
-        if (!Number.isFinite(height) || height <= 1) {
-            this.style.height = "40px";
-        }
-    }
-    // Event handler getter/setter for 'input' event
-    set oninput(cb) {
-        const raw = cb;
-        const current = this._handlers['input'];
-        if (current)
-            this.removeEventListener('input', current);
-        if (typeof raw === "function" ||
-            (!!raw && typeof raw === "object" && typeof raw.handleEvent === "function")) {
-            const listener = typeof raw === "function"
-                ? { handleEvent: raw }
-                : raw;
-            this._handlers['input'] = listener;
-            this.rawHandlers['input'] = raw;
-            this.addEventListener('input', listener);
-        }
-        else {
-            delete this._handlers['input'];
-            delete this.rawHandlers['input'];
-        }
-    }
-    get oninput() { return this.rawHandlers['input'] || null; }
-    ensureHarmonyEmbed(rect, props, cornerRadius) {
-        if (!this.harmonyEmbed) {
-            const embed = document.createElement("embed");
-            embed.setAttribute("type", "native/input");
-            embed.setAttribute("width", `${rect.width}`);
-            embed.setAttribute("height", `${rect.height}`);
-            embed.setAttribute("id", this.componentId);
-            embed.setAttribute("data-lx-component-id", this.componentId);
-            embed.style.display = "block";
-            embed.style.width = "100%";
-            embed.style.height = "100%";
-            embed.style.border = "none";
-            if (cornerRadius !== undefined) {
-                embed.style.borderRadius = `${cornerRadius}px`;
-                embed.style.overflow = "hidden";
-            }
-            const encodedProps = this.encodeHarmonyProps(props);
-            embed.setAttribute("src", encodedProps);
-            this.lastHarmonyProps = encodedProps;
-            this.appendChild(embed);
-            this.harmonyEmbed = embed;
-            this.pendingHarmonyRetryCount = 0;
-            return;
-        }
-        const encodedProps = this.encodeHarmonyProps(props);
-        if (encodedProps !== this.lastHarmonyProps) {
-            const pushed = this.pushHarmonyPropsUpdate(props);
-            if (pushed) {
-                this.lastHarmonyProps = encodedProps;
-                this.pendingHarmonyProps = undefined;
-                this.pendingHarmonyRetryCount = 0;
-            }
-            else {
-                // Fallback to src update path when proxy bridge is unavailable.
-                this.harmonyEmbed.setAttribute("src", encodedProps);
-                this.lastHarmonyProps = encodedProps;
-                this.scheduleHarmonyPropsRetry(props);
-            }
-        }
-        if (cornerRadius !== undefined && this.harmonyEmbed.style.borderRadius !== `${cornerRadius}px`) {
-            this.harmonyEmbed.style.borderRadius = `${cornerRadius}px`;
-            this.harmonyEmbed.style.overflow = "hidden";
-        }
-    }
-    encodeHarmonyProps(props) {
-        try {
-            const payload = { componentId: this.componentId, ...props };
-            return `${HARMONY_PROPS_PREFIX}${encodeURIComponent(JSON.stringify(payload))}`;
-        }
-        catch (_e) {
-            return `${HARMONY_PROPS_PREFIX}%7B%7D`;
-        }
-    }
-    pushHarmonyPropsUpdate(props) {
-        if (!this.componentId || !isHarmony())
-            return false;
-        try {
-            const proxy = window.LingXiaProxy;
-            const updateFn = proxy === null || proxy === void 0 ? void 0 : proxy.nativeComponentUpdate;
-            if (typeof updateFn !== "function") {
-                return false;
-            }
-            const payload = JSON.stringify({ componentId: this.componentId, ...props });
-            try {
-                updateFn.call(proxy, payload);
-                return true;
-            }
-            catch {
-                try {
-                    updateFn.call(proxy, this.componentId, payload);
-                    return true;
-                }
-                catch {
-                    return false;
-                }
-            }
-        }
-        catch {
-            return false;
-        }
-    }
-    scheduleHarmonyPropsRetry(props) {
-        this.pendingHarmonyProps = { ...props };
-        if (this.pendingHarmonyRetryTimer !== null) {
-            return;
-        }
-        this.pendingHarmonyRetryTimer = window.setTimeout(() => {
-            this.pendingHarmonyRetryTimer = null;
-            if (!this.isConnected || !this.pendingHarmonyProps) {
-                return;
-            }
-            const pendingProps = this.pendingHarmonyProps;
-            const pushed = this.pushHarmonyPropsUpdate(pendingProps);
-            if (pushed) {
-                this.lastHarmonyProps = this.encodeHarmonyProps(pendingProps);
-                this.pendingHarmonyProps = undefined;
-                this.pendingHarmonyRetryCount = 0;
-            }
-            else {
-                this.pendingHarmonyRetryCount += 1;
-                if (this.pendingHarmonyRetryCount < 20) {
-                    this.scheduleHarmonyPropsRetry(pendingProps);
-                }
-            }
-        }, 100);
-    }
-}
-// Register the custom element
-export function registerInputComponent() {
-    if (typeof window !== "undefined" && !customElements.get("lx-input")) {
-        customElements.define("lx-input", LxInputElement);
-    }
-}