@3cr/viewer-browser 0.0.200 → 0.0.246

package/public/safari-pinned-tab.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2939 6958 c-1 -7 -2 -337 -3 -733 -1 -470 -5 -719 -11 -718 -11 1
+-440 111 -560 143 -147 39 -391 102 -405 105 -14 3 -202 52 -437 113 l-111 30
+-4 -22 c-1 -11 -3 -333 -2 -713 0 -381 -3 -693 -7 -693 -7 0 -296 76 -454 119
+-138 38 -810 213 -832 217 -12 2 -34 9 -48 14 -15 6 -28 10 -31 10 -2 0 -3
+-840 -2 -1867 l3 -1867 65 -19 c141 -40 359 -104 405 -118 35 -11 267 -78 310
+-89 17 -5 71 -20 120 -35 50 -14 104 -30 120 -34 17 -5 134 -39 260 -76 127
+-37 244 -70 260 -75 17 -4 156 -44 310 -89 154 -45 492 -143 750 -217 259 -75
+597 -173 752 -218 l282 -83 -2 919 c-1 505 -1 918 0 918 2 0 67 -18 145 -41
+79 -22 166 -47 193 -54 28 -7 84 -23 125 -35 41 -12 82 -23 90 -25 8 -2 125
+-36 260 -74 135 -39 248 -71 252 -71 3 0 6 412 7 916 0 504 1 917 3 919 2 1
+55 -13 118 -32 202 -61 302 -91 445 -133 162 -48 315 -94 400 -120 33 -10 70
+-21 83 -25 l22 -6 -2 1548 -3 1548 -155 43 c-85 23 -195 53 -245 67 -49 13
+-216 58 -370 100 -154 42 -287 78 -295 80 -8 2 -42 11 -75 20 -33 9 -82 23
+-110 30 -125 34 -335 90 -495 134 -96 27 -287 79 -425 116 -137 37 -295 79
+-350 95 -173 48 -330 90 -337 90 -5 0 -8 -6 -9 -12z m981 -1008 c85 -23 184
+-50 220 -60 36 -10 108 -30 160 -44 239 -64 554 -149 640 -172 52 -14 104 -29
+116 -34 l21 -8 0 -769 c0 -422 -1 -771 -3 -775 -2 -3 -52 9 -112 27 -59 18
+-133 40 -164 49 l-58 17 -1 62 c0 34 0 227 0 428 l0 366 -87 22 c-48 12 -154
+39 -237 60 -82 22 -231 60 -330 86 -349 90 -409 106 -412 109 -3 3 -5 402 -4
+618 l1 87 48 -14 c26 -7 117 -32 202 -55z m-1632 -1036 c75 -19 225 -58 332
+-86 107 -27 222 -57 255 -65 l61 -15 0 -339 c0 -198 -4 -339 -9 -339 -5 0 -37
+7 -71 16 -33 9 -68 18 -76 20 -8 2 -73 19 -145 38 -71 19 -211 55 -310 81 -99
+26 -182 48 -183 50 -2 2 -4 133 -4 292 1 366 1 383 7 383 3 0 67 -16 143 -36z
+m1447 -374 c11 -5 43 -13 70 -20 28 -6 85 -20 128 -32 78 -20 78 -20 74 -52
+-4 -36 -4 -36 -117 -1 -41 13 -108 33 -147 45 -69 20 -73 23 -73 49 0 25 3 28
+23 24 12 -2 31 -8 42 -13z m-2845 -694 c52 -13 149 -39 215 -56 66 -17 143
+-37 170 -45 28 -8 68 -19 91 -24 l40 -11 1 -590 c0 -324 1 -592 4 -594 3 -3
+926 -268 979 -281 8 -2 65 -18 125 -35 61 -17 124 -35 140 -40 17 -4 68 -20
+115 -33 47 -14 103 -30 125 -36 l41 -11 -1 -529 c0 -291 -3 -532 -6 -535 -3
+-3 -19 -2 -35 3 -16 5 -164 48 -329 96 -165 47 -406 117 -535 155 -129 37
+-332 96 -450 130 -118 34 -260 75 -314 92 -55 16 -109 32 -120 34 -12 2 -102
+28 -201 57 l-180 53 -2 1118 c-1 1034 0 1116 15 1112 10 -3 60 -16 112 -30z
+m2910 -147 c36 -11 89 -27 118 -35 99 -26 89 38 88 -568 -1 -294 -4 -537 -7
+-541 -6 -5 -315 78 -326 88 -3 4 -6 810 -3 1059 l0 37 33 -10 c17 -6 61 -19
+97 -30z m-1270 -284 c118 -31 256 -67 307 -81 50 -13 93 -24 95 -24 2 0 4
+-102 3 -227 0 -143 -4 -228 -10 -227 -11 1 -778 217 -783 220 -3 2 -5 264 -3
+400 l1 42 88 -23 c48 -13 184 -48 302 -80z"/>
+</g>
+</svg>

