@smileid/web-components 11.4.5 → 11.6.0

package/dist/esm/TotpConsent-Depzg0ti.js

@@ -1,734 +0,0 @@
-import d from "validate.js";
-import { b as l } from "./index-C4RTMbgw.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 c() {
-  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' dir='${this.direction}'>
-            <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' dir='${this.direction}'>
-            <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' dir='${this.direction}'>
-            <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 h extends HTMLElement {
-  constructor() {
-    super(), this.templateString = c.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 direction() {
-    return this.getAttribute("dir") || l() || "ltr";
-  }
-  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", h);
-export {
-  h as T
-};
-//# sourceMappingURL=TotpConsent-Depzg0ti.js.map