@smileid/web-components 2.0.1 → 10.0.0

package/{src → lib}/components/selfie/src/selfie-capture-review/SelfieCaptureReview.js

@@ -1,347 +1,340 @@
-import styles from '../../../../styles/src/styles';
-import '../../../navigation/src';
-
-function templateString() {
-  return `
-    <style>
-      .retake-photo.button[data-variant~="ghost"] {
-        color: #FF5805;
-      }
-      .icon-btn {
-        appearance: none;
-        background: none;
-        border: none;
-        color: hsl(0deg 0% 94%);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 4px 8px;
-      }
-      .justify-right {
-        justify-content: end !important;
-      }
-      .nav {
-        display: flex;
-        justify-content: space-between;
-      }
-      .back-wrapper {
-        display: flex;
-        align-items: center;
-      }
-      .back-button-text {
-        font-size: 11px;
-        line-height: 11px;
-        color: rgb(21, 31, 114);
-      }
-      .section {
-        border-radius: .5rem;
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 35ch;
-        padding: 1rem;
-      }
-      .selfie-capture-review-image {
-        overflow: hidden;
-        aspect-ratio: 1/1;
-      }
-      #review-image {
-        scale: 1.75;
-      }
-      @media (max-aspect-ratio: 1/1) {
-        #review-image {
-          transform: scaleX(-1) translateY(-10%);
-        }
-      }
-      .tips,
-      .powered-by {
-        align-items: center;
-        border-radius: 0.25rem;
-        color: #4e6577;
-        display: flex;
-        justify-content: center;
-        letter-spacing: 0.075em;
-      }
-      .powered-by {
-        box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);
-        display: inline-flex;
-        font-size: 0.5rem;
-      }
-      .tips {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 17rem;
-      }
-      .tips > * + *,
-      .powered-by > * + * {
-        display: inline-block;
-        margin-left: 0.5em;
-      }
-      .powered-by .company {
-        color: #18406d;
-        font-weight: 700;
-        letter-spacing: 0.15rem;
-      }
-      .logo-mark {
-        background-color: #004071;
-        display: inline-block;
-        padding: 0.25em 0.5em;
-      }
-      .logo-mark svg {
-        height: auto;
-        justify-self: center;
-        width: 0.75em;
-      }
-      #selfie-capture-review-screen {
-        block-size: 45rem;
-        padding-block: 2rem;
-        display: flex;
-        flex-direction: column;
-        max-block-size: 100%;
-        max-inline-size: 40ch;
-      }
-      #selfie-capture-review-screen .selfie-review-container.landscape {
-        height: auto;
-      }
-      #selfie-capture-review-screen header p {
-        margin-block: 0 !important;
-      }
-      .selfie-review-container.portrait {
-        width: 100%;
-        position: relative;
-        height: calc(200px * 1.4);
-      }
-    
-      .selfie-review-container.portrait img {
-        width: calc(213px + 0.9rem);
-        height: 100%;
-        position: absolute;
-        top: 239px;
-        left: 161px;
-        padding-bottom: calc((214px * 1.4) / 3);
-        padding-top: calc((191px * 1.4) / 3);
-        object-fit: cover;
-    
-        transform: translateX(-50%) translateY(-50%);
-        z-index: 1;
-        block-size: 100%;
-      }
-    
-      .selfie-container,
-      .selfie-review-container.landscape {
-        height: auto;
-        clip-path: inset(15% 20% 20% 20% round 10px);
-        overflow: hidden;
-      }
-
-      .selfie-container img {
-        background-color: black;
-        position: absolute;
-        left: 50%;
-        height: calc(100% - 6px);
-        clip-path: ellipse(101px 118px);
-      }
-
-      .description {
-        color: var(--neutral-off-black, #2D2B2A);
-        text-align: center;
-        /* p */
-        font-family: DM Sans;
-        font-size: 0.875rem;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 18px;
-      }
-      .padding-bottom-2 {
-        padding-bottom: 2rem;
-      }
-      .instructions-wrapper {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 2rem;
-        margin-block-start: 2rem;
-        margin-block-end: 4rem;
-      }
-      .instructions {
-        display: flex;
-        align-items: center;
-        text-align: initial;
-      }
-      .instructions svg {
-        flex-shrink: 0;
-        margin-inline-end: 2rem;
-      }
-      .instructions p {
-        margin-block: 0;
-      }
-      .instruction-body {
-        font-size: 0.75rem;
-      }
-      h1 {
-        color: var(--web-digital-blue, #001096);
-        text-align: center;
-        /* h1 */
-        font-size: 1.5rem;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 36px; /* 150% */
-      }
-      .p2 {
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 1rem;
-      }
-      .instruction-header {
-        color: var(--web-digital-blue, #001096);
-      }
-      .h2 {
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 1.5rem;
-      }
-    </style>
-    ${styles(this.themeColor)}
-    <div id='selfie-capture-review-screen' class='flow center'>
-    <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
-    <h1 class="header-title text-2xl title-color font-bold">
-      Is your whole face visible and clear in this photo?
-    </h1>
-    <div class='section | flow'>
-      <div class='selfie-review-container ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
-        ${
-          this.imageSrc
-            ? `<img
-        alt='your ID card'
-        id='document-capture-review-image'
-        src='${this.imageSrc}'
-        width='396'
-      />`
-            : ''
-        }
-      </div>
-      <div class='flow action-buttons'>
-        <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
-          Yes, use this
-        </button>
-        <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-image'>
-          No, Retake Selfie
-        </button>
-      </div>
-      ${
-        this.hideAttribution
-          ? ''
-          : `
-        <powered-by-smile-id></powered-by-smile-id>
-      `
-      }
-    </div>
-  </div>
-  `;
-}
-
-class SelfieCaptureReview extends HTMLElement {
-  constructor() {
-    super();
-    this.templateString = templateString.bind(this);
-    this.render = () => this.templateString();
-
-    this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback() {
-    const template = document.createElement('template');
-    template.innerHTML = this.render();
-    this.shadowRoot.innerHTML = '';
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-    this.setUpEventListeners();
-  }
-
-  static get observedAttributes() {
-    return ['hide-back-to-host', 'show-navigation', 'data-image'];
-  }
-
-  get hideBack() {
-    return this.hasAttribute('hide-back-to-host');
-  }
-
-  get showNavigation() {
-    return this.hasAttribute('show-navigation');
-  }
-
-  get themeColor() {
-    return this.getAttribute('theme-color') || '#001096';
-  }
-
-  get hideAttribution() {
-    return this.hasAttribute('hide-attribution');
-  }
-
-  get imageSrc() {
-    return this.getAttribute('data-image');
-  }
-
-  get title() {
-    return this.getAttribute('title') || 'Submit Front of ID';
-  }
-
-  handleBackEvents() {
-    this.dispatchEvent(new CustomEvent('selfie-capture-review.cancelled'));
-  }
-
-  handleCloseEvents() {
-    this.dispatchEvent(new CustomEvent('selfie-capture-review.close'));
-  }
-
-  attributeChangedCallback(name) {
-    switch (name) {
-      case 'data-image':
-      case 'hide-back-to-host':
-      case 'show-navigation':
-        this.shadowRoot.innerHTML = this.render();
-        this.setUpEventListeners();
-        break;
-      default:
-        break;
-    }
-  }
-
-  setUpEventListeners() {
-    this.selectImage = this.shadowRoot.querySelector('#select-id-image');
-    this.reCaptureImage = this.shadowRoot.querySelector('#re-capture-image');
-    this.navigation = this.shadowRoot.querySelector('smileid-navigation');
-
-    this.navigation.addEventListener('navigation.back', () => {
-      this.handleBackEvents();
-    });
-    this.navigation.addEventListener('navigation.close', () => {
-      this.handleCloseEvents();
-    });
-
-    this.selectImage.addEventListener('click', () => {
-      this.dispatchEvent(
-        new CustomEvent('selfie-capture-review.accepted', {
-          detail: {},
-        }),
-      );
-    });
-    this.reCaptureImage.addEventListener('click', () => {
-      this.dispatchEvent(
-        new CustomEvent('selfie-capture-review.rejected', {
-          detail: {},
-        }),
-      );
-    });
-  }
-}
-
-if (
-  'customElements' in window &&
-  !customElements.get('selfie-capture-review')
-) {
-  window.customElements.define('selfie-capture-review', SelfieCaptureReview);
-}
-
-export default SelfieCaptureReview;
+import styles from '../../../../styles/src/styles';
+import '../../../navigation/src';
+
+function templateString() {
+  return `
+    <style>
+      .retake-photo.button[data-variant~="ghost"] {
+        color: #FF5805;
+      }
+      .icon-btn {
+        appearance: none;
+        background: none;
+        border: none;
+        color: hsl(0deg 0% 94%);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px 8px;
+      }
+      .justify-right {
+        justify-content: end !important;
+      }
+      .nav {
+        display: flex;
+        justify-content: space-between;
+      }
+      .back-wrapper {
+        display: flex;
+        align-items: center;
+      }
+      .back-button-text {
+        font-size: 11px;
+        line-height: 11px;
+        color: rgb(21, 31, 114);
+      }
+      .section {
+        border-radius: .5rem;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 35ch;
+        padding: 1rem;
+      }
+      .selfie-capture-review-image {
+        overflow: hidden;
+        aspect-ratio: 1/1;
+      }
+      #review-image {
+        scale: 1.75;
+      }
+      @media (max-aspect-ratio: 1/1) {
+        #review-image {
+          transform: scaleX(-1) translateY(-10%);
+        }
+      }
+      .tips,
+      .powered-by {
+        align-items: center;
+        border-radius: 0.25rem;
+        color: #4e6577;
+        display: flex;
+        justify-content: center;
+        letter-spacing: 0.075em;
+      }
+      .powered-by {
+        box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);
+        display: inline-flex;
+        font-size: 0.5rem;
+      }
+      .tips {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 17rem;
+      }
+      .tips > * + *,
+      .powered-by > * + * {
+        display: inline-block;
+        margin-left: 0.5em;
+      }
+      .powered-by .company {
+        color: #18406d;
+        font-weight: 700;
+        letter-spacing: 0.15rem;
+      }
+      .logo-mark {
+        background-color: #004071;
+        display: inline-block;
+        padding: 0.25em 0.5em;
+      }
+      .logo-mark svg {
+        height: auto;
+        justify-self: center;
+        width: 0.75em;
+      }
+      #selfie-capture-review-screen {
+        block-size: 45rem;
+        padding-block: 2rem;
+        display: flex;
+        flex-direction: column;
+        max-block-size: 100%;
+        max-inline-size: 40ch;
+      }
+      #selfie-capture-review-screen .selfie-review-container.landscape {
+        height: auto;
+      }
+      #selfie-capture-review-screen header p {
+        margin-block: 0 !important;
+      }
+      .selfie-review-container.portrait {
+        width: 100%;
+        position: relative;
+        height: calc(200px * 1.4);
+      }
+    
+      .selfie-review-container.portrait img {
+        width: calc(213px + 0.9rem);
+        height: 100%;
+        position: absolute;
+        top: 239px;
+        left: 161px;
+        padding-bottom: calc((214px * 1.4) / 3);
+        padding-top: calc((191px * 1.4) / 3);
+        object-fit: cover;
+    
+        transform: translateX(-50%) translateY(-50%);
+        z-index: 1;
+        block-size: 100%;
+      }
+
+      .selfie-container img {
+        background-color: black;
+        position: absolute;
+        left: 50%;
+        height: calc(100% - 6px);
+        clip-path: ellipse(101px 118px);
+      }
+
+      .description {
+        color: var(--neutral-off-black, #2D2B2A);
+        text-align: center;
+        /* p */
+        font-family: DM Sans;
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 18px;
+      }
+      .padding-bottom-2 {
+        padding-bottom: 2rem;
+      }
+      .instructions-wrapper {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2rem;
+        margin-block-start: 2rem;
+        margin-block-end: 4rem;
+      }
+      .instructions {
+        display: flex;
+        align-items: center;
+        text-align: initial;
+      }
+      .instructions svg {
+        flex-shrink: 0;
+        margin-inline-end: 2rem;
+      }
+      .instructions p {
+        margin-block: 0;
+      }
+      .instruction-body {
+        font-size: 0.75rem;
+      }
+      h1 {
+        color: var(--web-digital-blue, #001096);
+        text-align: center;
+        /* h1 */
+        font-size: 1.5rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 36px; /* 150% */
+      }
+      .p2 {
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 1rem;
+      }
+      .instruction-header {
+        color: var(--web-digital-blue, #001096);
+      }
+      .h2 {
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 1.5rem;
+      }
+    </style>
+    ${styles(this.themeColor)}
+    <div id='selfie-capture-review-screen' class='flow center'>
+    <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
+    <h1 class="header-title text-2xl title-color font-bold">
+      Is your whole face visible and clear in this photo?
+    </h1>
+    <div class='section | flow'>
+      <div class='selfie-review-container ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
+        ${
+          this.imageSrc
+            ? `<img
+        alt='your ID card'
+        id='document-capture-review-image'
+        src='${this.imageSrc}'
+        width='396'
+      />`
+            : ''
+        }
+      </div>
+      <div class='flow action-buttons'>
+        <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
+          Yes, use this
+        </button>
+        <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-image'>
+          No, Retake Selfie
+        </button>
+      </div>
+      ${
+        this.hideAttribution
+          ? ''
+          : `
+        <powered-by-smile-id></powered-by-smile-id>
+      `
+      }
+    </div>
+  </div>
+  `;
+}
+
+class SelfieCaptureReview extends HTMLElement {
+  constructor() {
+    super();
+    this.templateString = templateString.bind(this);
+    this.render = () => this.templateString();
+
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    const template = document.createElement('template');
+    template.innerHTML = this.render();
+    this.shadowRoot.innerHTML = '';
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.setUpEventListeners();
+  }
+
+  static get observedAttributes() {
+    return ['hide-back-to-host', 'show-navigation', 'data-image'];
+  }
+
+  get hideBack() {
+    return this.hasAttribute('hide-back-to-host');
+  }
+
+  get showNavigation() {
+    return this.hasAttribute('show-navigation');
+  }
+
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
+  get hideAttribution() {
+    return this.hasAttribute('hide-attribution');
+  }
+
+  get imageSrc() {
+    return this.getAttribute('data-image');
+  }
+
+  get title() {
+    return this.getAttribute('title') || 'Submit Front of ID';
+  }
+
+  handleBackEvents() {
+    this.dispatchEvent(new CustomEvent('selfie-capture-review.cancelled'));
+  }
+
+  handleCloseEvents() {
+    this.dispatchEvent(new CustomEvent('selfie-capture-review.close'));
+  }
+
+  attributeChangedCallback(name) {
+    switch (name) {
+      case 'data-image':
+      case 'hide-back-to-host':
+      case 'show-navigation':
+        this.shadowRoot.innerHTML = this.render();
+        this.setUpEventListeners();
+        break;
+      default:
+        break;
+    }
+  }
+
+  setUpEventListeners() {
+    this.selectImage = this.shadowRoot.querySelector('#select-id-image');
+    this.reCaptureImage = this.shadowRoot.querySelector('#re-capture-image');
+    this.navigation = this.shadowRoot.querySelector('smileid-navigation');
+
+    this.navigation.addEventListener('navigation.back', () => {
+      this.handleBackEvents();
+    });
+    this.navigation.addEventListener('navigation.close', () => {
+      this.handleCloseEvents();
+    });
+
+    this.selectImage.addEventListener('click', () => {
+      this.dispatchEvent(
+        new CustomEvent('selfie-capture-review.accepted', {
+          detail: {},
+        }),
+      );
+    });
+    this.reCaptureImage.addEventListener('click', () => {
+      this.dispatchEvent(
+        new CustomEvent('selfie-capture-review.rejected', {
+          detail: {},
+        }),
+      );
+    });
+  }
+}
+
+if (
+  'customElements' in window &&
+  !customElements.get('selfie-capture-review')
+) {
+  window.customElements.define('selfie-capture-review', SelfieCaptureReview);
+}
+
+export default SelfieCaptureReview;