@smileid/web-components 11.0.3 → 11.1.0

package/dist/esm/DocumentCaptureScreens-DHAfE8VG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentCaptureScreens-DHAfE8VG.js","sources":["../../lib/components/document/src/document-capture/DocumentCapture.js","../../lib/components/document/src/document-capture-review/DocumentCaptureReview.js","../../lib/domain/file-upload/src/SmartFileUpload.js","../../lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js","../../lib/components/document/src/DocumentCaptureScreens.js"],"sourcesContent":["import SmartCamera from '../../../../domain/camera/src/SmartCamera';\nimport styles from '../../../../styles/src/styles';\nimport '../../../navigation/src';\nimport { t, getDirection } from '../../../../domain/localisation';\nimport { JPEG_QUALITY } from '../../../../domain/constants/src/Constants';\n\nfunction hasMoreThanNColors(data, n = 16) {\n  const colors = new Set();\n  for (let i = 0; i < Math.min(data.length, 10000); i += 4) {\n    // eslint-disable-next-line no-bitwise\n    colors.add((data[i] << 16) | (data[i + 1] << 8) | data[i + 2]);\n    if (colors.size > n) {\n      return true;\n    }\n  }\n  return false;\n}\n\nfunction templateString() {\n  return `\n    <style>\n      .visually-hidden {\n        border: 0;\n        clip: rect(1px 1px 1px 1px);\n        clip: rect(1px, 1px, 1px, 1px);\n        height: auto;\n        margin: 0;\n        overflow: hidden;\n        padding: 0;\n        position: absolute;\n        white-space: nowrap;\n        width: 1px;\n      }\n\n      .mobile-camera-screen video {\n        display: block;\n        object-fit: cover;\n        object-position: center;\n        width: 100%;\n      }\n\n     .id-video.mobile-camera-screen {\n        display: flex;\n        align-items: stretch;\n        justify-content: center;\n        max-height: 300px;\n        height: 15rem;\n        width: 100%;\n        overflow: visible;\n        margin: 0 auto;\n      }\n\n      @media (max-width: 600px) {\n        .section {\n          width: 99%;\n          height: 100vh;\n          justify-content: center;\n        }\n      }\n\n\n\n      #document-capture-screen,\n      #back-of-document-capture-screen {\n        display: flex;\n        flex-direction: column;\n        max-block-size: 100%;\n        max-inline-size: 40ch;\n        padding: 1rem;\n      }\n\n      #document-capture-screen header p {\n        margin-block: 0 !important;\n      }\n\n      .padding-bottom-2 {\n        padding-bottom: 2rem;\n      }\n      @media (min-width: 600px) {\n        video {\n          object-fit: contain;\n          -webkit-tap-highlight-color: transparent;\n          content: normal;\n        }\n\n        .id-video {\n          width: 99%;\n          text-align: center;\n          position: relative;\n          overflow: hidden;\n        }\n\n        .id-video-container {\n          margin: auto;\n          padding: 0px;\n        }\n      }\n      .id-video-container {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n      .id-video {\n        width: 100%;\n        text-align: center;\n        position: relative;\n        background: white;\n      }\n      .video-overlay {\n        position: absolute;\n        border-style: solid;\n        border-color: rgba(0, 0, 0, 0.48);\n        box-sizing: border-box;\n        inset: 0px;\n      }\n\n      .video-overlay .inner-border {\n        position: absolute;\n        border-width: 0.25rem;\n        border-color: #9394ab;\n        border-style: solid;\n        border-radius: 0.25rem;\n        inset: -1px;\n      }\n      canvas {\n        width: 100%;\n        border-width: 0.25rem;\n        border-color: #9394ab;\n        border-style: solid;\n        border-radius: 0.25rem;\n      }\n\n      .description {\n        align-self: center;\n        padding-bottom: 1.75rem;\n      }\n      .reset-margin-block {\n        margin-block: 0;\n      }\n      .align-items-center {\n        align-items: center;\n      }\n      .id-side {\n        padding-bottom: 0.5rem;\n      }\n\n      .circle-progress {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        height: 10rem;\n      }\n\n     .portrait .sticky {\n        position: -webkit-sticky; /* Safari */\n        position: sticky;\n        bottom: 0;\n      }\n      .video-footer {\n        background-color: rgba(255, 255, 255, 0.17);\n        padding-top: 10px;\n      }\n  </style>\n  ${styles(this.themeColor)}\n  <div id='document-capture-screen' class='flow center flex-column' dir='${this.direction}'>\n  <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>\n    <h2 class='text-base font-bold title-color'>${this.documentName}</h2>\n    <div class=\"circle-progress\" id=\"loader\">\n        ${this.cameraError ? '' : '<p class=\"spinner\"></p>'}\n        ${this.cameraError ? `<p style=\"--flow-space: 4rem\" class='color-red | center'>${this.cameraError}</p>` : `<p style=\"--flow-space: 4rem\">${t('document.capture.checkingPermissions')}</p>`}\n    </div>\n    <div class='section | flow ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}' ${this.cameraError ? 'hidden' : ''}>\n      <div class='id-video-container'>\n        <div class='id-video ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}' hidden>\n        </div>\n        <div class='video-footer sticky'>\n          <h2 class='text-base font-bold title-color reset-margin-block id-side'>${this.title}</h2>\n          <h4 class='text-base font-normal title-color description reset-margin-block'>${t('document.capture.instructionText')}</h4>\n          <div class='actions' hidden>\n            <button id='capture-id-image' class='button icon-btn | center' type='button'>\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M35 70C54.33 70 70 54.33 70 35C70 15.67 54.33 0 35 0C15.67 0 0 15.67 0 35C0 54.33 15.67 70 35 70ZM61 35C61 49.3594 49.3594 61 35 61C20.6406 61 9 49.3594 9 35C9 20.6406 20.6406 9 35 9C49.3594 9 61 20.6406 61 35ZM65 35C65 51.5685 51.5685 65 35 65C18.4315 65 5 51.5685 5 35C5 18.4315 18.4315 5 35 5C51.5685 5 65 18.4315 65 35Z\" fill=\"${this.themeColor}\"/>\n              </svg>\n              <span class='visually-hidden'>${t('document.capture.captureButton')}</span>\n            </button>\n          </div>\n          ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}\n        </div>\n      </div>\n    </div>\n  </div>\n  `;\n}\n\nconst documentCaptureScale = 0.6;\n\nclass DocumentCapture extends HTMLElement {\n  constructor() {\n    super();\n    this.templateString = templateString.bind(this);\n    this.render = () => this.templateString();\n\n    this.attachShadow({ mode: 'open' });\n    this.IdSides = {\n      back: 'Back',\n      front: 'Front',\n    };\n  }\n\n  connectedCallback() {\n    const template = document.createElement('template');\n    template.innerHTML = this.render();\n    this.shadowRoot.innerHTML = '';\n    this.shadowRoot.appendChild(template.content.cloneNode(true));\n    this.setUpEventListeners();\n  }\n\n  async getUserMedia() {\n    if (SmartCamera.stream) {\n      return;\n    }\n    if (!this.hasAttribute('data-camera-error')) return;\n\n    try {\n      await SmartCamera.getMedia({\n        audio: false,\n        video: {\n          ...SmartCamera.environmentOptions,\n          aspectRatio: { ideal: 16 / 9 },\n        },\n      });\n    } catch (error) {\n      console.error(error.constraint);\n      console.error(error.message);\n    }\n\n    this.handleIDStream(SmartCamera.stream);\n  }\n\n  _captureIDImage() {\n    const imageDetails = this._drawIDImage();\n    this._stopIDVideoStream();\n\n    this.dispatchEvent(\n      new CustomEvent('document-capture.publish', {\n        detail: {\n          ...imageDetails,\n        },\n      }),\n    );\n  }\n\n  _drawIDImage(video = this._IDVideo) {\n    const canvas = document.createElement('canvas');\n    if (this.isPortraitCaptureView) {\n      canvas.width = video.videoWidth;\n      canvas.height = (canvas.width * 16) / 9;\n\n      const previewCanvas = document.createElement('canvas');\n      previewCanvas.width = canvas.width;\n      previewCanvas.height = canvas.height;\n\n      this.updatePortraitId(canvas, video, 1, 1);\n      this.updatePortraitId(previewCanvas, video);\n      const image = canvas.toDataURL('image/jpeg', JPEG_QUALITY);\n      const previewImage = previewCanvas.toDataURL('image/jpeg', JPEG_QUALITY);\n      return {\n        image,\n        originalHeight: canvas.height,\n        originalWidth: canvas.width,\n        previewImage,\n        ...this.idCardRegion,\n      };\n    }\n\n    canvas.width = 2240;\n    canvas.height = 1260;\n\n    const height = canvas.width / (video.videoWidth / video.videoHeight);\n    canvas.height = height;\n\n    const previewCanvas = document.createElement('canvas');\n    previewCanvas.height = canvas.height;\n    previewCanvas.width = canvas.width;\n    const isPortrait = video.videoWidth < video.videoHeight;\n    if (isPortrait) {\n      const intermediateCanvas = document.createElement('canvas');\n      previewCanvas.height = canvas.width / 1.75;\n      canvas.width = 2240;\n      canvas.height = canvas.width / 1.77;\n      this._capturePortraitToLandscapeImage(intermediateCanvas, video);\n      this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas, 1, 1);\n      this._drawLandscapeImageFromCanvas(previewCanvas, intermediateCanvas);\n    } else {\n      this._drawLandscapeImage(canvas, video, 1, 1);\n      this._drawLandscapeImage(previewCanvas, video);\n    }\n    const image = canvas.toDataURL('image/jpeg', JPEG_QUALITY);\n\n    const previewImage = previewCanvas.toDataURL('image/jpeg', JPEG_QUALITY);\n    return {\n      image,\n      originalHeight: canvas.height,\n      originalWidth: canvas.width,\n      previewImage,\n      ...this.idCardRegion,\n    };\n  }\n\n  _drawImage(canvas, enableImageTests = true, video = SmartCamera.stream) {\n    this.resetErrorMessage();\n    const context = canvas.getContext('2d');\n\n    context.drawImage(\n      video,\n      0,\n      0,\n      video.videoWidth,\n      video.videoHeight,\n      0,\n      0,\n      canvas.width,\n      canvas.height,\n    );\n\n    if (enableImageTests) {\n      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);\n\n      const hasEnoughColors = hasMoreThanNColors(imageData.data);\n\n      if (hasEnoughColors) {\n        return context;\n      }\n      throw new Error(\n        'Unable to capture webcam images - Please try another device',\n      );\n    } else {\n      return context;\n    }\n  }\n\n  handleIDStream(stream) {\n    try {\n      const videoExists = this.shadowRoot.querySelector('canvas');\n      if (videoExists) {\n        // remove canvas\n        videoExists.remove();\n      }\n      let video = null;\n      let canvas = null;\n      video = document.createElement('video');\n      canvas = document.createElement('canvas');\n      const videoContainer = this.shadowRoot.querySelector(\n        '.id-video-container',\n      );\n\n      video.muted = true;\n      video.setAttribute('muted', 'true');\n\n      video.autoplay = true;\n      video.playsInline = true;\n      if ('srcObject' in video) {\n        video.srcObject = stream;\n      } else {\n        video.src = window.URL.createObjectURL(stream);\n      }\n\n      canvas.width = videoContainer.clientWidth;\n      canvas.height = (videoContainer.clientWidth * 9) / 16;\n      if (this.isPortraitCaptureView) {\n        canvas.height = (videoContainer.clientWidth * 16) / 9;\n      }\n\n      video.onloadedmetadata = () => {\n        video.play();\n\n        this.shadowRoot.querySelector('#loader').hidden = true;\n        this.shadowRoot.querySelector('.id-video').hidden = false;\n        this.shadowRoot.querySelector('.actions').hidden = false;\n        if (!videoExists) {\n          videoContainer.prepend(canvas);\n        }\n      };\n\n      const onVideoStart = () => {\n        if (video.paused || video.ended) return;\n        video.removeEventListener('playing', onVideoStart);\n        const aspectRatio = video.videoWidth / video.videoHeight;\n        const portrait = aspectRatio < 1;\n        if (this.isPortraitCaptureView) {\n          this.updatePortraitId(canvas, video);\n          requestAnimationFrame(onVideoStart);\n          return;\n        }\n\n        if (portrait) {\n          videoContainer.classList.add('mobile-camera-screen');\n          const intermediateCanvas = document.createElement('canvas');\n          this._capturePortraitToLandscapeImage(intermediateCanvas, video);\n          this._drawLandscapeImageFromCanvas(canvas, intermediateCanvas);\n        } else {\n          this._drawLandscapeImage(canvas, video);\n        }\n        requestAnimationFrame(onVideoStart);\n      };\n\n      video.addEventListener('playing', onVideoStart);\n\n      this._IDStream = stream;\n      this._IDVideo = video;\n    } catch (error) {\n      this.setAttribute(\n        'data-camera-error',\n        SmartCamera.handleCameraError(error),\n      );\n      if (error.name !== 'AbortError') {\n        console.error(error);\n      }\n      SmartCamera.stopMedia();\n    }\n  }\n\n  _drawLandscapeImage(\n    canvas,\n    video = this._IDVideo,\n    scaleHeight = documentCaptureScale,\n    scaleWidth = documentCaptureScale,\n  ) {\n    const heightScaleFactor = this.height\n      ? this.height / video.videoHeight\n      : scaleHeight;\n    const widthScaleFactor = this.width\n      ? this.width / video.videoWidth\n      : scaleWidth;\n    const scaleHeightOffset = (1 - scaleHeight) / 2;\n    const scaleWidthOffset = (1 - scaleWidth) / 2;\n    const width = video.videoWidth * widthScaleFactor;\n    const height = video.videoHeight * heightScaleFactor;\n    const startX = video.videoWidth * scaleWidthOffset;\n    const startY = video.videoHeight * scaleHeightOffset;\n\n    canvas\n      .getContext('2d')\n      .drawImage(\n        video,\n        startX,\n        startY,\n        width,\n        height,\n        0,\n        0,\n        canvas.width,\n        canvas.height,\n      );\n  }\n\n  _capturePortraitToLandscapeImage(canvas, video = this._IDVideo) {\n    const { videoHeight, videoWidth } = video;\n    const cropWidth = videoWidth;\n    const cropHeight = (videoWidth * 9) / 16; // convert to landscape aspect ratio\n    const startX = 0;\n    const startY = (videoHeight - cropHeight) / 2;\n\n    canvas.width = cropWidth;\n    canvas.height = cropHeight;\n\n    canvas\n      .getContext('2d')\n      .drawImage(\n        video,\n        startX,\n        startY,\n        cropWidth,\n        cropHeight,\n        0,\n        0,\n        canvas.width,\n        canvas.height,\n      );\n  }\n\n  _drawLandscapeImageFromCanvas(\n    canvas,\n    sourceCanvas,\n    scaleHeight = documentCaptureScale,\n    scaleWidth = documentCaptureScale,\n  ) {\n    const heightScaleFactor = this.height\n      ? this.height / sourceCanvas.height\n      : scaleHeight;\n    const widthScaleFactor = this.width\n      ? this.width / sourceCanvas.width\n      : scaleWidth;\n    const scaleHeightOffset = (1 - scaleHeight) / 2;\n    const scaleWidthOffset = (1 - scaleWidth) / 2;\n    const width = sourceCanvas.width * widthScaleFactor;\n    const height = sourceCanvas.height * heightScaleFactor;\n    const startX = sourceCanvas.width * scaleWidthOffset;\n    const startY = sourceCanvas.height * scaleHeightOffset;\n\n    canvas\n      .getContext('2d')\n      .drawImage(\n        sourceCanvas,\n        startX,\n        startY,\n        width,\n        height,\n        0,\n        0,\n        canvas.width,\n        canvas.height,\n      );\n  }\n\n  _drawPortraitToLandscapeImage(canvas, video = this._IDVideo) {\n    const { videoHeight, videoWidth } = video;\n    const cropWidth = 600;\n    const cropHeight = 400;\n\n    canvas.width = cropWidth;\n    canvas.height = cropHeight;\n\n    const startX = (videoWidth - cropWidth) / 2;\n    const startY = (videoHeight - cropHeight) / 2;\n\n    canvas\n      .getContext('2d')\n      .drawImage(\n        video,\n        startX,\n        startY,\n        cropWidth,\n        cropHeight,\n        0,\n        0,\n        canvas.width,\n        canvas.height,\n      );\n  }\n\n  updatePortraitId(\n    destinationCanvas,\n    video = this._IDVideo,\n    scaleHeight = documentCaptureScale,\n    scaleWidth = documentCaptureScale,\n  ) {\n    const { videoWidth, videoHeight } = video;\n\n    if (videoWidth && videoHeight) {\n      const intermediateCanvas = document.createElement('canvas');\n      const aspectRatio = 9 / 16;\n      let cropWidth;\n      let cropHeight;\n      let offsetX;\n      let offsetY;\n\n      if (videoWidth / videoHeight > aspectRatio) {\n        // we scale the canvas to portrait aspect ratio\n        cropHeight = videoHeight;\n        cropWidth = cropHeight * aspectRatio;\n        offsetX = (videoWidth - cropWidth) / 2;\n        offsetY = 0;\n      } else {\n        // video already has portrait aspect ratio\n        cropWidth = videoWidth;\n        cropHeight = cropWidth;\n        offsetX = 0;\n        offsetY = 0;\n      }\n\n      intermediateCanvas.height = cropHeight;\n      intermediateCanvas.width = cropWidth;\n      // draw the video frame onto the intermediate canvas\n      intermediateCanvas\n        .getContext('2d')\n        .drawImage(\n          video,\n          offsetX,\n          offsetY,\n          cropWidth,\n          cropHeight,\n          0,\n          0,\n          intermediateCanvas.width,\n          intermediateCanvas.height,\n        );\n\n      // draw the intermediate canvas onto the destination canvas\n      // we scale image based on the scaleHeight and scaleWidth\n      const heightScaleFactor = this.height\n        ? this.height / cropWidth\n        : scaleHeight;\n      const widthScaleFactor = this.width\n        ? this.width / cropHeight\n        : scaleWidth;\n      const scaleHeightOffset = (1 - scaleHeight) / 2;\n      const scaleWidthOffset = (1 - scaleWidth) / 2;\n      const width = cropWidth * widthScaleFactor;\n      const height = cropHeight * heightScaleFactor;\n      const startX = cropWidth * scaleWidthOffset;\n      const startY = cropHeight * scaleHeightOffset;\n      destinationCanvas\n        .getContext('2d')\n        .drawImage(\n          intermediateCanvas,\n          startX,\n          startY,\n          width,\n          height,\n          0,\n          0,\n          destinationCanvas.width,\n          destinationCanvas.height,\n        );\n    }\n  }\n\n  _stopIDVideoStream(stream = this._IDStream) {\n    stream.getTracks().forEach((track) => track.stop());\n  }\n\n  setUpEventListeners() {\n    this.captureIDImage = this.shadowRoot.querySelector('#capture-id-image');\n    this.navigation = this.shadowRoot.querySelector('smileid-navigation');\n\n    if (SmartCamera.stream) {\n      this.handleIDStream(SmartCamera.stream);\n    }\n\n    this.navigation.addEventListener('navigation.back', () => {\n      this.handleBackEvents();\n    });\n\n    this.navigation.addEventListener('navigation.close', () => {\n      this.handleCloseEvents();\n    });\n\n    this.captureIDImage.addEventListener('click', () => {\n      this._captureIDImage();\n    });\n\n    this.getUserMedia();\n  }\n\n  get hideBack() {\n    return this.hasAttribute('hide-back-to-host');\n  }\n\n  get showNavigation() {\n    return this.hasAttribute('show-navigation');\n  }\n\n  get themeColor() {\n    return this.getAttribute('theme-color') || '#001096';\n  }\n\n  get hideAttribution() {\n    return this.hasAttribute('hide-attribution');\n  }\n\n  get documentCaptureModes() {\n    return this.getAttribute('document-capture-modes') || 'camera';\n  }\n\n  get supportBothCaptureModes() {\n    const value = this.documentCaptureModes;\n    return value.includes('camera') && value.includes('upload');\n  }\n\n  get title() {\n    return (\n      this.getAttribute('title') ||\n      `${this.IdSides[this.sideOfId]} of ${this.documentName}`\n    );\n  }\n\n  get height() {\n    return this.getAttribute('height');\n  }\n\n  get width() {\n    return this.getAttribute('width');\n  }\n\n  get hidden() {\n    return this.getAttribute('hidden');\n  }\n\n  get sideOfId() {\n    return (this.getAttribute('side-of-id') || 'front').toLowerCase();\n  }\n\n  get isFrontOfId() {\n    return this.sideOfId === 'front';\n  }\n\n  get isBackOfId() {\n    return !this.isFrontOfId;\n  }\n\n  get direction() {\n    return this.getAttribute('dir') || getDirection() || 'ltr';\n  }\n\n  get documentType() {\n    return this.getAttribute('document-type') || '';\n  }\n\n  get documentName() {\n    return this.getAttribute('document-name') || t('document.name.default');\n  }\n\n  get isPortraitCaptureView() {\n    return this.getAttribute('document-type') === 'GREEN_BOOK';\n  }\n\n  get cameraError() {\n    return this.getAttribute('data-camera-error');\n  }\n\n  static get observedAttributes() {\n    return [\n      'data-camera-error',\n      'data-camera-ready',\n      'document-name',\n      'document-type',\n      'hidden',\n      'hide-back-to-host',\n      'show-navigation',\n      'title',\n    ];\n  }\n\n  attributeChangedCallback(name) {\n    switch (name) {\n      case 'data-camera-error':\n      case 'data-camera-ready':\n      case 'document-name':\n      case 'document-type':\n      case 'hidden':\n      case 'title':\n        this.connectedCallback();\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleBackEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture.cancelled'));\n    SmartCamera.stopMedia();\n  }\n\n  handleCloseEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture.close'));\n    SmartCamera.stopMedia();\n  }\n}\n\nif ('customElements' in window && !customElements.get('document-capture')) {\n  window.customElements.define('document-capture', DocumentCapture);\n}\n\nexport default DocumentCapture;\n","import styles from '../../../../styles/src/styles';\nimport '../../../navigation/src';\nimport { t, getDirection } from '../../../../domain/localisation';\n\nfunction templateString() {\n  return `\n  <style>\n    .retake-photo.button[data-variant~=\"ghost\"] {\n      color: #FF5805;\n    }\n\n\n    @media (max-width: 600px) {\n      .id-camera-screen {\n        width: 100%;\n        height: 100vh;\n      }\n    \n      .section {\n        width: 100%;\n        justify-content: center;\n      }\n    }\n    \n    .id-image-container {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 1.75rem;\n    }\n\n    .id-image {\n        width: 100%;\n        text-align: center;\n        position: relative;\n        background: white;\n    }\n    img {\n      height: 100%;\n      min-height: 100px;\n      width: 98%;\n    }\n\n    .action-buttons {\n      width: 80%;\n    }\n\n\n    .icon-btn {\n      appearance: none;\n      background: none;\n      border: none;\n      color: hsl(0deg 0% 94%);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 4px 8px;\n    }\n    .justify-right {\n      justify-content: end !important;\n    }\n    .nav {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .back-wrapper {\n      display: flex;\n      align-items: center;\n    }\n\n    .back-button-text {\n      font-size: 11px;\n      line-height: 11px;\n      color: rgb(21, 31, 114);\n    }\n\n\n\n    .tips,\n    .powered-by {\n      align-items: center;\n      border-radius: 0.25rem;\n      color: #4e6577;\n      display: flex;\n      justify-content: center;\n      letter-spacing: 0.075em;\n    }\n\n    .powered-by {\n      box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);\n      display: inline-flex;\n      font-size: 0.5rem;\n    }\n\n    .tips {\n      margin-left: auto;\n      margin-right: auto;\n      max-width: 17rem;\n    }\n\n    .tips > * + *,\n    .powered-by > * + * {\n      display: inline-block;\n      margin-left: 0.5em;\n    }\n\n    .powered-by .company {\n      color: #18406d;\n      font-weight: 700;\n      letter-spacing: 0.15rem;\n    }\n\n    .logo-mark {\n      background-color: #004071;\n      display: inline-block;\n      padding: 0.25em 0.5em;\n    }\n\n    .logo-mark svg {\n      height: auto;\n      justify-self: center;\n      width: 0.75em;\n    }\n    \n    #document-capture-review-screen {\n      display: flex;\n      flex-direction: column;\n      max-block-size: 100%;\n      max-inline-size: 40ch;\n      padding: 1rem;\n    }\n\n    #document-capture-review-screen .id-image-container.landscape {\n    height: auto;\n    }\n\n    #document-capture-review-screen header p {\n      margin-block: 0 !important;\n    }\n\n    .description {\n      color: var(--neutral-off-black, #2D2B2A);\n      text-align: center;\n\n      /* p */\n      font-family: DM Sans;\n      font-size: 0.875rem;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 18px;\n    }\n\n    .padding-bottom-2 {\n      padding-bottom: 2rem;\n    }\n    img {\n        border-width: 0.25rem;\n        border-color: #9394ab;\n        border-style: solid;\n        border-radius: 0.25rem;\n      }\n\n    .instructions-wrapper {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 2rem;\n      margin-block-start: 2rem;\n      margin-block-end: 4rem;\n    }\n    .instructions {\n      display: flex;\n      align-items: center;\n      text-align: initial;\n    }\n\n    .instructions svg {\n      flex-shrink: 0;\n      margin-inline-end: 2rem;\n    }\n\n    .instructions p {\n      margin-block: 0;\n    }\n\n    .instruction-body {\n      font-size: 0.75rem;\n    }\n\n    h1 {\n      color: var(--web-digital-blue, #001096);\n      text-align: center;\n\n      /* h1 */\n      font-size: 1.25rem;\n      font-style: normal;\n      font-weight: 700;\n      line-height: 36px; /* 150% */\n    }\n\n    .p2 {\n      font-size: 1rem;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 1rem;\n    }\n\n    .instruction-header {\n      color: var(--web-digital-blue, #001096);\n    }\n\n    .h2 {\n      font-size: 1rem;\n      font-style: normal;\n      font-weight: 700;\n      line-height: 1.5rem;\n    }\n  </style>\n  ${styles(this.themeColor)}\n  <div id='document-capture-review-screen' class='flow center' dir='${this.direction}'>\n  <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>\n    <h1 class=\"header-title title-color\">\n      ${t('document.review.question')}\n    </h1>\n    <p class=\"description\">${t('document.review.description')}</p>\n    <div class='section | flow'>\n      <div class='id-image-container'>\n        <div class='id-image'>\n          <div class='video-overlay'></div>\n          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' />` : ''}\n          </div>\n        <div class='flow action-buttons'>\n          <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>\n            ${t('document.review.acceptButton')}\n          </button>\n          <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-id-image'>\n            ${t('document.review.retakeButton')}\n          </button>\n        </div>\n      </div>\n\n      ${\n        this.hideAttribution\n          ? ''\n          : `\n        <powered-by-smile-id></powered-by-smile-id>\n      `\n      }\n    </div>\n  </div>\n  `;\n}\n\nclass IdReview extends HTMLElement {\n  constructor() {\n    super();\n    this.templateString = templateString.bind(this);\n    this.render = () => this.templateString();\n\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    const template = document.createElement('template');\n    template.innerHTML = this.render();\n    this.shadowRoot.innerHTML = '';\n    this.shadowRoot.appendChild(template.content.cloneNode(true));\n    this.setUpEventListeners();\n  }\n\n  static get observedAttributes() {\n    return ['hide-back-to-host', 'show-navigation', 'data-image'];\n  }\n\n  get hideBack() {\n    return this.hasAttribute('hide-back-to-host');\n  }\n\n  get showNavigation() {\n    return this.hasAttribute('show-navigation');\n  }\n\n  get themeColor() {\n    return this.getAttribute('theme-color') || '#001096';\n  }\n\n  get hideAttribution() {\n    return this.hasAttribute('hide-attribution');\n  }\n\n  get imageSrc() {\n    return this.getAttribute('data-image');\n  }\n\n  get title() {\n    return this.getAttribute('title') || t('document.title.front');\n  }\n\n  get direction() {\n    return this.getAttribute('dir') || getDirection() || 'ltr';\n  }\n\n  handleBackEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture-review.cancelled'));\n  }\n\n  handleCloseEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture-review.close'));\n  }\n\n  attributeChangedCallback(name) {\n    switch (name) {\n      case 'data-image':\n      case 'hide-back-to-host':\n      case 'show-navigation':\n        this.shadowRoot.innerHTML = this.render();\n        this.setUpEventListeners();\n        break;\n      default:\n        break;\n    }\n  }\n\n  setUpEventListeners() {\n    this.selectIDImage = this.shadowRoot.querySelector('#select-id-image');\n    this.reCaptureIDImage = this.shadowRoot.querySelector(\n      '#re-capture-id-image',\n    );\n    this.navigation = this.shadowRoot.querySelector('smileid-navigation');\n    this.navigation.addEventListener('navigation.back', () => {\n      this.handleBackEvents();\n    });\n\n    this.navigation.addEventListener('navigation.close', () => {\n      this.handleCloseEvents();\n    });\n\n    this.selectIDImage.addEventListener('click', () => {\n      this.dispatchEvent(\n        new CustomEvent('document-capture-review.accepted', {\n          detail: {},\n        }),\n      );\n    });\n    this.reCaptureIDImage.addEventListener('click', () => {\n      this.dispatchEvent(\n        new CustomEvent('document-capture-review.rejected', {\n          detail: {},\n        }),\n      );\n    });\n  }\n}\n\nif (\n  'customElements' in window &&\n  !customElements.get('document-capture-review')\n) {\n  window.customElements.define('document-capture-review', IdReview);\n}\n\nexport default IdReview;\n","import { t, tHtml } from '../../localisation';\n\nclass SmartFileUpload {\n  static memoryLimit = 10240000;\n\n  static supportedTypes = ['image/jpeg', 'image/png'];\n\n  static getHumanSize(numberOfBytes) {\n    // Approximate to the closest prefixed unit\n    const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n    const exponent = Math.min(\n      Math.floor(Math.log(numberOfBytes) / Math.log(1024)),\n      units.length - 1,\n    );\n    const approx = numberOfBytes / 1024 ** exponent;\n    const output =\n      exponent === 0\n        ? `${numberOfBytes} bytes`\n        : `${approx.toFixed(0)} ${units[exponent]}`;\n\n    return output;\n  }\n\n  static getData(file) {\n    return new Promise((resolve, reject) => {\n      const reader = new FileReader();\n\n      reader.onload = (e) => {\n        resolve(e.target.result);\n      };\n      reader.onerror = () => {\n        reject(new Error(t('fileUpload.error.readingFile')));\n      };\n      reader.readAsDataURL(file);\n    });\n  }\n\n  static async retrieve(files) {\n    if (files.length > 1) {\n      throw new Error(t('fileUpload.error.multipleFiles'));\n    }\n\n    const file = files[0];\n\n    if (!SmartFileUpload.supportedTypes.includes(file.type)) {\n      throw new Error(t('fileUpload.error.unsupportedFormat'));\n    }\n\n    if (file.size > SmartFileUpload.memoryLimit) {\n      throw new Error(\n        tHtml('fileUpload.error.fileTooLarge', {\n          filename: file.name,\n          size: SmartFileUpload.getHumanSize(SmartFileUpload.memoryLimit),\n        }),\n      );\n    }\n\n    const imageAsDataUrl = await SmartFileUpload.getData(file);\n\n    return imageAsDataUrl;\n  }\n}\n\nexport default SmartFileUpload;\n","import SmartFileUpload from '../../../../domain/file-upload/src/SmartFileUpload';\nimport styles from '../../../../styles/src/styles';\nimport '../../../navigation/src';\nimport { t, escapeHtml, getDirection } from '../../../../domain/localisation';\n\nfunction frontDocumentIcon() {\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"173\" height=\"103\" viewBox=\"0 0 173 103\" fill=\"none\">\n  <path d=\"M15.3799 21.2759C15.3799 16.8576 18.9616 13.2759 23.3799 13.2759H64.2764C68.6947 13.2759 72.2764 16.8576 72.2764 21.2759V73.5517C72.2764 77.97 68.6947 81.5517 64.2764 81.5517H23.3799C18.9616 81.5517 15.3799 77.97 15.3799 73.5517V21.2759Z\" fill=\"#F6C969\"/>\n  <g filter=\"url(#filter0_d_1281_4127)\">\n    <path d=\"M60.2117 80.8741C60.2117 80.8741 49.3661 81.5134 44.1952 81.5134C39.0242 81.5134 28.1787 80.8741 28.1787 80.8741C28.1787 80.8741 34.6256 78.4515 35.3307 76.8701C35.7001 76.0962 35.8344 73.2362 35.9015 70.578C35.9687 67.9199 35.9015 65.5646 35.9015 65.5646L44.1952 65.6992L52.4888 65.5646C52.4888 65.5646 52.3881 72.0921 52.7575 75.3223C52.7813 75.8503 52.8832 76.372 53.0597 76.8701C53.7984 78.4515 60.2117 80.8741 60.2117 80.8741Z\" fill=\"url(#paint0_linear_1281_4127)\"/>\n    <path d=\"M31.3688 47.126C31.3688 47.126 29.1191 46.3184 28.4812 46.6549C27.8432 46.9914 26.8695 48.6737 27.0038 50.6589C27.0373 51.1636 27.4403 53.6872 29.1527 54.9321C29.6564 55.2686 30.1265 56.951 31.2345 57.1865C32.3426 57.422 32.5105 56.6818 32.5105 56.6818L31.3688 47.126Z\" fill=\"url(#paint1_linear_1281_4127)\"/>\n    <path style=\"mix-blend-mode:multiply\" opacity=\"0.6\" d=\"M31.906 51.6683C31.906 51.6683 30.6637 47.7652 28.9848 48.3035C27.3059 48.8419 27.8767 51.6009 27.8767 51.6009C27.8767 51.6009 28.2461 49.0438 29.7571 49.8849C30.5629 50.2887 29.2534 51.029 29.2534 52.072C29.2534 53.1151 30.16 54.36 30.4622 53.6871C30.7644 53.0142 30.9659 50.6252 31.906 51.6683Z\" fill=\"url(#paint2_linear_1281_4127)\"/>\n    <path style=\"mix-blend-mode:multiply\" opacity=\"0.6\" d=\"M30.462 53.687C30.7306 52.7785 30.932 51.399 31.4357 51.5335C31.5749 51.5809 31.6986 51.6655 31.7933 51.7781C31.888 51.8908 31.9501 52.0273 31.973 52.1729L31.8386 51.1971C31.8386 51.1971 30.8985 49.683 29.7568 50.9952\" fill=\"url(#paint3_linear_1281_4127)\"/>\n    <path d=\"M57.3575 47.126C57.3575 47.126 59.6407 46.3184 60.2787 46.6549C60.9167 46.9914 61.8568 48.6737 61.7561 50.6589C61.7225 51.1636 61.286 53.6872 59.5736 54.9321C59.1035 55.2686 58.5998 56.951 57.4918 57.1865C56.3837 57.422 56.2158 56.6818 56.2158 56.6818L57.3575 47.126Z\" fill=\"url(#paint4_linear_1281_4127)\"/>\n    <path style=\"mix-blend-mode:multiply\" opacity=\"0.6\" d=\"M56.8203 51.6683C56.8203 51.6683 58.0627 47.7652 59.7415 48.3035C61.4204 48.8419 60.8832 51.6009 60.8832 51.6009C60.8832 51.6009 60.5138 49.0438 58.9693 49.8849C58.1634 50.2887 59.4729 51.029 59.4729 52.072C59.4729 53.1151 58.5663 54.36 58.2641 53.6871C57.9619 53.0142 57.7605 50.6252 56.8203 51.6683Z\" fill=\"url(#paint5_linear_1281_4127)\"/>\n    <path style=\"mix-blend-mode:multiply\" opacity=\"0.6\" d=\"M58.264 56.749C58.1297 56.9509 57.0552 57.5229 56.4844 56.9509C55.9135 56.3789 56.6858 52.7113 56.753 52.173C56.753 52.173 56.5515 56.177 56.8201 56.3452C56.4172 56.1097 58.2304 56.7826 58.264 56.749Z\" fill=\"url(#paint6_linear_1281_4127)\"/>\n    <path d=\"M64.4757 81.9845H23.9141L32.5771 78.6534L33.5508 75.457C34.2424 75.3865 34.938 75.364 35.6326 75.3897L35.4312 76.5673C35.4312 76.5673 37.6473 78.8553 44.1949 78.8553C50.0038 78.8553 52.9586 76.5673 52.9586 76.5673L52.7908 75.5243V75.3897C53.4854 75.364 54.181 75.3865 54.8725 75.457L55.8463 78.6534L64.4757 81.9845Z\" fill=\"#151F72\"/>\n    <path style=\"mix-blend-mode:multiply\" opacity=\"0.6\" d=\"M33.5509 75.4568C33.383 75.9951 37.7817 79.8309 44.0607 79.8309C48.0849 79.8356 51.9521 78.2662 54.839 75.4568L55.8128 78.6533C55.8128 78.6533 48.7615 81.5133 43.7249 81.5133C38.6883 81.5133 32.5771 78.6533 32.5771 78.6533L33.5509 75.4568Z\" fill=\"url(#paint7_linear_1281_4127)\"/>\n    <path d=\"M56.115 37.1326C51.4478 29.6629 38.8898 29.4947 33.2487 35.854C27.6077 42.2133 30.8983 45.1406 31.1334 54.6292C31.3348 60.0464 31.5699 63.613 35.0955 66.6076C36.1386 67.4711 37.2258 68.2797 38.3525 69.0302C43.7249 73.0679 51.4813 69.5349 53.5296 66.473C57.2231 63.6467 56.8537 60.7866 57.2902 54.7301C57.626 46.8903 60.0436 43.2227 56.115 37.1326Z\" fill=\"url(#paint8_linear_1281_4127)\"/>\n  </g>\n  <g filter=\"url(#filter1_d_1281_4127)\">\n    <mask id=\"path-12-inside-1_1281_4127\" fill=\"white\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 0C10.268 0 4 6.26801 4 14V80.8276C4 88.5596 10.268 94.8276 18 94.8276H155C162.732 94.8276 169 88.5596 169 80.8276V14C169 6.26801 162.732 0 155 0H18ZM23.7858 14.4876C19.3676 14.4876 15.7858 18.0693 15.7858 22.4876V72.3401C15.7858 76.7584 19.3676 80.3401 23.7858 80.3401H62.7858C67.2041 80.3401 70.7858 76.7584 70.7858 72.3401V22.4876C70.7858 18.0693 67.2041 14.4876 62.7858 14.4876H23.7858Z\"/>\n    </mask>\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 0C10.268 0 4 6.26801 4 14V80.8276C4 88.5596 10.268 94.8276 18 94.8276H155C162.732 94.8276 169 88.5596 169 80.8276V14C169 6.26801 162.732 0 155 0H18ZM23.7858 14.4876C19.3676 14.4876 15.7858 18.0693 15.7858 22.4876V72.3401C15.7858 76.7584 19.3676 80.3401 23.7858 80.3401H62.7858C67.2041 80.3401 70.7858 76.7584 70.7858 72.3401V22.4876C70.7858 18.0693 67.2041 14.4876 62.7858 14.4876H23.7858Z\" fill=\"#F9F0E7\"/>\n    <path d=\"M5.5 14C5.5 7.09644 11.0964 1.5 18 1.5V-1.5C9.43959 -1.5 2.5 5.43958 2.5 14H5.5ZM5.5 80.8276V14H2.5V80.8276H5.5ZM18 93.3276C11.0964 93.3276 5.5 87.7311 5.5 80.8276H2.5C2.5 89.388 9.43958 96.3276 18 96.3276V93.3276ZM155 93.3276H18V96.3276H155V93.3276ZM167.5 80.8276C167.5 87.7311 161.904 93.3276 155 93.3276V96.3276C163.56 96.3276 170.5 89.388 170.5 80.8276H167.5ZM167.5 14V80.8276H170.5V14H167.5ZM155 1.5C161.904 1.5 167.5 7.09644 167.5 14H170.5C170.5 5.43959 163.56 -1.5 155 -1.5V1.5ZM18 1.5H155V-1.5H18V1.5ZM17.2858 22.4876C17.2858 18.8977 20.196 15.9876 23.7858 15.9876V12.9876C18.5391 12.9876 14.2858 17.2409 14.2858 22.4876H17.2858ZM17.2858 72.3401V22.4876H14.2858V72.3401H17.2858ZM23.7858 78.8401C20.196 78.8401 17.2858 75.9299 17.2858 72.3401H14.2858C14.2858 77.5868 18.5391 81.8401 23.7858 81.8401V78.8401ZM62.7858 78.8401H23.7858V81.8401H62.7858V78.8401ZM69.2858 72.3401C69.2858 75.9299 66.3757 78.8401 62.7858 78.8401V81.8401C68.0325 81.8401 72.2858 77.5868 72.2858 72.3401H69.2858ZM69.2858 22.4876V72.3401H72.2858V22.4876H69.2858ZM62.7858 15.9876C66.3757 15.9876 69.2858 18.8977 69.2858 22.4876H72.2858C72.2858 17.2409 68.0325 12.9876 62.7858 12.9876V15.9876ZM23.7858 15.9876H62.7858V12.9876H23.7858V15.9876Z\" fill=\"#001096\" mask=\"url(#path-12-inside-1_1281_4127)\"/>\n  </g>\n  <rect x=\"86.501\" y=\"23.7069\" width=\"64.8214\" height=\"1.42241\" rx=\"0.711207\" fill=\"#2D2B2A\"/>\n  <rect x=\"86.501\" y=\"34.2433\" width=\"64.8214\" height=\"1.42241\" rx=\"0.711207\" fill=\"#2D2B2A\"/>\n  <rect x=\"86.501\" y=\"44.1212\" width=\"32.7381\" height=\"1.42241\" rx=\"0.711207\" fill=\"#2D2B2A\"/>\n  <rect x=\"27.5713\" y=\"86.2667\" width=\"32.7381\" height=\"2.63621\" rx=\"1.3181\" fill=\"#DBDBC4\"/>\n  <defs>\n    <filter id=\"filter0_d_1281_4127\" x=\"19.9141\" y=\"31.2932\" width=\"48.5615\" height=\"58.6913\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n      <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n      <feOffset dy=\"4\"/>\n      <feGaussianBlur stdDeviation=\"2\"/>\n      <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n      <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/>\n      <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1281_4127\"/>\n      <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_1281_4127\" result=\"shape\"/>\n    </filter>\n    <filter id=\"filter1_d_1281_4127\" x=\"0\" y=\"0\" width=\"173\" height=\"102.828\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n      <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n      <feOffset dy=\"4\"/>\n      <feGaussianBlur stdDeviation=\"2\"/>\n      <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n      <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/>\n      <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1281_4127\"/>\n      <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_1281_4127\" result=\"shape\"/>\n    </filter>\n    <linearGradient id=\"paint0_linear_1281_4127\" x1=\"44.1986\" y1=\"81.4966\" x2=\"44.1986\" y2=\"65.578\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFB09A\"/>\n      <stop offset=\"0.21\" stop-color=\"#FF9B8D\"/>\n      <stop offset=\"0.47\" stop-color=\"#FF8781\"/>\n      <stop offset=\"0.74\" stop-color=\"#FF7B79\"/>\n      <stop offset=\"1\" stop-color=\"#FF7777\"/>\n    </linearGradient>\n    <linearGradient id=\"paint1_linear_1281_4127\" x1=\"29.7538\" y1=\"57.2504\" x2=\"29.7538\" y2=\"46.5708\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFB09A\"/>\n      <stop offset=\"0.21\" stop-color=\"#FF9B8D\"/>\n      <stop offset=\"0.47\" stop-color=\"#FF8781\"/>\n      <stop offset=\"0.74\" stop-color=\"#FF7B79\"/>\n      <stop offset=\"1\" stop-color=\"#FF7777\"/>\n    </linearGradient>\n    <linearGradient id=\"paint2_linear_1281_4127\" x1=\"29.888\" y1=\"53.8755\" x2=\"29.888\" y2=\"48.2632\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFE7D8\"/>\n      <stop offset=\"0.29\" stop-color=\"#FABDC9\"/>\n      <stop offset=\"0.59\" stop-color=\"#F597BB\"/>\n      <stop offset=\"0.84\" stop-color=\"#F280B3\"/>\n      <stop offset=\"0.99\" stop-color=\"#F177B0\"/>\n    </linearGradient>\n    <linearGradient id=\"paint3_linear_1281_4127\" x1=\"30.8683\" y1=\"53.6937\" x2=\"30.8683\" y2=\"50.4636\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFE7D8\"/>\n      <stop offset=\"0.99\" stop-color=\"#CE77F1\"/>\n    </linearGradient>\n    <linearGradient id=\"paint4_linear_1281_4127\" x1=\"58.9759\" y1=\"57.2504\" x2=\"58.9759\" y2=\"46.5708\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFB09A\"/>\n      <stop offset=\"0.21\" stop-color=\"#FF9B8D\"/>\n      <stop offset=\"0.47\" stop-color=\"#FF8781\"/>\n      <stop offset=\"0.74\" stop-color=\"#FF7B79\"/>\n      <stop offset=\"1\" stop-color=\"#FF7777\"/>\n    </linearGradient>\n    <linearGradient id=\"paint5_linear_1281_4127\" x1=\"58.845\" y1=\"53.8755\" x2=\"58.845\" y2=\"48.2632\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFE7D8\"/>\n      <stop offset=\"0.29\" stop-color=\"#FABDC9\"/>\n      <stop offset=\"0.59\" stop-color=\"#F597BB\"/>\n      <stop offset=\"0.84\" stop-color=\"#F280B3\"/>\n      <stop offset=\"0.99\" stop-color=\"#F177B0\"/>\n    </linearGradient>\n    <linearGradient id=\"paint6_linear_1281_4127\" x1=\"54.5402\" y1=\"54.6965\" x2=\"59.1672\" y2=\"54.6965\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFE7D8\"/>\n      <stop offset=\"0.29\" stop-color=\"#FABDC9\"/>\n      <stop offset=\"0.59\" stop-color=\"#F597BB\"/>\n      <stop offset=\"0.84\" stop-color=\"#F280B3\"/>\n      <stop offset=\"0.99\" stop-color=\"#F177B0\"/>\n    </linearGradient>\n    <linearGradient id=\"paint7_linear_1281_4127\" x1=\"44.195\" y1=\"75.4635\" x2=\"44.195\" y2=\"81.4965\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#151F72\"/>\n      <stop offset=\"0.19\" stop-color=\"#151F72\"/>\n      <stop offset=\"0.54\" stop-color=\"#7FCBF5\"/>\n      <stop offset=\"0.82\" stop-color=\"#C574EC\"/>\n      <stop offset=\"0.99\" stop-color=\"#FBD1EE\"/>\n    </linearGradient>\n    <linearGradient id=\"paint8_linear_1281_4127\" x1=\"30.0589\" y1=\"51.0693\" x2=\"58.3379\" y2=\"51.0693\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#FFB09A\"/>\n      <stop offset=\"0.06\" stop-color=\"#FF9B89\"/>\n      <stop offset=\"0.13\" stop-color=\"#FF8A7B\"/>\n      <stop offset=\"0.23\" stop-color=\"#FF7F71\"/>\n      <stop offset=\"0.36\" stop-color=\"#FF786C\"/>\n      <stop offset=\"0.71\" stop-color=\"#FF766A\"/>\n    </linearGradient>\n  </defs>\n</svg>`;\n}\n\nfunction backDocumentIcon() {\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"182\" height=\"108\" viewBox=\"0 0 182 108\" fill=\"none\">\n  <path d=\"M143 68C143 65.7909 144.791 64 147 64H164C166.209 64 168 65.7909 168 68V89C168 91.2091 166.209 93 164 93H147C144.791 93 143 91.2091 143 89V68Z\" fill=\"#F6C969\"/>\n  <g filter=\"url(#filter0_d_1281_4284)\">\n    <mask id=\"path-2-inside-1_1281_4284\" fill=\"white\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 0C10.268 0 4 6.26801 4 14V86C4 93.732 10.268 100 18 100H164C171.732 100 178 93.732 178 86V14C178 6.26801 171.732 0 164 0H18ZM148 67C145.791 67 144 68.7909 144 71V85C144 87.2091 145.791 89 148 89H162C164.209 89 166 87.2091 166 85V71C166 68.7909 164.209 67 162 67H148Z\"/>\n    </mask>\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 0C10.268 0 4 6.26801 4 14V86C4 93.732 10.268 100 18 100H164C171.732 100 178 93.732 178 86V14C178 6.26801 171.732 0 164 0H18ZM148 67C145.791 67 144 68.7909 144 71V85C144 87.2091 145.791 89 148 89H162C164.209 89 166 87.2091 166 85V71C166 68.7909 164.209 67 162 67H148Z\" fill=\"#F9F0E7\"/>\n    <path d=\"M5.5 14C5.5 7.09644 11.0964 1.5 18 1.5V-1.5C9.43959 -1.5 2.5 5.43959 2.5 14H5.5ZM5.5 86V14H2.5V86H5.5ZM18 98.5C11.0964 98.5 5.5 92.9036 5.5 86H2.5C2.5 94.5604 9.43959 101.5 18 101.5V98.5ZM164 98.5H18V101.5H164V98.5ZM176.5 86C176.5 92.9036 170.904 98.5 164 98.5V101.5C172.56 101.5 179.5 94.5604 179.5 86H176.5ZM176.5 14V86H179.5V14H176.5ZM164 1.5C170.904 1.5 176.5 7.09644 176.5 14H179.5C179.5 5.43959 172.56 -1.5 164 -1.5V1.5ZM18 1.5H164V-1.5H18V1.5ZM145.5 71C145.5 69.6193 146.619 68.5 148 68.5V65.5C144.962 65.5 142.5 67.9624 142.5 71H145.5ZM145.5 85V71H142.5V85H145.5ZM148 87.5C146.619 87.5 145.5 86.3807 145.5 85H142.5C142.5 88.0376 144.962 90.5 148 90.5V87.5ZM162 87.5H148V90.5H162V87.5ZM164.5 85C164.5 86.3807 163.381 87.5 162 87.5V90.5C165.038 90.5 167.5 88.0376 167.5 85H164.5ZM164.5 71V85H167.5V71H164.5ZM162 68.5C163.381 68.5 164.5 69.6193 164.5 71H167.5C167.5 67.9624 165.038 65.5 162 65.5V68.5ZM148 68.5H162V65.5H148V68.5Z\" fill=\"#001096\" mask=\"url(#path-2-inside-1_1281_4284)\"/>\n  </g>\n  <rect x=\"134\" y=\"10\" width=\"3\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"148.733\" y=\"10\" width=\"2\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"154\" y=\"10\" width=\"2\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"166\" y=\"10\" width=\"1.3\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"157\" y=\"10\" width=\"2\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"141.8\" y=\"10\" width=\"5\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"161\" y=\"10\" width=\"4\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"137.767\" y=\"10\" width=\"1\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"151.2\" y=\"10\" width=\"1\" height=\"9\" rx=\"0.5\" fill=\"#DBDBC4\"/>\n  <rect x=\"20.25\" y=\"32.25\" width=\"98.5\" height=\"0.5\" rx=\"0.25\" fill=\"#2D2B2A\" stroke=\"#2D2B2A\" stroke-width=\"0.5\"/>\n  <rect x=\"20.25\" y=\"41.75\" width=\"98.5\" height=\"0.5\" rx=\"0.25\" fill=\"#2D2B2A\" stroke=\"#2D2B2A\" stroke-width=\"0.5\"/>\n  <rect x=\"20.25\" y=\"51.25\" width=\"49.5\" height=\"0.5\" rx=\"0.25\" fill=\"#2D2B2A\" stroke=\"#2D2B2A\" stroke-width=\"0.5\"/>\n  <rect x=\"20.25\" y=\"75.25\" width=\"49.5\" height=\"0.5\" rx=\"0.25\" fill=\"#2D2B2A\" stroke=\"#2D2B2A\" stroke-width=\"0.5\"/>\n  <rect x=\"20.25\" y=\"84.75\" width=\"49.5\" height=\"0.5\" rx=\"0.25\" fill=\"#2D2B2A\" stroke=\"#2D2B2A\" stroke-width=\"0.5\"/>\n  <defs>\n    <filter id=\"filter0_d_1281_4284\" x=\"0\" y=\"0\" width=\"182\" height=\"108\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n      <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n      <feOffset dy=\"4\"/>\n      <feGaussianBlur stdDeviation=\"2\"/>\n      <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n      <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/>\n      <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_1281_4284\"/>\n      <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_1281_4284\" result=\"shape\"/>\n    </filter>\n  </defs>\n</svg>`;\n}\n\nfunction templateString() {\n  return `\n  <style>\n    h1 {\n      font-size: 1.25rem;\n    }\n\n    .controls {\n      width: 100%;\n      margin-top: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n    }\n\n    .content-root {\n      height: 100%;\n      display: flex;\n      align-items: center;\n      flex-direction: column;\n    }\n\n    .content-header, .content-body, .content-footer {\n      width: 100%;\n    }\n\n    .content-body {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: space-between;\n    }\n    \n    .content-body header {\n      margin-top: 1rem;\n    }\n  </style>\n    <div id=\"document-capture-instructions-screen\" class=\"flow center\" dir=\"${this.direction}\">\n        <div class=\"content-root\">\n            <div class=\"content-header\">\n        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>\n        </div>\n        <div class=\"content-body\">\n        <header>\n        ${this.isFrontOfId ? frontDocumentIcon() : backDocumentIcon()}\n            <h1 class='title-color font-bold'>${escapeHtml(this.title)}</h1>\n        <p class=\"description text-sm font-normal\">\n            ${t('document.instructions.description')}\n          </p>\n          <p class=\"description padding-bottom-2\">\n          ${t('document.instructions.followInstructions')}\n          </p>\n        </header>\n        <div class=\"instructions-wrapper\">\n            <div class=\"instructions\">\n                <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"38\"\n                height=\"38\"\n                viewBox=\"0 0 38 38\"\n                fill=\"none\"\n                >\n                <g clip-path=\"url(#clip0_604_670)\">\n                    <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M31.8569 19C31.8569 21.5428 31.1029 24.0285 29.6902 26.1428C28.2774 28.2571 26.2695 29.9049 23.9203 30.878C21.571 31.8511 18.986 32.1057 16.492 31.6096C13.9981 31.1136 11.7072 29.8891 9.90919 28.091C8.11115 26.293 6.88668 24.0022 6.3906 21.5082C5.89452 19.0143 6.14913 16.4292 7.12222 14.08C8.09531 11.7307 9.74318 9.72279 11.8574 8.31008C13.9717 6.89737 16.4574 6.14334 19.0002 6.14334C22.41 6.14334 25.6802 7.49788 28.0913 9.90897C30.5024 12.3201 31.8569 15.5902 31.8569 19Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M19.6064 4.5419H18.394L18.9912 0L19.6064 4.5419Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M26.7541 6.77667L25.7046 6.17048L28.4913 2.54239L26.7541 6.77667Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M31.8298 12.2957L31.2236 11.2462L35.4489 9.49097L31.8298 12.2957Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M33.4674 19.6062V18.3938L38.0003 18.9909L33.4674 19.6062Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M31.2236 26.7538L31.8298 25.7043L35.4579 28.491L31.2236 26.7538Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M25.7046 31.8295L26.7541 31.2233L28.5094 35.4486L25.7046 31.8295Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M18.394 33.4671H19.6064L19.0093 38L18.394 33.4671Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M11.2464 31.2233L12.2959 31.8295L9.50928 35.4576L11.2464 31.2233Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M6.17068 25.7043L6.77687 26.7538L2.55164 28.509L6.17068 25.7043Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M4.54215 18.3938V19.6062L0.000244141 19.009L4.54215 18.3938Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M6.77689 11.2462L6.1707 12.2957L2.5426 9.50903L6.77689 11.2462Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                    <path\n                    d=\"M12.296 6.17047L11.2464 6.77666L9.49121 2.55142L12.296 6.17047Z\"\n                    fill=\"${this.themeColor}\"\n                    />\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_604_670\">\n                    <rect\n                        width=\"38\"\n                        height=\"38\"\n                        fill=\"white\"\n                        transform=\"translate(0.000244141)\"\n                    />\n                    </clipPath>\n                </defs>\n                </svg>\n                <div class=\"instruction\">\n                <p class=\"instruction-header font-bold text-base\">${t('document.instructions.goodLight.header')}</p>\n                <p class=\"instruction-body text-xs font-medium\">\n                  ${t('document.instructions.goodLight.body')}\n                </p>\n            </div>\n        </div>\n        <div class=\"instructions\">\n            <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"38\"\n            height=\"36\"\n            viewBox=\"0 0 38 36\"\n            fill=\"none\"\n            >\n            <g clip-path=\"url(#clip0_604_672)\">\n                <path\n                d=\"M36.7211 12.6391H1.22537C1.06275 13.0909 0.910962 13.5427 0.77002 14.0055H37.1764C37.0463 13.5427 36.8946 13.0909 36.7211 12.6391Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M37.3716 14.7438H0.574875C0.466458 15.1625 0.379725 15.5813 0.303833 16.011H37.6426C37.5667 15.5813 37.48 15.1625 37.3716 14.7438Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M37.7727 16.8485H0.173703C0.119494 17.2342 0.0869685 17.6198 0.0544434 18.0055H37.892C37.8594 17.6198 37.8269 17.2342 37.7727 16.8485Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M37.9462 19.4711C37.9462 19.2948 37.9462 19.1295 37.9353 18.9532H0.0110865C0.000244802 19.1295 0.000244141 19.2948 0.000244141 19.4711C0.000244141 19.6474 0.000244802 19.8347 0.0110865 20.011H37.9353C37.9462 19.8347 37.9462 19.6474 37.9462 19.4711Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M37.8811 21.0579H0.0653076C0.086991 21.3774 0.119515 21.697 0.162882 22.0055H37.7836C37.8269 21.697 37.8595 21.3774 37.8811 21.0579Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M37.5992 23.1625H0.347168C0.401376 23.449 0.466426 23.7245 0.531477 24H37.4149C37.48 23.7245 37.545 23.449 37.5992 23.1625Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M37.0788 25.2672H0.867554C0.954287 25.5096 1.03018 25.7631 1.11691 26.0055H36.8295C36.9162 25.7631 37.0029 25.5096 37.0788 25.2672Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M36.2874 27.3719H1.65906L1.95178 28H35.9947L36.2874 27.3719Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M35.2032 29.4766H2.75403C2.84799 29.6529 2.95641 29.8292 3.07928 30.0055H34.878L35.2032 29.4766Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M33.7396 31.5813H4.20679L4.54288 32H33.4035L33.7396 31.5813Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M31.7989 33.6859H6.14746L6.49439 33.9945H31.452L31.7989 33.6859Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M29.0993 35.7906H8.84705L9.18314 36H28.7632L29.0993 35.7906Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M34.2384 8.01102C33.8914 7.53719 33.5228 7.07438 33.1325 6.63361C29.8258 2.60055 24.6977 0 18.9407 0C12.891 0 7.53525 2.86501 4.25021 7.26171H4.28274C4.08759 7.51515 3.89244 7.75757 3.70813 8.01102H34.2384Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M34.531 8.44077H3.41533C3.06839 8.94765 2.74314 9.47658 2.43958 10.0165H35.5068C35.2124 9.47215 34.8866 8.94597 34.531 8.44077Z\"\n                fill=\"${this.themeColor}\"\n                />\n                <path\n                d=\"M35.7887 10.5344H2.15776C1.9084 11.0193 1.68072 11.5151 1.47473 12.011H36.4717C36.2657 11.5151 36.0381 11.0193 35.7887 10.5344Z\"\n                fill=\"${this.themeColor}\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_604_672\">\n                <rect\n                    width=\"37.9459\"\n                    height=\"36\"\n                    fill=\"white\"\n                    transform=\"translate(0.000244141)\"\n                />\n                </clipPath>\n            </defs>\n            </svg>\n            <div>\n                <p class=\"instruction-header font-bold text-base\">${t('document.instructions.clearImage.header')}</p>\n                <p class=\"instruction-body text-xs font-medium\">\n                  ${t('document.instructions.clearImage.body')}\n                </p>\n            </div>\n        </div>\n        <div id=\"error\" class='color-red'>\n        </div>\n        </div>\n    <div class='controls'>\n    ${\n      this.supportBothCaptureModes || this.documentCaptureModes === 'camera'\n        ? `\n    <button data-variant='solid full-width' class='button' type='button' id='take-photo'>\n        ${t('document.instructions.takePhotoButton')}\n    </button>\n    `\n        : ''\n    }\n    ${\n      this.supportBothCaptureModes || this.documentCaptureModes === 'upload'\n        ? `\n    <label id='upload-photo-label' data-variant='${\n      this.supportBothCaptureModes ? 'outline' : 'solid'\n    }' class='button'>\n        <input type='file' hidden onclick='this.value=null;' id='upload-photo' name='document' accept='image/png, image/jpeg' />\n        <span>${t('document.instructions.uploadPhotoButton')}</span>\n    </label>\n    `\n        : ''\n    }\n</div>\n${\n  this.hideAttribution\n    ? ''\n    : `\n  <div class=\"content-footer\">\n    <powered-by-smile-id></powered-by-smile-id>\n  </div>\n  `\n}\n    </div>\n  </div>\n</div>\n  ${styles(this.themeColor)}\n  `;\n}\n\nclass DocumentInstruction extends HTMLElement {\n  constructor() {\n    super();\n    this.templateString = templateString.bind(this);\n    this.render = () => this.templateString();\n\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    const template = document.createElement('template');\n    template.innerHTML = this.render();\n\n    this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n    this.navigation = this.shadowRoot.querySelector('smileid-navigation');\n    this.takeDocumentPhotoButton = this.shadowRoot.querySelector('#take-photo');\n    this.uploadDocumentPhotoButton =\n      this.shadowRoot.querySelector('#upload-photo');\n\n    this.navigation.addEventListener('navigation.back', () => {\n      this.handleBackEvents();\n    });\n\n    this.navigation.addEventListener('navigation.close', () => {\n      this.handleCloseEvents();\n    });\n\n    if (this.takeDocumentPhotoButton) {\n      this.takeDocumentPhotoButton.addEventListener('click', () => {\n        this.dispatchEvent(\n          new CustomEvent('document-capture-instructions.capture'),\n        );\n      });\n    }\n\n    if (this.uploadDocumentPhotoButton) {\n      this.uploadDocumentPhotoButton.addEventListener(\n        'change',\n        async (event) => {\n          this.shadowRoot.querySelector('#error').innerHTML = '';\n          try {\n            const { files } = event.target;\n\n            // validate file, and convert file to data url\n            const fileData = await SmartFileUpload.retrieve(files);\n\n            this.dispatchEvent(\n              new CustomEvent('document-capture-instructions.upload', {\n                detail: { image: fileData, previewImage: fileData },\n              }),\n            );\n          } catch (error) {\n            this.shadowRoot.querySelector('#error').innerHTML = error.message;\n          }\n        },\n      );\n    }\n  }\n\n  get hideBack() {\n    return this.hasAttribute('hide-back-to-host');\n  }\n\n  get showNavigation() {\n    return this.hasAttribute('show-navigation');\n  }\n\n  get themeColor() {\n    return this.getAttribute('theme-color') || '#001096';\n  }\n\n  get hideAttribution() {\n    return this.hasAttribute('hide-attribution');\n  }\n\n  get documentCaptureModes() {\n    return this.getAttribute('document-capture-modes') || 'camera';\n  }\n\n  get supportBothCaptureModes() {\n    const value = this.documentCaptureModes;\n    return value.includes('camera') && value.includes('upload');\n  }\n\n  get title() {\n    return this.getAttribute('title') || t('document.title.front');\n  }\n\n  get sideOfId() {\n    return (this.getAttribute('side-of-id') || 'front').toLowerCase();\n  }\n\n  get isFrontOfId() {\n    return this.sideOfId === 'front';\n  }\n\n  get isBackOfId() {\n    return !this.isFrontOfId;\n  }\n\n  get direction() {\n    return this.getAttribute('dir') || getDirection() || 'ltr';\n  }\n\n  handleBackEvents() {\n    this.dispatchEvent(\n      new CustomEvent('document-capture-instructions.cancelled'),\n    );\n  }\n\n  handleCloseEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture-instructions.close'));\n  }\n}\n\nif (\n  'customElements' in window &&\n  !customElements.get('document-capture-instructions')\n) {\n  window.customElements.define(\n    'document-capture-instructions',\n    DocumentInstruction,\n  );\n}\n\nexport default DocumentInstruction;\n","import { IMAGE_TYPE } from '../../../domain/constants/src/Constants';\nimport styles from '../../../styles/src/styles';\nimport SmartCamera from '../../../domain/camera/src/SmartCamera';\nimport { t } from '../../../domain/localisation';\n\nimport './document-capture';\nimport './document-capture-review';\nimport './document-capture-instructions';\nimport packageJson from '../../../../package.json';\n\nconst COMPONENTS_VERSION = packageJson.version;\n\nconst smartCameraWeb = document.querySelector('smart-camera-web');\n\nasync function getPermissions(captureScreen) {\n  try {\n    const stream = await SmartCamera.getMedia({\n      audio: false,\n      video: SmartCamera.environmentOptions,\n    });\n    const devices = await navigator.mediaDevices.enumerateDevices();\n    const videoDevice = devices.find(\n      (device) =>\n        device.kind === 'videoinput' &&\n        stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,\n    );\n    smartCameraWeb?.dispatchEvent(\n      new CustomEvent('metadata.camera-name', {\n        detail: { cameraName: videoDevice?.label },\n      }),\n    );\n    captureScreen.removeAttribute('data-camera-error');\n    captureScreen.setAttribute('data-camera-ready', true);\n  } catch (error) {\n    captureScreen.removeAttribute('data-camera-ready');\n    captureScreen.setAttribute(\n      'data-camera-error',\n      SmartCamera.handleCameraError(error),\n    );\n  }\n}\n\nclass DocumentCaptureScreens extends HTMLElement {\n  constructor() {\n    super();\n    this.activeScreen = null;\n    this.smartCameraWeb = this.closest('smart-camera-web');\n    smartCameraWeb?.dispatchEvent(new CustomEvent('metadata.initialize'));\n  }\n\n  connectedCallback() {\n    this.innerHTML = `\n      ${styles(this.themeColor)}\n      <div style=\"height: 100%;\">\n      <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title}\n      ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}\n      ${this.hideAttribution}\n      ></document-capture-instructions>\n      <document-capture id='document-capture-front' side-of-id='Front'\n      ${this.title || `title='${t('document.title.front')}'`} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}\n      ${this.documentCaptureModes} ${this.documentType} theme-color='${this.themeColor}'\n      ></document-capture>\n      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='${t('document.title.back')}'\n       ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' ${this.hideAttribution} hidden\n       ></document-capture-instructions>\n      <document-capture id='document-capture-back' side-of-id='Back' ${this.title || `title='${t('document.title.back')}'`}  ${this.showNavigation}\n      ${this.documentCaptureModes} theme-color='${this.themeColor}' ${this.hideAttribution}\n      hidden \n      ></document-capture>\n      <document-capture-review id='front-of-document-capture-review' theme-color='${this.themeColor}' ${this.hideAttribution} hidden></document-capture-review>\n      <document-capture-review id='back-of-document-capture-review' theme-color='${this.themeColor}' ${this.hideAttribution} hidden></document-capture-review>\n      </div>\n    `;\n\n    this._data = {\n      images: [],\n      meta: {\n        libraryVersion: COMPONENTS_VERSION,\n      },\n    };\n\n    this.documentInstruction = this.querySelector(\n      'document-capture-instructions',\n    );\n    this.documentInstructionBack = this.querySelector(\n      '#document-capture-instructions-back',\n    );\n    this.idCapture = this.querySelector('#document-capture-front');\n    this.idReview = this.querySelector('#front-of-document-capture-review');\n    this.idCaptureBack = this.querySelector('#document-capture-back');\n    this.backOfIdReview = this.querySelector(\n      '#back-of-document-capture-review',\n    );\n    this.thankYouScreen = this.querySelector('thank-you');\n\n    if (this.hideInstructions) {\n      getPermissions(this.idCapture);\n      this.setActiveScreen(this.idCapture);\n    } else {\n      this.setActiveScreen(this.documentInstruction);\n    }\n\n    this.setUpEventListeners();\n  }\n\n  disconnectedCallback() {\n    SmartCamera.stopMedia();\n    smartCameraWeb?.dispatchEvent(new CustomEvent('metadata.cleanup'));\n    if (this.activeScreen) {\n      this.activeScreen.removeAttribute('hidden');\n    }\n    this.activeScreen = null;\n    this.innerHTML = '';\n  }\n\n  setUpEventListeners() {\n    this.documentInstruction.addEventListener(\n      'document-capture-instructions.cancelled',\n      () => {\n        this.handleBackEvents();\n      },\n    );\n\n    this.documentInstruction.addEventListener(\n      'document-capture-instructions.capture',\n      async () => {\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-front-capture-start'),\n        );\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-front-origin', {\n            detail: { imageOrigin: 'camera_manual_capture' },\n          }),\n        );\n        this.setActiveScreen(this.idCapture);\n        await getPermissions(this.idCapture);\n      },\n    );\n    this.documentInstruction.addEventListener(\n      'document-capture-instructions.upload',\n      async (event) => {\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-front-origin', {\n            detail: { imageOrigin: 'gallery' },\n          }),\n        );\n        this.idReview.setAttribute('data-image', event.detail.previewImage);\n        this._data.images.push({\n          image: event.detail.image.split(',')[1],\n          image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,\n        });\n        this.setActiveScreen(this.idReview);\n      },\n    );\n\n    this.idCapture.addEventListener('document-capture.publish', (event) => {\n      smartCameraWeb?.dispatchEvent(\n        new CustomEvent('metadata.document-front-capture-end'),\n      );\n      this.idReview.setAttribute('data-image', event.detail.previewImage);\n      this._data.images.push({\n        image: event.detail.image.split(',')[1],\n        image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,\n      });\n      SmartCamera.stopMedia();\n      this.setActiveScreen(this.idReview);\n    });\n\n    this.idCapture.addEventListener('document-capture.cancelled', () => {\n      if (this.hideInstructions) {\n        this.handleBackEvents();\n      } else {\n        this.setActiveScreen(this.documentInstruction);\n      }\n    });\n\n    this.idReview.addEventListener(\n      'document-capture-review.rejected',\n      async () => {\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-front-capture-retry'),\n        );\n        this.idReview.removeAttribute('data-image');\n        this._data.images.pop();\n        if (this.hideInstructions) {\n          this.setActiveScreen(this.idCapture);\n          await getPermissions(this.idCapture);\n        } else {\n          this.setActiveScreen(this.documentInstruction);\n        }\n      },\n    );\n\n    this.idReview.addEventListener(\n      'document-capture-review.accepted',\n      async () => {\n        if (this.hideBackOfId) {\n          this._publishSelectedImages();\n        } else if (this.hideInstructions) {\n          this.setActiveScreen(this.idCaptureBack);\n          await getPermissions(this.idCaptureBack);\n        } else {\n          this.setActiveScreen(this.documentInstructionBack);\n        }\n      },\n    );\n\n    this.documentInstructionBack.addEventListener(\n      'document-capture-instructions.capture',\n      async () => {\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-back-capture-start'),\n        );\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-back-origin', {\n            detail: { imageOrigin: 'camera_manual_capture' },\n          }),\n        );\n        this.setActiveScreen(this.idCaptureBack);\n        await getPermissions(this.idCaptureBack);\n      },\n    );\n\n    this.documentInstructionBack.addEventListener(\n      'document-capture-instructions.cancelled',\n      async () => {\n        this.idReview.removeAttribute('data-image');\n        this._data.images.pop();\n        if (this.hideInstructions) {\n          this.setActiveScreen(this.idCapture);\n          await getPermissions(this.idCapture);\n        } else {\n          this.setActiveScreen(this.documentInstruction);\n        }\n      },\n    );\n\n    this.documentInstructionBack.addEventListener(\n      'document-capture-instructions.upload',\n      async (event) => {\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-back-origin', {\n            detail: { imageOrigin: 'gallery' },\n          }),\n        );\n        this.backOfIdReview.setAttribute('data-image', event.detail.image);\n        this._data.images.push({\n          image: event.detail.image.split(',')[1],\n          image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,\n        });\n        this.setActiveScreen(this.backOfIdReview);\n      },\n    );\n    this.idCaptureBack.addEventListener('document-capture.publish', (event) => {\n      smartCameraWeb?.dispatchEvent(\n        new CustomEvent('metadata.document-back-capture-end'),\n      );\n      this.backOfIdReview.setAttribute('data-image', event.detail.previewImage);\n      this._data.images.push({\n        image: event.detail.image.split(',')[1],\n        image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,\n      });\n      this.setActiveScreen(this.backOfIdReview);\n      SmartCamera.stopMedia();\n    });\n\n    this.idCaptureBack.addEventListener(\n      'document-capture.cancelled',\n      async () => {\n        if (this.hideInstructions) {\n          this.setActiveScreen(this.idCapture);\n          await getPermissions(this.idCapture);\n        } else {\n          this.setActiveScreen(this.documentInstructionBack);\n        }\n      },\n    );\n\n    this.backOfIdReview.addEventListener(\n      'document-capture-review.rejected',\n      async () => {\n        smartCameraWeb?.dispatchEvent(\n          new CustomEvent('metadata.document-back-capture-retry'),\n        );\n        this.backOfIdReview.removeAttribute('data-image');\n        this._data.images.pop();\n        if (this.hideInstructions) {\n          this.setActiveScreen(this.idCaptureBack);\n          await getPermissions(this.idCaptureBack);\n        } else {\n          this.setActiveScreen(this.documentInstructionBack);\n        }\n      },\n    );\n\n    this.backOfIdReview.addEventListener(\n      'document-capture-review.accepted',\n      () => {\n        this._publishSelectedImages();\n      },\n    );\n\n    const screens = [\n      this.documentInstruction,\n      this.idCapture,\n      this.documentInstructionBack,\n      this.idCaptureBack,\n      this.idReview,\n      this.backOfIdReview,\n    ];\n\n    screens.forEach((screen) => {\n      screen.addEventListener(`${screen.nodeName.toLowerCase()}.close`, () =>\n        this.handleCloseEvents(),\n      );\n    });\n  }\n\n  _publishSelectedImages() {\n    this.dispatchEvent(\n      new CustomEvent('document-capture-screens.publish', {\n        detail: this._data,\n      }),\n    );\n  }\n\n  get hideInstructions() {\n    return this.hasAttribute('hide-instructions');\n  }\n\n  get hideBackOfId() {\n    return this.hasAttribute('hide-back-of-id');\n  }\n\n  get showNavigation() {\n    return this.hasAttribute('show-navigation') ? 'show-navigation' : '';\n  }\n\n  get title() {\n    return this.hasAttribute('title')\n      ? `title=${this.getAttribute('title')}`\n      : '';\n  }\n\n  get documentCaptureModes() {\n    return this.hasAttribute('document-capture-modes')\n      ? `document-capture-modes='${this.getAttribute('document-capture-modes')}'`\n      : '';\n  }\n\n  get documentType() {\n    return this.hasAttribute('document-type')\n      ? `document-type='${this.getAttribute('document-type')}'`\n      : '';\n  }\n\n  get hideAttribution() {\n    return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';\n  }\n\n  get themeColor() {\n    return this.getAttribute('theme-color') || '#001096';\n  }\n\n  handleBackEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture-screens.cancelled'));\n  }\n\n  handleCloseEvents() {\n    this.dispatchEvent(new CustomEvent('document-capture-screens.close'));\n  }\n\n  setActiveScreen(screen) {\n    this.activeScreen?.setAttribute('hidden', '');\n    screen.removeAttribute('hidden');\n    this.activeScreen = screen;\n  }\n\n  static get observedAttributes() {\n    return [\n      'document-capture-modes',\n      'document-type',\n      'hide-back-to-host',\n      'show-navigation',\n      'hide-back-of-id',\n    ];\n  }\n\n  attributeChangedCallback(name) {\n    switch (name) {\n      case 'document-capture-modes':\n      case 'document-type':\n      case 'hide-back-of-id':\n      case 'hide-back-to-host':\n      case 'show-navigation':\n        this.connectedCallback();\n        break;\n      default:\n        break;\n    }\n  }\n}\n\nif (\n  'customElements' in window &&\n  !customElements.get('document-capture-screens')\n) {\n  customElements.define('document-capture-screens', DocumentCaptureScreens);\n}\n\nexport default DocumentCaptureScreens;\n"],"names":["hasMoreThanNColors","data","n","colors","templateString","styles","t","documentCaptureScale","DocumentCapture","template","SmartCamera","error","imageDetails","video","canvas","previewCanvas","image","JPEG_QUALITY","previewImage","height","intermediateCanvas","enableImageTests","context","imageData","stream","videoExists","videoContainer","onVideoStart","portrait","scaleHeight","scaleWidth","heightScaleFactor","widthScaleFactor","scaleHeightOffset","scaleWidthOffset","width","startX","startY","videoHeight","videoWidth","cropWidth","cropHeight","sourceCanvas","destinationCanvas","aspectRatio","offsetX","offsetY","track","value","getDirection","name","IdReview","SmartFileUpload","numberOfBytes","units","exponent","approx","file","resolve","reject","reader","e","files","tHtml","frontDocumentIcon","backDocumentIcon","escapeHtml","DocumentInstruction","event","fileData","COMPONENTS_VERSION","packageJson","smartCameraWeb","getPermissions","captureScreen","videoDevice","device","DocumentCaptureScreens","IMAGE_TYPE","screen"],"mappings":"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"}

package/dist/esm/{EndUserConsent-D4fd1ovG.js → EndUserConsent-DE6OBSGG.js}

@@ -1,7 +1,8 @@
-import { s as o } from "./styles-BOEZtbuc.js";
-import "./TotpConsent-CQU5jQi4.js";
+import { s } from "./styles-BOEZtbuc.js";
+import "./TotpConsent-DsMJhXD8.js";
 import "./PoweredBySmileId-CxbaihMu.js";
-function n() {
+import { k as r, t, c as n } from "./index-LJce6hoU.js";
+function l() {
   return `
     <style>
       *,
@@ -314,8 +315,8 @@ function n() {
         color: var(--color-danger);
       }
     </style>
-    ${o(this.themeColor)}
-    <div id='consent-screen'>
+    ${s(this.themeColor)}
+    <div id='consent-screen' dir='${this.direction}'>
       <section class='flow center'>
         <div class="nav ${this.hideBack ? "justify-right" : ""}">
           <div class="back-wrapper" ${this.hideBack ? "hidden" : ""}>
@@ -325,14 +326,14 @@ function n() {
                 <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
               </svg>
             </button>
-            <div class="back-button-text">Back</div>
+            <div class="back-button-text">${t("common.back")}</div>
           </div>
           <button data-type='icon' type='button' class='close-iframe'>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
               <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
               <path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
             </svg>
-            <span class='visually-hidden'>Close SmileIdentity Verification frame</span>
+            <span class='visually-hidden'>${t("common.close")} SmileIdentity Verification frame</span>
           </button>
         </div>
         <img alt='' width='50' height='50' src='${this.partnerLogoURL}' />
@@ -344,17 +345,17 @@ function n() {
           </svg>
 
           <span>
-            This consent screen is for illustrative purposes only. Demo App does not collect personal ID data.
+            ${t("consent.demoTip")}
           </span>
         </p>
         <h1 class='text-base font-bold'>
-          <span class='theme'>${this.partnerName}</span>
-          wants to access your
-          <span class='theme'>${this.idTypeLabel}</span>
-          information
+          ${n("consent.accessRequest", {
+    idTypeLabel: { className: "theme", value: this.idTypeLabel },
+    partnerName: { className: "theme", value: this.partnerName }
+  })}
         </h1>
         <p class='text-base font-normal'>
-          This will allow ${this.partnerName} to:
+          ${n("consent.allowPartner", { partnerName: this.partnerName })}
         </p>
       </section>
 
@@ -366,8 +367,8 @@ function n() {
             <path d="M14.9238 19.0148L13.8262 17.931C13.8262 17.931 13.6341 17.7956 13.5244 17.7956C13.4146 17.7956 13.3049 17.8498 13.2226 17.931C13.1402 18.0123 13.0854 18.1207 13.0854 18.2291C13.0854 18.3374 13.1402 18.4458 13.2226 18.5271L14.622 19.9089C14.622 19.9089 14.814 20.0443 14.9238 20.0443C15.0335 20.0443 15.1433 19.9901 15.2256 19.9089L17.8323 17.335C17.8323 17.335 17.9421 17.1724 17.9421 17.0369C17.9421 16.9015 17.9146 16.8202 17.8323 16.7389C17.75 16.6576 17.6677 16.6305 17.5579 16.6305C17.4482 16.6305 17.3384 16.6576 17.2835 16.7389L15.0061 18.9877L14.9238 19.0148ZM15.5 24C15.5 24 15.4177 24 15.3902 24C15.3628 24 15.3354 24 15.3079 24C14.0457 23.6207 13.0305 22.8621 12.2073 21.7241C11.4116 20.5862 11 19.3128 11 17.931V15.2217C11 15.0591 11.0549 14.8965 11.1646 14.734C11.2744 14.5714 11.4116 14.4901 11.5488 14.4089L15.1982 13.0542C15.1982 13.0542 15.3902 13 15.5 13C15.6098 13 15.6921 13 15.8018 13.0542L19.4512 14.4089C19.6159 14.4631 19.753 14.5714 19.8354 14.734C19.9177 14.8965 20 15.032 20 15.2217V17.931C20 19.3128 19.5884 20.5862 18.7927 21.7241C17.9969 22.8621 16.9543 23.6478 15.6921 24H15.5Z" fill="#2CC05C"/>
           </svg>        
           <div class='processing-list__items-item'>
-            <p class='font-medium text-base processing-list__item__title'>Process your personal details</p>
-            <p class='text-xs font-medium processing-list__items-item__description'>Partner can process your names, DoB and gender</p>
+            <p class='font-medium text-base processing-list__item__title'>${t("consent.processing.personalDetails.title")}</p>
+            <p class='text-xs font-medium processing-list__items-item__description'>${t("consent.processing.personalDetails.description")}</p>
           </div
         </li>
         <li class='processing-list__items'>
@@ -377,8 +378,8 @@ function n() {
             <path d="M20 16.83C19.9987 17.2074 19.9131 17.5798 19.7496 17.92C19.5794 18.28 19.359 18.62 19.0686 18.94C18.5779 19.48 18.037 19.87 17.4261 20.12C17.4161 20.12 17.4061 20.13 17.3961 20.13C16.8052 20.37 16.1642 20.5 15.4732 20.5C14.4517 20.5 13.36 20.26 12.2083 19.77C11.0566 19.28 9.90483 18.62 8.76312 17.79C8.37253 17.5 7.98195 17.21 7.61139 16.9L10.8863 13.63C11.1667 13.84 11.4171 14 11.6274 14.11C11.6775 14.13 11.7376 14.16 11.8077 14.19C11.8878 14.22 11.9679 14.23 12.0581 14.23C12.2283 14.23 12.3585 14.17 12.4687 14.06L13.2298 13.31C13.4802 13.06 13.7206 12.87 13.9509 12.75C14.1813 12.61 14.4116 12.54 14.662 12.54C14.8523 12.54 15.0526 12.58 15.2729 12.67C15.4932 12.76 15.7236 12.89 15.9739 13.06L19.2889 15.41C19.5493 15.59 19.7296 15.8 19.8397 16.05C19.9399 16.3 20 16.55 20 16.83Z" fill="#151F72"/>
           </svg>
           <div class='processing-list__items-item'>
-            <p class='font-medium text-base processing-list__item__title'>Process your contact information</p>
-            <p class='text-xs font-medium processing-list__items-item__description'>Partner can process your phone numbers and address</p>
+            <p class='font-medium text-base processing-list__item__title'>${t("consent.processing.contactInfo.title")}</p>
+            <p class='text-xs font-medium processing-list__items-item__description'>${t("consent.processing.contactInfo.description")}</p>
           </div
         </li>
         <li class='processing-list__items'>
@@ -401,32 +402,30 @@ function n() {
             </defs>
           </svg>
           <div class='processing-list__items-item'>
-            <p class='font-medium text-base processing-list__item__title'>Process your document information</p>
-            <p class='text-xs font-medium processing-list__items-item__description'>Partner can process your photo, ID expiration date, country of issuance and document number</p>
+            <p class='font-medium text-base processing-list__item__title'>${t("consent.processing.documentInfo.title")}</p>
+            <p class='text-xs font-medium processing-list__items-item__description'>${t("consent.processing.documentInfo.description")}</p>
           </div
         </li>
       </ul>
 
       <section class='callout | flow center' style='--flow-space: 2rem; margin: var(--flow-space) auto;'>
         <p>
-          You can view <span class='theme'>${this.partnerName}</span>'s privacy policy
-          <a class='theme' href='${this.partnerPolicyURL}' rel='noreferer noopener' target='_blank'>here</a>
+          ${n("consent.privacyPolicy", { partnerName: this.partnerName })}
+          <a class='theme' href='${this.partnerPolicyURL}' rel='noreferer noopener' target='_blank'>${t("consent.privacyPolicyLink")}</a>
         </p>
 
         <p style='--flow-space: .75rem'>
-          By choosing "Allow", you grant
-          <span class='theme'>${this.partnerName}</span>
-          consent to process your personal data to offer you this service
+          ${n("consent.grantConsent", { partnerName: this.partnerName })}
         </p>
       </section>
 
       <section class='flow' style='--flow-space: 2.5rem'>
         <button id='allow' data-variant='solid'>
-          Allow
+          ${t("common.allow")}
         </button>
 
         <button id='cancel' data-variant='ghost' class='color-danger' style='--flow-space: 1.5rem'>
-          Cancel
+          ${t("common.cancel")}
         </button>
       </section>
     </div>
@@ -554,15 +553,15 @@ function n() {
         </svg>
 
         <h1 style='font-size: 36px; line-height: 1; font-weight: 500; --flow-space: 1.5rem'>
-          Consent Denied
+          ${t("consent.denied.title")}
         </h1>
 
         <p class='color-grey' style='--flow-space: 1rem'>
-          We cannot verify you without your consent
+          ${t("consent.denied.message")}
         </p>
 
         <p>
-          Wish to correct that?
+          ${t("consent.denied.prompt")}
         </p>
       </section>
 
@@ -570,55 +569,55 @@ function n() {
         <svg style='transform: rotate(.5turn);' width="25" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M7 12h11m0 0-4.588-4M18 12l-4.588 4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-        Go Back
+        ${t("consent.denied.goBack")}
       </button>
 
       <button data-variant='outline' id='confirm-consent-rejection' style='--flow-space: 1rem; border-radius: 2rem'>
-        No, Cancel Verification
+        ${t("consent.denied.confirmCancel")}
       </button>
 
       ${this.hideAttribution ? "" : "<powered-by-smile-id></powered-by-smile-id>"}
     </div>
   `;
 }
-class s extends HTMLElement {
+class a extends HTMLElement {
   constructor() {
-    super(), this.idRequiresTotpConsent = ["BVN_MFA"], this.templateString = n.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" });
+    super(), this.idRequiresTotpConsent = ["BVN_MFA"], this.templateString = l.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     this.pages = [];
-    const e = document.createElement("template");
-    e.innerHTML = this.render(), this.shadowRoot.appendChild(e.content.cloneNode(!0)), this.consentScreen = this.shadowRoot.querySelector("#consent-screen"), this.totpConsentApp = this.shadowRoot.querySelector("totp-consent"), this.consentRejectedScreen = this.shadowRoot.querySelector(
+    const i = document.createElement("template");
+    i.innerHTML = this.render(), this.shadowRoot.appendChild(i.content.cloneNode(!0)), this.consentScreen = this.shadowRoot.querySelector("#consent-screen"), this.totpConsentApp = this.shadowRoot.querySelector("totp-consent"), this.consentRejectedScreen = this.shadowRoot.querySelector(
       "#consent-rejected-screen"
     ), this.allowButton = this.shadowRoot.querySelector("#allow"), this.rejectButton = this.shadowRoot.querySelector("#cancel"), this.backToConsentButton = this.shadowRoot.querySelector("#back-to-consent"), this.confirmConsentRejectionButton = this.shadowRoot.querySelector(
       "#confirm-consent-rejection"
     ), this.backButton = this.shadowRoot.querySelector("#back-button");
-    const i = this.shadowRoot.querySelectorAll(".close-iframe");
+    const o = this.shadowRoot.querySelectorAll(".close-iframe");
     this.allowButton.addEventListener(
       "click",
-      (t) => this.handleConsentGrant(t)
+      (e) => this.handleConsentGrant(e)
     ), this.rejectButton.addEventListener(
       "click",
-      (t) => this.handleConsentGrant(t)
+      (e) => this.handleConsentGrant(e)
     ), this.backToConsentButton.addEventListener(
       "click",
       () => this.setActiveScreen(this.consentScreen)
     ), this.confirmConsentRejectionButton.addEventListener(
       "click",
-      (t) => this.handleConsentRejection(t)
+      (e) => this.handleConsentRejection(e)
     ), this.totpConsentApp.addEventListener(
       "end-user-consent.totp.denied.contact-methods-outdated",
-      (t) => this.handleTotpConsentEvents(t)
+      (e) => this.handleTotpConsentEvents(e)
     ), this.totpConsentApp.addEventListener(
       "end-user-consent.totp.granted",
-      (t) => this.handleTotpConsentEvents(t)
+      (e) => this.handleTotpConsentEvents(e)
     ), this.totpConsentApp.addEventListener(
       "end-user-consent.totp.cancelled",
-      (t) => this.handleBackEvents(t)
-    ), this.backButton.addEventListener("click", (t) => {
-      this.handleBackEvents(t);
-    }), i.forEach((t) => {
-      t.addEventListener(
+      (e) => this.handleBackEvents(e)
+    ), this.backButton.addEventListener("click", (e) => {
+      this.handleBackEvents(e);
+    }), o.forEach((e) => {
+      e.addEventListener(
         "click",
         () => {
           this.closeWindow();
@@ -627,8 +626,8 @@ class s extends HTMLElement {
       );
     }), this.activeScreen = this.consentScreen;
   }
-  setActiveScreen(e) {
-    this.activeScreen.hidden = !0, e.hidden = !1, this.activeScreen = e;
+  setActiveScreen(i) {
+    this.activeScreen.hidden = !0, i.hidden = !1, this.activeScreen = i;
   }
   get baseUrl() {
     return this.getAttribute("base-url");
@@ -672,18 +671,21 @@ class s extends HTMLElement {
   get themeColor() {
     return this.getAttribute("theme-color") || "#151F72";
   }
+  get direction() {
+    return this.getAttribute("dir") || r() || "ltr";
+  }
   get token() {
     return this.getAttribute("token");
   }
-  handleConsentGrant(e) {
-    const i = e.target === this.allowButton;
-    i ? this.idRequiresTotpConsent.includes(this.idType) ? (this.setActiveScreen(this.totpConsentApp), this.pages.push(this.consentScreen)) : this.dispatchEvent(
+  handleConsentGrant(i) {
+    const o = i.target === this.allowButton;
+    o ? this.idRequiresTotpConsent.includes(this.idType) ? (this.setActiveScreen(this.totpConsentApp), this.pages.push(this.consentScreen)) : this.dispatchEvent(
       new CustomEvent("end-user-consent.granted", {
         detail: {
           consented: {
-            contact_information: i,
-            document_information: i,
-            personal_details: i
+            contact_information: o,
+            document_information: o,
+            personal_details: o
           }
         }
       })
@@ -692,24 +694,24 @@ class s extends HTMLElement {
   handleConsentRejection() {
     this.dispatchEvent(new CustomEvent("end-user-consent.denied"));
   }
-  handleTotpConsentEvents(e) {
-    const i = new CustomEvent(e.type, {
+  handleTotpConsentEvents(i) {
+    const o = new CustomEvent(i.type, {
       detail: {
-        ...e.detail
+        ...i.detail
       }
     });
-    this.dispatchEvent(i);
+    this.dispatchEvent(o);
   }
   handleBackEvents() {
-    const e = this.pages.pop();
-    e ? this.setActiveScreen(e) : this.dispatchEvent(new CustomEvent("end-user-consent.cancelled"));
+    const i = this.pages.pop();
+    i ? this.setActiveScreen(i) : this.dispatchEvent(new CustomEvent("end-user-consent.cancelled"));
   }
   closeWindow() {
     window.parent.postMessage("SmileIdentity::Close", "*");
   }
 }
-"customElements" in window && !window.customElements.get("end-user-consent") && window.customElements.define("end-user-consent", s);
+"customElements" in window && !window.customElements.get("end-user-consent") && window.customElements.define("end-user-consent", a);
 export {
-  s as E
+  a as E
 };
-//# sourceMappingURL=EndUserConsent-D4fd1ovG.js.map
+//# sourceMappingURL=EndUserConsent-DE6OBSGG.js.map