@ministryofjustice/hmpps-connect-dps-shared-items 4.3.1 → 5.0.0

package/dist/assets/dps/components/webcam-capture/_webcam-capture.scss

@@ -1,5 +1,5 @@
-@import 'govuk-frontend/dist/govuk/helpers/spacing';
-@import 'govuk-frontend/dist/govuk/settings/colours-applied';
+@use "govuk-frontend/dist/govuk/helpers/colour";
+@use "govuk-frontend/dist/govuk/helpers/spacing";
 
 $hmpps-webcam-capture-width: 221px;
 $hmpps-webcam-capture-height: 276px;
@@ -7,21 +7,21 @@ $hmpps-webcam-capture-height: 276px;
 .hmpps-webcam-capture {
   .hmpps-webcam-capture-photo-container {
     width: 100%;
-    @include govuk-responsive-padding(2);
-    @include govuk-responsive-margin(6, 'bottom');
+    @include spacing.govuk-responsive-padding(2);
+    @include spacing.govuk-responsive-margin(6, 'bottom');
 
     &__with-border {
-      border: 1px solid $govuk-border-colour;
+      border: 1px solid colour.govuk-functional-colour(border);
     }
 
     &__error {
-      border: 5px solid rgb(235, 97, 28);
+      border: 5px solid #eb611cff;
 
       .hmpps-webcam-error-icon {
         display: block;
         width: 1.875rem;
         height: 1.875rem;
-        color: rgb(235, 97, 28);
+        color: #eb611cff;
       }
     }
 
@@ -42,14 +42,14 @@ $hmpps-webcam-capture-height: 276px;
     }
 
     &__description {
-      @include govuk-responsive-padding(2, 'top');
+      @include spacing.govuk-responsive-padding(2, 'top');
       display: flex;
       gap: 10px;
       margin-left: 24px;
       min-width: 0;
 
       h2 {
-        @include govuk-responsive-margin(3, 'bottom');
+        @include spacing.govuk-responsive-margin(3, 'bottom');
       }
 
     }
@@ -77,6 +77,7 @@ $hmpps-webcam-capture-height: 276px;
           gap: 5px;
           justify-content: center;
           font-size: 16px;
+          color: colour.govuk-colour("black");
 
           img {
             width: auto;
@@ -102,6 +103,7 @@ $hmpps-webcam-capture-height: 276px;
         align-items: center;
         background-color: #505a5f;
         border: 2px solid #333;
+        color: colour.govuk-colour("white");
         display: flex;
         height: 276px;
         justify-content: center;
@@ -122,4 +124,3 @@ $hmpps-webcam-capture-height: 276px;
     display: none;
   }
 }
-

package/dist/assets/dps/components/webcam-capture/index.js

