@smileid/web-components 2.0.1 → 10.0.0

package/dist/TotpConsent-CQU5jQi4.js

@@ -0,0 +1,730 @@
+import d from "validate.js";
+function a(n, t) {
+  return fetch(n, {
+    body: JSON.stringify(t),
+    cache: "no-cache",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    mode: "cors"
+  });
+}
+function l() {
+  return `
+        <style>
+            *,
+            *::before,
+            *::after {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
+
+            :host {
+                --flow-space: 1.5rem;
+
+                --color-dark: #404040;
+                --color-grey: #555B69;
+
+                --color-success: #1EB244;
+                --color-failure: #FFEDEB;
+                --color-failure-tint: #F86B58;
+
+                --color-richblue: #043C93;
+                --color-theme: ${this.themeColor};
+
+                --color-active: #2D2B2A;
+                --color-default: #001096;
+                --color-disabled: #848282;
+            }
+
+            html {
+                font-family: 'DM Sans', sans-serif;
+            }
+
+            [hidden] {
+                display: none !important;
+            }
+
+            [disabled] {
+                cursor: not-allowed !important;
+            }
+
+            .visually-hidden {
+                border: 0;
+                clip: rect(1px 1px 1px 1px);
+                clip: rect(1px, 1px, 1px, 1px);
+                height: auto;
+                margin: 0;
+                overflow: hidden;
+                padding: 0;
+                position: absolute;
+                white-space: nowrap;
+                width: 1px;
+            }
+
+            .color-dark {
+                color: var(--color-dark);
+            }
+
+            .color-grey {
+                color: var(--color-grey);
+            }
+
+            .flow > * + * {
+                margin-top: var(--flow-space);
+            }
+
+            .center {
+                margin-left: auto;
+                margin-right: auto;
+
+                text-align: center;
+            }
+
+            h1 {
+                font-size: 1.5rem;
+                font-weight: 700;
+            }
+
+            button, input, select, textarea {
+                font: inherit
+            }
+
+            label,
+            input,
+            select,
+            textarea {
+                --flow-space: .5rem;
+                display: block;
+                width: 100%;
+            }
+
+            input,
+            select,
+            textarea {
+                border: 1px solid #d1d8d6;
+                border-radius: .5rem;
+                padding: .75rem 1rem;
+            }
+
+            button {
+                --button-color: var(--color-default);
+                --flow-space: 3rem;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                align-items: center;
+                appearance: none;
+                background-color: transparent;
+                border-radius: 2.5rem;
+                border: none;
+                color: #ffffff;
+                cursor: pointer;
+                display: inline-flex;
+                font-size: 20px;
+                font-weight: 500;
+                inline-size: 100%;
+                justify-content: center;
+                letter-spacing: .05ch;
+                line-height: 1;
+                padding: 1rem 2.5rem;
+                text-align: center;
+                text-decoration: none;
+            }
+
+            button[data-variant='solid'] {
+                background-color: var(--button-color);
+                border: 2px solid var(--button-color);
+            }
+
+            button[data-variant='outline'] {
+                color: var(--button-color);
+                border: 2px solid var(--button-color);
+            }
+
+            button[data-variant='ghost'] {
+                color: var(--button-color);
+            }
+
+            button:hover,
+            button:focus,
+            button:active {
+                --button-color: var(--color-active);
+            }
+
+            button:disabled {
+                --button-color: var(--color-disabled);
+            }
+
+            button[data-type='icon'] {
+                height: 2rem;
+                padding: 0;
+                width: 2rem;
+                background: transparent;
+            }
+
+            input {
+                font: inherit;
+            }
+
+            fieldset {
+                margin: 0;
+                border: none;
+            }
+
+            .font-weight:bold {
+                font-weight: bold;
+            }
+
+            .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: ${this.themeColor || "rgb(21, 31, 114)"};
+            }
+
+            #error,
+            .validation-message {
+                color: red;
+                text-transform: capitalize;
+            }
+
+            .input-group {
+                --flow-space: 1.5rem;
+                text-align: initial;
+            }
+
+            .input-radio {
+                --flow-space: 1.5rem;
+                background-color: #F8F8F8;
+                border-radius: .5rem;
+                padding: .625rem 1rem;
+                display: flex;
+                align-items: center;
+            }
+
+            .otp-mode {
+                display: flex;
+                align-items: center;
+                text-align: initial;
+            }
+
+            .otp-mode :first-child {
+                margin: 0;
+                margin-inline-end: 1rem;
+            }
+
+            .otp-mode :nth-child(2n) {
+                --flow-space: .5rem;
+            }
+
+            .input-radio [type='radio'] {
+                border-radius: 50%;
+                inline-size: 2rem;
+                block-size: 2rem;
+                margin-inline-end: .5rem;
+                background-color: white;
+                border: .125rem solid #f5f5f5;
+            }
+
+            #totp-token {
+                block-size: 3rem;
+                inline-size: 20rem;
+                max-inline-size: 100%;
+                background-color: #F5F5F5;
+                border: none;
+                border-bottom: 2px solid #2F718D;
+                font-size: 1.5rem;
+                text-align: center;
+                font-weight: 700;
+                letter-spacing: 2rem;
+                padding: .5rem 1rem;
+                margin-inline: auto;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: translate3d(-50%, -50%, 0) rotate(0deg);
+                }
+                100% {
+                    transform: translate3d(-50%, -50%, 0) rotate(360deg);
+                }
+            }
+
+            .spinner {
+                animation: 1.5s linear infinite spin;
+                animation-play-state: inherit;
+                border: solid 5px #cfd0d1;
+                border-bottom-color: var(--color-active);
+                border-radius: 50%;
+                content: "";
+                display: block;
+                height: 25px;
+                width: 25px;
+                will-change: transform;
+                position: relative;
+                top: .675rem;
+                left: 1.25rem;
+            }
+        </style>
+
+        <div class='flow center' id='id-entry'>
+            <div class="nav">
+                <div class="back-wrapper">
+                    <button type='button' data-type='icon' id="back-button" class="back-button">
+                        <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="${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>
+                <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>
+                </button>
+            </div>
+            <h1>
+                Enter your ${this.idTypeLabel}
+            </h1>
+
+            <form name='id-entry-form' class='flow' novalidate style='--flow-space: 5.5rem'>
+                <div id='id-number' class="input-group flow">
+                    <label class='required' for="id_number">
+                        ${this.idTypeLabel}
+                    </label>
+
+                    <input aria-required='true' id="id_number" name="id_number"
+                        maxlength='11' placeholder='' />
+
+                    <p>
+                        <small>${this.idHint}</small>
+                    </p>
+                </div>
+
+                <button data-variant='solid' id='query-otp-modes' type='submit'>
+                    <span class='text'>Continue</span>
+                    <svg aria-hidden='true' 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>
+                    <span hidden class='spinner'></span>
+                </button>
+            </form>
+        </div>
+
+        <div hidden class='flow center' id='select-mode'>
+            <div class="nav">
+                <div class="back-wrapper">
+                    <button type='button' data-type='icon' id="back-to-entry-button" class="back-button">
+                        <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="${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>
+                <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>
+                </button>
+            </div>
+            <h1>
+                Select contact method
+            </h1>
+
+            <form name='select-mode-form' novalidate style='--flow-space: 4.25rem' id='otp-entry' class='flow center'>
+                <fieldset class='flow center'>
+                    <legend class='flow' style='--flow-space: 1.5rem'>
+                        <p>
+                            NIBSS, the data custodian of BVN,&nbsp;
+                            will send you a One-Time Password (OTP) 
+                        </p>
+
+                        <p>
+                            <small>
+                                The request will be from Chams Plc, who is NIBSS' technical partner.
+                            </small>
+                        </p>
+                    </legend>
+
+                    <div class='flow center'>
+                        ${this.modes.length ? this.modes.map(
+    (n) => `<label class='input-radio'>
+                                <input type="radio" id="" name="mode" value="${Object.keys(n)[0]}">
+                                <div class='otp-mode'>
+                                    ${Object.keys(n)[0].includes("sms") ? `
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="29" height="37" fill="none">
+                                            <path stroke="#2F718D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.697 24.12c4.914 0 7.37 0 8.897-1.652 1.527-1.651 1.527-4.31 1.527-9.625 0-5.316 0-7.974-1.527-9.625-1.526-1.651-3.983-1.651-8.897-1.651h-5.211c-4.914 0-7.37 0-8.897 1.651-1.527 1.651-1.527 4.31-1.527 9.625 0 5.316 0 7.974 1.527 9.625.85.92 1.991 1.328 3.685 1.508"/>
+                                            <g filter="url(#sms)">
+                                                <path stroke="#2F718D" stroke-linecap="round" stroke-width="2" d="M16.697 24.12c-1.61 0-3.384.703-5.005 1.613-2.602 1.462-3.903 2.193-4.545 1.727-.64-.465-.52-1.91-.277-4.799l.055-.656" shape-rendering="crispEdges"/>
+                                            </g>
+                                            <defs>
+                                                <filter id="sms" width="20.023" height="15.595" x="1.675" y="21.005" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+                                                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+                                                    <feOffset dy="4"/>
+                                                    <feGaussianBlur stdDeviation="2"/>
+                                                    <feComposite in2="hardAlpha" operator="out"/>
+                                                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+                                                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2_404"/>
+                                                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_2_404" result="shape"/>
+                                                </filter>
+                                            </defs>
+                                        </svg>
+                                    ` : `
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="24" fill="none">
+                                            <path stroke="#2F718D" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.062 4.367c0-1.437 1.221-2.603 2.727-2.603h21.815c1.506 0 2.727 1.166 2.727 2.603v15.62c0 1.438-1.221 2.604-2.727 2.604H6.789c-1.506 0-2.727-1.166-2.727-2.604V4.367Z"/>
+                                            <g filter="url(#message)">
+                                                <path stroke="#2F718D" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m5.426 3.066 8.647 7.338c2.067 1.754 5.18 1.754 7.247 0l8.648-7.338" shape-rendering="crispEdges"/>
+                                            </g>
+                                            <defs>
+                                                <filter id="message" width="34.042" height="18.154" x=".676" y="2.316" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+                                                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                                                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+                                                    <feOffset dy="4"/>
+                                                    <feGaussianBlur stdDeviation="2"/>
+                                                    <feComposite in2="hardAlpha" operator="out"/>
+                                                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+                                                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2_394"/>
+                                                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_2_394" result="shape"/>
+                                                </filter>
+                                            </defs>
+                                        </svg>
+                                    `}
+                                    <div class='flow'>
+                                        <p>
+                                            ${Object.values(n)[0]}
+                                        </p>
+                                        <p>
+                                            <small>
+                                                An OTP will be sent by ${Object.keys(n)[0].includes(
+      "sms"
+    ) ? "sms" : "email"} to verify your identity
+                                            </small>
+                                        </p>
+                                    </div>
+                                </div>
+                            </label>`
+  ).join(`
+`) : "No modes yet"}
+                    </div>
+                </fieldset>
+
+                <button data-variant='ghost' id='contact-methods-outdated' style='--flow-space: .5rem' class='' type='button'>
+                    I am no longer using any of these options
+                </button>
+
+                <button data-variant='solid' id='select-otp-mode' type='submit'>
+                    <span class='text'>Continue</span>
+                    <svg aria-hidden='true' 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>
+                    <span hidden class='spinner'></span>
+                </button>
+            </form>
+        </div>
+
+        <div hidden class='flow center' id='otp-verification'>
+            <div class="nav justify-right">
+                <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>
+                </button>
+            </div>
+            <h1>
+                OTP Verification
+            </h1>
+
+            <div style='--flow-space: 4.25rem' id='otp-entry'>
+                <form name='otp-submission-form' novalidate style='--flow-space: 1.5rem' class='flow center'>
+                    <label for='totp-token'>
+                        Enter the OTP sent to <span class='font-weight:bold'>${this.selectedOtpDeliveryMode}</span>
+                    </label>
+                    <input type='text' id='totp-token' maxlength='6' inputmode='numeric' autocomplete='one-time-code' />
+
+                    <p>
+                        Didn't receive the OTP${this.selectedOtpDeliveryMode ? ` at <span class='font-weight:bold'>${this.selectedOtpDeliveryMode}</span>?` : "?"}
+                    </p>
+
+                    <button style='--flow-space: .5rem' data-variant='ghost' class='try-another-method' type='button'>
+                        Try another contact method
+                    </button>
+
+                    <button data-variant='solid' id='submit-otp' type='submit'>
+                        <span class='text'>Submit</span>
+                        <svg aria-hidden='true' 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>
+                        <span hidden class='spinner'></span>
+                    </button>
+                </form>
+            </div>
+        </div>
+    `;
+}
+class c extends HTMLElement {
+  constructor() {
+    super(), this.templateString = l.bind(this), this.render = () => this.templateString(), this.attachShadow({ mode: "open" }), this.modes = [], this["otp-delivery-mode"] = "", this.queryOtpModes = this.queryOtpModes.bind(this), this.selectOtpMode = this.selectOtpMode.bind(this), this.submitOtp = this.submitOtp.bind(this), this.switchContactMethod = this.switchContactMethod.bind(this), this.handleTotpConsentGrant = this.handleTotpConsentGrant.bind(this), this.handleTotpConsentContactMethodsOutdated = this.handleTotpConsentContactMethodsOutdated.bind(this), this.pages = [];
+  }
+  static get observedAttributes() {
+    return ["modes", "otp-delivery-mode"];
+  }
+  attributeChangedCallback(t) {
+    switch (t) {
+      case "modes":
+      case "otp-delivery-mode": {
+        const e = document.createElement("template");
+        e.innerHTML = this.render();
+        const i = e.content.cloneNode(!0).querySelector(`#${this.activeScreen.id}`);
+        i.hidden = !1, this.shadowRoot.replaceChild(i, this.activeScreen), this.setUpEventListeners(), this.setActiveScreen(i);
+        break;
+      }
+    }
+  }
+  setUpEventListeners() {
+    this.idEntryScreen = this.shadowRoot.querySelector("#id-entry"), this.selectModeScreen = this.shadowRoot.querySelector("#select-mode"), this.otpVerificationScreen = this.shadowRoot.querySelector("#otp-verification"), this.activeScreen || (this.activeScreen = this.idEntryScreen), this.queryOtpModesButton = this.idEntryScreen.querySelector("#query-otp-modes"), this.backButton = this.idEntryScreen.querySelector("#back-button"), this.selectOtpModeButton = this.selectModeScreen.querySelector("#select-otp-mode"), this.entryBackbutton = this.selectModeScreen.querySelector(
+      "#back-to-entry-button"
+    ), this.contactMethodsOutdatedButton = this.selectModeScreen.querySelector(
+      "#contact-methods-outdated"
+    ), this.submitOtpButton = this.otpVerificationScreen.querySelector("#submit-otp"), this.switchContactMethodButton = this.otpVerificationScreen.querySelector(
+      ".try-another-method"
+    );
+    const t = this.shadowRoot.querySelectorAll(".close-iframe");
+    this.idNumberInput = this.idEntryScreen.querySelector("#id_number"), this.modeInputs = this.selectModeScreen.querySelectorAll('[name="mode"]'), this.otpInput = this.otpVerificationScreen.querySelector("#totp-token"), this.queryOtpModesButton.addEventListener(
+      "click",
+      (e) => this.queryOtpModes(e)
+    ), this.selectOtpModeButton.addEventListener(
+      "click",
+      (e) => this.selectOtpMode(e)
+    ), this.submitOtpButton.addEventListener("click", (e) => this.submitOtp(e)), this.switchContactMethodButton.addEventListener(
+      "click",
+      (e) => this.switchContactMethod(e)
+    ), this.contactMethodsOutdatedButton.addEventListener(
+      "click",
+      (e) => this.handleTotpConsentContactMethodsOutdated(e)
+    ), this.entryBackbutton.addEventListener("click", () => {
+      this.handleBackClick();
+    }), this.backButton.addEventListener("click", () => {
+      this.handleBackClick();
+    }), t.forEach((e) => {
+      e.addEventListener(
+        "click",
+        () => {
+          this.closeWindow();
+        },
+        !1
+      );
+    });
+  }
+  closeWindow() {
+    const t = window.parent;
+    [t.parent, t].forEach((e) => {
+      e.postMessage("SmileIdentity::Close", "*");
+    });
+  }
+  handleBackClick() {
+    const t = this.pages.pop();
+    t ? this.setActiveScreen(t) : this.dispatchEvent(
+      new CustomEvent("end-user-consent.totp.cancelled", {})
+    );
+  }
+  connectedCallback() {
+    const t = document.createElement("template");
+    t.innerHTML = this.render(), this.shadowRoot.appendChild(t.content.cloneNode(!0)), this.setUpEventListeners();
+  }
+  switchContactMethod() {
+    this.queryOtpModes();
+  }
+  resetForm() {
+    this.activeScreen.querySelectorAll("[aria-invalid]").forEach((i) => i.removeAttribute("aria-invalid")), this.activeScreen.querySelectorAll(
+      ".validation-message"
+    ).forEach((i) => i.remove());
+  }
+  handleIdNumberValidationErrors(t) {
+    Object.keys(t).forEach((i) => {
+      const o = this.activeScreen.querySelector(`#${i}`);
+      o.setAttribute("aria-invalid", "true"), o.setAttribute("aria-describedby", `${i}-hint`);
+      const s = document.createElement("div");
+      s.setAttribute("id", `${i}-hint`), s.setAttribute("class", "validation-message"), s.textContent = t[i][0], o.insertAdjacentElement("afterend", s);
+    });
+  }
+  handleActiveScreenErrors(t) {
+    const e = this.activeScreen.querySelector('[type="submit"]'), i = document.createElement("div");
+    i.setAttribute("class", "validation-message"), i.textContent = t, e.insertAdjacentElement("beforebegin", i);
+  }
+  validateIdNumber(t) {
+    const e = {
+      id_number: {
+        format: new RegExp(this.idRegex),
+        presence: {
+          allowEmpty: !1,
+          message: "is required"
+        }
+      }
+    }, i = d({ id_number: t }, e);
+    return i && this.handleIdNumberValidationErrors(i), i;
+  }
+  async queryOtpModes(t) {
+    t && (t.preventDefault(), this.resetForm());
+    const e = this.validateIdNumber(this.idNumberInput.value);
+    if (localStorage.setItem("idNumber", this.idNumberInput.value || this.idNumber), !e) {
+      const i = {
+        country: this.country,
+        id_number: this.idNumber,
+        id_type: this.idType,
+        partner_id: this.partnerId,
+        token: this.token
+      }, o = `${this.baseUrl}/totp_consent`;
+      try {
+        this.toggleLoading();
+        const s = await a(o, i), r = await s.json();
+        this.toggleLoading(), s.ok ? (this.sessionId = r.session_id, this.modes = r.modes, this.setActiveScreen(this.selectModeScreen), this.setAttribute("modes", r.modes)) : this.handleActiveScreenErrors(r.error);
+      } catch (s) {
+        this.toggleLoading(), this.handleActiveScreenErrors(s.message);
+      }
+    }
+  }
+  async selectOtpMode(t) {
+    t.preventDefault(), this.resetForm(), this.mode = Array.prototype.find.call(
+      this.modeInputs,
+      (o) => o.checked
+    ).value;
+    const e = {
+      country: this.country,
+      id_number: this.idNumber,
+      id_type: this.idType,
+      mode: this.mode,
+      partner_id: this.partnerId,
+      session_id: this.sessionId,
+      token: this.token
+    }, i = `${this.baseUrl}/totp_consent/mode`;
+    try {
+      this.toggleLoading();
+      const o = await a(i, e), s = await o.json();
+      this.toggleLoading(), o.ok ? (this.selectedOtpDeliveryMode = this.modes.filter(
+        (r) => r[this.mode]
+      )[0][this.mode], this.setActiveScreen(this.otpVerificationScreen), this.setAttribute("otp-delivery-mode", this.selectedOtpDeliveryMode)) : this.handleActiveScreenErrors(s.error);
+    } catch (o) {
+      this.toggleLoading(), this.handleActiveScreenErrors(o.message);
+    }
+  }
+  async submitOtp(t) {
+    t.preventDefault(), this.resetForm(), this.otp = this.otpInput.value;
+    const e = {
+      country: this.country,
+      id_number: this.idNumber,
+      id_type: this.idType,
+      otp: this.otp,
+      partner_id: this.partnerId,
+      session_id: this.sessionId,
+      token: this.token
+    }, i = `${this.baseUrl}/totp_consent/otp`;
+    try {
+      this.toggleLoading();
+      const o = await a(i, e), s = await o.json();
+      this.toggleLoading(), o.ok ? this.handleTotpConsentGrant(t) : this.handleActiveScreenErrors(s.error);
+    } catch (o) {
+      this.toggleLoading(), this.handleActiveScreenErrors(o.message);
+    }
+  }
+  toggleLoading() {
+    const t = this.activeScreen.querySelector('button[type="submit"]'), e = t.querySelector(".text"), i = t.querySelector("svg"), o = t.querySelector(".spinner");
+    t.toggleAttribute("disabled"), e.toggleAttribute("hidden"), i.toggleAttribute("hidden"), o.toggleAttribute("hidden");
+  }
+  setActiveScreen(t) {
+    this.activeScreen.hidden = !0, t.hidden = !1, this.activeScreen = t;
+  }
+  get baseUrl() {
+    return this.getAttribute("base-url");
+  }
+  get country() {
+    return this.getAttribute("country");
+  }
+  get idHint() {
+    return this.getAttribute("id-hint") || "Your BVN should be 11 digits long";
+  }
+  get idNumber() {
+    return localStorage.getItem("idNumber");
+  }
+  get idRegex() {
+    return this.getAttribute("id-regex");
+  }
+  get idType() {
+    return this.getAttribute("id-type");
+  }
+  get idTypeLabel() {
+    return this.getAttribute("id-type-label");
+  }
+  get partnerId() {
+    return this.getAttribute("partner-id");
+  }
+  get partnerName() {
+    return this.getAttribute("partner-name");
+  }
+  get token() {
+    return this.getAttribute("token");
+  }
+  get themeColor() {
+    return this.getAttribute("theme-color") || "#001096";
+  }
+  get hideBack() {
+    return this.hasAttribute("hide-back");
+  }
+  get showNavigation() {
+    return this.hasAttribute("show-navigation");
+  }
+  handleTotpConsentGrant() {
+    const t = new CustomEvent("end-user-consent.totp.granted", {
+      detail: {
+        consented: {
+          contact_information: !0,
+          document_information: !0,
+          personal_details: !0
+        },
+        id_number: this.idNumber,
+        session_id: this.sessionId
+      }
+    });
+    this.dispatchEvent(t);
+  }
+  handleTotpConsentContactMethodsOutdated() {
+    const t = "end-user-consent.totp.denied.contact-methods-outdated", e = new CustomEvent(t, {
+      detail: {
+        data: {
+          id_number: this.idNumber,
+          session_id: this.sessionId
+        },
+        message: t
+      }
+    });
+    this.dispatchEvent(e);
+  }
+}
+"customElements" in window && !window.customElements.get("totp-consent") && window.customElements.define("totp-consent", c);
+export {
+  c as T
+};
+//# sourceMappingURL=TotpConsent-CQU5jQi4.js.map