@babylonjs/viewer 7.40.1-alpha → 7.40.1

package/lib/index.js

@@ -1,2083 +0,0 @@
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
-import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight.js';
-import { loadAssetContainerAsync } from '@babylonjs/core/Loading/sceneLoader.js';
-import { ImageProcessingConfiguration } from '@babylonjs/core/Materials/imageProcessingConfiguration.js';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
-import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
-import { Vector3, Matrix } from '@babylonjs/core/Maths/math.vector.js';
-import { Viewport } from '@babylonjs/core/Maths/math.viewport.js';
-import { GetHotSpotToRef } from '@babylonjs/core/Meshes/abstractMesh.hotSpot.js';
-import { CreateBox } from '@babylonjs/core/Meshes/Builders/boxBuilder.js';
-import { computeMaxExtents } from '@babylonjs/core/Meshes/meshUtils.js';
-import { BuildTuple } from '@babylonjs/core/Misc/arrayTools.js';
-import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
-import { deepMerge } from '@babylonjs/core/Misc/deepMerger.js';
-import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { SnapshotRenderingHelper } from '@babylonjs/core/Misc/snapshotRenderingHelper.js';
-import { Scene } from '@babylonjs/core/scene.js';
-import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic.js';
-import { __decorate } from '@babylonjs/core/tslib.es6.js';
-import { Color4 } from '@babylonjs/core/Maths/math.color.js';
-import { Logger } from '@babylonjs/core/Misc/logger.js';
-
-const toneMappingOptions = ["none", "standard", "aces", "neutral"];
-/**
- * Checks if the given value is a valid tone mapping option.
- * @param value The value to check.
- * @returns True if the value is a valid tone mapping option, otherwise false.
- */
-function isToneMapping(value) {
-    return toneMappingOptions.includes(value);
-}
-function throwIfAborted(...abortSignals) {
-    for (const signal of abortSignals) {
-        signal?.throwIfAborted();
-    }
-}
-function createSkybox(scene, camera, environmentTexture, blur) {
-    const hdrSkybox = CreateBox("hdrSkyBox", undefined, scene);
-    const hdrSkyboxMaterial = new PBRMaterial("skyBox", scene);
-    // Use the default image processing configuration on the skybox (e.g. don't apply tone mapping, contrast, or exposure).
-    hdrSkyboxMaterial.imageProcessingConfiguration = new ImageProcessingConfiguration();
-    hdrSkyboxMaterial.backFaceCulling = false;
-    hdrSkyboxMaterial.reflectionTexture = environmentTexture.clone();
-    if (hdrSkyboxMaterial.reflectionTexture) {
-        hdrSkyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
-    }
-    hdrSkyboxMaterial.microSurface = 1.0 - blur;
-    hdrSkyboxMaterial.disableLighting = true;
-    hdrSkyboxMaterial.twoSidedLighting = true;
-    hdrSkybox.material = hdrSkyboxMaterial;
-    hdrSkybox.isPickable = false;
-    hdrSkybox.infiniteDistance = true;
-    updateSkybox(hdrSkybox, camera);
-    return hdrSkybox;
-}
-function updateSkybox(skybox, camera) {
-    skybox?.scaling.setAll((camera.maxZ - camera.minZ) / 2);
-}
-/**
- * Provides the result of a hot spot query.
- */
-class ViewerHotSpotResult {
-    constructor() {
-        /**
-         * 2D canvas position in pixels
-         */
-        this.screenPosition = [NaN, NaN];
-        /**
-         * 3D world coordinates
-         */
-        this.worldPosition = [NaN, NaN, NaN];
-        /**
-         * visibility range is [-1..1]. A value of 0 means camera eye is on the plane.
-         */
-        this.visibility = NaN;
-    }
-}
-/**
- * @experimental
- * Provides an experience for viewing a single 3D model.
- * @remarks
- * The Viewer is not tied to a specific UI framework and can be used with Babylon.js in a browser or with Babylon Native.
- * Includes (or will include) support for common model viewing requirements such as:
- * - Loading different model formats.
- * - Setting up a camera and providing default behaviors like auto orbit and pose interpolation.
- * - Framing the loaded model in the camera's view.
- * - Setting up the environment, lighting, and tone mapping.
- * - Enumerating and playing (or auto playing) animations.
- * - Enumerating and switching between material variants.
- * - Full screen and XR modes.
- */
-class Viewer {
-    constructor(_engine, options) {
-        this._engine = _engine;
-        /**
-         * Fired when the environment has changed.
-         */
-        this.onEnvironmentChanged = new Observable();
-        /**
-         * Fired when an error occurs while loading the environment.
-         */
-        this.onEnvironmentError = new Observable();
-        /**
-         * Fired when the skybox blur changes.
-         */
-        this.onSkyboxBlurChanged = new Observable();
-        /**
-         * Fired when the post processing state changes.
-         */
-        this.onPostProcessingChanged = new Observable();
-        /**
-         * Fired when a model is loaded into the viewer (or unloaded from the viewer).
-         */
-        this.onModelChanged = new Observable();
-        /**
-         * Fired when an error occurs while loading a model.
-         */
-        this.onModelError = new Observable();
-        /**
-         * Fired when progress changes on loading activity.
-         */
-        this.onLoadingProgressChanged = new Observable();
-        /**
-         * Fired when the camera auto orbit state changes.
-         */
-        this.onCameraAutoOrbitChanged = new Observable();
-        /**
-         * Fired when the selected animation changes.
-         */
-        this.onSelectedAnimationChanged = new Observable();
-        /**
-         * Fired when the animation speed changes.
-         */
-        this.onAnimationSpeedChanged = new Observable();
-        /**
-         * Fired when the selected animation is playing or paused.
-         */
-        this.onIsAnimationPlayingChanged = new Observable();
-        /**
-         * Fired when the current point on the selected animation timeline changes.
-         */
-        this.onAnimationProgressChanged = new Observable();
-        /**
-         * Fired when the selected material variant changes.
-         */
-        this.onSelectedMaterialVariantChanged = new Observable();
-        this._tempVectors = BuildTuple(4, Vector3.Zero);
-        this._meshDataCache = new Map();
-        this._renderLoopController = null;
-        this._materialVariantsController = null;
-        this._skybox = null;
-        this._skyboxBlur = 0.3;
-        this._light = null;
-        this._suspendRenderCount = 0;
-        this._isDisposed = false;
-        this._loadModelLock = new AsyncLock();
-        this._loadModelAbortController = null;
-        this._loadEnvironmentLock = new AsyncLock();
-        this._environment = null;
-        this._loadEnvironmentAbortController = null;
-        this._isLoadingModel = false;
-        this._modelLoadingProgress = null;
-        this._selectedAnimation = -1;
-        this._activeAnimationObservers = [];
-        this._animationSpeed = 1;
-        {
-            const scene = new Scene(this._engine);
-            // Deduce tone mapping, contrast, and exposure from the scene (so the viewer stays in sync if anything mutates these values directly on the scene).
-            this._toneMappingEnabled = scene.imageProcessingConfiguration.toneMappingEnabled;
-            this._toneMappingType = scene.imageProcessingConfiguration.toneMappingType;
-            this._contrast = scene.imageProcessingConfiguration.contrast;
-            this._exposure = scene.imageProcessingConfiguration.exposure;
-            this._imageProcessingConfigurationObserver = scene.imageProcessingConfiguration.onUpdateParameters.add(() => {
-                let hasChanged = false;
-                if (this._toneMappingEnabled !== scene.imageProcessingConfiguration.toneMappingEnabled) {
-                    this._toneMappingEnabled = scene.imageProcessingConfiguration.toneMappingEnabled;
-                    hasChanged = true;
-                }
-                if (this._toneMappingType !== scene.imageProcessingConfiguration.toneMappingType) {
-                    this._toneMappingType = scene.imageProcessingConfiguration.toneMappingType;
-                    hasChanged = true;
-                }
-                if (this._contrast !== scene.imageProcessingConfiguration.contrast) {
-                    this._contrast = scene.imageProcessingConfiguration.contrast;
-                    hasChanged = true;
-                }
-                if (this._exposure !== scene.imageProcessingConfiguration.exposure) {
-                    this._exposure = scene.imageProcessingConfiguration.exposure;
-                    hasChanged = true;
-                }
-                if (hasChanged) {
-                    this.onPostProcessingChanged.notifyObservers();
-                }
-            });
-            const camera = new ArcRotateCamera("Viewer Default Camera", 0, 0, 1, Vector3.Zero(), scene);
-            camera.useInputToRestoreState = false;
-            scene.onPointerObservable.add(async (pointerInfo) => {
-                const pickingInfo = await this._pick(pointerInfo.event.offsetX, pointerInfo.event.offsetY);
-                if (pickingInfo?.pickedPoint) {
-                    const distance = pickingInfo.pickedPoint.subtract(camera.position).dot(camera.getForwardRay().direction);
-                    // Immediately reset the target and the radius based on the distance to the picked point.
-                    // This eliminates unnecessary camera movement on the local z-axis when interpolating.
-                    camera.target = camera.position.add(camera.getForwardRay().direction.scale(distance));
-                    camera.radius = distance;
-                    camera.interpolateTo(undefined, undefined, undefined, pickingInfo.pickedPoint);
-                }
-                else {
-                    camera.restoreState();
-                }
-            }, PointerEventTypes.POINTERDOUBLETAP);
-            this._details = {
-                viewer: this,
-                scene,
-                camera,
-                model: null,
-                suspendRendering: () => this._suspendRendering(),
-                pick: (screenX, screenY) => this._pick(screenX, screenY),
-            };
-        }
-        this._details.scene.skipFrustumClipping = true;
-        this._details.scene.skipPointerDownPicking = true;
-        this._details.scene.skipPointerUpPicking = true;
-        this._details.scene.skipPointerMovePicking = true;
-        this._snapshotHelper = new SnapshotRenderingHelper(this._details.scene, { morphTargetsNumMaxInfluences: 30 });
-        this._details.camera.attachControl();
-        this._updateCamera(); // set default camera values
-        this._autoRotationBehavior = this._details.camera.getBehaviorByName("AutoRotation");
-        // Default to KHR PBR Neutral tone mapping.
-        this.postProcessing = {
-            toneMapping: "neutral",
-        };
-        // Load a default light, but ignore errors as the user might be immediately loading their own environment.
-        this.resetEnvironment().catch(() => { });
-        this._beginRendering();
-        options?.onInitialized?.(this._details);
-    }
-    /**
-     * The camera auto orbit configuration.
-     */
-    get cameraAutoOrbit() {
-        return {
-            enabled: this._details.camera.behaviors.includes(this._autoRotationBehavior),
-            speed: this._autoRotationBehavior.idleRotationSpeed,
-            delay: this._autoRotationBehavior.idleRotationWaitTime,
-        };
-    }
-    set cameraAutoOrbit(value) {
-        if (value.enabled !== undefined && value.enabled !== this.cameraAutoOrbit.enabled) {
-            if (value.enabled) {
-                this._details.camera.addBehavior(this._autoRotationBehavior);
-            }
-            else {
-                this._details.camera.removeBehavior(this._autoRotationBehavior);
-            }
-        }
-        if (value.delay !== undefined) {
-            this._autoRotationBehavior.idleRotationWaitTime = value.delay;
-        }
-        if (value.speed !== undefined) {
-            this._autoRotationBehavior.idleRotationSpeed = value.speed;
-        }
-        this.onCameraAutoOrbitChanged.notifyObservers();
-    }
-    /**
-     * A value between 0 and 1 that specifies how much to blur the skybox.
-     */
-    get skyboxBlur() {
-        return this._skyboxBlur;
-    }
-    set skyboxBlur(value) {
-        if (value !== this._skyboxBlur) {
-            this._skyboxBlur = value;
-            if (this._skybox) {
-                const material = this._skybox.material;
-                if (material instanceof PBRMaterial) {
-                    this._snapshotHelper.disableSnapshotRendering();
-                    material.microSurface = 1.0 - value;
-                    this._snapshotHelper.enableSnapshotRendering();
-                }
-            }
-            this.onSkyboxBlurChanged.notifyObservers();
-        }
-    }
-    /**
-     * The post processing configuration.
-     */
-    get postProcessing() {
-        let toneMapping;
-        switch (this._toneMappingType) {
-            case ImageProcessingConfiguration.TONEMAPPING_STANDARD:
-                toneMapping = "standard";
-                break;
-            case ImageProcessingConfiguration.TONEMAPPING_ACES:
-                toneMapping = "aces";
-                break;
-            case ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL:
-                toneMapping = "neutral";
-                break;
-            default:
-                toneMapping = "none";
-                break;
-        }
-        return {
-            toneMapping,
-            contrast: this._contrast,
-            exposure: this._exposure,
-        };
-    }
-    set postProcessing(value) {
-        this._snapshotHelper.disableSnapshotRendering();
-        if (value.toneMapping !== undefined) {
-            if (value.toneMapping === "none") {
-                this._details.scene.imageProcessingConfiguration.toneMappingEnabled = false;
-            }
-            else {
-                switch (value.toneMapping) {
-                    case "standard":
-                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_STANDARD;
-                        break;
-                    case "aces":
-                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_ACES;
-                        break;
-                    case "neutral":
-                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL;
-                        break;
-                }
-                this._details.scene.imageProcessingConfiguration.toneMappingEnabled = true;
-            }
-        }
-        if (value.contrast !== undefined) {
-            this._details.scene.imageProcessingConfiguration.contrast = value.contrast;
-        }
-        if (value.exposure !== undefined) {
-            this._details.scene.imageProcessingConfiguration.exposure = value.exposure;
-        }
-        this._details.scene.imageProcessingConfiguration.isEnabled = this._toneMappingEnabled || this._contrast !== 1 || this._exposure !== 1;
-        this._snapshotHelper.enableSnapshotRendering();
-    }
-    /**
-     * Gets information about loading activity.
-     * @remarks
-     * false indicates no loading activity.
-     * true indicates loading activity with no progress information.
-     * A number between 0 and 1 indicates loading activity with progress information.
-     */
-    get loadingProgress() {
-        if (this._isLoadingModel) {
-            return this._modelLoadingProgress ?? true;
-        }
-        return false;
-    }
-    /**
-     * The list of animation names for the currently loaded model.
-     */
-    get animations() {
-        return this._details.model?.animationGroups.map((group) => group.name) ?? [];
-    }
-    /**
-     * The currently selected animation index.
-     */
-    get selectedAnimation() {
-        return this._selectedAnimation;
-    }
-    set selectedAnimation(value) {
-        value = Math.round(Clamp(value, -1, this.animations.length - 1));
-        if (value !== this._selectedAnimation) {
-            const startAnimation = this.isAnimationPlaying;
-            if (this._activeAnimation) {
-                this._activeAnimationObservers.forEach((observer) => observer.remove());
-                this._activeAnimationObservers = [];
-                this._activeAnimation.pause();
-                this._activeAnimation.goToFrame(0);
-            }
-            this._selectedAnimation = value;
-            if (this._activeAnimation) {
-                this._activeAnimation.goToFrame(0);
-                this._activeAnimation.play(true);
-                if (!startAnimation) {
-                    this.pauseAnimation();
-                }
-                this._activeAnimationObservers = [
-                    this._activeAnimation.onAnimationGroupPlayObservable.add(() => {
-                        this.onIsAnimationPlayingChanged.notifyObservers();
-                    }),
-                    this._activeAnimation.onAnimationGroupPauseObservable.add(() => {
-                        this.onIsAnimationPlayingChanged.notifyObservers();
-                    }),
-                    this._activeAnimation.onAnimationGroupEndObservable.add(() => {
-                        this.onIsAnimationPlayingChanged.notifyObservers();
-                        this.onAnimationProgressChanged.notifyObservers();
-                    }),
-                ];
-                this._updateCamera(!this._isLoadingModel);
-            }
-            this.onSelectedAnimationChanged.notifyObservers();
-            this.onAnimationProgressChanged.notifyObservers();
-        }
-    }
-    /**
-     * True if an animation is currently playing.
-     */
-    get isAnimationPlaying() {
-        return this._activeAnimation?.isPlaying ?? false;
-    }
-    /**
-     * The speed scale at which animations are played.
-     */
-    get animationSpeed() {
-        return this._animationSpeed;
-    }
-    set animationSpeed(value) {
-        this._animationSpeed = value;
-        this._applyAnimationSpeed();
-        this.onAnimationSpeedChanged.notifyObservers();
-    }
-    /**
-     * The current point on the selected animation timeline, normalized between 0 and 1.
-     */
-    get animationProgress() {
-        if (this._activeAnimation) {
-            return this._activeAnimation.getCurrentFrame() / (this._activeAnimation.to - this._activeAnimation.from);
-        }
-        return 0;
-    }
-    set animationProgress(value) {
-        if (this._activeAnimation) {
-            this._activeAnimation.goToFrame(value * (this._activeAnimation.to - this._activeAnimation.from));
-            this.onAnimationProgressChanged.notifyObservers();
-            this._autoRotationBehavior.resetLastInteractionTime();
-        }
-    }
-    get _activeAnimation() {
-        return this._details.model?.animationGroups[this._selectedAnimation] ?? null;
-    }
-    /**
-     * The list of material variant names for the currently loaded model.
-     */
-    get materialVariants() {
-        return this._materialVariantsController?.variants ?? [];
-    }
-    /**
-     * The currently selected material variant.
-     */
-    get selectedMaterialVariant() {
-        return this._materialVariantsController?.selectedVariant ?? null;
-    }
-    set selectedMaterialVariant(value) {
-        if (value !== this.selectedMaterialVariant && this._materialVariantsController?.variants.includes(value)) {
-            this._snapshotHelper.disableSnapshotRendering();
-            this._materialVariantsController.selectedVariant = value;
-            this._snapshotHelper.enableSnapshotRendering();
-            this.onSelectedMaterialVariantChanged.notifyObservers();
-        }
-    }
-    /**
-     * Loads a 3D model from the specified URL.
-     * @remarks
-     * If a model is already loaded, it will be unloaded before loading the new model.
-     * @param source A url or File or ArrayBufferView that points to the model to load.
-     * @param options The options to use when loading the model.
-     * @param abortSignal An optional signal that can be used to abort the loading process.
-     */
-    async loadModel(source, options, abortSignal) {
-        await this._updateModel(source, options, abortSignal);
-    }
-    /**
-     * Unloads the current 3D model if one is loaded.
-     * @param abortSignal An optional signal that can be used to abort the reset.
-     */
-    async resetModel(abortSignal) {
-        await this._updateModel(undefined, undefined, abortSignal);
-    }
-    async _updateModel(source, options, abortSignal) {
-        this._throwIfDisposedOrAborted(abortSignal);
-        const originalOnProgress = options?.onProgress;
-        const onProgress = (event) => {
-            originalOnProgress?.(event);
-            if (this._isLoadingModel) {
-                this._modelLoadingProgress = event.lengthComputable ? event.loaded / event.total : null;
-                this.onLoadingProgressChanged.notifyObservers();
-            }
-        };
-        delete options?.onProgress;
-        const originalOnMaterialVariantsLoaded = options?.pluginOptions?.gltf?.extensionOptions?.KHR_materials_variants?.onLoaded;
-        const onMaterialVariantsLoaded = (controller) => {
-            originalOnMaterialVariantsLoaded?.(controller);
-            this._materialVariantsController = controller;
-        };
-        delete options?.pluginOptions?.gltf?.extensionOptions?.KHR_materials_variants?.onLoaded;
-        const defaultOptions = {
-            // Pass a progress callback to update the loading progress.
-            onProgress,
-            pluginOptions: {
-                gltf: {
-                    // Enable transparency as coverage by default to be 3D Commerce compliant by default.
-                    // https://doc.babylonjs.com/setup/support/3D_commerce_certif
-                    transparencyAsCoverage: true,
-                    extensionOptions: {
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        KHR_materials_variants: {
-                            // Capture the material variants controller when it is loaded.
-                            onLoaded: onMaterialVariantsLoaded,
-                        },
-                    },
-                },
-            },
-        };
-        options = deepMerge(defaultOptions, options ?? {});
-        this._loadModelAbortController?.abort("New model is being loaded before previous model finished loading.");
-        const abortController = (this._loadModelAbortController = new AbortController());
-        await this._loadModelLock.lockAsync(async () => {
-            throwIfAborted(abortSignal, abortController.signal);
-            this._snapshotHelper.disableSnapshotRendering();
-            this._details.model?.dispose();
-            this._details.model = null;
-            this._meshDataCache.clear();
-            this._materialVariantsController = null;
-            this.onSelectedMaterialVariantChanged.notifyObservers();
-            this.selectedAnimation = -1;
-            try {
-                if (source) {
-                    this._isLoadingModel = true;
-                    this._modelLoadingProgress = 0;
-                    this.onLoadingProgressChanged.notifyObservers();
-                    this._details.model = await loadAssetContainerAsync(source, this._details.scene, options);
-                    this.onSelectedMaterialVariantChanged.notifyObservers();
-                    this._details.model.animationGroups.forEach((group) => {
-                        group.start(true, this.animationSpeed);
-                        group.pause();
-                    });
-                    this.selectedAnimation = options?.defaultAnimation ?? 0;
-                    this._snapshotHelper.fixMeshes(this._details.model.meshes);
-                    this._details.model.addAllToScene();
-                }
-                this._updateCamera();
-                this._updateLight();
-                this._applyAnimationSpeed();
-                this.onModelChanged.notifyObservers();
-            }
-            catch (e) {
-                this.onModelError.notifyObservers(e);
-                throw e;
-            }
-            finally {
-                this._isLoadingModel = false;
-                this.onLoadingProgressChanged.notifyObservers();
-                this._snapshotHelper.enableSnapshotRendering();
-            }
-        });
-    }
-    /**
-     * Loads an environment texture from the specified url and sets up a corresponding skybox.
-     * @remarks
-     * If an environment is already loaded, it will be unloaded before loading the new environment.
-     * @param url The url of the environment texture to load.
-     * @param options The options to use when loading the environment.
-     * @param abortSignal An optional signal that can be used to abort the loading process.
-     */
-    async loadEnvironment(url, options, abortSignal) {
-        await this._updateEnvironment(url, options, abortSignal);
-    }
-    /**
-     * Unloads the current environment if one is loaded.
-     * @param abortSignal An optional signal that can be used to abort the reset.
-     */
-    async resetEnvironment(abortSignal) {
-        await this._updateEnvironment(undefined, undefined, abortSignal);
-    }
-    async _updateEnvironment(url, options, abortSignal) {
-        this._throwIfDisposedOrAborted(abortSignal);
-        this._loadEnvironmentAbortController?.abort("New environment is being loaded before previous environment finished loading.");
-        const abortController = (this._loadEnvironmentAbortController = new AbortController());
-        await this._loadEnvironmentLock.lockAsync(async () => {
-            throwIfAborted(abortSignal, abortController.signal);
-            this._snapshotHelper.disableSnapshotRendering();
-            this._environment?.dispose();
-            this._environment = null;
-            this._details.scene.autoClear = true;
-            const disposeActions = [];
-            try {
-                if (url) {
-                    const cubeTexture = CubeTexture.CreateFromPrefilteredData(url, this._details.scene);
-                    disposeActions.push(() => cubeTexture.dispose());
-                    const skybox = createSkybox(this._details.scene, this._details.camera, cubeTexture, this.skyboxBlur);
-                    disposeActions.push(() => skybox.dispose());
-                    this._snapshotHelper.fixMeshes([skybox]);
-                    this._details.scene.environmentTexture = cubeTexture;
-                    disposeActions.push(() => (this._details.scene.environmentTexture = null));
-                    this._skybox = skybox;
-                    disposeActions.push(() => (this._skybox = null));
-                    this._details.scene.autoClear = false;
-                    disposeActions.push(() => (this._details.scene.autoClear = true));
-                    const dispose = () => disposeActions.forEach((dispose) => dispose());
-                    this._environment = await new Promise((resolve, reject) => {
-                        const successObserver = cubeTexture.onLoadObservable.addOnce(() => {
-                            successObserver.remove();
-                            errorObserver.remove();
-                            resolve({
-                                dispose,
-                            });
-                        });
-                        const errorObserver = Texture.OnTextureLoadErrorObservable.add((texture) => {
-                            if (texture === cubeTexture) {
-                                successObserver.remove();
-                                errorObserver.remove();
-                                dispose();
-                                reject(new Error("Failed to load environment texture."));
-                            }
-                        });
-                    });
-                }
-                this._updateLight();
-                this.onEnvironmentChanged.notifyObservers();
-            }
-            catch (e) {
-                disposeActions.forEach((dispose) => dispose());
-                this.onEnvironmentError.notifyObservers(e);
-                throw e;
-            }
-            finally {
-                this._snapshotHelper.enableSnapshotRendering();
-            }
-        });
-    }
-    /**
-     * Toggles the play/pause animation state if there is a selected animation.
-     */
-    toggleAnimation() {
-        if (this.isAnimationPlaying) {
-            this.pauseAnimation();
-        }
-        else {
-            this.playAnimation();
-        }
-    }
-    /**
-     * Plays the selected animation if there is one.
-     */
-    playAnimation() {
-        this._activeAnimation?.play(true);
-    }
-    /**
-     * Pauses the selected animation if there is one.
-     */
-    async pauseAnimation() {
-        this._activeAnimation?.pause();
-    }
-    /**
-     * Disposes of the resources held by the Viewer.
-     */
-    dispose() {
-        this.selectedAnimation = -1;
-        this.animationProgress = 0;
-        this._loadEnvironmentAbortController?.abort("Thew viewer is being disposed.");
-        this._loadModelAbortController?.abort("Thew viewer is being disposed.");
-        this._renderLoopController?.dispose();
-        this._details.scene.dispose();
-        this.onEnvironmentChanged.clear();
-        this.onEnvironmentError.clear();
-        this.onSkyboxBlurChanged.clear();
-        this.onPostProcessingChanged.clear();
-        this.onModelChanged.clear();
-        this.onModelError.clear();
-        this.onCameraAutoOrbitChanged.clear();
-        this.onSelectedAnimationChanged.clear();
-        this.onAnimationSpeedChanged.clear();
-        this.onIsAnimationPlayingChanged.clear();
-        this.onAnimationProgressChanged.clear();
-        this.onLoadingProgressChanged.clear();
-        this._imageProcessingConfigurationObserver.remove();
-        this._isDisposed = true;
-    }
-    /**
-     * retrun world and canvas coordinates of an hot spot
-     * @param query mesh index and surface information to query the hot spot positions
-     * @param result Query a Hot Spot and does the conversion for Babylon Hot spot to a more generic HotSpotPositions, without Vector types
-     * @returns true if hotspot found
-     */
-    getHotSpotToRef(query, result) {
-        if (!this._details.model) {
-            return false;
-        }
-        const worldNormal = this._tempVectors[2];
-        const worldPos = this._tempVectors[1];
-        const screenPos = this._tempVectors[0];
-        if (query.type === "surface") {
-            const mesh = this._details.model.meshes[query.meshIndex];
-            if (!mesh) {
-                return false;
-            }
-            if (!GetHotSpotToRef(mesh, query, worldPos, worldNormal)) {
-                return false;
-            }
-        }
-        else {
-            worldPos.copyFromFloats(query.position[0], query.position[1], query.position[2]);
-            worldNormal.copyFromFloats(query.normal[0], query.normal[1], query.normal[2]);
-        }
-        const renderWidth = this._engine.getRenderWidth(); // Get the canvas width
-        const renderHeight = this._engine.getRenderHeight(); // Get the canvas height
-        const viewportWidth = this._details.camera.viewport.width * renderWidth;
-        const viewportHeight = this._details.camera.viewport.height * renderHeight;
-        const scene = this._details.scene;
-        Vector3.ProjectToRef(worldPos, Matrix.IdentityReadOnly, scene.getTransformMatrix(), new Viewport(0, 0, viewportWidth, viewportHeight), screenPos);
-        result.screenPosition[0] = screenPos.x;
-        result.screenPosition[1] = screenPos.y;
-        result.worldPosition[0] = worldPos.x;
-        result.worldPosition[1] = worldPos.y;
-        result.worldPosition[2] = worldPos.z;
-        // visibility
-        const eyeToSurface = this._tempVectors[3];
-        eyeToSurface.copyFrom(this._details.camera.globalPosition);
-        eyeToSurface.subtractInPlace(worldPos);
-        eyeToSurface.normalize();
-        result.visibility = Vector3.Dot(eyeToSurface, worldNormal);
-        return true;
-    }
-    _suspendRendering() {
-        this._renderLoopController?.dispose();
-        this._suspendRenderCount++;
-        let disposed = false;
-        return {
-            dispose: () => {
-                if (!disposed) {
-                    disposed = true;
-                    this._suspendRenderCount--;
-                    if (this._suspendRenderCount === 0) {
-                        this._beginRendering();
-                    }
-                }
-            },
-        };
-    }
-    _beginRendering() {
-        if (!this._renderLoopController) {
-            const render = () => {
-                this._details.scene.render();
-                // Update the camera panning sensitivity related properties based on the camera's distance from the target.
-                this._details.camera.panningSensibility = 5000 / this._details.camera.radius;
-                this._details.camera.speed = this._details.camera.radius * 0.2;
-                if (this.isAnimationPlaying) {
-                    this.onAnimationProgressChanged.notifyObservers();
-                    this._autoRotationBehavior.resetLastInteractionTime();
-                }
-            };
-            this._engine.runRenderLoop(render);
-            let disposed = false;
-            this._renderLoopController = {
-                dispose: () => {
-                    if (!disposed) {
-                        disposed = true;
-                        this._engine.stopRenderLoop(render);
-                        this._renderLoopController = null;
-                    }
-                },
-            };
-        }
-    }
-    _updateCamera(interpolate = false) {
-        this._details.camera.useFramingBehavior = true;
-        const framingBehavior = this._details.camera.getBehaviorByName("Framing");
-        framingBehavior.framingTime = 0;
-        framingBehavior.elevationReturnTime = -1;
-        this._details.camera.useAutoRotationBehavior = true;
-        const currentAlpha = this._details.camera.alpha;
-        const currentBeta = this._details.camera.beta;
-        const currentRadius = this._details.camera.radius;
-        const currentTarget = this._details.camera.target;
-        const goalAlpha = Math.PI / 2;
-        const goalBeta = Math.PI / 2.4;
-        let goalRadius = 1;
-        let goalTarget = currentTarget;
-        if (this._details.model?.meshes.length) {
-            // get bounds and prepare framing/camera radius from its values
-            this._details.camera.lowerRadiusLimit = null;
-            const maxExtents = computeMaxExtents(this._details.model.meshes, this._activeAnimation);
-            const worldExtents = {
-                min: new Vector3(Math.min(...maxExtents.map((e) => e.minimum.x)), Math.min(...maxExtents.map((e) => e.minimum.y)), Math.min(...maxExtents.map((e) => e.minimum.z))),
-                max: new Vector3(Math.max(...maxExtents.map((e) => e.maximum.x)), Math.max(...maxExtents.map((e) => e.maximum.y)), Math.max(...maxExtents.map((e) => e.maximum.z))),
-            };
-            framingBehavior.zoomOnBoundingInfo(worldExtents.min, worldExtents.max);
-            const worldSize = worldExtents.max.subtract(worldExtents.min);
-            const worldCenter = worldExtents.min.add(worldSize.scale(0.5));
-            goalRadius = worldSize.length() * 1.1;
-            if (!isFinite(goalRadius)) {
-                goalRadius = 1;
-                worldCenter.copyFromFloats(0, 0, 0);
-            }
-            goalTarget = worldCenter;
-        }
-        this._details.camera.alpha = Math.PI / 2;
-        this._details.camera.beta = Math.PI / 2.4;
-        this._details.camera.radius = goalRadius;
-        this._details.camera.target = goalTarget;
-        this._details.camera.lowerRadiusLimit = goalRadius * 0.001;
-        this._details.camera.upperRadiusLimit = goalRadius * 5;
-        this._details.camera.minZ = goalRadius * 0.001;
-        this._details.camera.maxZ = goalRadius * 1000;
-        this._details.camera.wheelDeltaPercentage = 0.01;
-        this._details.camera.useNaturalPinchZoom = true;
-        this._details.camera.restoreStateInterpolationFactor = 0.1;
-        this._details.camera.storeState();
-        if (interpolate) {
-            this._details.camera.alpha = currentAlpha;
-            this._details.camera.beta = currentBeta;
-            this._details.camera.radius = currentRadius;
-            this._details.camera.target = currentTarget;
-            this._details.camera.interpolateTo(goalAlpha, goalBeta, goalRadius, goalTarget);
-        }
-        updateSkybox(this._skybox, this._details.camera);
-    }
-    _updateLight() {
-        let shouldHaveDefaultLight;
-        if (!this._details.model) {
-            shouldHaveDefaultLight = false;
-        }
-        else {
-            const hasModelProvidedLights = this._details.model.lights.length > 0;
-            const hasImageBasedLighting = !!this._environment;
-            const hasMaterials = this._details.model.materials.length > 0;
-            const hasNonPBRMaterials = this._details.model.materials.some((material) => !(material instanceof PBRMaterial));
-            if (hasModelProvidedLights) {
-                shouldHaveDefaultLight = false;
-            }
-            else {
-                shouldHaveDefaultLight = !hasImageBasedLighting || !hasMaterials || hasNonPBRMaterials;
-            }
-        }
-        if (shouldHaveDefaultLight) {
-            if (!this._light) {
-                this._light = new HemisphericLight("defaultLight", Vector3.Up(), this._details.scene);
-            }
-        }
-        else {
-            this._light?.dispose();
-            this._light = null;
-        }
-    }
-    _applyAnimationSpeed() {
-        this._details.model?.animationGroups.forEach((group) => (group.speedRatio = this._animationSpeed));
-    }
-    async _pick(screenX, screenY) {
-        await import('@babylonjs/core/Culling/ray.js');
-        if (this._details.model) {
-            const model = this._details.model;
-            // Refresh bounding info to ensure morph target and skeletal animations are taken into account.
-            model.meshes.forEach((mesh) => {
-                let cache = this._meshDataCache.get(mesh);
-                if (!cache) {
-                    cache = {};
-                    this._meshDataCache.set(mesh, cache);
-                }
-                mesh.refreshBoundingInfo({ applyMorph: true, applySkeleton: true, cache });
-            });
-            const pickingInfo = this._details.scene.pick(screenX, screenY, (mesh) => model.meshes.includes(mesh));
-            if (pickingInfo.hit) {
-                return pickingInfo;
-            }
-        }
-        return null;
-    }
-    /**
-     * Check for disposed or aborted state (basically everything that can interrupt an async operation).
-     * @param abortSignals A set of optional AbortSignals to also check.
-     */
-    _throwIfDisposedOrAborted(...abortSignals) {
-        if (this._isDisposed) {
-            throw new Error("Viewer is disposed.");
-        }
-        throwIfAborted(...abortSignals);
-    }
-}
-(() => {
-    registerBuiltInLoaders();
-})();
-
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$5=t=>new n$3("string"==typeof t?t:t+"",void 0,s$1),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$1)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$5(e)})(t):t;
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const{is:i$2,defineProperty:e$3,getOwnPropertyDescriptor:r$4,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$2(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$4(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$1.reactiveElementVersions??=[]).push("2.0.4");
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$1=globalThis,i$1=t$1.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n$1=`<${o$1}>`,r$3=document,l=()=>r$3.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$3.createTreeWalker(r$3,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$3.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$3).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$3,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$3.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */let r$2 = class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}};r$2._$litElement$=!0,r$2["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$2});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r$2});(globalThis.litElementVersions??=[]).push("4.1.1");
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1},r$1=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.P(o,void 0,t),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function r(r){return n({...r,state:!0,attribute:!1})}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const e$1=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
-
-const defaultCanvasViewerOptions = {};
-/**
- * Chooses a default engine for the current browser environment.
- * @returns The default engine to use.
- */
-function getDefaultEngine() {
-    // TODO: When WebGPU is fully production ready, we may want to prefer it if it is supported by the browser.
-    return "WebGL";
-}
-/**
- * @experimental
- * Creates a Viewer instance that is bound to an HTML canvas.
- * @remarks
- * This function can be shared across multiple UI integrations (e.g. Web Components, React, etc.).
- * @param canvas The canvas element to bind the Viewer to.
- * @param options The options to use when creating the Viewer and binding it to the specified canvas.
- * @returns A Viewer instance that is bound to the specified canvas.
- */
-async function createViewerForCanvas(canvas, options) {
-    const finalOptions = { ...defaultCanvasViewerOptions, ...options };
-    const disposeActions = [];
-    // If the canvas is resized, note that the engine needs a resize, but don't resize it here as it will result in flickering.
-    let needsResize = false;
-    const resizeObserver = new ResizeObserver(() => (needsResize = true));
-    resizeObserver.observe(canvas);
-    disposeActions.push(() => resizeObserver.disconnect());
-    // Create an engine instance.
-    let engine;
-    switch (finalOptions.engine ?? getDefaultEngine()) {
-        case "WebGL": {
-            // eslint-disable-next-line @typescript-eslint/naming-convention, no-case-declarations
-            const { Engine } = await import('@babylonjs/core/Engines/engine.js');
-            engine = new Engine(canvas, undefined, options);
-            break;
-        }
-        case "WebGPU": {
-            // eslint-disable-next-line @typescript-eslint/naming-convention, no-case-declarations
-            const { WebGPUEngine } = await import('@babylonjs/core/Engines/webgpuEngine.js');
-            const webGPUEngine = new WebGPUEngine(canvas, options);
-            await webGPUEngine.initAsync();
-            engine = webGPUEngine;
-            break;
-        }
-    }
-    // Override the onInitialized callback to add in some specific behavior.
-    const onInitialized = finalOptions.onInitialized;
-    finalOptions.onInitialized = (details) => {
-        // Resize if needed right before rendering the Viewer scene to avoid any flickering.
-        const beforeRenderObserver = details.scene.onBeforeRenderObservable.add(() => {
-            if (needsResize) {
-                engine.resize();
-                needsResize = false;
-            }
-        });
-        disposeActions.push(() => beforeRenderObserver.remove());
-        // If the canvas is not visible, suspend rendering.
-        let offscreenRenderingSuspension = null;
-        const interactionObserver = new IntersectionObserver((entries) => {
-            if (entries.length > 0) {
-                if (entries[entries.length - 1].isIntersecting) {
-                    offscreenRenderingSuspension?.dispose();
-                    offscreenRenderingSuspension = null;
-                }
-                else {
-                    offscreenRenderingSuspension = details.suspendRendering();
-                }
-            }
-        });
-        interactionObserver.observe(canvas);
-        disposeActions.push(() => interactionObserver.disconnect());
-        // Call the original onInitialized callback, if one was provided.
-        onInitialized?.(details);
-    };
-    // Instantiate the Viewer with the engine and options.
-    const viewer = new Viewer(engine, finalOptions);
-    disposeActions.push(viewer.dispose.bind(viewer));
-    disposeActions.push(() => engine.dispose());
-    // Override the Viewer's dispose method to add in additional cleanup.
-    viewer.dispose = () => disposeActions.forEach((dispose) => dispose());
-    return viewer;
-}
-
-var HTML3DElement_1;
-// Icon SVG is pulled from https://react.fluentui.dev/?path=/docs/icons-catalog--docs
-const playFilledIcon = "M17.22 8.68a1.5 1.5 0 0 1 0 2.63l-10 5.5A1.5 1.5 0 0 1 5 15.5v-11A1.5 1.5 0 0 1 7.22 3.2l10 5.5Z";
-const pauseFilledIcon = "M5 2a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H5Zm8 0a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-2Z";
-const targetFilledIcon = "M10 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10a5 5 0 1 1 10 0 5 5 0 0 1-10 0Zm5-3.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z";
-const allowedAnimationSpeeds = [0.5, 1, 1.5, 2];
-// Converts any standard html color string to a Color4 object.
-function parseColor(color) {
-    if (!color) {
-        return null;
-    }
-    const canvas = document.createElement("canvas");
-    canvas.width = canvas.height = 1;
-    const context = canvas.getContext("2d");
-    if (!context) {
-        throw new Error("Unable to get 2d context for parseColor");
-    }
-    context.clearRect(0, 0, 1, 1);
-    context.fillStyle = color;
-    context.fillRect(0, 0, 1, 1);
-    const data = context.getImageData(0, 0, 1, 1).data;
-    return new Color4(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
-}
-/**
- * Displays a 3D model using the Babylon.js Viewer.
- */
-let HTML3DElement = HTML3DElement_1 = class HTML3DElement extends r$2 {
-    constructor() {
-        super(...arguments);
-        this._viewerLock = new AsyncLock();
-        // Bindings for properties that are synchronized both ways between the lower level Viewer and the HTML3DElement.
-        this._propertyBindings = [
-            this._createPropertyBinding("clearColor", (details) => details.scene.onClearColorChangedObservable, (details) => (details.scene.clearColor = this.clearColor ?? new Color4(0, 0, 0, 0)), (details) => (this.clearColor = details.scene.clearColor)),
-            this._createPropertyBinding("skyboxBlur", (details) => details.viewer.onSkyboxBlurChanged, (details) => (details.viewer.skyboxBlur = this.skyboxBlur ?? details.viewer.skyboxBlur), (details) => (this.skyboxBlur = details.viewer.skyboxBlur)),
-            this._createPropertyBinding("toneMapping", (details) => details.viewer.onPostProcessingChanged, (details) => {
-                if (this.toneMapping) {
-                    details.viewer.postProcessing = { toneMapping: this.toneMapping };
-                }
-            }, (details) => (this.toneMapping = details.viewer.postProcessing?.toneMapping)),
-            this._createPropertyBinding("contrast", (details) => details.viewer.onPostProcessingChanged, (details) => (details.viewer.postProcessing = { contrast: this.contrast ?? undefined }), (details) => (this.contrast = details.viewer.postProcessing.contrast)),
-            this._createPropertyBinding("exposure", (details) => details.viewer.onPostProcessingChanged, (details) => (details.viewer.postProcessing = { exposure: this.exposure ?? undefined }), (details) => (this.exposure = details.viewer.postProcessing.exposure)),
-            this._createPropertyBinding("cameraAutoOrbit", (details) => details.viewer.onCameraAutoOrbitChanged, (details) => (details.viewer.cameraAutoOrbit = { enabled: this.cameraAutoOrbit }), (details) => (this.cameraAutoOrbit = details.viewer.cameraAutoOrbit.enabled)),
-            this._createPropertyBinding("cameraAutoOrbitSpeed", (details) => details.viewer.onCameraAutoOrbitChanged, (details) => (details.viewer.cameraAutoOrbit = { speed: this.cameraAutoOrbitSpeed ?? undefined }), (details) => (this.cameraAutoOrbitSpeed = details.viewer.cameraAutoOrbit.speed)),
-            this._createPropertyBinding("cameraAutoOrbitDelay", (details) => details.viewer.onCameraAutoOrbitChanged, (details) => (details.viewer.cameraAutoOrbit = { delay: this.cameraAutoOrbitDelay ?? undefined }), (details) => (this.cameraAutoOrbitDelay = details.viewer.cameraAutoOrbit.delay)),
-            this._createPropertyBinding("animationSpeed", (details) => details.viewer.onAnimationSpeedChanged, (details) => (details.viewer.animationSpeed = this.animationSpeed), (details) => {
-                let speed = details.viewer.animationSpeed;
-                speed = allowedAnimationSpeeds.reduce((prev, curr) => (Math.abs(curr - speed) < Math.abs(prev - speed) ? curr : prev));
-                this.animationSpeed = speed;
-                this._dispatchCustomEvent("animationspeedchange", (type) => new Event(type));
-            }),
-            this._createPropertyBinding("selectedAnimation", (details) => details.viewer.onSelectedAnimationChanged, (details) => (details.viewer.selectedAnimation = this.selectedAnimation ?? details.viewer.selectedAnimation), (details) => (this.selectedAnimation = details.viewer.selectedAnimation)),
-            this._createPropertyBinding("selectedMaterialVariant", (details) => details.viewer.onSelectedMaterialVariantChanged, (details) => (details.viewer.selectedMaterialVariant = this.selectedMaterialVariant ?? details.viewer.selectedMaterialVariant ?? ""), (details) => (this.selectedMaterialVariant = details.viewer.selectedMaterialVariant)),
-        ];
-        /**
-         * The engine to use for rendering.
-         */
-        this.engine = getDefaultEngine();
-        /**
-         * The model URL.
-         */
-        this.source = null;
-        /**
-         * Forces the model to be loaded with the specified extension.
-         * @remarks
-         * If this property is not set, the extension will be inferred from the model URL when possible.
-         */
-        this.extension = null;
-        /**
-         * The environment URL.
-         */
-        this.environment = null;
-        this._loadingProgress = false;
-        /**
-         * A value between 0 and 1 that specifies how much to blur the skybox.
-         */
-        this.skyboxBlur = null;
-        /**
-         * The tone mapping to use for rendering the scene.
-         */
-        this.toneMapping = null;
-        /**
-         * The contrast applied to the scene.
-         */
-        this.contrast = null;
-        /**
-         * The exposure applied to the scene.
-         */
-        this.exposure = null;
-        /**
-         * The clear color (e.g. background color) for the viewer.
-         */
-        this.clearColor = null;
-        /**
-         * Enables or disables camera auto-orbit.
-         */
-        this.cameraAutoOrbit = false;
-        /**
-         * The speed at which the camera auto-orbits around the target.
-         */
-        this.cameraAutoOrbitSpeed = null;
-        /**
-         * The delay in milliseconds before the camera starts auto-orbiting.
-         */
-        this.cameraAutoOrbitDelay = null;
-        /**
-         * Camera orbit can only be set as an attribute, and is set on the camera each time a new model is loaded.
-         * For access to the real time camera properties, use viewerDetails.camera.
-         */
-        this._cameraOrbitCoercer = null;
-        /**
-         * Camera target can only be set as an attribute, and is set on the camera each time a new model is loaded.
-         * For access to the real time camera properties, use viewerDetails.camera.
-         */
-        this._cameraTargetCoercer = null;
-        /**
-         * A string value that encodes one or more hotspots.
-         */
-        this.hotSpots = {};
-        /**
-         * True if the default animation should play automatically when a model is loaded.
-         */
-        this.animationAutoPlay = false;
-        /**
-         * The currently selected animation index.
-         */
-        this.selectedAnimation = null;
-        /**
-         * The speed scale at which animations are played.
-         */
-        this.animationSpeed = 1;
-        /**
-         * The current point on the selected animation timeline, normalized between 0 and 1.
-         */
-        this.animationProgress = 0;
-        this._animations = [];
-        this._isAnimationPlaying = false;
-        /**
-         * The currently selected material variant.
-         */
-        this.selectedMaterialVariant = null;
-    }
-    /**
-     * Gets the underlying viewer details (when the underlying viewer is in a loaded state).
-     * This is useful for advanced scenarios where direct access to the viewer or Babylon scene is needed.
-     */
-    get viewerDetails() {
-        return this._viewerDetails;
-    }
-    /**
-     * Get hotspot world and screen values from a named hotspot
-     * @param name slot of the hot spot
-     * @param result resulting world and screen positions
-     * @returns world position, world normal and screen space coordinates
-     */
-    queryHotSpot(name, result) {
-        return this._queryHotSpot(name, result) != null;
-    }
-    _queryHotSpot(name, result) {
-        if (this._viewerDetails) {
-            const hotSpot = this.hotSpots?.[name];
-            if (hotSpot) {
-                if (this._viewerDetails.viewer.getHotSpotToRef(hotSpot, result)) {
-                    return hotSpot;
-                }
-            }
-        }
-        return null;
-    }
-    /**
-     * Updates the camera to focus on a named hotspot.
-     * @param name The name of the hotspot to focus on.
-     * @returns true if the hotspot was found and the camera was updated, false otherwise.
-     */
-    focusHotSpot(name) {
-        const result = new ViewerHotSpotResult();
-        const query = this._queryHotSpot(name, result);
-        if (query && this._viewerDetails) {
-            this._viewerDetails.viewer.pauseAnimation();
-            const cameraOrbit = query.cameraOrbit ?? [undefined, undefined, undefined];
-            this._viewerDetails.camera.interpolateTo(cameraOrbit[0], cameraOrbit[1], cameraOrbit[2], new Vector3(result.worldPosition[0], result.worldPosition[1], result.worldPosition[2]));
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Gets information about loading activity.
-     * @remarks
-     * false indicates no loading activity.
-     * true indicates loading activity with no progress information.
-     * A number between 0 and 1 indicates loading activity with progress information.
-     */
-    get loadingProgress() {
-        return this._loadingProgress;
-    }
-    get _hasHotSpots() {
-        return Object.keys(this.hotSpots).length > 0;
-    }
-    /**
-     * The list of animation names for the currently loaded model.
-     */
-    get animations() {
-        return this._animations;
-    }
-    get _hasAnimations() {
-        return this._animations.length > 0;
-    }
-    /**
-     * True if an animation is currently playing.
-     */
-    get isAnimationPlaying() {
-        return this._isAnimationPlaying;
-    }
-    /**
-     * The list of material variants for the currently loaded model.
-     */
-    get materialVariants() {
-        return this._viewerDetails?.viewer.materialVariants ?? [];
-    }
-    /**
-     * Toggles the play/pause animation state if there is a selected animation.
-     */
-    toggleAnimation() {
-        this._viewerDetails?.viewer.toggleAnimation();
-    }
-    // eslint-disable-next-line babylonjs/available
-    connectedCallback() {
-        super.connectedCallback();
-        this._setupViewer();
-    }
-    // eslint-disable-next-line babylonjs/available
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._tearDownViewer();
-    }
-    // eslint-disable-next-line babylonjs/available
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (this._materialSelect) {
-            this._materialSelect.value = "";
-        }
-        if (changedProperties.get("engine")) {
-            this._tearDownViewer();
-            this._setupViewer();
-        }
-        else {
-            this._propertyBindings.filter((binding) => changedProperties.has(binding.property)).forEach((binding) => binding.updateViewer());
-            if (changedProperties.has("source")) {
-                this._updateModel();
-            }
-            if (changedProperties.has("environment")) {
-                this._updateEnv();
-            }
-        }
-    }
-    // eslint-disable-next-line babylonjs/available
-    render() {
-        const showProgressBar = this.loadingProgress !== false;
-        // If loadingProgress is true, then the progress bar is indeterminate so the value doesn't matter.
-        const progressValue = typeof this.loadingProgress === "boolean" ? 0 : this.loadingProgress * 100;
-        const isIndeterminate = this.loadingProgress === true;
-        const progressBar = x `
-            <div part="progress-bar" class="bar loading-progress-outer ${showProgressBar ? "" : "loading-progress-outer-inactive"}" aria-label="Loading Progress">
-                <div
-                    class="loading-progress-inner ${isIndeterminate ? "loading-progress-inner-indeterminate" : ""}"
-                    style="${isIndeterminate ? "" : `width: ${progressValue}%`}"
-                ></div>
-            </div>
-        `;
-        // Setup the list of toolbar controls.
-        let toolbarControls = [];
-        if (this._viewerDetails?.model != null) {
-            // If the model has animations, add animation controls.
-            if (this._hasAnimations) {
-                toolbarControls.push(x `
-                    <div class="animation-timeline">
-                        <button aria-label="${this.isAnimationPlaying ? "Pause" : "Play"}" @click="${this.toggleAnimation}">
-                            ${!this.isAnimationPlaying
-                    ? x `
-                                      <svg viewBox="0 0 20 20">
-                                          <path d="${playFilledIcon}" fill="currentColor"></path>
-                                      </svg>
-                                  `
-                    : x `
-                                      <svg viewBox="-3 -2 24 24">
-                                          <path d="${pauseFilledIcon}" fill="currentColor"></path>
-                                      </svg>
-                                  `}
-                        </button>
-                        <input
-                            aria-label="Animation Progress"
-                            class="animation-timeline-input"
-                            type="range"
-                            min="0"
-                            max="1"
-                            step="0.0001"
-                            .value="${this.animationProgress}"
-                            @input="${this._onAnimationTimelineChanged}"
-                            @pointerdown="${this._onAnimationTimelinePointerDown}"
-                        />
-                    </div>
-                    <select aria-label="Select Animation Speed" @change="${this._onAnimationSpeedChanged}">
-                        ${allowedAnimationSpeeds.map((speed) => x `<option value="${speed}" .selected="${this.animationSpeed === speed}">${speed}x</option> `)}
-                    </select>
-                    ${this.animations.length > 1
-                    ? x `<select aria-label="Select Animation" @change="${this._onSelectedAnimationChanged}">
-                              ${this.animations.map((name, index) => x `<option value="${index}" .selected="${this.selectedAnimation === index}">${name}</option>`)}
-                          </select>`
-                    : ""}
-                `);
-            }
-            // If the model has material variants, add material variant controls.
-            if (this.materialVariants.length > 1) {
-                toolbarControls.push(x `
-                    <select aria-label="Select Material Variant" @change="${this._onMaterialVariantChanged}">
-                        ${this.materialVariants.map((name) => x `<option value="${name}" .selected="${this.selectedMaterialVariant === name}">${name}</option>`)}
-                    </select>
-                `);
-            }
-            // If hotspots have been defined, add hotspot controls.
-            if (this._hasHotSpots) {
-                toolbarControls.push(x `
-                    <div class="select-container">
-                        <select id="materialSelect" aria-label="Select HotSpot" @change="${this._onHotSpotsChanged}">
-                            <!-- When the select is forced to be less wide than the options, padding on the right is lost. Pad with white space. -->
-                            ${Object.keys(this.hotSpots).map((name) => x `<option value="${name}">${name}&nbsp;&nbsp;</option>`)}
-                        </select>
-                        <!-- This button is not actually interactive, we want input to pass through to the select below. -->
-                        <button style="pointer-events: none">
-                            <svg viewBox="0 0 20 20">
-                                <path d="${targetFilledIcon}" fill="currentColor"></path>
-                            </svg>
-                        </button>
-                    </div>
-                `);
-            }
-            // Add a vertical divider between each toolbar control.
-            const controlCount = toolbarControls.length;
-            const separator = x `<div class="divider"></div>`;
-            toolbarControls = toolbarControls.reduce((toolbarControls, toolbarControl, index) => {
-                if (index < controlCount - 1) {
-                    return [...toolbarControls, toolbarControl, separator];
-                }
-                else {
-                    return [...toolbarControls, toolbarControl];
-                }
-            }, new Array());
-        }
-        // NOTE: The unnamed 'slot' element holds all child elements of the <babylon-viewer> that do not specify a 'slot' attribute.
-        return x `
-            <div class="full-size">
-                <div id="canvasContainer" class="full-size"></div>
-                <slot class="full-size children-slot"></slot>
-                <slot name="progress-bar"> ${progressBar}</slot>
-                ${toolbarControls.length === 0
-            ? ""
-            : x `
-                          <slot name="tool-bar">
-                              <div part="tool-bar" class="bar ${this._hasAnimations ? "" : "bar-min"} tool-bar">${toolbarControls}</div>
-                          </slot>
-                      `}
-            </div>
-        `;
-    }
-    addEventListener(type, listener, options) {
-        super.addEventListener(type, listener, options);
-    }
-    _dispatchCustomEvent(type, event) {
-        this.dispatchEvent(event(type));
-    }
-    _onSelectedAnimationChanged(event) {
-        const selectElement = event.target;
-        this.selectedAnimation = Number(selectElement.value);
-    }
-    _onAnimationSpeedChanged(event) {
-        const selectElement = event.target;
-        this.animationSpeed = Number(selectElement.value);
-    }
-    _onAnimationTimelineChanged(event) {
-        if (this._viewerDetails) {
-            const input = event.target;
-            const value = Number(input.value);
-            if (value !== this.animationProgress) {
-                this._viewerDetails.viewer.animationProgress = value;
-            }
-        }
-    }
-    _onAnimationTimelinePointerDown(event) {
-        if (this._viewerDetails?.viewer.isAnimationPlaying) {
-            this._viewerDetails.viewer.pauseAnimation();
-            const input = event.target;
-            input.addEventListener("pointerup", () => this._viewerDetails?.viewer.playAnimation(), { once: true });
-        }
-    }
-    _onMaterialVariantChanged(event) {
-        const selectElement = event.target;
-        this.selectedMaterialVariant = selectElement.value;
-    }
-    _onHotSpotsChanged(event) {
-        const selectElement = event.target;
-        const hotSpotName = selectElement.value;
-        // We don't actually want a selected value, this is just a one time trigger.
-        selectElement.value = "";
-        this.focusHotSpot(hotSpotName);
-    }
-    // Helper function to simplify keeping Viewer properties in sync with HTML3DElement properties.
-    _createPropertyBinding(property, getObservable, updateViewer, updateElement) {
-        return {
-            property,
-            // Called each time a Viewer instance is created.
-            onInitialized: (viewerDetails) => {
-                getObservable(viewerDetails).add(() => {
-                    updateElement(viewerDetails);
-                });
-                updateViewer(viewerDetails);
-            },
-            // Called when the HTML3DElement property should be propagated to the Viewer.
-            updateViewer: () => {
-                if (this._viewerDetails) {
-                    updateViewer(this._viewerDetails);
-                }
-            },
-            // Called to re-sync the HTML3DElement property with its corresponding attribute.
-            syncToAttribute: () => {
-                const descriptor = HTML3DElement_1.elementProperties.get(property);
-                if (descriptor) {
-                    if (descriptor.attribute) {
-                        const attributeName = descriptor.attribute === true ? property : descriptor.attribute;
-                        if (this.hasAttribute(attributeName)) {
-                            const attributeValue = this.getAttribute(attributeName);
-                            const converter = typeof descriptor.converter === "function"
-                                ? descriptor.converter
-                                : descriptor.converter?.fromAttribute !== undefined
-                                    ? descriptor.converter.fromAttribute
-                                    : u$1.fromAttribute;
-                            this[property] = converter ? converter(attributeValue, descriptor.type) : attributeValue;
-                        }
-                    }
-                }
-            },
-        };
-    }
-    async _setupViewer() {
-        await this._viewerLock.lockAsync(async () => {
-            // The first time the element is connected, the canvas container may not be available yet.
-            // Wait for the first update if needed.
-            if (!this._canvasContainer) {
-                await this.updateComplete;
-            }
-            if (this._canvasContainer && !this._viewerDetails) {
-                const canvas = document.createElement("canvas");
-                canvas.className = "full-size canvas";
-                canvas.setAttribute("touch-action", "none");
-                this._canvasContainer.appendChild(canvas);
-                await createViewerForCanvas(canvas, {
-                    engine: this.engine,
-                    onInitialized: (details) => {
-                        this._viewerDetails = details;
-                        details.viewer.onEnvironmentChanged.add(() => {
-                            this._dispatchCustomEvent("environmentchange", (type) => new Event(type));
-                        });
-                        details.viewer.onEnvironmentError.add((error) => {
-                            this._dispatchCustomEvent("environmenterror", (type) => new ErrorEvent(type, { error }));
-                        });
-                        details.viewer.onModelChanged.add(() => {
-                            this._animations = [...details.viewer.animations];
-                            // When attributes are explicitly set, they are re-applied when a new model is loaded.
-                            this._propertyBindings.forEach((binding) => binding.syncToAttribute());
-                            // The same goes for camera pose attributes, but it is handled a little differently because there are no corresponding public properties
-                            // (since the underlying Babylon camera already has these properties).
-                            this._cameraOrbitCoercer?.(details.camera);
-                            this._cameraTargetCoercer?.(details.camera);
-                            // If animation auto play was set, then start the default animation (if possible).
-                            if (this.animationAutoPlay) {
-                                details.viewer.playAnimation();
-                            }
-                            this._dispatchCustomEvent("modelchange", (type) => new Event(type));
-                        });
-                        details.viewer.onModelError.add((error) => {
-                            this._animations = [...details.viewer.animations];
-                            this._dispatchCustomEvent("modelerror", (type) => new ErrorEvent(type, { error }));
-                        });
-                        details.viewer.onLoadingProgressChanged.add(() => {
-                            this._loadingProgress = details.viewer.loadingProgress;
-                            this._dispatchCustomEvent("loadingprogresschange", (type) => new Event(type));
-                        });
-                        details.viewer.onIsAnimationPlayingChanged.add(() => {
-                            this._isAnimationPlaying = details.viewer.isAnimationPlaying ?? false;
-                            this._dispatchCustomEvent("animationplayingchange", (type) => new Event(type));
-                        });
-                        details.viewer.onAnimationProgressChanged.add(() => {
-                            this.animationProgress = details.viewer.animationProgress ?? 0;
-                            this._dispatchCustomEvent("animationprogresschange", (type) => new Event(type));
-                        });
-                        details.scene.onAfterRenderCameraObservable.add(() => {
-                            this._dispatchCustomEvent("viewerrender", (type) => new Event(type));
-                        });
-                        this._updateModel();
-                        this._updateEnv();
-                        this._propertyBindings.forEach((binding) => binding.onInitialized(details));
-                        this._dispatchCustomEvent("viewerready", (type) => new Event(type));
-                    },
-                });
-            }
-        });
-    }
-    async _tearDownViewer() {
-        await this._viewerLock.lockAsync(async () => {
-            if (this._viewerDetails) {
-                this._viewerDetails.viewer.dispose();
-                this._viewerDetails = undefined;
-            }
-            // We want to replace the canvas for two reasons:
-            // 1. When the viewer element is reconnected to the DOM, we don't want to briefly see the last frame of the previous model.
-            // 2. If we are changing engines (e.g. WebGL to WebGPU), we need to create a new canvas for the new engine.
-            if (this._canvasContainer && this._canvasContainer.firstElementChild) {
-                this._canvasContainer.removeChild(this._canvasContainer.firstElementChild);
-            }
-        });
-    }
-    async _updateModel() {
-        if (this._viewerDetails) {
-            try {
-                if (this.source) {
-                    await this._viewerDetails.viewer.loadModel(this.source, { pluginExtension: this.extension ?? undefined, defaultAnimation: this.selectedAnimation ?? 0 });
-                }
-                else {
-                    await this._viewerDetails.viewer.resetModel();
-                }
-            }
-            catch (error) {
-                Logger.Log(error);
-            }
-        }
-    }
-    async _updateEnv() {
-        if (this._viewerDetails) {
-            try {
-                if (this.environment) {
-                    await this._viewerDetails.viewer.loadEnvironment(this.environment);
-                }
-                else {
-                    await this._viewerDetails.viewer.resetEnvironment();
-                }
-            }
-            catch (error) {
-                Logger.Log(error);
-            }
-        }
-    }
-};
-// eslint-disable-next-line @typescript-eslint/naming-convention, jsdoc/require-jsdoc
-HTML3DElement.styles = i$3 `
-        :host {
-            --ui-foreground-color: white;
-            --ui-background-hue: 233;
-            --ui-background-saturation: 8%;
-            --ui-background-lightness: 39%;
-            --ui-background-opacity: 0.75;
-            --ui-background-color: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), var(--ui-background-opacity));
-            --ui-background-color-hover: hsla(
-                var(--ui-background-hue),
-                var(--ui-background-saturation),
-                calc(var(--ui-background-lightness) - 10%),
-                calc(var(--ui-background-opacity) - 0.1)
-            );
-            all: inherit;
-            overflow: hidden;
-        }
-
-        .full-size {
-            display: block;
-            position: relative;
-            width: 100%;
-            height: 100%;
-        }
-
-        .canvas {
-            outline: none;
-        }
-
-        .children-slot {
-            position: absolute;
-            top: 0;
-            background: transparent;
-            pointer-events: none;
-        }
-
-        .bar {
-            position: absolute;
-            width: calc(100% - 24px);
-            min-width: 150px;
-            max-width: 1280px;
-            left: 50%;
-            transform: translateX(-50%);
-            background-color: var(--ui-background-color);
-        }
-
-        .bar-min {
-            width: unset;
-            min-width: unset;
-            max-width: unset;
-        }
-
-        .loading-progress-outer {
-            height: 4px;
-            border-radius: 4px;
-            border: 1px solid var(--ui-background-color);
-            outline: none;
-            top: 12px;
-            pointer-events: none;
-            transition: opacity 0.5s ease;
-        }
-
-        .loading-progress-outer-inactive {
-            opacity: 0;
-            /* Set the background color to the foreground color while in the inactive state so that the color seen is correct while fading out the opacity. */
-            background-color: var(--ui-foreground-color);
-        }
-
-        .loading-progress-inner {
-            width: 0;
-            height: 100%;
-            border-radius: inherit;
-            background-color: var(--ui-foreground-color);
-            transition: width 0.3s linear;
-        }
-
-        /* The right side of the inner progress bar starts aligned with the left side of the outer progress bar (container).
-           So, if the width is 30%, then the left side of the inner progress bar moves a total of 130% of the width of the container.
-           This is why the first keyframe is at 23% ((100/130)*30).
-         */
-        @keyframes indeterminate {
-            0% {
-                left: 0%;
-                width: 0%;
-            }
-            23% {
-                left: 0%;
-                width: 30%;
-            }
-            77% {
-                left: 70%;
-                width: 30%;
-            }
-            100% {
-                left: 100%;
-                width: 0%;
-            }
-        }
-
-        .loading-progress-inner-indeterminate {
-            position: absolute;
-            animation: indeterminate 1.5s infinite;
-            animation-timing-function: linear;
-        }
-
-        .tool-bar {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            border-radius: 12px;
-            border-color: var(--ui-foreground-color);
-            height: 48px;
-            bottom: 12px;
-            color: var(--ui-foreground-color);
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        .tool-bar * {
-            height: 100%;
-            min-width: 48px;
-        }
-
-        .tool-bar .divider {
-            min-width: 1px;
-            margin: 0px 6px;
-            height: 66%;
-            background-color: var(--ui-foreground-color);
-        }
-
-        .tool-bar select {
-            background: none;
-            min-width: 52px;
-            max-width: 128px;
-            border: 1px solid transparent;
-            border-radius: inherit;
-            color: inherit;
-            font-size: 14px;
-            padding: 0px 12px;
-            cursor: pointer;
-            outline: none;
-            appearance: none; /* Remove default styling */
-            -webkit-appearance: none; /* Remove default styling for Safari */
-        }
-
-        .tool-bar .select-container {
-            position: relative;
-            display: flex;
-            border-radius: inherit;
-            border-width: 0;
-            padding: 0;
-        }
-
-        .tool-bar .select-container select {
-            position: absolute;
-            min-width: 0;
-            width: 100%;
-        }
-
-        .tool-bar .select-container button {
-            position: absolute;
-            border-width: 0;
-        }
-
-        .tool-bar select:hover,
-        .tool-bar select:focus {
-            background-color: var(--ui-background-color-hover);
-        }
-
-        .tool-bar select option {
-            background-color: var(--ui-background-color);
-            color: var(--ui-foreground-color);
-        }
-
-        .tool-bar select:focus-visible {
-            border-color: inherit;
-        }
-
-        .tool-bar button {
-            background: none;
-            border: 1px solid transparent;
-            border-radius: inherit;
-            color: inherit;
-            padding: 0;
-            cursor: pointer;
-            outline: none;
-        }
-
-        .tool-bar button:hover {
-            background-color: var(--ui-background-color-hover);
-        }
-
-        .tool-bar button:focus-visible {
-            border-color: inherit;
-        }
-
-        .tool-bar button svg {
-            width: 32px;
-            height: 32px;
-        }
-
-        .animation-timeline {
-            display: flex;
-            flex: 1;
-            position: relative;
-            overflow: hidden;
-            cursor: pointer;
-            align-items: center;
-            border-radius: inherit;
-            border-color: inherit;
-        }
-
-        .animation-timeline-input {
-            -webkit-appearance: none;
-            cursor: pointer;
-            width: 100%;
-            height: 100%;
-            outline: none;
-            border: 1px solid transparent;
-            border-radius: inherit;
-            padding: 0 12px;
-            background-color: transparent;
-        }
-
-        .animation-timeline-input:focus-visible {
-            border-color: inherit;
-        }
-
-        /*Chrome -webkit */
-
-        .animation-timeline-input::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            border: 2px solid;
-            color: var(--ui-foreground-color);
-            border-radius: 50%;
-            background: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), 1);
-            margin-top: -10px;
-        }
-
-        .animation-timeline-input::-webkit-slider-runnable-track {
-            height: 2px;
-            -webkit-appearance: none;
-            background-color: var(--ui-foreground-color);
-        }
-
-        /** FireFox -moz */
-
-        .animation-timeline-input::-moz-range-progress {
-            height: 2px;
-            background-color: var(--ui-foreground-color);
-        }
-
-        .animation-timeline-input::-moz-range-thumb {
-            width: 16px;
-            height: 16px;
-            border: 2px solid var(--ui-foreground-color);
-            border-radius: 50%;
-            background: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), 1);
-        }
-
-        .animation-timeline-input::-moz-range-track {
-            height: 2px;
-            background: var(--ui-foreground-color);
-        }
-    `;
-__decorate([
-    n({
-        converter: (value) => {
-            if (value === "WebGL" || value === "WebGPU") {
-                return value;
-            }
-            return getDefaultEngine();
-        },
-    })
-], HTML3DElement.prototype, "engine", void 0);
-__decorate([
-    n({ reflect: true })
-], HTML3DElement.prototype, "source", void 0);
-__decorate([
-    n({ reflect: true })
-], HTML3DElement.prototype, "extension", void 0);
-__decorate([
-    n({ reflect: true })
-], HTML3DElement.prototype, "environment", void 0);
-__decorate([
-    r()
-], HTML3DElement.prototype, "_loadingProgress", void 0);
-__decorate([
-    n({ attribute: "skybox-blur" })
-], HTML3DElement.prototype, "skyboxBlur", void 0);
-__decorate([
-    n({
-        attribute: "tone-mapping",
-        converter: (value) => {
-            if (!value || !isToneMapping(value)) {
-                return "neutral";
-            }
-            return value;
-        },
-    })
-], HTML3DElement.prototype, "toneMapping", void 0);
-__decorate([
-    n()
-], HTML3DElement.prototype, "contrast", void 0);
-__decorate([
-    n()
-], HTML3DElement.prototype, "exposure", void 0);
-__decorate([
-    n({
-        attribute: "clear-color",
-        reflect: true,
-        converter: {
-            fromAttribute: parseColor,
-            toAttribute: (color) => (color ? color.toHexString() : null),
-        },
-    })
-], HTML3DElement.prototype, "clearColor", void 0);
-__decorate([
-    n({
-        attribute: "camera-auto-orbit",
-        type: Boolean,
-    })
-], HTML3DElement.prototype, "cameraAutoOrbit", void 0);
-__decorate([
-    n({
-        attribute: "camera-auto-orbit-speed",
-        type: Number,
-    })
-], HTML3DElement.prototype, "cameraAutoOrbitSpeed", void 0);
-__decorate([
-    n({
-        attribute: "camera-auto-orbit-delay",
-        type: Number,
-    })
-], HTML3DElement.prototype, "cameraAutoOrbitDelay", void 0);
-__decorate([
-    n({
-        attribute: "camera-orbit",
-        converter: (value) => {
-            if (!value) {
-                return null;
-            }
-            const array = value.split(/\s+/);
-            if (array.length !== 3) {
-                throw new Error("cameraOrbit should be defined as 'alpha beta radius'");
-            }
-            return (camera) => {
-                for (const [index, property] of ["alpha", "beta", "radius"].entries()) {
-                    const value = array[index];
-                    if (value !== "auto") {
-                        camera[property] = Number(value);
-                    }
-                }
-            };
-        },
-    })
-], HTML3DElement.prototype, "_cameraOrbitCoercer", void 0);
-__decorate([
-    n({
-        attribute: "camera-target",
-        converter: (value) => {
-            if (!value) {
-                return null;
-            }
-            const array = value.split(/\s+/);
-            if (array.length !== 3) {
-                throw new Error("cameraTarget should be defined as 'x y z'");
-            }
-            return (camera) => {
-                const target = camera.target;
-                for (const [index, property] of ["x", "y", "z"].entries()) {
-                    const value = array[index];
-                    if (value !== "auto") {
-                        target[property] = Number(value);
-                    }
-                }
-                camera.target = target.clone();
-            };
-        },
-    })
-], HTML3DElement.prototype, "_cameraTargetCoercer", void 0);
-__decorate([
-    n({
-        attribute: "hotspots",
-        converter: (value) => {
-            if (!value) {
-                return {};
-            }
-            return JSON.parse(value);
-        },
-    })
-], HTML3DElement.prototype, "hotSpots", void 0);
-__decorate([
-    n({ attribute: "animation-auto-play", reflect: true, type: Boolean })
-], HTML3DElement.prototype, "animationAutoPlay", void 0);
-__decorate([
-    n({ attribute: "selected-animation", type: Number })
-], HTML3DElement.prototype, "selectedAnimation", void 0);
-__decorate([
-    n({ attribute: "animation-speed" })
-], HTML3DElement.prototype, "animationSpeed", void 0);
-__decorate([
-    n({ attribute: false })
-], HTML3DElement.prototype, "animationProgress", void 0);
-__decorate([
-    r()
-], HTML3DElement.prototype, "_animations", void 0);
-__decorate([
-    r()
-], HTML3DElement.prototype, "_isAnimationPlaying", void 0);
-__decorate([
-    n({ attribute: "material-variant" })
-], HTML3DElement.prototype, "selectedMaterialVariant", void 0);
-__decorate([
-    e("#canvasContainer")
-], HTML3DElement.prototype, "_canvasContainer", void 0);
-__decorate([
-    e("#materialSelect")
-], HTML3DElement.prototype, "_materialSelect", void 0);
-HTML3DElement = HTML3DElement_1 = __decorate([
-    t("babylon-viewer")
-], HTML3DElement);
-
-/**
- * Displays child elements at the screen space location of a hotspot in a babylon-viewer.
- * @remarks
- * The babylon-viewer-annotation element must be a child of a babylon-viewer element.
- */
-let HTML3DAnnotationElement = class HTML3DAnnotationElement extends r$2 {
-    constructor() {
-        super(...arguments);
-        this._internals = this.attachInternals();
-        this._viewerAttachment = null;
-        /**
-         * The name of the hotspot to track.
-         */
-        this.hotSpot = "";
-    }
-    // eslint-disable-next-line babylonjs/available
-    connectedCallback() {
-        super.connectedCallback();
-        this._internals.states?.add("invalid");
-        if (!(this.parentElement instanceof HTML3DElement)) {
-            // eslint-disable-next-line no-console
-            console.warn("The babylon-viewer-annotation element must be a child of a babylon-viewer element.");
-            return;
-        }
-        const viewerElement = this.parentElement;
-        const hotSpotResult = new ViewerHotSpotResult();
-        const onViewerRendered = () => {
-            if (this.hotSpot) {
-                if (viewerElement.queryHotSpot(this.hotSpot, hotSpotResult)) {
-                    const [screenX, screenY] = hotSpotResult.screenPosition;
-                    this.style.transform = `translate(${screenX}px, ${screenY}px)`;
-                    this._internals.states?.delete("invalid");
-                    if (hotSpotResult.visibility <= 0) {
-                        this._internals.states?.add("back-facing");
-                    }
-                    else {
-                        this._internals.states?.delete("back-facing");
-                    }
-                }
-                else {
-                    this._internals.states?.add("invalid");
-                }
-            }
-        };
-        viewerElement.addEventListener("viewerrender", onViewerRendered);
-        this._viewerAttachment = {
-            dispose() {
-                viewerElement.removeEventListener("viewerrender", onViewerRendered);
-            },
-        };
-    }
-    // eslint-disable-next-line babylonjs/available
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._viewerAttachment?.dispose();
-        this._viewerAttachment = null;
-        this._internals.states?.add("invalid");
-    }
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    render() {
-        return x ` <slot></slot> `;
-    }
-};
-// eslint-disable-next-line @typescript-eslint/naming-convention, jsdoc/require-jsdoc
-HTML3DAnnotationElement.styles = i$3 `
-        :host {
-            display: inline-block;
-            position: absolute;
-            transition: opacity 0.25s;
-        }
-        :host([hidden]) {
-            display: none;
-        }
-        :host(:state(back-facing)) {
-            opacity: 0.2;
-        }
-        :host(:state(invalid)) {
-            display: none;
-        }
-    `;
-__decorate([
-    n({ attribute: "hotspot" })
-], HTML3DAnnotationElement.prototype, "hotSpot", void 0);
-HTML3DAnnotationElement = __decorate([
-    t("babylon-viewer-annotation")
-], HTML3DAnnotationElement);
-
-export { HTML3DAnnotationElement, HTML3DElement, Viewer, ViewerHotSpotResult, createViewerForCanvas };
-//# sourceMappingURL=index.js.map