package/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

package/src/App.vue

@@ -1,84 +1,92 @@
 <template>
-  <div data-vuetify>
-    <v-app style="height: 0; width: 0">
-      <MftpWebGL3DRModal
-        ref="mftpWebGL3DRModal"
-        :payload="payload"
-        :options="options"
-      />
-    </v-app>
-    <Notifications />
-  </div>
+  <MftpWebGL3DRModal v-if="show" ref="mftpWebGL3DRModal" :payload="payload" :options="options" />
+  <DemoLicenceInfoModal v-model:modal="m_demoLicence" />
+  <DemoLicenceShareToMobileModal v-model:modal="m_demoLicenceShareToMobile" />
+  <DemoLicenceSendToPartyModal v-model:modal="m_demoLicenceSendToParty" />
+  <DemoLicenceEnableCloudStorageModal v-model:modal="m_demoLicenseEnableCloudStorage" />
+  <DemoPatientInfoModal v-model:modal="m_demoPatient" />
+  <DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
+  <DemoPatientSendToPartyModal v-model:modal="m_demoPatientSendToParty" />
+  <DemoPatientEnableCloudStorageModal v-model:modal="m_demoPatientEnableCloudStorage" />
+  <Notifications />
+  <update-snackbar />
 </template>
 
 <script setup lang="ts">
-import MftpWebGL3DRModal from "@/components/modal/MftpWebGL3DRModal.vue";
-import { nextTick, ref, unref } from "vue";
-import { Notifications } from "@kyvg/vue3-notification";
-import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+import { ref } from 'vue';
+import { Notifications } from '@kyvg/vue3-notification';
+import { defaultLoadViewerPayload, LoadViewerPayload } from '@/models/loadViewerPayload';
+import { defaultLoadViewerOptions, LoadViewerOptions } from '@/models/loadViewerOptions';
 import {
-  defaultLoadViewerOptions,
-  LoadViewerOptions,
-} from "@/models/LoadViewerOptions";
-import { isDemo } from "@/components/demo/options";
-import LogRocket from "logrocket";
+  isDemo,
+  m_demoLicence,
+  m_demoLicenceSendToParty,
+  m_demoLicenceShareToMobile,
+  m_demoLicenseEnableCloudStorage,
+  m_demoPatient,
+  m_demoPatientEnableCloudStorage,
+  m_demoPatientSendToParty,
+  m_demoPatientShareToMobile,
+  show
+} from '@/components/demo/options';
+import MftpWebGL3DRModal from '@/components/modal/MftpWebGL3DRModal.vue';
+import LogRocket from 'logrocket';
 
 if (isDemo.value) {
-  LogRocket.init("qfib9l/3crviewer-browser");
+  LogRocket.init('qfib9l/3crviewer-browser');
 }
 
-const payload = ref<LoadViewerPayload>({
-  Url: "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl",
-  DecryptionKey: {
-    Iv: "XEloSh+OcO7TG77au6HjPw==",
-    Key: "KUc722X1y4w42M+jCf9a3+6EGz66z7UMWK3m2aMqGxM=",
-  },
-});
-
+const payload = ref<LoadViewerPayload>(defaultLoadViewerPayload);
 const options = ref<LoadViewerOptions>(defaultLoadViewerOptions);