@@ -1,157 +1,134 @@
 function hmppsWebcamCapture(component) {
-  const video = document.getElementById('hmpps-webcam__webcam')
-  const captureBtn = document.getElementById('hmpps-webcam__captureImageButton')
-  const clearImageBtn = document.getElementById('hmpps-webcam__clearImageButton')
-  const snapshot = document.getElementById('hmpps-webcam__snapshot')
-  const webcamImageFileInput = document.getElementById('hmpps-webcam__webcam-image-input')
-  const webcamSelect = document.getElementById('hmpps-webcam__select-webcam')
-  const webcamSelectFormGroup = document.getElementById('hmpps-webcam__webcam-select-form-group')
-  const webcamSubmit = document.getElementById('hmpps-webcam__webcam-submit')
-  const webcamPlaceholder = document.getElementById('hmpps-webcam__webcam-placeholder')
-  const fileName = component.dataset.fileName ?? 'webcam-capture'
-  const enableReporting = component.dataset.reportErrors === 'true'
-
-// Permissions
-  const permissionRequested = document.getElementById('hmpps-webcam__permission-requested')
-  const permissionGranted = document.getElementById('hmpps-webcam__permission-granted')
-  const webcamError = document.getElementById('hmpps-webcam__webcam-error')
-
-// Preview elements
-  const photoPreviewContainer = document.getElementById('hmpps-webcam__photo-preview-container')
-  const photoCaptureContainer = document.getElementById('hmpps-webcam__photo-capture-container')
-  const photoCaptureErrorContainer = document.getElementById('hmpps-webcam__photo-capture-container__error')
-
-  const mimetype = 'image/jpeg'
-
-  let stream = null
-
-  function updateWebcamList({ activeDeviceId }) {
-    webcamSelect.querySelectorAll('option').forEach(option => {
-      if (option.value === activeDeviceId && option.label.indexOf('- Active') === -1) {
-        option.label = `${option.label} - Active`
-      } else if (option.value !== activeDeviceId && option.label.indexOf('- Active') > -1) {
-        option.label = option.label.replace(' - Active', '')
-      }
-    })
-  }
-
-  async function getWebcamList() {
-    // get camera permissions
-    try {
-      permissionRequested.style.display = 'block'
-      await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-
-      navigator.mediaDevices.enumerateDevices().then(devices => {
-        const videoDevices = devices.filter(device => device.kind === 'videoinput')
-
-        videoDevices.forEach((device, index) => {
-          const option = document.createElement('option')
-          option.value = device.deviceId
-          option.text = device.label || `Camera ${index + 1}`
-          webcamSelect.appendChild(option)
-        })
-
-        if (videoDevices.length < 2) {
-          webcamSelectFormGroup.style.display = 'none'
+    const video = document.getElementById('hmpps-webcam__webcam');
+    const captureBtn = document.getElementById('hmpps-webcam__captureImageButton');
+    const clearImageBtn = document.getElementById('hmpps-webcam__clearImageButton');
+    const snapshot = document.getElementById('hmpps-webcam__snapshot');
+    const webcamImageFileInput = document.getElementById('hmpps-webcam__webcam-image-input');
+    const webcamSelect = document.getElementById('hmpps-webcam__select-webcam');
+    const webcamSelectFormGroup = document.getElementById('hmpps-webcam__webcam-select-form-group');
+    const webcamSubmit = document.getElementById('hmpps-webcam__webcam-submit');
+    const webcamPlaceholder = document.getElementById('hmpps-webcam__webcam-placeholder');
+    const fileName = component.dataset.fileName ?? 'webcam-capture';
+    const enableReporting = component.dataset.reportErrors === 'true';
+    // Permissions
+    const permissionRequested = document.getElementById('hmpps-webcam__permission-requested');
+    const permissionGranted = document.getElementById('hmpps-webcam__permission-granted');
+    const webcamError = document.getElementById('hmpps-webcam__webcam-error');
+    // Preview elements
+    const photoPreviewContainer = document.getElementById('hmpps-webcam__photo-preview-container');
+    const photoCaptureContainer = document.getElementById('hmpps-webcam__photo-capture-container');
+    const photoCaptureErrorContainer = document.getElementById('hmpps-webcam__photo-capture-container__error');
+    const mimetype = 'image/jpeg';
+    let stream = null;
+    function updateWebcamList({ activeDeviceId }) {
+        webcamSelect.querySelectorAll('option').forEach(option => {
+            if (option.value === activeDeviceId && option.label.indexOf('- Active') === -1) {
+                option.label = `${option.label} - Active`;
+            }
+            else if (option.value !== activeDeviceId && option.label.indexOf('- Active') > -1) {
+                option.label = option.label.replace(' - Active', '');
+            }
+        });
+    }
+    async function getWebcamList() {
+        // get camera permissions
+        try {
+            permissionRequested.style.display = 'block';
+            await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+            navigator.mediaDevices.enumerateDevices().then(devices => {
+                const videoDevices = devices.filter(device => device.kind === 'videoinput');
+                videoDevices.forEach((device, index) => {
+                    const option = document.createElement('option');
+                    option.value = device.deviceId;
+                    option.text = device.label || `Camera ${index + 1}`;
+                    webcamSelect.appendChild(option);
+                });
+                if (videoDevices.length < 2) {
+                    webcamSelectFormGroup.style.display = 'none';
+                }
+                if (videoDevices.length > 0) {
+                    startWebcam(videoDevices[0].deviceId);
+                }
+            });
         }
-
-        if (videoDevices.length > 0) {
-          startWebcam(videoDevices[0].deviceId)
+        catch (e) {
+            photoCaptureContainer.style.display = 'none';
+            photoCaptureErrorContainer.style.display = 'block';
+            if (enableReporting) {
+                await fetch(`/api/report-error?pageUrl=${encodeURIComponent(location.href)}&error=${e.name}`, {
+                    method: 'GET',
+                });
+            }
         }
-      })
-    } catch (e) {
-      photoCaptureContainer.style.display = 'none'
-      photoCaptureErrorContainer.style.display = 'block'
-      if (enableReporting) {
-        await fetch(`/api/report-error?pageUrl=${encodeURIComponent(location.href)}&error=${e.name}`, {
-          method: 'GET',
-        })
-      }
     }
-  }
-
-  async function stopWebcam() {
-    if (stream) {
-      stream.getTracks().forEach(track => track.stop())
+    async function stopWebcam() {
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+        }
     }
-  }
-
-  async function startWebcam(deviceId) {
-    try {
-      stopWebcam()
-      stream = await navigator.mediaDevices.getUserMedia({
-        video: {
-          deviceId: { exact: deviceId },
-        },
-      })
-      video.srcObject = stream
-      permissionRequested.style.display = 'none'
-      permissionGranted.style.display = 'block'
-      webcamPlaceholder.style.display = 'none'
-      video.style.display = 'block'
-      captureBtn.disabled = false
-      updateWebcamList({ activeDeviceId: deviceId })
-    } catch (error) {
-      permissionRequested.style.display = 'none'
-      webcamError.style.display = 'block'
-      console.error('Webcam error:', error)
+    async function startWebcam(deviceId) {
+        try {
+            stopWebcam();
+            stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    deviceId: { exact: deviceId },
+                },
+            });
+            video.srcObject = stream;
+            permissionRequested.style.display = 'none';
+            permissionGranted.style.display = 'block';
+            webcamPlaceholder.style.display = 'none';
+            video.style.display = 'block';
+            captureBtn.disabled = false;
+            updateWebcamList({ activeDeviceId: deviceId });
+        }
+        catch (error) {
+            permissionRequested.style.display = 'none';
+            webcamError.style.display = 'block';
+            console.error('Webcam error:', error);
+        }
     }
-  }
-
-  webcamSelect.addEventListener('change', () => {
-    startWebcam(webcamSelect.value)
-  })
-
-  clearImageBtn.addEventListener('click', () => {
-    snapshot.src = ''
-
-    photoPreviewContainer.style.display = 'none'
-    photoCaptureContainer.style.display = 'block'
-    webcamSubmit.disabled = true
-  })
-
-  captureBtn.addEventListener('click', () => {
-    const canvas = document.createElement('canvas')
-    canvas.width = video.videoWidth
-    canvas.height = video.videoHeight
-    const ctx = canvas.getContext('2d')
-
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
-
-    const imageDataUrl = canvas.toDataURL(mimetype)
-    snapshot.src = imageDataUrl
-
-    canvas.toBlob(
-      blob => {
-        if (!blob) return
-
-        const file = new File([blob], `${fileName}.jpg`, { type: mimetype })
-
-        const dataTransfer = new DataTransfer()
-        dataTransfer.items.add(file)
-        webcamImageFileInput.files = dataTransfer.files
-      },
-      mimetype,
-      0.92,
-    )
-
-    photoPreviewContainer.style.display = 'block'
-    photoCaptureContainer.style.display = 'none'
-    webcamSubmit.disabled = false
-  })
-
-  function pageInit() {
-    photoPreviewContainer.style.display = 'none'
-    photoCaptureContainer.style.display = 'block'
-    getWebcamList()
-  }
-
-  pageInit()
+    webcamSelect.addEventListener('change', () => {
+        startWebcam(webcamSelect.value);
+    });
+    clearImageBtn.addEventListener('click', () => {
+        snapshot.src = '';
+        photoPreviewContainer.style.display = 'none';
+        photoCaptureContainer.style.display = 'block';
+        webcamSubmit.disabled = true;
+    });
+    captureBtn.addEventListener('click', () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const imageDataUrl = canvas.toDataURL(mimetype);
+        snapshot.src = imageDataUrl;
+        canvas.toBlob(blob => {
+            if (!blob)
+                return;
+            const file = new File([blob], `${fileName}.jpg`, { type: mimetype });
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            webcamImageFileInput.files = dataTransfer.files;
+        }, mimetype, 0.92);
+        photoPreviewContainer.style.display = 'block';
+        photoCaptureContainer.style.display = 'none';
+        webcamSubmit.disabled = false;
+    });
+    function pageInit() {
+        photoPreviewContainer.style.display = 'none';
+        photoCaptureContainer.style.display = 'block';
+        return getWebcamList();
+    }
+    return pageInit();
 }
