@preference-sl/pref-viewer 2.11.0-beta.11 → 2.11.0-beta.12

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.11",
+  "version": "2.11.0-beta.12",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
-    "copy-css": "cpx \"src/css/**/*\" dist/css/",
     "release": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
     "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-    "build": "npm run copy-css && esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/bundle.js --sourcemap",
+    "build": "esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/bundle.js --sourcemap",
     "start": "npm run build && http-server -c-1 . -p 8080",
     "test": "vitest"
   },
@@ -31,7 +30,6 @@
   "sideEffects": false,
   "files": [
     "src",
-    "src/css",
     "index.d.ts"
   ],
   "dependencies": {
@@ -46,7 +44,6 @@
     "jszip": "^3.10.1"
   },
   "devDependencies": {
-    "cpx": "^1.5.0",
     "esbuild": "^0.25.10",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",

package/src/babylonjs-animation-controller.js

@@ -1,6 +1,7 @@
 import { Color3, HighlightLayer, Mesh, PickingInfo, PointerEventTypes, Scene } from "@babylonjs/core";
 import { AdvancedDynamicTexture } from "@babylonjs/gui";
-import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+import { PrefViewerColors } from "./styles.js";
+import OpeningAnimation from "./babylonjs-animation-opening.js";
 
 /**
  * BabylonJSAnimationController - Manages animation playback and interactive highlighting for model containers in Babylon.js scenes.
@@ -21,7 +22,7 @@ export default class BabylonJSAnimationController {
     #scene = null;
     #animatedNodes = [];
     #highlightLayer = null;
-    #highlightColor = new Color3(0, 1, 0); // Color para resaltar los elementos animados (Verde)
+    #highlightColor = Color3.FromHexString(PrefViewerColors.primary);
     #advancedDynamicTexture = null;
     #openingAnimations = [];
 

package/src/babylonjs-animation-opening-menu.js

@@ -1,5 +1,6 @@
 import { AdvancedDynamicTexture, Button, Control, Image, Slider, StackPanel } from "@babylonjs/gui";
-import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+import OpeningAnimation from "./babylonjs-animation-opening.js";
+import { PrefViewerColors } from "./styles.js";
 
 /**
  * OpeningAnimationMenu - Manages and renders the animation control menu for opening/closing animations in a Babylon.js scene.
@@ -42,7 +43,7 @@ import { OpeningAnimation } from "./babylonjs-animation-opening.js";
  *  menu.animationProgress = 0.5;
  *  menu.animationLoop = true;
  */
-export class OpeningAnimationMenu {
+export default class OpeningAnimationMenu {
     #animationState = OpeningAnimation.states.closed;
     #animationProgress = 0;
     #animationLoop = false;
@@ -57,7 +58,7 @@ export class OpeningAnimationMenu {
     // Style properties
     #buttonSize = 28;
     #buttonLoopPaddingLeft = 3;
-    #colorActive = "#6BA53A";
+    #colorActive = PrefViewerColors.primary;
     #colorEnabled = "#333333";
     #colorDisabled = "#777777";
     #colorIcon = "#FFFFFF";

package/src/babylonjs-animation-opening.js

@@ -1,5 +1,5 @@
 import { AdvancedDynamicTexture } from "@babylonjs/gui";
-import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
+import OpeningAnimationMenu from "./babylonjs-animation-opening-menu.js";
 
 /**
  * OpeningAnimation - Manages open/close animations for a model part (e.g., a door) in a Babylon.js scene.
@@ -48,7 +48,7 @@ import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
  *  anim.showControls(adt);
  *  anim.hideControls();
  */
-export class OpeningAnimation {
+export default class OpeningAnimation {
     static states = {
         paused: 0,
         closed: 1,

package/src/index.js

@@ -1,7 +1,8 @@
-import { PrefViewer2D } from "./pref-viewer-2d.js";
-import { PrefViewer3D } from "./pref-viewer-3d.js";
-import { PrefViewerDialog } from "./pref-viewer-dialog.js";
-import { PrefViewerTask } from "./pref-viewer-task.js";
+import PrefViewer2D from "./pref-viewer-2d.js";
+import PrefViewer3D from "./pref-viewer-3d.js";
+import PrefViewerDialog from "./pref-viewer-dialog.js";
+import PrefViewerTask from "./pref-viewer-task.js";
+import { PrefViewerStyles } from "./styles.js";
 
 /**
  * PrefViewer - Custom Web Component for advanced 2D and 3D product visualization and configuration.
@@ -133,7 +134,7 @@ class PrefViewer extends HTMLElement {
                 if (_old === value || value.toLowerCase() === this.#mode) {
                     return;
                 }
-                this.setMode(value.toLowerCase());
+                this.setMode(value);
                 break;
             case "model":
                 this.loadModel(value);
@@ -173,8 +174,7 @@ class PrefViewer extends HTMLElement {
         this.shadowRoot.append(this.#wrapper);
 
         const style = document.createElement("style");
-        const cssUrl = new URL("./css/pref-viewer.css", import.meta.url);
-        style.textContent = `@import "${cssUrl}";`;
+        style.textContent = PrefViewerStyles;
         this.shadowRoot.append(style);
 
         this.#createComponent3D();
@@ -503,6 +503,7 @@ class PrefViewer extends HTMLElement {
      * @returns {void}
      */
     setMode(mode = this.#mode) {
+        mode = mode.toLowerCase();
         if (mode !== "2d" && mode !== "3d") {
             console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
             mode = this.#mode;

package/src/pref-viewer-2d.js

@@ -1,5 +1,6 @@
 import SVGResolver from "./svg-resolver.js";
 import PanzoomController from "./panzoom-controller.js";
+import { PrefViewer2DStyles } from "./styles.js";
 
 /**
  * PrefViewer2D - Custom element for rendering and interacting with 2D SVG content.
@@ -46,7 +47,7 @@ import PanzoomController from "./panzoom-controller.js";
  * Notes on extensibility
  *  - Modeled for easy addition of other input sources or interaction modes (e.g., selection callbacks).
  */
-export class PrefViewer2D extends HTMLElement {
+export default class PrefViewer2D extends HTMLElement {
     // State flags
     #isInitialized = false;
     #isLoaded = false;
@@ -143,9 +144,9 @@ export class PrefViewer2D extends HTMLElement {
     #createDOMElements() {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
+        
         const style = document.createElement("style");
-        const cssUrl = new URL("./css/pref-viewer-2d.css", import.meta.url);
-        style.textContent = `@import "${cssUrl}";`;
+        style.textContent = PrefViewer2DStyles;
         this.append(style);
     }
 

package/src/pref-viewer-3d.js

@@ -1,5 +1,6 @@
 import { CameraData, ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSController from "./babylonjs-controller.js";
+import { PrefViewer3DStyles } from "./styles.js";
 
 /**
  * PrefViewer3D - Custom Web Component for interactive 3D visualization and configuration.
@@ -56,7 +57,7 @@ import BabylonJSController from "./babylonjs-controller.js";
  *  - Designed for extensibility and integration in product configurators and visualization tools.
  *  - All resource management and rendering operations are performed asynchronously for performance.
  */
-export class PrefViewer3D extends HTMLElement {
+export default class PrefViewer3D extends HTMLElement {
     // State flags
     #isInitialized = false;
     #isLoaded = false;
@@ -157,11 +158,12 @@ export class PrefViewer3D extends HTMLElement {
     #createDOMElements() {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
+
         this.#canvas = document.createElement("canvas");
         this.#wrapper.appendChild(this.#canvas);
+        
         const style = document.createElement("style");
-        const cssUrl = new URL("./css/pref-viewer-3d.css", import.meta.url);
-        style.textContent = `@import "${cssUrl}";`;
+        style.textContent = PrefViewer3DStyles;
         this.append(style);
     }
 
@@ -461,6 +463,7 @@ export class PrefViewer3D extends HTMLElement {
     show() {
         this.#isVisible = true;
         this.setAttribute("visible", "true");
+        this.#canvas.focus();
     }
 
     /**

package/src/pref-viewer-dialog.js

@@ -1,3 +1,5 @@
+import { PrefViewerDialogStyles } from "./styles.js";
+
 /**
  * PrefViewerDialog - Custom Web Component for displaying modal dialogs in PrefViewer.
  *
@@ -20,7 +22,7 @@
  *  - close(): Hides and removes the dialog, refocuses the canvas if available.
  *  - #createDOMElements(): Creates the dialog structure and applies styles.
  */
-export class PrefViewerDialog extends HTMLElement {
+export default class PrefViewerDialog extends HTMLElement {
     #wrapper = null;
     #header = null;
     #content = null;
@@ -68,8 +70,7 @@ export class PrefViewerDialog extends HTMLElement {
         this.append(this.#wrapper);
 
         const style = document.createElement("style");
-        const cssUrl = new URL("./css/pref-viewer-dialog.css", import.meta.url);
-        style.textContent = `@import "${cssUrl}";`;
+        style.textContent = PrefViewerDialogStyles;
         this.append(style);
 
         this.addEventListener("click", this.#closeOnBackdropClick.bind(this));
@@ -132,7 +133,6 @@ export class PrefViewerDialog extends HTMLElement {
                     component2D.focus();
                 }
             }
-
         }
         this.#wrapper = this.#header = this.#content = this.#footer = null;
         this.remove();

package/src/pref-viewer-task.js

@@ -18,7 +18,7 @@
  *  - Validates the type (case-insensitive) and throws a TypeError if invalid.
  *  - Freezes the instance to prevent further modification.
  */
-export class PrefViewerTask {
+export default class PrefViewerTask {
     static Types = Object.freeze({
         Config: "config",
         Drawing: "drawing",

package/src/styles.js

@@ -0,0 +1,196 @@
+export const PrefViewerColors = {
+    primary: "#ff6700", // Always specify in hexadecimal
+};
+
+export const PrefViewerStyles = `
+    :host .pref-viewer-wrapper {
+        display: grid !important;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        grid-gap: 0;
+        min-width: 0; 
+        min-height: 0;
+    }
+`;
+
+export const PrefViewer2DStyles = `
+    pref-viewer-2d {
+        --pref-viewer-2d-bg-color: #ffffff;
+        --pref-viewer-2d-svg-padding: 10px;
+    }
+
+    pref-viewer-2d[visible="true"] {
+        display: block;
+    }
+
+    pref-viewer-2d[visible="false"] {
+        display: none;
+    }
+
+    pref-viewer-2d {
+        grid-column: 1;
+        grid-row: 1;
+        overflow: hidden;
+        min-width: 0; 
+        min-height: 0;
+        align-self: stretch;
+        justify-self: stretch;
+        background: var(--pref-viewer-2d-bg-color);
+    }
+
+    pref-viewer-2d,
+    pref-viewer-2d>div,
+    pref-viewer-2d>div>svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: relative;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    pref-viewer-2d>div>svg {
+        padding: var(--pref-viewer-2d-svg-padding);
+    }
+`;
+
+export const PrefViewer3DStyles = `
+    pref-viewer-3d[visible="true"] {
+        display: block;
+    }
+
+    pref-viewer-3d[visible="false"] {
+        display: none;
+    }
+
+    pref-viewer-3d {
+        grid-column: 1;
+        grid-row: 1;
+        overflow: hidden;
+        min-width: 0; 
+        min-height: 0;
+        align-self: stretch;
+        justify-self: stretch;
+    }
+
+    pref-viewer-3d,
+    pref-viewer-3d>div,
+    pref-viewer-3d>div>canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: relative;
+        outline: none;
+        box-sizing: border-box;
+    }
+`;
+
+export const PrefViewerDialogStyles = `
+    pref-viewer-dialog {
+        --color-primary: ${PrefViewerColors.primary};
+        --dialog-general-space: 16px;
+        --dialog-bg-color: #ffffff;
+        --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
+        --dialog-border-color: #e7e7e7;
+        --dialog-border-radius: 8px;
+        --dialog-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+        --button-default-bg-color: #bbbbbb;
+        --button-default-bg-color-hover: #a1a1a1;
+        --button-primary-bg-color: color-mix(in oklab, var(--color-primary), white 25%);
+        --button-primary-bg-color-hover: var(--color-primary);
+        --button-border-radius: 4px;
+        --button-padding-horizontal: 16px;
+        --button-padding-vertical: 8px;
+    }
+
+    pref-viewer-dialog:not {
+        display: none;
+    }
+
+    pref-viewer-dialog[open] {
+        font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+        grid-row: 1;
+        grid-column: 1;
+        overflow: hidden;
+        min-width: 0; 
+        min-height: 0;
+        align-self: stretch;
+        justify-self: stretch;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--dialog-backdrop-color);
+        position: relative;
+        z-index: 1000;
+    }
+
+    pref-viewer-dialog>.dialog-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        background: var(--dialog-bg-color);
+        border: 1px solid var(--dialog-border-color);
+        border-radius: var(--dialog-border-radius);
+        box-shadow: var(--dialog-box-shadow);
+        padding: 0;
+        min-width: 320px;
+        max-width: 90%;
+        max-height: 90%;
+        overflow: auto;
+    }
+
+    pref-viewer-dialog .dialog-header {
+        padding: var(--dialog-general-space);
+        border-bottom: 1px solid var(--dialog-border-color);
+    }
+
+    pref-viewer-dialog .dialog-header h3 {
+        margin: 0;
+        font-weight: 500;
+        font-size: 1.1em;
+    }
+
+    pref-viewer-dialog .dialog-content {
+        padding: var(--dialog-general-space);
+    }
+
+    pref-viewer-dialog .dialog-content h4 {
+        margin: 0;
+        font-weight: 500;
+        font-size: 1.05em;
+    }
+
+    pref-viewer-dialog .dialog-footer {
+        border-top: 1px solid var(--dialog-border-color);
+        padding: var(--dialog-general-space);
+        display: flex;
+        gap: var(--dialog-general-space);
+        justify-content: stretch;
+    }
+
+    pref-viewer-dialog .dialog-footer button {
+        width: 100%;
+        font-size: 1em;
+        padding: var(--button-padding-vertical) var(--button-padding-horizontal);
+        border-radius: var(--button-border-radius);
+        border: none;
+        background: var(--button-default-bg-color);
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    pref-viewer-dialog .dialog-footer button.primary {
+        background: var(--button-primary-bg-color);
+    }
+
+    pref-viewer-dialog .dialog-footer button:hover {
+        background: var(--button-default-bg-color-hover);
+    }
+
+    pref-viewer-dialog .dialog-footer button.primary:hover {
+        background: var(--button-primary-bg-color-hover);
+    }
+`;

package/src/css/pref-viewer-2d.css

@@ -1,39 +0,0 @@
-/* Variables */
-pref-viewer-2d {
-    --pref-viewer-2d-bg-color: #ffffff;
-    --pref-viewer-2d-svg-padding: 10px;
-}
-
-pref-viewer-2d[visible="true"] {
-    display: block;
-}
-
-pref-viewer-2d[visible="false"] {
-    display: none;
-}
-
-pref-viewer-2d {
-    grid-column: 1;
-    grid-row: 1;
-    overflow: hidden;
-    min-width: 0; 
-    min-height: 0;
-    align-self: stretch;
-    justify-self: stretch;
-    background: var(--pref-viewer-2d-bg-color);
-}
-
-pref-viewer-2d,
-pref-viewer-2d>div,
-pref-viewer-2d>div>svg {
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: relative;
-    outline: none;
-    box-sizing: border-box;
-}
-
-pref-viewer-2d>div>svg {
-    padding: var(--pref-viewer-2d-svg-padding);
-}

package/src/css/pref-viewer-3d.css

@@ -1,28 +0,0 @@
-pref-viewer-3d[visible="true"] {
-    display: block;
-}
-
-pref-viewer-3d[visible="false"] {
-    display: none;
-}
-
-pref-viewer-3d {
-    grid-column: 1;
-    grid-row: 1;
-    overflow: hidden;
-    min-width: 0; 
-    min-height: 0;
-    align-self: stretch;
-    justify-self: stretch;
-}
-
-pref-viewer-3d,
-pref-viewer-3d>div,
-pref-viewer-3d>div>canvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: relative;
-    outline: none;
-    box-sizing: border-box;
-}

package/src/css/pref-viewer-dialog.css

@@ -1,105 +0,0 @@
-/* Variables */
-pref-viewer-dialog {
-    --brand-color: #ff6700;
-    --dialog-general-space: 16px;
-    --dialog-bg-color: #ffffff;
-    --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
-    --dialog-border-color: #e7e7e7;
-    --dialog-border-radius: 8px;
-    --dialog-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
-    --button-default-bg-color: #bbbbbb;
-    --button-default-bg-color-hover: #a1a1a1;
-    --button-primary-bg-color: color-mix(in oklab, var(--brand-color), white 25%);
-    --button-primary-bg-color-hover: var(--brand-color);
-    --button-border-radius: 4px;
-    --button-padding-horizontal: 16px;
-    --button-padding-vertical: 8px;
-}
-
-pref-viewer-dialog:not {
-    display: none;
-}
-
-pref-viewer-dialog[open] {
-    font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-    grid-row: 1;
-    grid-column: 1;
-    overflow: hidden;
-    min-width: 0; 
-    min-height: 0;
-    align-self: stretch;
-    justify-self: stretch;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--dialog-backdrop-color);
-    position: relative;
-    z-index: 1000;
-}
-
-pref-viewer-dialog>.dialog-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    background: var(--dialog-bg-color);
-    border: 1px solid var(--dialog-border-color);
-    border-radius: var(--dialog-border-radius);
-    box-shadow: var(--dialog-box-shadow);
-    padding: 0;
-    min-width: 320px;
-    max-width: 90%;
-    max-height: 90%;
-    overflow: auto;
-}
-
-pref-viewer-dialog .dialog-header {
-    padding: var(--dialog-general-space);
-    border-bottom: 1px solid var(--dialog-border-color);
-}
-
-pref-viewer-dialog .dialog-header h3 {
-    margin: 0;
-    font-weight: 500;
-    font-size: 1.1em;
-}
-
-pref-viewer-dialog .dialog-content {
-    padding: var(--dialog-general-space);
-}
-
-pref-viewer-dialog .dialog-content h4 {
-    margin: 0;
-    font-weight: 500;
-    font-size: 1.05em;
-}
-
-pref-viewer-dialog .dialog-footer {
-    border-top: 1px solid var(--dialog-border-color);
-    padding: var(--dialog-general-space);
-    display: flex;
-    gap: var(--dialog-general-space);
-    justify-content: stretch;
-}
-
-pref-viewer-dialog .dialog-footer button {
-    width: 100%;
-    font-size: 1em;
-    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
-    border-radius: var(--button-border-radius);
-    border: none;
-    background: var(--button-default-bg-color);
-    cursor: pointer;
-    transition: background 0.2s;
-}
-
-pref-viewer-dialog .dialog-footer button.primary {
-    background: var(--button-primary-bg-color);
-}
-
-pref-viewer-dialog .dialog-footer button:hover {
-    background: var(--button-default-bg-color-hover);
-}
-
-pref-viewer-dialog .dialog-footer button.primary:hover {
-    background: var(--button-primary-bg-color-hover);
-}

package/src/css/pref-viewer.css

@@ -1,11 +0,0 @@
-:host .pref-viewer-wrapper {
-    display: grid !important;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    grid-gap: 0;
-    min-width: 0; 
-    min-height: 0;
-}