@lingxia/elements 0.6.3 → 0.7.0

package/dist/media_swiper.js

@@ -0,0 +1,695 @@
+import { sendNativeComponentMessage, registerNativeComponentHandler, addNativeComponentLayoutInvalidationListener, } from "./nativecomponent.js";
+import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper } from "./component.js";
+import { measureElement } from "./dom.js";
+import { isAndroid, isHarmony } from "./platform.js";
+const EVENT_MAP = {
+    onchange: "change",
+    ontransitionend: "transitionend",
+    onendreached: "endreached",
+    ontap: "tap",
+    onvideoended: "videoended",
+};
+export class LxMediaSwiperElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.componentId = null;
+        this.mounted = false;
+        this.updateState = new NativeComponentUpdateState();
+        this.pendingLayoutFrame = null;
+        this.boundUpdatePosition = this.updatePosition.bind(this);
+        this.rawHandlers = {};
+        this.handlers = {};
+        this._pageBindings = {};
+        // Monotonic command counter used as the Harmony bridge fallback. Harmony's
+        // Web.onNativeEmbedDataInfo channel only delivers attribute-derived props,
+        // so imperative API calls have to piggyback into a prop the Builder polls.
+        this.harmonyCommandSeq = 0;
+        this.harmonyPendingCommand = null;
+        this.pendingHarmonyRetryTimer = null;
+        this.pendingHarmonyRetryCount = 0;
+    }
+    static get observedAttributes() {
+        return [
+            "id",
+            "items",
+            "index",
+            "initial-index",
+            "loop",
+            "autoplay",
+            "interval",
+            "animation",
+            "animation-duration",
+            "direction",
+            "content-rotate",
+            "object-fit",
+            "controls",
+            "muted",
+            "dots",
+            "swipe-enabled",
+            "peek",
+        ];
+    }
+    set items(value) {
+        if (typeof value === "string") {
+            const trimmed = value.trim();
+            if (trimmed.length === 0) {
+                this.removeAttribute("items");
+                return;
+            }
+            this.setAttribute("items", trimmed);
+            return;
+        }
+        if (!Array.isArray(value) || value.length === 0) {
+            this.removeAttribute("items");
+            return;
+        }
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get items() {
+        return this.parseItems();
+    }
+    set index(value) {
+        if (value == null || !Number.isFinite(Number(value))) {
+            this.removeAttribute("index");
+            return;
+        }
+        this.setAttribute("index", String(Math.trunc(Number(value))));
+    }
+    get index() {
+        return this.parseIntegerAttr("index");
+    }
+    set initialIndex(value) {
+        if (value == null || !Number.isFinite(Number(value))) {
+            this.removeAttribute("initial-index");
+            return;
+        }
+        this.setAttribute("initial-index", String(Math.trunc(Number(value))));
+    }
+    get initialIndex() {
+        return this.parseIntegerAttr("initial-index");
+    }
+    set contentRotate(value) {
+        const parsed = this.parseRotate(value);
+        if (parsed === undefined) {
+            this.removeAttribute("content-rotate");
+            return;
+        }
+        this.setAttribute("content-rotate", String(parsed));
+    }
+    get contentRotate() {
+        return this.parseRotate(this.getAttribute("content-rotate"));
+    }
+    set pageBindings(bindings) {
+        this.setPageBindings(bindings);
+    }
+    get pageBindings() {
+        return this._pageBindings;
+    }
+    set pageFuncBindings(bindings) {
+        this.setPageBindings(bindings);
+    }
+    setPageBindings(bindings) {
+        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
+        if (this.isConnected)
+            this.mountOrUpdate(true);
+    }
+    next() {
+        this.sendCommand("next");
+    }
+    previous() {
+        this.sendCommand("previous");
+    }
+    goToIndex(index) {
+        if (!Number.isInteger(index))
+            return;
+        this.sendCommand("goToIndex", { index });
+    }
+    connectedCallback() {
+        this.upgradeProperty("items");
+        this.upgradeProperty("index");
+        this.upgradeProperty("initialIndex");
+        this.upgradeProperty("contentRotate");
+        this.upgradeProperty("pageBindings");
+        this.upgradeProperty("pageFuncBindings");
+        for (const prop of Object.keys(EVENT_MAP))
+            this.upgradeProperty(prop);
+        this.componentId = ensureComponentId(this, "lx-media-swiper", this.componentId);
+        if (!this.componentId)
+            return;
+        this.unregister = registerNativeComponentHandler(this.componentId, (message) => {
+            if (!message.event)
+                return;
+            const detail = message.detail || message.payload || {};
+            const ev = new CustomEvent(message.event, {
+                detail,
+                bubbles: true,
+                cancelable: false,
+            });
+            this.dispatchEvent(ev);
+        });
+        this.ensurePlaceholderStyle();
+        this.iOSHelper = new iOSNativeComponentHelper(this, this.componentId);
+        this.iOSHelper.setup();
+        this.mountOrUpdate();
+        this.startTracking();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.updateState.reset();
+        if (this.componentId && !isHarmony()) {
+            sendNativeComponentMessage({
+                action: "component.unmount",
+                id: this.componentId,
+            });
+        }
+        if (this.harmonyEmbed && this.contains(this.harmonyEmbed)) {
+            this.removeChild(this.harmonyEmbed);
+        }
+        this.harmonyEmbed = undefined;
+        this.lastHarmonyProps = undefined;
+        this.harmonyPendingCommand = null;
+        this.pendingHarmonyProps = undefined;
+        this.pendingHarmonyRetryCount = 0;
+        if (this.pendingHarmonyRetryTimer !== null) {
+            window.clearTimeout(this.pendingHarmonyRetryTimer);
+            this.pendingHarmonyRetryTimer = null;
+        }
+        this.stopTracking();
+        (_a = this.unregister) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unregister = undefined;
+        (_b = this.iOSHelper) === null || _b === void 0 ? void 0 : _b.cleanup();
+        this.iOSHelper = undefined;
+        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-media-swiper", this.componentId);
+            if (prev && this.componentId !== prev) {
+                this.mounted = false;
+                this.updateState.reset();
+            }
+        }
+        if (!this.isConnected)
+            return;
+        this.mountOrUpdate(name === "content-rotate" || name === "object-fit");
+    }
+    set onchange(cb) { this.setEventHandler("change", cb); }
+    get onchange() { return this.getEventHandler("change"); }
+    set ontransitionend(cb) { this.setEventHandler("transitionend", cb); }
+    get ontransitionend() { return this.getEventHandler("transitionend"); }
+    set onendreached(cb) { this.setEventHandler("endreached", cb); }
+    get onendreached() { return this.getEventHandler("endreached"); }
+    set ontap(cb) { this.setEventHandler("tap", cb); }
+    get ontap() { return this.getEventHandler("tap"); }
+    set onvideoended(cb) { this.setEventHandler("videoended", cb); }
+    get onvideoended() { return this.getEventHandler("videoended"); }
+    sendCommand(name, params) {
+        if (!this.componentId)
+            return;
+        if (isHarmony()) {
+            // Harmony has no bridge channel for `component.command`; route the call through
+            // the props pipeline so the Builder's onParamsChange can dispatch it.
+            this.harmonyCommandSeq += 1;
+            this.harmonyPendingCommand = { name, params };
+            this.mountOrUpdate(true);
+            return;
+        }
+        sendNativeComponentMessage({
+            action: "component.command",
+            id: this.componentId,
+            name,
+            ...(params ? { params } : {}),
+        });
+    }
+    collectProps() {
+        var _a, _b, _c, _d, _e, _f;
+        const objectFit = this.parseObjectFit(this.getAttribute("object-fit"));
+        const dots = this.parseDots();
+        const dataset = this.collectDataset();
+        // Always emit a normalised peek object so removing the attribute (or setting it
+        // to 0) propagates as an explicit reset. JSON.stringify would drop `undefined`,
+        // which makes native think peek hasn't changed and keep the old padding.
+        const peek = (_a = this.parsePeek()) !== null && _a !== void 0 ? _a : { previous: 0, next: 0 };
+        const props = {
+            items: this.parseItems(),
+            index: (_b = this.parseIntegerAttr("index")) !== null && _b !== void 0 ? _b : null,
+            initialIndex: (_c = this.parseIntegerAttr("initial-index")) !== null && _c !== void 0 ? _c : 0,
+            loop: this.hasAttribute("loop"),
+            autoplay: this.hasAttribute("autoplay"),
+            interval: (_d = this.parseIntegerAttr("interval")) !== null && _d !== void 0 ? _d : 5000,
+            animation: this.parseAnimation(this.getAttribute("animation")),
+            animationDuration: (_e = this.parseIntegerAttr("animation-duration")) !== null && _e !== void 0 ? _e : 300,
+            direction: this.parseDirection(this.getAttribute("direction")),
+            contentRotate: (_f = this.parseRotate(this.getAttribute("content-rotate"))) !== null && _f !== void 0 ? _f : 0,
+            objectFit: objectFit !== null && objectFit !== void 0 ? objectFit : "cover",
+            controls: this.hasAttribute("controls"),
+            muted: this.hasAttribute("muted") ? this.getAttribute("muted") !== "false" : true,
+            dots,
+            swipeEnabled: this.getAttribute("swipe-enabled") !== "false",
+            peek,
+            pageFuncBindings: this._pageBindings,
+            pageFuncBindingsJson: JSON.stringify(this._pageBindings),
+            dataset,
+            datasetJson: JSON.stringify(dataset),
+        };
+        return props;
+    }
+    mountOrUpdate(forceUpdate = false) {
+        var _a;
+        if (isHarmony()) {
+            this.mountOrUpdateHarmony(forceUpdate);
+            return;
+        }
+        if (!this.componentId)
+            return;
+        const measured = measureElement(this);
+        const rect = measured.rect;
+        if (!rect.width || !rect.height) {
+            if (!this.mounted)
+                this.scheduleMountRetry();
+            return;
+        }
+        const props = this.collectProps();
+        const zIndex = parseFloat(this.style.zIndex || "0") || 0;
+        const decision = this.updateState.decide(rect, props, zIndex, !this.mounted || forceUpdate);
+        if (!decision.shouldSend)
+            return;
+        const payload = {
+            action: this.mounted ? "component.update" : "component.mount",
+            id: this.componentId,
+            type: "media-swiper.native",
+            rect,
+            zIndex,
+            ...(measured.cornerRadius !== undefined ? { cornerRadius: measured.cornerRadius } : {}),
+        };
+        (_a = this.iOSHelper) === null || _a === void 0 ? void 0 : _a.enhancePayload(payload);
+        if (decision.propsChanged || !this.mounted)
+            payload.props = props;
+        sendNativeComponentMessage(payload);
+        this.mounted = true;
+    }
+    mountOrUpdateHarmony(forceUpdate = false) {
+        if (!this.componentId)
+            return;
+        const measured = measureElement(this);
+        const rect = measured.rect;
+        if (!rect.width || !rect.height) {
+            if (!this.mounted)
+                this.scheduleMountRetry();
+            return;
+        }
+        const props = this.collectProps();
+        if (measured.cornerRadius !== undefined) {
+            props.cornerRadius = measured.cornerRadius;
+        }
+        const zIndex = parseFloat(this.style.zIndex || "0") || 0;
+        const decision = this.updateState.decide(rect, props, zIndex, !this.mounted || forceUpdate);
+        if (!decision.shouldSend)
+            return;
+        this.ensureHarmonyEmbed(rect, props, measured.cornerRadius);
+        this.flushHarmonyCommandIfPending(props);
+        this.mounted = true;
+    }
+    ensureHarmonyEmbed(rect, props, cornerRadius) {
+        const createEmbed = () => {
+            const embed = document.createElement("embed");
+            embed.setAttribute("type", "native/media-swiper");
+            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;
+            return embed;
+        };
+        if (!this.harmonyEmbed) {
+            const embed = createEmbed();
+            this.appendChild(embed);
+            this.harmonyEmbed = embed;
+            this.pushHarmonyPropsUpdate(props);
+            return;
+        }
+        const encodedProps = this.encodeHarmonyProps(props);
+        if (encodedProps !== this.lastHarmonyProps) {
+            this.harmonyEmbed.setAttribute("src", encodedProps);
+            const pushed = this.pushHarmonyPropsUpdate(props);
+            if (pushed) {
+                this.lastHarmonyProps = encodedProps;
+                this.pendingHarmonyProps = undefined;
+                this.pendingHarmonyRetryCount = 0;
+            }
+            else {
+                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 `data:application/json,${encodeURIComponent(JSON.stringify(payload))}`;
+        }
+        catch {
+            return `data:application/json,%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);
+    }
+    flushHarmonyCommandIfPending(baseProps) {
+        if (!this.harmonyPendingCommand)
+            return;
+        const command = this.harmonyPendingCommand;
+        const commandProps = {
+            ...baseProps,
+            __cmdSeq: this.harmonyCommandSeq,
+            __cmdName: command.name,
+        };
+        if (command.params) {
+            commandProps.__cmdParams = command.params;
+        }
+        if (this.harmonyEmbed) {
+            const encodedProps = this.encodeHarmonyProps(commandProps);
+            this.harmonyEmbed.setAttribute("src", encodedProps);
+            this.lastHarmonyProps = encodedProps;
+            if (!this.pushHarmonyPropsUpdate(commandProps)) {
+                this.scheduleHarmonyPropsRetry(commandProps);
+            }
+        }
+        this.harmonyPendingCommand = null;
+    }
+    updatePosition() {
+        var _a;
+        if (isHarmony()) {
+            // Harmony tracks size via the embed element + ArkWeb's onNativeEmbedDataInfo;
+            // any rect/prop refresh has to go through mountOrUpdateHarmony so the embed
+            // stays consistent.
+            this.mountOrUpdateHarmony();
+            return;
+        }
+        if (!this.mounted || !this.componentId)
+            return;
+        const measured = measureElement(this);
+        const rect = measured.rect;
+        if (!rect.width || !rect.height)
+            return;
+        const zIndex = parseFloat(this.style.zIndex || "0") || 0;
+        const decision = this.updateState.decide(rect, null, zIndex);
+        if (!decision.shouldSend)
+            return;
+        const payload = {
+            action: "component.update",
+            id: this.componentId,
+            rect,
+            zIndex,
+            ...(measured.cornerRadius !== undefined ? { cornerRadius: measured.cornerRadius } : {}),
+        };
+        (_a = this.iOSHelper) === null || _a === void 0 ? void 0 : _a.enhancePayload(payload);
+        sendNativeComponentMessage(payload);
+    }
+    startTracking() {
+        window.addEventListener("resize", this.boundUpdatePosition);
+        if (isAndroid()) {
+            this.removeLayoutInvalidationListener = addNativeComponentLayoutInvalidationListener(this.boundUpdatePosition);
+        }
+        this.startSizeObserver();
+        this.updatePosition();
+    }
+    stopTracking() {
+        var _a;
+        window.removeEventListener("resize", this.boundUpdatePosition);
+        (_a = this.removeLayoutInvalidationListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.removeLayoutInvalidationListener = undefined;
+        this.stopSizeObserver();
+        if (this.pendingLayoutFrame !== null) {
+            cancelAnimationFrame(this.pendingLayoutFrame);
+            this.pendingLayoutFrame = null;
+        }
+    }
+    startSizeObserver() {
+        if (typeof ResizeObserver === "undefined" || this.resizeObserver)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.pendingLayoutFrame !== null)
+                cancelAnimationFrame(this.pendingLayoutFrame);
+            this.pendingLayoutFrame = requestAnimationFrame(() => {
+                this.pendingLayoutFrame = null;
+                this.mountOrUpdate();
+            });
+        });
+        this.resizeObserver.observe(this);
+    }
+    stopSizeObserver() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    scheduleMountRetry() {
+        if (this.pendingLayoutFrame !== null)
+            return;
+        this.pendingLayoutFrame = requestAnimationFrame(() => {
+            this.pendingLayoutFrame = null;
+            if (this.isConnected)
+                this.mountOrUpdate();
+        });
+    }
+    ensurePlaceholderStyle() {
+        if (!this.style.display)
+            this.style.display = "block";
+        if (!this.style.position)
+            this.style.position = "relative";
+        if (!this.style.backgroundColor)
+            this.style.backgroundColor = "black";
+        if (!this.style.aspectRatio)
+            this.style.aspectRatio = "16 / 9";
+    }
+    upgradeProperty(propName) {
+        const self = this;
+        if (!Object.prototype.hasOwnProperty.call(self, propName))
+            return;
+        const value = self[propName];
+        delete self[propName];
+        self[propName] = value;
+    }
+    isEventListener(value) {
+        if (typeof value === "function")
+            return true;
+        if (!value || typeof value !== "object")
+            return false;
+        return typeof value.handleEvent === "function";
+    }
+    setEventHandler(name, value) {
+        const current = this.handlers[name];
+        if (current)
+            this.removeEventListener(name, current);
+        if (this.isEventListener(value)) {
+            const listener = typeof value === "function" ? { handleEvent: value } : value;
+            this.handlers[name] = listener;
+            this.rawHandlers[name] = value;
+            this.addEventListener(name, listener);
+        }
+        else {
+            delete this.handlers[name];
+            delete this.rawHandlers[name];
+        }
+    }
+    getEventHandler(name) {
+        return (this.rawHandlers[name] || null);
+    }
+    parseItems() {
+        const raw = this.getAttribute("items");
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed))
+                return [];
+            return parsed
+                .map((item) => {
+                if (!item || typeof item !== "object")
+                    return null;
+                const rec = item;
+                const type = rec.type === "video" ? "video" : rec.type === "image" ? "image" : null;
+                const src = typeof rec.src === "string" ? rec.src.trim() : "";
+                if (!type || !src)
+                    return null;
+                if (type === "image") {
+                    return { id: typeof rec.id === "string" ? rec.id : undefined, type, src };
+                }
+                return {
+                    id: typeof rec.id === "string" ? rec.id : undefined,
+                    type,
+                    src,
+                    poster: typeof rec.poster === "string" ? rec.poster : undefined,
+                    controls: typeof rec.controls === "boolean" ? rec.controls : undefined,
+                    muted: typeof rec.muted === "boolean" ? rec.muted : undefined,
+                };
+            })
+                .filter((item) => item !== null);
+        }
+        catch {
+            return [];
+        }
+    }
+    parseDots() {
+        if (!this.hasAttribute("dots"))
+            return false;
+        const raw = this.getAttribute("dots");
+        if (!raw || raw === "true")
+            return {};
+        if (raw === "false")
+            return false;
+        try {
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== "object")
+                return {};
+            const rec = parsed;
+            return {
+                color: typeof rec.color === "string" ? rec.color : undefined,
+                activeColor: typeof rec.activeColor === "string" ? rec.activeColor : undefined,
+            };
+        }
+        catch {
+            return {};
+        }
+    }
+    parseIntegerAttr(name) {
+        const raw = this.getAttribute(name);
+        if (raw == null || raw.trim() === "")
+            return undefined;
+        const parsed = Number(raw);
+        return Number.isFinite(parsed) ? Math.trunc(parsed) : undefined;
+    }
+    parseRotate(value) {
+        const parsed = typeof value === "number" ? value : typeof value === "string" ? Number(value.trim()) : NaN;
+        return parsed === 0 || parsed === 90 || parsed === 180 || parsed === 270 ? parsed : undefined;
+    }
+    parseObjectFit(value) {
+        if (typeof value !== "string")
+            return undefined;
+        const normalized = value.trim().toLowerCase();
+        return normalized === "cover" || normalized === "contain" || normalized === "fill" || normalized === "fit"
+            ? normalized
+            : undefined;
+    }
+    parseAnimation(value) {
+        return value === "none" ? "none" : "slide";
+    }
+    parseDirection(value) {
+        return value === "vertical" ? "vertical" : "horizontal";
+    }
+    /**
+     * Parse the `peek` attribute into a normalised `{ previous, next }` shape.
+     * Returns `undefined` when no peek is configured so native sides can fall back
+     * to the zero-peek (full-width page) layout.
+     */
+    parsePeek() {
+        if (!this.hasAttribute("peek"))
+            return undefined;
+        const raw = this.getAttribute("peek");
+        if (raw == null)
+            return undefined;
+        const trimmed = raw.trim();
+        if (trimmed.length === 0)
+            return undefined;
+        const numeric = Number(trimmed);
+        if (Number.isFinite(numeric)) {
+            const value = Math.max(0, numeric);
+            return value > 0 ? { previous: value, next: value } : undefined;
+        }
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (!parsed || typeof parsed !== "object")
+                return undefined;
+            const rec = parsed;
+            const previous = Math.max(0, Number(rec.previous) || 0);
+            const next = Math.max(0, Number(rec.next) || 0);
+            return previous > 0 || next > 0 ? { previous, next } : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    collectDataset() {
+        const dataset = {};
+        for (const attr of this.getAttributeNames()) {
+            if (!attr.startsWith("data-"))
+                continue;
+            const key = attr.slice(5).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            const value = this.getAttribute(attr);
+            if (key && value != null)
+                dataset[key] = value;
+        }
+        return dataset;
+    }
+}
+export function registerMediaSwiperComponent() {
+    if (!customElements.get("lx-media-swiper")) {
+        customElements.define("lx-media-swiper", LxMediaSwiperElement);
+    }
+}