+const mftpWebGL3DRModal = ref<typeof MftpWebGL3DRModal>();
 
-const mftpWebGL3DRModal = ref<typeof MftpWebGL3DRModal | null>(null);
-
-async function loadInstance(
-  payloadIncoming: LoadViewerPayload | undefined,
-  optionsIncoming: LoadViewerOptions
-) {
+async function loadInstance(payloadIncoming: LoadViewerPayload | undefined, optionsIncoming: LoadViewerOptions) {
   payload.value = payloadIncoming || payload.value;
   options.value = optionsIncoming;
-
-  await nextTick();
-  unref(mftpWebGL3DRModal)?.alterValue(true);
 }
 
 async function loadSession(url: string): Promise<void> {
-  await unref(mftpWebGL3DRModal)?.loadSession(url);
+  await mftpWebGL3DRModal.value?.loadSession(url);
 }
 
-defineExpose({
-  loadInstance,
-  loadSession,
-});
+async function close(): Promise<void> {
+  await mftpWebGL3DRModal.value?.close();
+}
+
+defineExpose({ loadInstance, loadSession, close });
 </script>
 
 <style>
 .material-icons-outlined,
 .material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
 }
 .material-icons,
 .material-symbols {
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24;
 }
 .material-icons-filled,
 .material-symbols-filled {
-  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24 !important;
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 24 !important;
 }
 .overflow-y-scroll {
   overflow-y: scroll;
 }
 .material-icons-outlined,
 .material-icons {
-  font-family: "Material Symbols Outlined" !important;
+  font-family: 'Material Symbols Outlined' !important;
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
@@ -89,15 +97,12 @@ defineExpose({
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: "liga";
+  -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
 .transparent {
   background-color: transparent;
 }
-.v-dialog.v-overlay--active:not(.v-tooltip) {
-  backdrop-filter: blur(4px);
-}
 .card-bg-border {
   border-radius: 12px !important;
   border: 2px #ffffffaa solid;

package/src/__tests__/app.spec.ts

@@ -1,15 +1,14 @@
-import { expect, describe, it } from "vitest";
-import { shallowMountVuetify } from "~/helper";
-import App from "@/App.vue";
+import { shallowMount } from '@vue/test-utils';
+import App from '@/App.vue';
 
-const wrapper = shallowMountVuetify(App);
-
-describe("App.vue", () => {
-  it("should inflate component", () => {
+describe('App.vue', () => {
+  it('should inflate component', () => {
+    const wrapper = shallowMount(App);
     expect(wrapper).toBeTruthy();
   });
 
-  it("should loadScan", async () => {
+  it('should loadScan', async () => {
+    const wrapper = shallowMount(App);
     await wrapper.vm.loadInstance(undefined, {});
     expect(wrapper).toBeTruthy();
   });

package/{__tests__/index.spec.ts → src/__tests__/main.spec.ts}

@@ -1,5 +1,4 @@
-import { describe, expect, it } from "vitest";
-import {ejectViewer, loadSession, loadViewer, registerViewer} from "../index";
+import { ejectViewer, loadSession, loadViewer, registerViewer } from '@/main';
 
 describe('index tests', () => {
   const errorMessage = 'Please call `registerViewer(version: string)` first';
@@ -13,22 +12,22 @@ describe('index tests', () => {
   });
 
   it('should resolve loadViewer', async () => {
-    await registerViewer("1.0.0");
+    await registerViewer(document.body, '1.0.0');
     expect(loadViewer()).resolves.not.toThrow(errorMessage);
   });
 
   it('should resolve loadSession 3crds url', async () => {
-    await registerViewer("1.0.0");
+    await registerViewer(document.body, '1.0.0');
     expect(loadSession('https://localhost/example.3crds')).resolves.not.toThrow(errorMessage);
   });
 
   it('should resolve loadSession 3crms url', async () => {
-    await registerViewer("1.0.0");
+    await registerViewer(document.body, '1.0.0');
     expect(loadSession('https://localhost/example.3crms')).resolves.not.toThrow(errorMessage);
   });
 
   it('should resolve loadSession 3crs url', async () => {
-    await registerViewer("1.0.0");
+    await registerViewer(document.body, '1.0.0');
     expect(loadSession('https://localhost/example.3crs')).resolves.not.toThrow(errorMessage);
   });
 

package/src/assets/logos/3dicom/white-mini.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 130 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="paint0_linear_184_3640" x1="97.4467" y1="10.5294" x2="85.8199" y2="69.4832" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.8"/>
+      <stop offset="1" stop-color="white" stop-opacity="0.5"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_184_3640" x1="68.472" y1="34.3899" x2="55.5909" y2="102.885" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.8"/>
+      <stop offset="1" stop-color="white" stop-opacity="0.5"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_184_3640" x1="41.2011" y1="58.2533" x2="26.3355" y2="135.999" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.8"/>
+      <stop offset="1" stop-color="white" stop-opacity="0.5"/>
+    </linearGradient>
+  </defs>
+  <path d="M121.308 23.4829L73.585 10.5294V61.048L121.308 75.2969V23.4829Z" stroke="url(#paint0_linear_184_3640)" stroke-width="16" transform="matrix(1, 0, 0, 1, 0, 7.105427357601002e-15)"/>
+  <path d="M97.447 49.3887L39.4971 34.3899V92.8852L97.447 109.384V49.3887Z" stroke="url(#paint1_linear_184_3640)" stroke-width="16" transform="matrix(1, 0, 0, 1, 0, 7.105427357601002e-15)"/>
+  <path d="M73.5849 75.2974L8.81738 58.2533V124.725L73.5849 143.474V75.2974Z" stroke="url(#paint2_linear_184_3640)" stroke-width="16" transform="matrix(1, 0, 0, 1, 0, 7.105427357601002e-15)"/>
+</svg>

package/src/assets/logos/3dicom/white.svg

@@ -0,0 +1,30 @@
+<svg width="498" height="155" viewBox="0 0 498 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M121.308 23.4829L73.585 10.5294V61.048L121.308 75.2969V23.4829Z" stroke="url(#paint0_linear_184_3640)" stroke-width="16"/>
+<path d="M97.447 49.3887L39.4971 34.3899V92.8852L97.447 109.384V49.3887Z" stroke="url(#paint1_linear_184_3640)" stroke-width="16"/>
+<path d="M73.5849 75.2974L8.81738 58.2533V124.725L73.5849 143.474V75.2974Z" stroke="url(#paint2_linear_184_3640)" stroke-width="16"/>
+<g clip-path="url(#clip0_184_3640)">
+<path d="M428.03 110.332V43.6685H441.452L466.418 76.7767H460.154L484.404 43.6685H497.826V110.332H483.956V58.9699L489.504 60.2226L463.823 93.3307H462.033L437.247 60.2226L441.9 58.9699V110.332H428.03Z" fill="white"/>
+<path d="M386.427 111.406C381.416 111.406 376.763 110.541 372.468 108.811C368.173 107.081 364.415 104.665 361.193 101.563C358.032 98.401 355.556 94.7323 353.766 90.5565C351.977 86.3807 351.082 81.847 351.082 76.9553C351.082 72.0637 351.947 67.5299 353.677 63.3541C355.467 59.1783 357.942 55.5394 361.104 52.4374C364.325 49.3354 368.083 46.9194 372.379 45.1894C376.674 43.4594 381.357 42.5944 386.427 42.5944C391.498 42.5944 396.181 43.4594 400.476 45.1894C404.771 46.9194 408.499 49.3354 411.661 52.4374C414.882 55.5394 417.358 59.1783 419.088 63.3541C420.878 67.5299 421.772 72.0637 421.772 76.9553C421.772 81.847 420.878 86.3807 419.088 90.5565C417.298 94.7323 414.793 98.401 411.572 101.563C408.41 104.665 404.681 107.081 400.386 108.811C396.091 110.541 391.438 111.406 386.427 111.406ZM386.427 98.8783C389.47 98.8783 392.273 98.3414 394.838 97.2676C397.463 96.1938 399.76 94.7025 401.729 92.7935C403.697 90.8249 405.218 88.4984 406.292 85.814C407.366 83.1295 407.903 80.1766 407.903 76.9553C407.903 73.734 407.366 70.8109 406.292 68.1861C405.218 65.5017 403.697 63.1752 401.729 61.2066C399.76 59.238 397.463 57.7466 394.838 56.7325C392.273 55.6587 389.47 55.1218 386.427 55.1218C383.385 55.1218 380.551 55.6587 377.926 56.7325C375.361 57.7466 373.094 59.238 371.126 61.2066C369.157 63.1752 367.636 65.5017 366.562 68.1861C365.489 70.8109 364.952 73.734 364.952 76.9553C364.952 80.1766 365.489 83.1295 366.562 85.814C367.636 88.4984 369.157 90.8249 371.126 92.7935C373.094 94.7025 375.361 96.1938 377.926 97.2676C380.551 98.3414 383.385 98.8783 386.427 98.8783Z" fill="white"/>
+<path d="M319.185 111.406C314.413 111.406 309.968 110.541 305.852 108.811C301.796 107.081 298.246 104.665 295.204 101.563C292.162 98.4609 289.775 94.822 288.046 90.6462C286.375 86.4704 285.54 81.9068 285.54 76.9555C285.54 72.0042 286.375 67.4406 288.046 63.2648C289.716 59.0294 292.072 55.3905 295.115 52.3481C298.157 49.2461 301.706 46.8599 305.763 45.1896C309.879 43.4596 314.353 42.5946 319.185 42.5946C324.017 42.5946 328.342 43.3999 332.16 45.0106C336.037 46.6213 339.318 48.7688 342.003 51.4533C344.687 54.1377 346.596 57.1204 347.73 60.4014L335.471 66.3072C334.337 63.0859 332.339 60.4312 329.475 58.3433C326.672 56.1958 323.242 55.122 319.185 55.122C315.248 55.122 311.788 56.0467 308.805 57.8959C305.823 59.7452 303.496 62.3104 301.826 65.5913C300.215 68.8127 299.41 72.6007 299.41 76.9555C299.41 81.3103 300.215 85.1281 301.826 88.4091C303.496 91.6901 305.823 94.2552 308.805 96.1045C311.788 97.9538 315.248 98.8785 319.185 98.8785C323.242 98.8785 326.672 97.8345 329.475 95.7466C332.339 93.599 334.337 90.9146 335.471 87.6933L347.73 93.599C346.596 96.88 344.687 99.8627 342.003 102.547C339.318 105.232 336.037 107.379 332.16 108.99C328.342 110.601 324.017 111.406 319.185 111.406Z" fill="white"/>
+<path d="M265.397 110.332V43.6685H279.267V110.332H265.397Z" fill="white"/>
+<path d="M202.827 110.332V43.6685H224.571C231.789 43.6685 238.053 45.1002 243.362 47.9636C248.671 50.827 252.788 54.7642 255.711 59.7752C258.634 64.7861 260.095 70.513 260.095 76.9556C260.095 83.3983 258.634 89.1549 255.711 94.2255C252.788 99.2365 248.671 103.174 243.362 106.037C238.053 108.9 231.789 110.332 224.571 110.332H202.827ZM216.697 98.2522H224.929C229.284 98.2522 233.042 97.3872 236.204 95.6573C239.365 93.8676 241.811 91.392 243.541 88.2303C245.331 85.009 246.226 81.2507 246.226 76.9556C246.226 72.6009 245.331 68.8426 243.541 65.681C241.811 62.5193 239.365 60.0735 236.204 58.3435C233.042 56.6135 229.284 55.7485 224.929 55.7485H216.697V98.2522Z" fill="white"/>
+<path d="M171.839 111.406C168.14 111.406 164.62 110.72 161.28 109.348C157.939 107.916 155.106 105.918 152.779 103.353C150.452 100.788 148.901 97.775 148.126 94.315L160.385 90.1989C161.399 93.0623 162.89 95.2397 164.859 96.731C166.828 98.1627 169.154 98.8786 171.839 98.8786C174.046 98.8786 175.925 98.461 177.476 97.6258C179.087 96.7907 180.339 95.6274 181.234 94.1361C182.129 92.5851 182.576 90.7954 182.576 88.7672C182.576 86.7389 182.129 85.009 181.234 83.5773C180.399 82.0859 179.176 80.9525 177.565 80.177C176.014 79.3418 174.105 78.9242 171.839 78.9242C170.526 78.9242 169.214 79.0734 167.901 79.3716C166.589 79.6699 165.396 80.0875 164.322 80.6244L161.101 73.9133L178.192 55.3011H152.153V43.6685H193.762V54.4063L176.223 74.3607L176.671 68.7233C180.667 68.7233 184.127 69.5585 187.05 71.2288C190.033 72.8395 192.33 75.1063 193.94 78.0294C195.611 80.9525 196.446 84.3528 196.446 88.2303C196.446 92.6447 195.372 96.6117 193.225 100.131C191.077 103.651 188.154 106.425 184.455 108.453C180.757 110.422 176.551 111.406 171.839 111.406Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_184_3640" x1="97.4467" y1="10.5294" x2="85.8199" y2="69.4832" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint1_linear_184_3640" x1="68.472" y1="34.3899" x2="55.5909" y2="102.885" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_184_3640" x1="41.2011" y1="58.2533" x2="26.3355" y2="135.999" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.8"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+<clipPath id="clip0_184_3640">
+<rect width="349.699" height="68.8112" fill="white" transform="translate(148.126 42.5944)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/styles.scss

@@ -1,6 +1,20 @@
-@use "sass:meta";
+@import 'vuetify/styles';
+@import 'intro.js/introjs.css';
 
-[data-vuetify] {
-  @import "vuetify/_styles.scss";
+.v-overlay {
+  z-index: 3400 !important;
+}
+
+.introjs-tooltipReferenceLayer {
+  z-index: 3401;
+}
+
+.introjs-overlay,
+.introjs-helperLayer {
+  pointer-events: none;
+  z-index: 3401;
+}
+
+.introjs-dontShowAgain {
+  display: none;
 }
-@import "vuetify/_styles.scss";

package/src/components/demo/DemoPatientModal.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import {PRICING_URL} from "@/components/demo/options";
+import { computed } from 'vue';
+import { PRICING_URL } from '@/components/demo/options';
 
 export interface Props {
   modal: boolean;
-  isModalOpen: boolean;
+  isModalOpen?: boolean;
 }
 
 const emit = defineEmits<{
-  "update:modal": [value: boolean];
+  'update:modal': [value: boolean];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
   modal: false,
-  isModalOpen: true,
+  isModalOpen: true
 });
 
 const modalState = computed({
@@ -21,11 +21,11 @@ const modalState = computed({
     return props.modal;
   },
   set(value) {
-    emit("update:modal", value);
-  },
+    emit('update:modal', value);
+  }
 });
 function openUrl(url: string) {
-  window.open(url, "_self");
+  window.open(url, '_self');
 }
 </script>
 
@@ -35,25 +35,15 @@ function openUrl(url: string) {
       <v-card-title>Purchase 3Dicom Viewer</v-card-title>
       <v-card-text> Thank you for trying 3Dicom Online Viewer! </v-card-text>
       <v-card-text>
-        This instance of the Online Viewer is a Demo instance. If you would like
-        to see your scans in 3D, please choose a plan for 3DICOM
+        This instance of the Online Viewer is a Demo instance. If you would like to see your scans in 3D, please choose
+        a plan for 3DICOM
       </v-card-text>
       <v-card-actions>
-        <v-btn
-          data-testid="close"
-          color="error"
-          @click="modalState = false"
-          :disabled="!isModalOpen"
-        >
+        <v-btn data-testid="close" color="error" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Viewer
         </v-btn>
         <v-spacer />
-        <v-btn
-          data-testid="select-plan"
-          variant="tonal"
-          color="success"
-          @click="openUrl(PRICING_URL)"
-        >
+        <v-btn data-testid="select-plan" variant="tonal" color="success" @click="openUrl(PRICING_URL)">
           Select a Plan
         </v-btn>
       </v-card-actions>

package/src/components/demo/__tests__/DemoModal.spec.ts

@@ -1,25 +1,26 @@
-import { describe, it, expect } from "vitest";
-import {mountVuetify, openAllModals} from "~/helper";
-import DemoModal from "@/components/demo/DemoModal.vue";
+import { mount } from '@vue/test-utils';
+import { VDialog } from 'vuetify/components';
+import DemoModal from '@/components/demo/DemoModal.vue';
 
 describe('DemoModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoModal, props);
+    const wrapper = mount(DemoModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoModal, props);
+    const wrapper = mount(DemoModal, { props });
     const button = wrapper.findComponent('[data-testid="close"]');
     await button.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/__tests__/DemoPatientModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { PRICING_URL } from "@/components/demo/options";
-import DemoPatientModal from "@/components/demo/DemoPatientModal.vue";
+import { PRICING_URL } from '@/components/demo/options';
+import { mount } from '@vue/test-utils';
+import { VDialog } from 'vuetify/components';
+import DemoPatientModal from '@/components/demo/DemoPatientModal.vue';
 
 describe('DemoPatientModal tests', () => {
   it('should mount', () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientModal, props);
+    const wrapper = mount(DemoPatientModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close', async () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientModal, props);
+    const wrapper = mount(DemoPatientModal, { props });
     const button = wrapper.findComponent('[data-testid="close"]');
     await button.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open pricing url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientModal, props);
+    const wrapper = mount(DemoPatientModal, { props });
     const button = wrapper.findComponent('[data-testid="select-plan"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -31,7 +31,8 @@ describe('DemoPatientModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/__tests__/options.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { demoLicenceOptions, demoPatientOptions } from "@/components/demo/options";
-import { LoadViewerOptions } from "@/models/LoadViewerOptions";
+import { LoadViewerOptions } from "@/models/loadViewerOptions";
 
 describe('options tests', () => {
   it('should call demo license options', () => {

package/src/components/demo/licence/DemoLicenceInfoModal.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import {
-  demoLicenceSubtitles,
-  demoLicenceTitle,
-  openUrl, SUPPORT_URL,
-} from "@/components/demo/options";
+import { computed } from 'vue';
+import { demoLicenceSubtitles, demoLicenceTitle, openUrl, SUPPORT_URL } from '@/components/demo/options';
 
 export interface Props {
   modal: boolean;
-  isModalOpen: boolean;
+  isModalOpen?: boolean;
 }
 
 const emit = defineEmits<{
-  "update:modal": [value: boolean];
+  'update:modal': [value: boolean];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
   modal: false,
-  isModalOpen: true,
+  isModalOpen: true
 });
 
 const modalState = computed({
@@ -25,25 +21,16 @@ const modalState = computed({
     return props.modal;
   },
   set(value) {
-    emit("update:modal", value);
-  },
+    emit('update:modal', value);
+  }
 });
 </script>
 
 <template>
   <v-dialog v-model:model-value="modalState">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background card-bg-border"
-      theme="dark"
-      max-width="680"
-    >
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{
-        demoLicenceTitle
-      }}</v-card-title>
-      <v-card-text
-        class="text-justify"
-        v-for="subtitle in demoLicenceSubtitles"
-        :key="subtitle"
+    <v-card class="pa-1 ma-auto position-relative motif-background card-bg-border" theme="dark" max-width="680">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{ demoLicenceTitle }}</v-card-title>
+      <v-card-text class="text-justify" v-for="subtitle in demoLicenceSubtitles" :key="subtitle"
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
@@ -51,12 +38,7 @@ const modalState = computed({
           Continue with Demo
         </v-btn>
         <v-spacer />
-        <v-btn
-          data-testid="confirm"
-          variant="flat"
-          color="success"
-          @click="openUrl(SUPPORT_URL)"
-        >
+        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(SUPPORT_URL)">
           Enquire about technical integration
         </v-btn>
       </v-card-actions>