-
-export function init() {
-  const webcamContainer = document.getElementById('hmpps-webcam-capture-component')
-  if (webcamContainer) {
-    hmppsWebcamCapture(webcamContainer)
-  }
+function init() {
+    const webcamContainer = document.getElementById('hmpps-webcam-capture-component');
+    if (webcamContainer) {
+        hmppsWebcamCapture(webcamContainer);
+    }
 }
+
+export { init };

package/dist/assets/dps/components/webcam-capture/macro.njk

@@ -3,14 +3,20 @@
 
 {% macro cameraSvg() %}
   <svg width="24" height="18" viewBox="0 0 24 18" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.9351 4.84277C15.6211 4.97829 17.7571 7.18753 17.7572 9.89258L17.7503 10.1523C17.6142 12.8237 15.3936 14.9479 12.6739 14.9482L12.4118 14.9414C9.81233 14.8103 7.72832 12.7377 7.59652 10.1523L7.58965 9.89258C7.58976 7.1002 9.86627 4.83594 12.6739 4.83594L12.9351 4.84277ZM12.6739 6.33594C10.6992 6.33594 9.09795 7.92863 9.09785 9.89258C9.0981 11.8564 10.6993 13.4482 12.6739 13.4482C14.6482 13.4479 16.2488 11.8562 16.249 9.89258C16.2489 7.92884 14.6483 6.33627 12.6739 6.33594Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.2671 0.193359C16.0986 0.254745 16.8346 0.768568 17.172 1.53613L17.5981 2.50586H21.7143C22.9635 2.50597 23.9764 3.51346 23.9766 4.75586V15.5088L23.9648 15.7393C23.8563 16.7975 23.0103 17.6393 21.946 17.7471L21.7143 17.7588H3.23886C2.06756 17.7588 1.10459 16.8732 0.988345 15.7393L0.976562 15.5088V4.75586C0.976721 3.51348 1.9894 2.50586 3.23886 2.50586H7.354L7.78014 1.53613C8.14035 0.716788 8.95521 0.18757 9.85391 0.1875H15.0992L15.2671 0.193359ZM9.85391 1.6875C9.55405 1.68755 9.28258 1.86482 9.16265 2.1377L8.53915 3.55664C8.41907 3.82962 8.1475 4.00586 7.84789 4.00586H3.23886C2.82257 4.00586 2.48486 4.34161 2.48476 4.75586V15.5088L2.48869 15.585C2.52728 15.9635 2.84864 16.2588 3.23886 16.2588H21.7143L21.7909 16.2549C22.1458 16.2192 22.4284 15.9383 22.4644 15.585L22.4684 15.5088V4.75586C22.4683 4.36747 22.1712 4.04802 21.7909 4.00977L21.7143 4.00586H17.1043C16.8046 4.00586 16.5331 3.82962 16.413 3.55664L15.7895 2.1377C15.6844 1.89857 15.4641 1.73291 15.2102 1.69531L15.0992 1.6875H9.85391Z" fill="black"/>
+    <path fill="currentColor" d="M12.935 4.843c2.686.135 4.822 2.345 4.822 5.05l-.007.26c-.136 2.67-2.356 4.795-5.076 4.795l-.262-.007c-2.6-.13-4.684-2.203-4.815-4.789l-.007-.26c0-2.792 2.276-5.056 5.084-5.056zm-.261 1.493c-1.975 0-3.576 1.593-3.576 3.557s1.601 3.555 3.576 3.555c1.974 0 3.575-1.592 3.575-3.555s-1.6-3.557-3.575-3.557"/>
+    <path fill="currentColor" d="M15.267.193a2.26 2.26 0 0 1 1.905 1.343l.426.97h4.116a2.257 2.257 0 0 1 2.263 2.25v10.753l-.012.23a2.26 2.26 0 0 1-2.019 2.008l-.232.012H3.24a2.26 2.26 0 0 1-2.25-2.02l-.012-.23V4.756a2.256 2.256 0 0 1 2.262-2.25h4.115l.426-.97A2.26 2.26 0 0 1 9.854.188h5.245zM9.854 1.688c-.3 0-.571.177-.691.45l-.624 1.419a.76.76 0 0 1-.691.449h-4.61a.75.75 0 0 0-.753.75v10.753l.004.076c.038.378.36.674.75.674h18.475l.077-.004a.75.75 0 0 0 .673-.67l.004-.076V4.756a.75.75 0 0 0-.677-.746l-.077-.004h-4.61a.76.76 0 0 1-.691-.45l-.623-1.418a.75.75 0 0 0-.58-.443l-.11-.008z"/>
   </svg>
 {% endmacro %}
 
 {% macro noCameraSvg() %}
   <svg width="69" height="47" viewBox="0 0 69 47" xmlns="http://www.w3.org/2000/svg">
-    <path d="M41.8999 0.015625C44.0562 0.17569 45.9652 1.51517 46.8403 3.5166L47.9458 6.04492H58.6196C60.2824 6.04507 61.7825 6.73895 62.8501 7.85059L65.7271 6.19141C66.6625 5.65171 67.8591 5.97184 68.3989 6.90723C68.9387 7.84277 68.6177 9.03936 67.6821 9.5791L64.4653 11.4346C64.4781 11.5921 64.4868 11.7513 64.4868 11.9121V39.9502L64.4565 40.5518C64.1751 43.3111 61.9813 45.506 59.2212 45.7871L58.6196 45.8174H10.7065C9.33066 45.8173 8.06623 45.343 7.06592 44.5498L3.2749 46.7373C2.33936 47.277 1.14276 46.9561 0.603027 46.0205C0.063345 45.085 0.384456 43.8894 1.31982 43.3496L4.98291 41.2354C4.93294 41.0119 4.89429 40.784 4.87061 40.5518L4.84033 39.9502V11.9121C4.84075 8.67266 7.46638 6.04507 10.7065 6.04492H21.3784L22.4839 3.5166C23.418 1.38019 25.5312 0.000255599 27.8618 0H41.4653L41.8999 0.015625ZM47.6782 21.1191C48.1185 22.4347 48.3579 23.8429 48.3579 25.3066L48.3394 25.9834C47.9862 32.9491 42.2276 38.4886 35.1743 38.4893L34.4946 38.4717C30.8348 38.286 27.571 36.606 25.2954 34.0322L11.6489 41.9062H58.6196L58.8188 41.8965C59.7394 41.8033 60.4724 41.0706 60.5659 40.1494L60.5757 39.9502V13.6787L47.6782 21.1191ZM27.8618 3.91113C27.0843 3.91133 26.3798 4.3735 26.0688 5.08496L24.4526 8.78516C24.1412 9.49696 23.4367 9.95605 22.6597 9.95605H10.7065C9.6271 9.95621 8.75174 10.832 8.75146 11.9121V39.0615L23.1626 30.7471C22.4981 29.2826 22.0931 27.6751 22.0073 25.9834L21.9897 25.3066C21.9897 18.0254 27.8931 12.1213 35.1743 12.1211L35.8521 12.1387C39.9908 12.3485 43.626 14.4673 45.895 17.6318L59.0952 10.0166C59.0053 9.99411 58.9132 9.97635 58.8188 9.9668L58.6196 9.95605H46.6646C45.8876 9.95599 45.183 9.49691 44.8716 8.78516L43.2554 5.08496C42.9828 4.46149 42.411 4.02968 41.7524 3.93164L41.4653 3.91113H27.8618ZM28.7837 32.0195C30.4474 33.6031 32.6963 34.578 35.1743 34.5781C40.2945 34.5775 44.445 30.4268 44.4458 25.3066C44.4458 24.558 44.3555 23.8301 44.188 23.1328L28.7837 32.0195ZM35.1743 16.0322C30.0532 16.0325 25.9009 20.1855 25.9009 25.3066C25.9011 26.5345 26.1419 27.7058 26.5757 28.7783L42.481 19.6016C40.784 17.4304 38.1432 16.0326 35.1743 16.0322Z" fill="white"/>
+    <path fill="currentColor" d="M41.9.016a5.87 5.87 0 0 1 4.941 3.5l1.106 2.529H58.62a5.85 5.85 0 0 1 4.231 1.806l2.877-1.66a1.956 1.956 0 1 1 1.955 3.388l-3.217 1.856q.02.236.022.477v28.039l-.03.601a5.87 5.87 0 0 1-5.236 5.236l-.602.03H10.707a5.84 5.84 0 0 1-3.641-1.268l-3.791 2.188A1.956 1.956 0 0 1 1.32 43.35l3.663-2.114a6 6 0 0 1-.112-.684l-.03-.601V11.912a5.87 5.87 0 0 1 5.866-5.867h10.672l1.105-2.528A5.87 5.87 0 0 1 27.862 0h13.604Zm5.779 21.103c.44 1.316.68 2.724.68 4.188l-.019.677c-.353 6.966-6.112 12.505-13.165 12.506l-.68-.018a13.15 13.15 0 0 1-9.2-4.44L11.65 41.908H58.62l.2-.01a1.96 1.96 0 0 0 1.747-1.747l.01-.2V13.68ZM27.862 3.911a1.96 1.96 0 0 0-1.793 1.174l-1.616 3.7a1.96 1.96 0 0 1-1.793 1.171H10.707c-1.08 0-1.955.876-1.955 1.956v27.15l14.41-8.314a13.1 13.1 0 0 1-1.154-4.764l-.018-.677c0-7.281 5.904-13.186 13.185-13.186l.678.018a13.17 13.17 0 0 1 10.043 5.493l13.2-7.615a2 2 0 0 0-.276-.05l-.2-.01H46.665c-.777 0-1.481-.46-1.793-1.172l-1.616-3.7a1.96 1.96 0 0 0-1.503-1.153l-.287-.02zm.922 28.109a9.24 9.24 0 0 0 6.39 2.559 9.273 9.273 0 0 0 9.015-11.446zm6.39-15.988c-5.12 0-9.273 4.154-9.273 9.275 0 1.228.241 2.4.675 3.472l15.906-9.177a9.25 9.25 0 0 0-7.307-3.57"/>
+  </svg>
+{% endmacro %}
+
+{% macro webcamError() %}
+  <svg class="hmpps-webcam-error-icon" width="30" height="30" viewBox="0 0 30 30" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M15 2.449 1.25 26.199h27.5ZM13.51 9.496h2.959l-.227 8.271h-2.496ZM15 19.947a1 1 0 0 1-.001 3.746A1 1 0 0 1 15 19.947Z"/>
   </svg>
 {% endmacro %}
 
@@ -119,27 +125,7 @@
       </div>
       <div class="hmpps-webcam-capture-photo-container__description">
         <div>
-          <svg
-              class="hmpps-webcam-error-icon"
-              role="presentation"
-              focusable="false"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 30 30"
-              height="30"
-              width="30">
-            <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M15 2.44922L28.75 26.1992H1.25L15 2.44922ZM13.5107 9.49579H16.4697L16.2431 17.7678H13.7461L13.5107 9.49579ZM13.1299
-              21.82C13.1299 21.5661 13.1787 21.3285 13.2764 21.1071C13.374 20.8793 13.5075 20.6807 13.6768 20.5114C13.8525 20.3421
-              14.0544 20.2087 14.2822 20.111C14.5101 20.0134 14.7542 19.9645 15.0146 19.9645C15.2686 19.9645 15.5062 20.0134 15.7275
-              20.111C15.9554 20.2087 16.154 20.3421 16.3232 20.5114C16.4925 20.6807 16.626 20.8793 16.7236 21.1071C16.8213 21.3285
-              16.8701 21.5661 16.8701 21.82C16.8701 22.0804 16.8213 22.3246 16.7236 22.5524C16.626 22.7803 16.4925 22.9789 16.3232
-              23.1481C16.154 23.3174 15.9554 23.4509 15.7275 23.5485C15.5062 23.6462 15.2686 23.695 15.0146 23.695C14.7542 23.695
-              14.5101 23.6462 14.2822 23.5485C14.0544 23.4509 13.8525 23.3174 13.6768 23.1481C13.5075 22.9789 13.374 22.7803 13.2764
-              22.5524C13.1787 22.3246 13.1299 22.0804 13.1299 21.82Z"
-                fill="currentColor"/>
-          </svg>
+          {{ webcamError() }}
         </div>
         <div>
           <h2 class="govuk-heading-m">
@@ -182,5 +168,3 @@
     </div>
   </div>
 {% endmacro %}
-
-

package/dist/assets/js/all.js

@@ -1,7 +1,12 @@
-import * as addressAutosuggest from '../dps/components/address-autosuggest'
-import * as webcamCapture from '../dps/components/webcam-capture'
+import { init } from '../dps/components/address-autosuggest/index.js';
+import { Modal } from '../dps/components/modal/index.js';
+import { init as init$1 } from '../dps/components/webcam-capture/index.js';
 
-export function initAll() {
-  addressAutosuggest.init()
-  webcamCapture.init()
+// eslint-disable-next-line import/prefer-default-export
+function initAll() {
+    init();
+    Modal.init();
+    init$1();
 }
+
+export { initAll };